zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontal zentrierte Navigationsleiste erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.01.2011, 07:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.01.2011
Beiträge: 3
Webnut befindet sich auf einem aufstrebenden Ast
Standard Horizontal zentrierte Navigationsleiste erstellen

Guten Morgen!

Ich habe bei der Erstellung eines CSS-Layouts ein Problem mit meiner Navigationsleiste.

Ich habe eine unsortierte Liste mit Links in ein DIV gepackt, und das ganze soll mit CSS zu einer horizontal zentrierten Navigationsleiste formatiert werden.

Am unteren Rand der Navigationsleiste habe ich vom DIV aber einen Leerraum, der da nicht sein soll. Zumindest ist es im IE und dem Firefox so. Der Opera zeigt es an wie ich mir das vorstelle. Ich komme leider nicht dahinter, was ich falsch mache.

Ich gebe euch am Besten mal einen Link zur Live-Demo (Navigationsleiste alleinstehend).

Navbar Demo

Die CSS Angaben:

HTML-Code:
<style type="text/css">
#nav {
	width: 100%;
	background: #0F0F0F;
	color: #FFF;
	margin: 0 0 10px 0;
	padding:0;
	text-align:center;
}

#nav ul {
	display: inline-block;
	margin: 0 auto;
	padding: 0;
}

#nav li {
	display: block;
	float: left;
	margin: 0 1px;
	padding: 0;
}

#nav a {
	background: #2F2F2F;
	color: #FFF;
	display: block;
	padding: .3em 1em;
	text-decoration: none;
}

#nav a:hover, #nav a:active, #nav a:focus {
	background-color: #4F4F4F;
}
</style>
Das HTML:
HTML-Code:
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
Würde mich freuen wenn jemand einen Tipp für mich hätte.

Geändert von Webnut (16.01.2011 um 07:12 Uhr) Grund: Ergänzung
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.01.2011, 10:33
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

das wird durch display:inline-block; für ul hervorgerufen, bzw. braucht ul dann noch vertical-align:bottom;.
Die Lücke da unten entsteht durch den reservierten Platz für die Unterlänge der Buchstaben (g, y, j),
weil bei inline-Elementen das default vertical-align:baseline; ist.

Warum überhaupt der inline-block? Den finde ich unnötig, zumal da ältere IE's ihre Probleme haben.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.01.2011, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.01.2011
Beiträge: 3
Webnut befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank schon mal für den wertvollen Hinweis. Dann werde ich wohl mein Konzept für die horizontale Navigation nochmal überdenken müssen.

Wenn ich das display:inline-block herausnehme, dann haut gar nichts mehr hin. Die Hintergrundfarbe wird nicht angezeigt und die linke Sidebar ist dann rechts neben der Navigationsleiste.

Ich habe es mit festen Höhenangaben hingebogen bekommen, aber das ist auch mehr schlecht als recht. Ich mag es einfach nicht.

Geändert von Webnut (16.01.2011 um 11:37 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.01.2011, 11:44
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Webnut Beitrag anzeigen
Ich habe es mit festen Höhenangaben hingebogen bekommen, aber das ist auch mehr schlecht als recht. Ich mag es einfach nicht.
feste Höhenangaben brauchst du nicht unbedingt.
Denk mal über einen CSS-Prolog nach und lies dich mal ab hier in horizontale Menüs ein.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 16.01.2011, 12:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.01.2011
Beiträge: 3
Webnut befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Lesestoff. Da werde ich mich nochmal einlesen und die FAQ durcharbeiten.

Ich glaube dass ich die Lösung gefunden habe. Das ganze muss natürlich noch gehübscht werden. Mir ging es erstmal nur um das Grundgerüst. Und das könnte meiner Ansicht nach so aussehen:

HTML-Code:
* {
	margin: 0;
	padding: 0;
}
	
#navbar {
	background-color:#000;
	width:100%;
	list-style: none;
	text-align: center;
	padding: .5em;
}

#navbar li {
	display:inline;
}

#navbar a {
	margin: 0 1px;
	padding: .5em;
	background:#202020;
	color:#fff;
	text-decoration:none;
	outline:none;
	border:none;
}

#navbar a:hover, a:active, a:focus {
	background-color:#404040;
}

<ul id="navbar">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
</ul>
Gäbe es da noch etwas zu beachten oder besser zu machen?

Geändert von Webnut (16.01.2011 um 12:42 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Text neben Navigationsleiste andi01 CSS 6 08.06.2011 16:54
Dynamische Navigationsleiste horizontal, vertikal Faven CSS 6 28.06.2010 15:06
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 12:23
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 10:19
Wie Hintergrundkachel bei em-Angaben erstellen? Mr.T CSS 19 16.06.2007 03:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:59 Uhr.