Probleme mit divs

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/probleme_mit_divs_147504/page_1 - zur Vollversion wechseln!

tomstig schrieb am 12.08.2005 um 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

dio schrieb am 12.08.2005 um 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 schrieb am 12.08.2005 um 23:32

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

DJ_Cyberdance schrieb am 12.08.2005 um 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 schrieb am 13.08.2005 um 00:27

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

tomstig schrieb am 13.08.2005 um 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?

Rektal schrieb am 13.08.2005 um 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.

tomstig schrieb am 13.08.2005 um 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 schrieb am 13.08.2005 um 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 schrieb am 13.08.2005 um 15:44

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

gue schrieb am 13.08.2005 um 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 schrieb am 13.08.2005 um 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 schrieb am 14.08.2005 um 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 ';'.

tomstig schrieb am 15.08.2005 um 04:34

aja...

normal schreib ichs eh richtig...

watchout schrieb am 15.08.2005 um 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>