Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 12.04.2006, 16:34
fidelio fidelio ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2006
Beiträge: 3
fidelio befindet sich auf einem aufstrebenden Ast
Standard

Ups! Wer hätte da gedacht, dass ich aufgrund dieses Problems soviel über css gelernt hab...
faux columns bauen also auf ineinander verschachtelten div-Containern auf, die mittels Hintergrundbild erreichen, dass Sie, unabhängig vom eigenen Inhalt, auf die Gesamthöhe des höchsten Kindselements gestreckt werden.... (Korrektur willkommen!) Hat mich eine rechte Weile gekostet, dies zu verstehen! Also nie wieder div-Container absolut oder irgendwie anders positionieren!... Bloss noch mittels float-Werten umfliessen lassen, mittes margin-Werten positionieren und mittels width-Werten dimensionieren (Korrekturen sehr willkommen!)...
Gemäss Zoe Gillenwater (http://www.communitymx.com/content/a...ge=3&cid=AFC58)
benötige ich hierfür jedoch noch die Klasse clearfix unter "Fixes" im css-stylesheet:
Code:
body {
	margin: 0;
	padding: 0;
	}

#wrapper1	{
	background: url(links_bg.png) repeat-y 15% 0;
	}
#wrapper2	{
	background: url(rechts_bg.png) repeat-y 85% 0;
	}
#wraprechts {
	float: right;
	width:85%;
	}
#banner {
	background: #fa882f
	}
#inhalt {
	float: left;
	width: 82%;
	}
#rechts {
	margin-left: 83%;
	}
#links {
	margin-right: 85%;
	}
#footer {
	background: #fa882f;
	}

/*	Fixes...
*/
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; 
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/*	Ende Fixes
*/
... damit die div-Elemente "links" und "rechts" in folgendem html-Text angezeigt werden:
Code:
	<body>
		<div id="wrapper1" class="clearfix">
			<div id="wrapper2" class="clearfix">
				<div id="banner">Banner</div>
				<div id="wraprechts">	
					<div id="inhalt">Inhalt </div>
					<div id="rechts">Rechts</div>
				</div>
				<div id="links">Links</div>
			</div>
		<div id="footer">Footer</div>
		</div>
	</body>
Kann mir jemand kurz erläutern, was diese "Fixes" genau machen?...
Mit Zitat antworten