HTML / CSS: "float: left;" zerschießt Design

Devotika · 08.12.2008

Version mit "float: left;"

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="datei.css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>test</title>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			border: 1px solid black;
		}
		li {
			float: left;
		}
		a {
			margin: 5px;
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="index.html">honig</a></li>
		<li><a href="news.html">baum</a></li>
	</ul>
	<ul>
		<li><a href="index.html">erde</a></li>
		<li><a href="news.html">mond</a></li>
	</ul>
</body>
</html>

Version mit auskommentiertem "float: left;"

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="datei.css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>test</title>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			border: 1px solid black;
		}
	/*	li {
			float: left;
		}
	*/	a {
			margin: 5px;
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="index.html">honig</a></li>
		<li><a href="news.html">baum</a></li>
	</ul>
	<ul>
		<li><a href="index.html">erde</a></li>
		<li><a href="news.html">mond</a></li>
	</ul>
</body>
</html>

Warum funktioniert die Randgebung im zweiten Beispiel korrekt, während sie im ersten zusammen mit "float" das Design zerschießt?

BiBaButzemann · 08.12.2008

machs halt einfach anders. mit divs drum oder wie auch immer. sowas zu hinterfragen bringt nichts, lebe einfach mit...

float nimmt halt elemente aus dem dom fluss. und was dann dabei so passiert ist auch noch extrem browserabhängig. im ie verkackt dann gerne das box modell, so dass man ihm dann nen display: inline-block und feste widths geben muss.

Devotika · 08.12.2008

Hihi, ja die praktische Umsetzung von CSS ist wirklich ein großer Wurf.

Mit divs bekomme ich im Übrigen das selbe Ergebnis.

BiBaButzemann · 08.12.2008

was hast überhaupt vor? die listenpunkte nebeneinander anordnen und dann nen rahmen drum?

wenn ja, dann nimm 2 komplette uls die du floatest, evtl. in 2 divs verpackt und drumherum dann halt noch nen div für den rahmen. macht sich dann zwar blöd bei dynamischen kontent, den du dafür noch extra splitten musst, aber so würde ich das angehen. oder ganz auf die listen verzichten und es mit images regeln.

CyoZ · 08.12.2008

IMO ist das Problem, dass das float die breite nur auf den inhalt beschränkt.

gibt man dem ganzen 100% width und 20px höhe zeigt er es auch richtig an.

EnimaN · 08.12.2008

packe das ganze in ein div und füge direkt nach dem <ul> ein <div style="clear:both"></div> ein, der das float wieder zurücksetzt... finde ich zumindest die beste lösung

ex'ratt · 08.12.2008

mach ins ul mal ein overflow: hidden;, das sollte auch die enthaltenen floats automatisch umschließen. gibt noch weitere möglichkeiten, so ein auto-clear ohne zusätzliches element zu erreichen (z.b.: elternelement floatet auch, :after nutzen, ...). solltest du den ie6 auch bedienen müssen, musst du noch ein height: 0; oder zoom: 1; oder sowas unterbringen (auch im ul und nur für den ie - über hack oder conditional comments oder sonstwie), damit da hasLayout getriggert wird, dann umschließt das ul auch automatisch die enthaltenen floats. Im Zweifelsfall mal googlen, gibt viele Seiten und Blogs, die sich mit den Problemen rund um CSS beschäftigen.

HTML / CSS: "float: left;" zerschießt Design

Erweitert

Devotika

Guest

BiBaButzemann

Devotika

Guest

BiBaButzemann

CyoZ

EnimaN

ex'ratt

Staff