Horizontale Navigationsleiste

Marco D. · #1 (**permalink**) 17.08.2007, 13:22

Ich brauche eine horizontale Navigationsleiste. Nur wenn ich das bis jetzt so anschaue, dann sind die Listeneinträge außerhalb von #navi.

Warum?

Code:

<html>
<head>
<title>Test</title>
<link rel='stylesheet' href='style.css' />
</head>
<body>
<div id='banner'>
<h1>Test</h1>
</div>
<div id='navi'>
   <ul>
        <li>Navi1</li>
        <li>Navi2</li>
        <li>Navi3</li>
   </ul>
</div>
</body>
</html>

Code:

div {
	border: 1px solid black;

#navi ul {
	list-style-type: none;
}

#navi li {
	float: left;
}

Ich schaue

paracelsus · #2 (**permalink**) 17.08.2007, 13:45

Code:

#navi li {
	float: left;
}

müsste so gehen:

Code:

#navi li {
	display: inline;
}

cu

Marco D. · #3 (**permalink**) 17.08.2007, 13:48

Klasse.

Dankeschön.
Kannst du mir dann noch erklären, warum gerade display: inline verwendet werden muss?

Loïs Bégué · #4 (**permalink**) 17.08.2007, 13:56

display: inline bedeutet so viel wie "in einer Reihe anzeigen"

Denn die normale Anzeige für Listen-Elemente ist eigentlich "untereinander", was mit dieser Anweisung aufgehoben wird.

paracelsus · #5 (**permalink**) 17.08.2007, 13:59

Zitat:

Zitat von Loïs Bégué

display: inline bedeutet so viel wie "in einer Reihe anzeigen"

Denn die normale Anzeige für Listen-Elemente ist eigentlich "untereinander", was mit dieser Anweisung aufgehoben wird.

Lois war schneller

cu

pmmueller · #6 (**permalink**) 19.08.2007, 00:53

Zitat:

Zitat von Marco D.

Ich brauche eine horizontale Navigationsleiste. Nur wenn ich das bis jetzt so anschaue, dann sind die Listeneinträge außerhalb von #navi.

Warum?

Wie von paracelsus bereits erwähnt kannst du display:inline verwenden. Das ist anfangs einfacher zu handhaben und hat weniger Risiken und Nebenwirkungen.

Float geht aber natürlich auch. Deine Listeneinträge waren außerhalb von #navi, weil sie nach dem Floaten nicht mehr im Flow sind. Auf deutsch: #navi sieht die gefloateten Listenelemente plötzlich nicht mehr, erschrickt sich deswegen und kollabiert. Wech isser.

Deswegen musst du #navi dazu bringen, die gefloateten LIs zu umschließen. "Containing floats" nennt man das auf english. Dazu gibt es ungefähr viele verschiedene Methoden. Die beiden einfachsten sind #navi { overflow: hidden; } und #navi auch floaten (nach der Navi das clear nicht vergessen).

Grüße aus Groningen
Peter

heiko_rs · #7 (**permalink**) 19.08.2007, 02:49

Zitat:

Zitat von pmmueller

#navi { overflow: hidden; }

Mit Clearen per overflow sollte man gar nicht erst anfangen

http://xhtmlforum.de/37898-clearfix-...tml#post279739

Wenn's per float nicht geht (z.B. weil ul keine Breite bekommen darf), sollte man lieber "Easy Clearing" einsetzen (siehe FAQ).

IChao · #8 (**permalink**) 19.08.2007, 09:59

Neulich hatte ich mit dem clearfix richtige Probleme in verschachtelten Boxen ... auch overflow war ein Desaster ... float nearly everything verschob es auch ... das war's dann ... das war dann ... the return of the solid clearing element!

heiko_rs · #9 (**permalink**) 19.08.2007, 10:54

Zitat:

Zitat von IChao

the return of the solid clearing element!

Das ist meiner Erfahrung nach grundsätzlich auch bei FooterStickAlt nötig, wenn innerhalb des Wrappers alles floatet - wenngleich nur für den IE 5.x, der bei der entsprechenden Seite von mir sporadisch einen großen Leeraum unterhalb des Footers zeigte, bis ich ein hartcodiertes Clear-Element (in Form einer hr) einsetzte.

Mal etwas anderes (und OT, aber ich möchte jetzt nicht in die Knowledge-Base posten): Warum bevorzugst Du hier table-cell vor table? Mir scheint table sinnvoll wegen der Möglichkeit, width: 100%; zuzuweisen (während man sich bei table-cell auf genug Inhalt verlassen muß).

Der konkrete Fall ist ja nicht mehr nachvollziehbar, aber der Thread liest sich so, als hätte es ungefähr so ausgesehen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Test</title>
	<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

#left,
#right {
	width: 200px;
	height: 200px;
	float: left;
	background: red;
	border: 1px solid #000;
	padding: 10px;
	}

#right {
	float: right;
	}

#main-copy {
	background: red;
	border: 1px solid #000;
	margin: 0 221px;
	padding: 10px;
	}

#clearcontext {
	display: table;
	width: 100%;
	}

hr {
	clear: both;
	}

	</style>
</head>

<body>

<div id="left">text</div>

<div id="right">text</div>

<div id="main-copy">

	<div id="clearcontext">
		text
		<hr />
	</div>

</div>

</body>

</html>

pmmueller · #10 (**permalink**) 19.08.2007, 11:05

Zitat:

Zitat von heiko_rs

Mit Clearen per overflow sollte man gar nicht erst anfangen

Na ganz so dramatisch sehe ich das nicht

Ingos Anmerkung (vom Dezember 2005) "Vielleicht gibt es keine ideale Lösung." trifft die Sache wohl auch heute noch. Letztendlich kommt es immer auf den Zusammenhang an.

Wenn ein Einsteiger eine Navigation baut, finde ich overflow:hidden wunderbar einfach zu verstehen und durchaus angemessen. Da wird so schnell nichts von außen überlappen, und IE5.x - na, da halte ich es eher mit Peruns Ratschlag (vom Oktober 2005!):

Zitat:

Daher mein Rat an Leute die private bzw. nicht-kommerzielle Websites betreiben bzw. Layouten: macht euch nicht die Mühe das Layout für Internet Explorer kleiner 5.5 anzupassen. Investiert die Zeit lieber in etwas sinvolleres: Inhalte für die Website erstellen, Bekannte treffen, spazieren gehen ...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
horizontale Navigationsleiste	Kaykay	(X)HTML	3	04.11.2010 09:41
Dynamische Navigationsleiste horizontal, vertikal	Faven	CSS	6	28.06.2010 16:06
horizontale Navigationsleiste	Tobe	CSS	0	20.07.2008 11:34
Mitwachsende horizontale Navigationsleiste und Schriftarten	boxi	CSS	1	17.04.2006 18:24
mit <li> horizontale navigationsleiste	oimelchen	CSS	17	26.10.2005 20:29