Zentrierung vertikaler Navigation

needful · 31.07.2010, 13:30

Hallo,

ich habe das Problem, dass sich eine Navigationsleiste nicht zentrieren lässt. Ich suche seit Stunden im Netz nach einer Lösung. Hier das Beispiel:
Heuss Contactlinsen
Und hier der betreffende Code
HTML

Code:

    <div id="navitop">
        <ul>
            <li><a href="dienstleistungen.html">Dienstleistungen</a></li>
            <li><a href="linsentypen.html">Linsentypen</a></li>
            <li><a href="preise.html">Preise</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="bildergalerie.html">Bildergalerie</a></li>
      </ul>
    </div>

CSS

Code:

#navitop {
	float:left;
	margin:20px auto auto auto;
	font-size:90%;
	font-weight:bold;
	width: 640px;
}
#navitop ul {
	display:inline;
	width: 640px;
	list-style:none;
	text-align:center;
}
#navitop li {
	float:left;
	text-decoration: none;
	height:19px;
}
#navitop a {
	text-decoration: none;
	padding:0 17px;
	margin:0 2px 0 0;
	height:19px;
}

Wahrscheinlich seh ich nur den Wald vor lauter Bäumen nicht. Vielleicht kann mir jemand die richtige Brille aufsetzen.

Danke schon jetzt.

fab · 31.07.2010, 13:39

Du setzt die Liste (ul) zwar auf display:inline aber nicht die Elemente (li), im Gegenteil, du ziehst sie mit float aus dem Layout heraus. So können sie auch nicht wie Text behandelt und mit text-align zentriert werden.

Versuch also mal, statt float:left display:inline zu verwenden

nikosch · 31.07.2010, 13:50

Ich würde eher sagen, dass er das ul dann auch floaten sollte.

fab · 31.07.2010, 14:03

Wie würdest du es denn dann zentrieren wenn du die genaue Breite nicht kennst?

nikosch · 31.07.2010, 14:40

Stimmt auch wieder.

tr0y · 31.07.2010, 15:55

<ul>-Element ans div ausrichten und kindelemente unbrechbar ausrichten -> Zentriert

<div> margin:auto <ul>...</ul> margin:auto </div>

<ul> dont break <li>...</li> dont break </ul>

deine Seite da kriegste übrigens locker xHTML-strict

nikosch · 31.07.2010, 16:26

Du kannst das ul aber nur ausrichten, wenn Du dessen Breite kennst.

needful · 31.07.2010, 16:29

Also die Mischung aller Tipps hat geholfen. Herzlichen Dank.
Hier die Lösung im CSS (im HTML-Code hat sich nichts verändert)

Code:

#navitop {
	float:left;
	margin:20px auto auto auto;
	font-size:90%;
	font-weight:bold;
	width: 640px;
}
#navitop ul {
	float:left;
	display:inline;
	width: 640px;
	list-style:none;
	text-align:center;
}
#navitop li {
	display:inline;
	text-decoration: none;
	height:19px;
}
#navitop a {
	text-decoration: none;
	padding:0 15px;
	margin:0 1px 0 1px;
	height:19px;
}

tr0y · 31.07.2010, 16:30

oder dessen kind-element-umbruch verhinderst...

nikosch · 31.07.2010, 18:47

Zitat:

oder dessen kind-element-umbruch verhinderst...

Das hat mit Floating etc. aber nicht mehr viel zu tun. Das ist einzig Zetrierung von Inline-Elementen geschuldet.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Navigation kompatibel machen für IE7/8	prestige	HTML, Usability und Barrierefreiheit	5	01.05.2009 10:01
[Erledigt] Hierarchische Navigation	Dunkelord	Datenbanken	5	12.01.2009 18:31
[Erledigt] Navigation mit Active-Link	Rezeptfrei	PHP Tipps 2008	5	26.11.2008 13:45
Problem mit PHP Navigation	hagene	PHP Tipps 2008	4	09.10.2008 23:33
Kontaktformular mit Spamschutz und include Navigation?	chicco4u	PHP Tipps 2008	1	11.08.2008 09:52
Navigation fixen	Desert	PHP Tipps 2008	0	12.05.2008 17:00
Probs mit Layout für Navigation mit Grafiken/Hintergrund		HTML, Usability und Barrierefreiheit	3	08.02.2006 19:56
Navigation	snatch-ic	PHP Tipps 2007	4	08.01.2006 12:11
Änderung der datenbank gestützten Navigation		PHP Tipps 2005-2	1	26.09.2005 20:34
Navigation mittels PHP anpassen		PHP Tipps 2005	8	27.04.2005 14:35
Navigation		PHP Tipps 2005	18	11.04.2005 16:16
Navigation	tikal	PHP Tipps 2004-2	3	03.12.2004 15:28
div layer navigation		HTML, Usability und Barrierefreiheit	1	18.11.2004 15:44
Mit Templates Navigation erstellen? (welches Templatesyste?)	zwelch	PHP Tipps 2004-2	5	18.11.2004 15:14


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

31.07.2010, 13:39
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Du setzt die Liste (ul) zwar auf display:inline aber nicht die Elemente (li), im Gegenteil, du ziehst sie mit float aus dem Layout heraus. So können sie auch nicht wie Text behandelt und mit text-align zentriert werden. Versuch also mal, statt float:left display:inline zu verwenden __________________ PHP Blog + Library CSS Effects + Tools

31.07.2010, 13:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich würde eher sagen, dass er das ul dann auch floaten sollte. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

31.07.2010, 14:03
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Wie würdest du es denn dann zentrieren wenn du die genaue Breite nicht kennst? __________________ PHP Blog + Library CSS Effects + Tools

31.07.2010, 14:40
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Stimmt auch wieder. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

31.07.2010, 15:55
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	<ul>-Element ans div ausrichten und kindelemente unbrechbar ausrichten -> Zentriert <div> margin:auto <ul>...</ul> margin:auto </div> <ul> dont break <li>...</li> dont break </ul> deine Seite da kriegste übrigens locker xHTML-strict __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

31.07.2010, 16:26
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Du kannst das ul aber nur ausrichten, wenn Du dessen Breite kennst. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

31.07.2010, 16:30
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	oder dessen kind-element-umbruch verhinderst... __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.