Probleme mit divs

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

12.08.2005 - 23:00

Bild verdeutlicht was ich will.
Code schaut wie folgt aus:

Code: PHP

<?php
$start = microtime(true);
?>
<html>
<head>
<title>Bildergalerie</title>
<style type="text/css">
body{
	background-color: #808080;
	font-size: 10pt; 
	font-family: Arial;
}
</style>
</head>
<body>
<div style="width: 300px; margin-right: 2px; float: left; border: 1px solid #000; background-color: #bbb">
	 <?php
	 echo '<img src="logo' . rand(1,6) . '.jpg" alt="" style="border-bottom: 2px solid #000" /><br />';
	 ?>
 	<div style="padding: 5px">
  		blablalbla
  	</div>
</div> 
<div style="float: left;">
<?php
// code
?> 
</div>
<?php
$end = microtime(true);
$gen_time = $end - $start;
?>
<div style="display: block">     // hier liegt der hund begraben
page generated in <?php echo substr($gen_time, 0, 5); ?>ms
</div>
</body>
</html>

Wie kann ich das lösen?
tia

Bearbeitet von tomstig am 14.08.2005, 16:33

dio

Here to stay

Registered: Nov 2002
Location: Graz
Posts: 4938

12.08.2005 - 23:16

Ich bin zwar selbst noch nicht so bewandert, was DIVs angeht, allerdings:

http://www.w3.org/TR/CSS21/visuren.html#floats

Bei Floats werden die Elemente aus dem Document Flow ausgehoben -> probiers mit einem

Code: PHP

<br style="clear: all;" />

hth

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

12.08.2005 - 23:32

leider nein...
macht einen ganz normalen zeilenumbruch neben dem mittleren div

DJ_Cyberdance

Here to stay

Registered: Jun 2002
Location: Vesterålen
Posts: 1838

12.08.2005 - 23:55

Öhm... is schon spät, vielleicht versteh ich das Problem nicht, aber ich würd in allen DIVs mit Positionsangaben arbeiten. Das hilft auch wenn unterschiedliche Browser Deine Seite anders interpretieren.

Das Problem liegt IMO im float:left im vorhergehenden DIV. Das heißt nämlich, daß das Element von nachfolgenden Elementen umflossen werden soll... Nimm das mal weg.

Sorry, falls ich wirres Zeug rede aber bin schon verdammt müde und geh jetzt heia *gähn*

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

13.08.2005 - 00:27

ok, jetzt passts... hab vom mittleren div das "float: left" weggenommen...

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

13.08.2005 - 02:49

Hab die Seite mal upgeloadet (hier.

Es gibt noch immer ein Problem, nämlich wenn die Bilderreihe länger als das Menü ist, dann springen die Bilder unter das Menü. Ich hätte das aber gerne so (grüner Border zeigt das mittlere Div, aber es soll so wie der rote Border sein):

wie muss ichs machen?

Bearbeitet von tomstig am 13.08.2005, 02:51

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4477

13.08.2005 - 08:57

Wenn du das Nav-Div und das Galerie-Div left floatest, sollte es funktionieren. Braucht halt jeweils fixe breiten Angaben. Das <br> kommt weg, du laesst die Bilder Anhand der Breite des Galerie-Divs in die naechsten Zeilen brechen.

Code fuer das Galerie-Div:

Code:

<div style="float: left; width: 500px; border: 3px solid green">

Btw, display: block auf ein Div Element ist redundant. Divs sind per Definition block elemente, auser du sagst explizit sie sind keine.

Bearbeitet von Rektal am 13.08.2005, 09:02

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

13.08.2005 - 13:50

Jetzt bin ich dort, wo ich schon vorher war

(siehe 1. Post oder hier)

Wie bekomm ich jetzt den dunkelgrauen Balken unter das Nav-Div und das Galerie-Div?

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

13.08.2005 - 15:26

Zitat von tomstig
Jetzt bin ich dort, wo ich schon vorher war (siehe 1. Post oder hier)

Wie bekomm ich jetzt den dunkelgrauen Balken unter das Nav-Div und das Galerie-Div?

margin-left: [navbreite+bordersusw]; im gallery-div

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

13.08.2005 - 15:44

Damit wird nur der Abstand zwischen dem Nav-Div und dem Gallery-Div vergrößert...

gue

Addicted

Registered: Feb 2003
Location: Linz
Posts: 400

13.08.2005 - 15:59

Zitat von tomstig
Jetzt bin ich dort, wo ich schon vorher war (siehe 1. Post oder hier)

Wie bekomm ich jetzt den dunkelgrauen Balken unter das Nav-Div und das Galerie-Div?

clear: left; im Footer-Div.
Ich glaube watchout hat gemeint, dass du das Navigations-Div position:absolute; machst, dann würd ich aber eher left: <navigations-breite>; verwenden, statt margin-left.

Übrigens wird deine Seite ja verdaaammt schnell generiert: 0.003ms - ich glaub so schnell könnte php das nicht mal outputten

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

13.08.2005 - 16:17

Zitat von gue
clear: left; im Footer-Div.
Ich glaube watchout hat gemeint, dass du das Navigations-Div position:absolute; machst, dann würd ich aber eher left: <navigations-breite>; verwenden, statt margin-left.

Übrigens wird deine Seite ja verdaaammt schnell generiert: 0.003ms - ich glaub so schnell könnte php das nicht mal outputten ahja und beim © im Footer fehlt der Strichpunkt

Ja, ich wollte, das absichtlich nicht mit position: absolute machen, wegen dem footer.

und beim © fehlt kein Strichpunkt... bei mir wirds ganz normal angezeigt...

however, jetzt funktionierts - vielen dank

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4477

14.08.2005 - 20:45

Doch der fehlt. Nur weils so angezeigt wird wie du es erwartest heisst es nicht dass es richtig umgesetzt ist. Entities fangen immer mit '&' an und enden immer mit ';'.

Bearbeitet von Rektal am 15.08.2005, 11:37

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

15.08.2005 - 04:34

aja...

normal schreib ichs eh richtig...

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

15.08.2005 - 12:41

Zitat von tomstig
Damit wird nur der Abstand zwischen dem Nav-Div und dem Gallery-Div vergrößert...

Code:

<div style="float:left;border:1px solid red;width:100px;">
	A<br/>
	B<br/>
	C<br/>
</div>
<div style="margin-left:102px;border: 1px solid red;">
	A<br/>
	B<br/>
	C<br/>
	D<br/>
	E<br/>
</div>

tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	12.08.2005 - 23:00 Bild verdeutlicht was ich will. Code schaut wie folgt aus: Code: PHP <?php $start = microtime(true); ?> <html> <head> <title>Bildergalerie</title> <style type="text/css"> body{ background-color: #808080; font-size: 10pt; font-family: Arial; } </style> </head> <body> <div style="width: 300px; margin-right: 2px; float: left; border: 1px solid #000; background-color: #bbb"> <?php echo '<img src="logo' . rand(1,6) . '.jpg" alt="" style="border-bottom: 2px solid #000" /><br />'; ?> <div style="padding: 5px"> blablalbla </div> </div> <div style="float: left;"> <?php // code ?> </div> <?php $end = microtime(true); $gen_time = $end - $start; ?> <div style="display: block"> // hier liegt der hund begraben page generated in <?php echo substr($gen_time, 0, 5); ?>ms </div> </body> </html> Wie kann ich das lösen? tia Bearbeitet von tomstig am 14.08.2005, 16:33
dio Here to stay Registered: Nov 2002 Location: Graz Posts: 4938	12.08.2005 - 23:16 Ich bin zwar selbst noch nicht so bewandert, was DIVs angeht, allerdings: http://www.w3.org/TR/CSS21/visuren.html#floats Bei Floats werden die Elemente aus dem Document Flow ausgehoben -> probiers mit einem Code: PHP `<br style="clear: all;" />` hth
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	12.08.2005 - 23:32 leider nein... macht einen ganz normalen zeilenumbruch neben dem mittleren div
DJ_Cyberdance Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	12.08.2005 - 23:55 Öhm... is schon spät, vielleicht versteh ich das Problem nicht, aber ich würd in allen DIVs mit Positionsangaben arbeiten. Das hilft auch wenn unterschiedliche Browser Deine Seite anders interpretieren. Das Problem liegt IMO im float:left im vorhergehenden DIV. Das heißt nämlich, daß das Element von nachfolgenden Elementen umflossen werden soll... Nimm das mal weg. Sorry, falls ich wirres Zeug rede aber bin schon verdammt müde und geh jetzt heia gähn
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	13.08.2005 - 00:27 ok, jetzt passts... hab vom mittleren div das "float: left" weggenommen...
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	13.08.2005 - 02:49 Hab die Seite mal upgeloadet (hier. Es gibt noch immer ein Problem, nämlich wenn die Bilderreihe länger als das Menü ist, dann springen die Bilder unter das Menü. Ich hätte das aber gerne so (grüner Border zeigt das mittlere Div, aber es soll so wie der rote Border sein): wie muss ichs machen? Bearbeitet von tomstig am 13.08.2005, 02:51
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4477	13.08.2005 - 08:57 Wenn du das Nav-Div und das Galerie-Div left floatest, sollte es funktionieren. Braucht halt jeweils fixe breiten Angaben. Das <br> kommt weg, du laesst die Bilder Anhand der Breite des Galerie-Divs in die naechsten Zeilen brechen. Code fuer das Galerie-Div: Code: `<div style="float: left; width: 500px; border: 3px solid green">` Btw, display: block auf ein Div Element ist redundant. Divs sind per Definition block elemente, auser du sagst explizit sie sind keine. Bearbeitet von Rektal am 13.08.2005, 09:02
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	13.08.2005 - 13:50 Jetzt bin ich dort, wo ich schon vorher war (siehe 1. Post oder hier) Wie bekomm ich jetzt den dunkelgrauen Balken unter das Nav-Div und das Galerie-Div?
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	13.08.2005 - 15:26 Zitat von tomstig Jetzt bin ich dort, wo ich schon vorher war (siehe 1. Post oder hier) Wie bekomm ich jetzt den dunkelgrauen Balken unter das Nav-Div und das Galerie-Div? margin-left: [navbreite+bordersusw]; im gallery-div
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	13.08.2005 - 15:44 Damit wird nur der Abstand zwischen dem Nav-Div und dem Gallery-Div vergrößert...
gue Addicted Registered: Feb 2003 Location: Linz Posts: 400	13.08.2005 - 15:59 Zitat von tomstig Jetzt bin ich dort, wo ich schon vorher war (siehe 1. Post oder hier) Wie bekomm ich jetzt den dunkelgrauen Balken unter das Nav-Div und das Galerie-Div? clear: left; im Footer-Div. Ich glaube watchout hat gemeint, dass du das Navigations-Div position:absolute; machst, dann würd ich aber eher left: <navigations-breite>; verwenden, statt margin-left. Übrigens wird deine Seite ja verdaaammt schnell generiert: 0.003ms - ich glaub so schnell könnte php das nicht mal outputten ahja und beim © im Footer fehlt der Strichpunkt
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	13.08.2005 - 16:17 Zitat von gue clear: left; im Footer-Div. Ich glaube watchout hat gemeint, dass du das Navigations-Div position:absolute; machst, dann würd ich aber eher left: <navigations-breite>; verwenden, statt margin-left. Übrigens wird deine Seite ja verdaaammt schnell generiert: 0.003ms - ich glaub so schnell könnte php das nicht mal outputten ahja und beim © im Footer fehlt der Strichpunkt Ja, ich wollte, das absichtlich nicht mit position: absolute machen, wegen dem footer. und beim © fehlt kein Strichpunkt... bei mir wirds ganz normal angezeigt... however, jetzt funktionierts - vielen dank
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4477	14.08.2005 - 20:45 Doch der fehlt. Nur weils so angezeigt wird wie du es erwartest heisst es nicht dass es richtig umgesetzt ist. Entities fangen immer mit '&' an und enden immer mit ';'. Bearbeitet von Rektal am 15.08.2005, 11:37
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	15.08.2005 - 04:34 aja... normal schreib ichs eh richtig...
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	15.08.2005 - 12:41 Zitat von tomstig Damit wird nur der Abstand zwischen dem Nav-Div und dem Gallery-Div vergrößert... Code: `<div style="float:left;border:1px solid red;width:100px;"> A<br/> B<br/> C<br/> </div> <div style="margin-left:102px;border: 1px solid red;"> A<br/> B<br/> C<br/> D<br/> E<br/> </div>`

Probleme mit divs

Forum Index > Software > Coding Stuff

tomstig

dio

tomstig

DJ_Cyberdance

tomstig

tomstig

Rektal

tomstig

watchout

tomstig

gue

tomstig

Rektal

tomstig

watchout