✔ CSS Problem

Status
Nicht offen für weitere Antworten.
S

Superdok

Erfahrenes Mitglied
Hi, ich versuche gerade ein Layout zu erstellen, das ungefähr so aussehen sollte wie dieses hier:
http://www.pinksnotred.de/
Also einen Header und dann 3 Boxen nebeneinader mit der gleichen Breite und den gleichen Abständen zwischen diesen
Unten dann noch ein footer
Leider hab ich dort wieder ein Problem:
Header und die 3 boxen werden mehr oder weniger richtig dargestellt, der footer allerdings gar nicht. Ich hab schon alles mögliche versucht: mit margin, padding... aber irgendwie immer das gleiche Problem: Die Boxen sind verschoben.
Bisher sieht das ganze so aus:
HTML:
Code: 
[...]
<body>
<div id="container">
  <div id="head">Head</div>
  
  <div id="contentleft"></div>
  <div id="contentmiddle"></div>
  <div id="contentright"> </div>
  <div id="foot">Foot</div>  
</div>
<!--Ende container-->
</body>
[...]
CSS:
Code: 
html {
	height:100%;
	}
body {
	height:100%;
	padding:0;
	margin:0;
	border:0;
	line-height:16px;
	font-size: 12px;
	color: #333333;	
}
#head {
	width:920px;
	height:250px;		
}
#container {
	width: 920px;
	margin: 0 auto;		
}
#content {	
	margin-top:0;
	width:920px;	
}
#contentleft {
	float: left;
	width: 280px; 	
	padding-left:20px;
	padding-right:10px;
}
#contentmiddle {
	float:left;
	width:280px;
	padding-left:10px;
	padding-right:10px;		
}
#contentright {
	float:right;
	width:280px;
	padding-left:10px;
	padding-right:20px;				
}
#foot {
	width:920px;
	height:30px;	
}
 
Hi,

der Footer benötigt in dem Modell noch die clear:both-Angabe, damit er nicht eine der floatenden Spalten umfliesst, sondern unterhalb von ihnen seinen Textfluss fortsetzt.
 
Vielen Dank. Durch diese kleine Änderung hat es funktioniert. Das mit clear hab ich noch nie richtig verstanden.
Nochmal eine Frage:
Ist es eigentlich besser wenn man den Abstand dieser 3 Spalten mit padding (so wie im Moment) oder mit margin macht? Oder macht das keinen Unterschied?
 
Solange die drei Spalten keinen Hintergrund oder Rahmen besitzen, der ihre Boxengrenzen visualisiert, kannst du auch mit der padding-Eigenschaft arbeiten.
 
Irgendwie gibt es immernoch einen Fehler:
Die Fehlerkorrektur von Dreamweaver zeigt einen Fehler:
-Float Drop Problem:
"Wenn die Breite eines Containers (einschließlich des Browserfensters) nicht ausreicht, um sowohl einen Float mit einer festen Breite als auch nachfolgende Inhalte mit einer festen Breite aufzunehmen, fließen diese Inhalte nicht um den Float, sondern darunter.

Betrifft: Internet Explorer 6.0, 7.0
Wahrscheinlichkeit: Wahrscheinlich"

Leider verstehe ich nicht was das bedeutet, bzw. wie ich das beheben kann. Der Code ist der gleiche von oben
 
Den Effekt kannst Du sehen, wenn Du Dein Browserfenster verkleinerst. Und es handelt sich nicht notwendigerweise um einen Fehler, sondern um ein ganz normales Verhalten, was seinen Sinn hat. HTML ist medienunabhängig konzipiert, daher muss das so sein. Bei visuellen Layouts mit pixelgenauen Vorgaben kann man da natürlich mal reinfallen :)

Es geht um folgendes: Wenn Du ein Element hast, das z.B. links floaten soll, dann wird der Text, der innerhalb des selben Containers steht, um dieses gefloatete Element herumfließen. Das kann er aber nur, wenn er Platz dazu hat. Wenn er keinen Platz dazu hat. landet er eben unten drunter.

Bei der Gelegenheit: Wenn der Text nun so wunderschön neben dem gefloateten Element steht, versuch Dich mal in Schriftgrößenänderungen ruhig in deftigen Größenordnungen und beobachte dann, wie der Text um das gefloatete Element herumfließt (oder eben nicht).
 
Inspector hat gesagt.:
Den Effekt kannst Du sehen, wenn Du Dein Browserfenster verkleinerst.
Zum Vergrößern anklicken....
Tatsächlich? Die Floatumgebung ist doch in ein Elternelement mit fixer Breite eingebettet.

Wenn das Layout "gesprengt" wird, dann nur, wenn der Inhalt breiter als die vorgegebene Breite ist, wie beispielsweise auf diese Weise:

Code: 
<div id="container">
  <div id="head">Head</div>
  <div id="contentleft">contentleftcontentleftcontentleftcontentleftcontentleftcontentleftcontentleftcontentleft</div>
  <div id="contentmiddle">contentmiddle</div>
  <div id="contentright">contentright</div>
  <div id="foot">Foot</div>
</div>
 
Beim besten Willen, kann ich auch bei zusammenschieben des Browserfensters im IE,nichts erkennen. (auch bei Schriftgrößenänderung)
Aber in meinem Fall steht auch kein Text neben dem gefloateten Div. Nur innerhalb des Divs steht etwas.
Ich hab mich eben nur gewundert, warum dort ein "Fehler" auftaucht und ich nichts von diesem sehe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück