Horizontale Navigationsleiste zentrieren
sceiler
Horizontale Navigationsleiste zentrieren
sceiler
Hallo,
ich habe mittels ein Tutorial mir eine Navigationsleiste gebastelt. Dummerweise bekomme ich diese nicht zentriert.
#Navigation {
margin:0;
padding:0;
/**/
position:relative;
}
#Navigation ul {
margin:0;
padding:0;
line-height:30px;
}
#Navigation li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:#999;
}
#Navigation ul li a {
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#Navigation ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#Navigation ul li:hover ul {
visibility:visible;
}
#Navigation li:hover {
background:#09F;
}
#Navigation ul li:hover ul li a:hover {
background:#CCC;
color:#000;
}
#Navigation a:hover {
color:#000;
}
Wenn ich in
#Navigation {
margin:0;
padding:0;
/**/
position:relative;
float:right:
right:50%;
}
einfüge sieht es zumindest zentriert aus aber die Liste wird dadurch vertikal.
-
Moin,
ich habe mittels ein Tutorial mir eine Navigationsleiste gebastelt. Dummerweise bekomme ich diese nicht zentriert.
Ein Tutorial hat den Sinn dir zu erklären was du tust. Weißt du, was du tust?
Aber zu deinem Problem:
margin: auto;ist gängiger Usus beim Zentrieren mit CSS. Allerdings kann man ganz Genaues nur mit vollständigem Code sagen. Am besten wäre ein Online-Beispiel.Grüße Marco
-
Ein Tutorial hat den Sinn dir zu erklären was du tust. Weißt du, was du »»tust?
Ich hab das CSS nach diesem Video gebaut: http://www.youtube.com/watch?v=vW4IzAjbqCU
Nachvollziehen kann ich es aber ich verstehe trotzdem nicht wie ich einzelne Elemente verschiebe bzw. zentriere. position:center funktioniert ja leider nicht.
Aber zu deinem Problem:
margin: auto;ist gängiger Usus beim Zentrieren mit CSS. Allerdings kann man ganz Genaues nur mit vollständigem Code sagen. Am besten wäre ein Online-Beispiel.margin:auto; hab ich ausprobiert aber es passiert nichts.
Das Programm ist ein lokales Tool deswegen kann ich leider nicht mit einem online Beispiel dienen aber hier der Code ausm Editor rauskopiert(auszugsweise):<div id="wrapper"> <div id="Navigation"> <ul> <li><a href="#">Products</a> <ul> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> </ul> <!-- end inner UL --> </li> <!-- end main Li --> </ul> <!-- end main UL --> <ul> <li><a href="#">Products</a> <ul> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> <li><a href="#">Link Item</a></li> </ul> <!-- end inner UL --> </li> <!-- end main Li --> </ul> <!-- end main UL --> <br class="clearfloat" /> </div> <!-- end navMenu --> </div> <!-- end wrapper div -->-
Moin,
Nachvollziehen kann ich es aber ich verstehe trotzdem nicht wie ich einzelne Elemente verschiebe bzw. zentriere. position:center funktioniert ja leider nicht.
Du hast einen #wrapper und eine #navigation. Beide werden vom Browser per default als 100% angesehen. Diese zu zentrieren geht nicht, da 100% schon mittig sind. Innerhalb deiner Navigation sind zwei unabhängige Listen. Einzeln könnte man die zentrieren, allerdings sieht das unschön aus.
Lösung: Gebe dem #navigations-Div einfach eine feste Breite (beispielsweise 305px) und setze
margin:auto;. Dann wird die Navigation zentriert angezeigt.Hier ist ein Online-Beispiel, in dem ich dem Wrapper als auch der Navigation einen kleinen Rahmen zum besseren Verständnis gegeben habe.
Hinweis: Mit den Developer-Tools von Google Chrome oder Firefox kann man sehr gut sehen, wie die Seite aufgebaut ist und eventuelle Fehler erkennen. Außerdem kann man direkt in HTML, CSS und Javascript schreiben und live die Änderungen mitverfolgen.
Grüße Marco
-
Hi Marco,
Lösung: Gebe dem #navigations-Div einfach eine feste Breite (beispielsweise 305px) und setze
margin:auto;. Dann wird die Navigation zentriert angezeigt.Ok, das versuche ich bzw. mache ich morgen. Eine Frage dazu: Ist das nicht unflexibel? Beim verkleinern des Browser-Fenster z. B.
Hinweis: Mit den Developer-Tools von Google Chrome oder Firefox kann man sehr gut sehen, wie die Seite aufgebaut ist und eventuelle Fehler erkennen. Außerdem kann man direkt in HTML, CSS und Javascript schreiben und live die Änderungen mitverfolgen.
Ich benutze zum testen etc. Firefox. Ich nehme mal an du meinst Firebug? Das benutze ich bereits und es ist auch eine sehr große Hilfe. Mir hat hier jedoch einfach die "Idee" gefehlt es zu zentrieren.
-
Moin,
Ok, das versuche ich bzw. mache ich morgen. Eine Frage dazu: Ist das nicht unflexibel? Beim verkleinern des Browser-Fenster z. B.
Ja, wenn du den Viewport auf 250px zusammenziehst, muss man scrollen. Aber das ist nun mal dem Design geschuldet. Du kannst ja nicht einfach sagen, dass sich die beiden Hauptmenüpunkte untereinander schieben, denn dann siehts bescheiden aus.
Bei so einem kleinen Viewport solltest du dann die Navigation anders gestalten. Die Grundlage hast du schon gelegt. Mit media-querys kannst du dein Design an verschiedene Viewportgrößen anpassen.Ich benutze zum testen etc. Firefox. Ich nehme mal an du meinst Firebug? Das benutze ich bereits und es ist auch eine sehr große Hilfe. Mir hat hier jedoch einfach die "Idee" gefehlt es zu zentrieren.
Firebug auch. Aber auch die 3D-Ansicht von Firefox lässt dich sehr gut sehen, welche Elemente überflüssig sind.
Beispiel: keiner würde folgendes machen
<p><span class="rot"><span class="groß"><span class="fett"><span class="unterstrichen">Neue Info</span></span></span></span></p>aber viele User haben kein Problem mit folgendem:
<div id="wrapper"><div id="main"><div id="zentriert"><div id="wrapper2">[Inhalt]</div></div></div></div>Dein "Wrapper"-Div ist auch überflüssig, da du deinen Inhalt zwei mal eingefasst hast: einmal mit
<div id="wrapper">als auch in<body>. Du kannst aber dem Body-Element dieselben CSS-Eigenschaften geben wie dem Wrapper, was selbigen überflüssig macht.Grüße Marco
-
Firebug auch. Aber auch die 3D-Ansicht von Firefox lässt dich sehr gut sehen, welche Elemente überflüssig sind.
3D-Ansicht? Wo finde ich das?
Dein "Wrapper"-Div ist auch überflüssig, da du deinen Inhalt zwei mal eingefasst hast: einmal mit
<div id="wrapper">als auch in<body>. Du kannst aber dem Body-Element dieselben CSS-Eigenschaften geben wie dem Wrapper, was selbigen überflüssig macht.Tut mir Leid aber das versteh ich gerade nicht. Ich hab einen wrapper und eine Navigation die im wrapper ist. Body hab ich gar nicht im CSS oder meinst du den HTML Body? Welche Eigenschaften sollte ich dem den geben??
-
Moin,
3D-Ansicht? Wo finde ich das?
Rechtsklick -> Element untersuchen. Dann siehst du am unteren Rand der Seite eine Leiste. Und rechts gibt es dort den Button "3D-Ansicht".
Tut mir Leid aber das versteh ich gerade nicht. Ich hab einen wrapper und eine Navigation die im wrapper ist. Body hab ich gar nicht im CSS oder meinst du den HTML Body? Welche Eigenschaften sollte ich dem den geben??
Wenn du dem Body-Element die gleich Eigenschaften gibst, wie dem #wrapper, dann wird dieser überflüssig. Im CSS bräuchtest du dafür einfach nur #wrapper durch body ersetzen ;)
Grüße Marco
-
Rechtsklick -> Element untersuchen. Dann siehst du am unteren Rand der Seite eine Leiste. Und rechts gibt es dort den Button "3D-Ansicht".
Woah, coole Sache. Vielen Dank! :)
Wenn du dem Body-Element die gleich Eigenschaften gibst, wie dem #wrapper, dann wird dieser überflüssig. Im CSS bräuchtest du dafür einfach nur #wrapper durch body ersetzen ;)
Ahh verstehe. Hab ich jetzt so gemacht. Läuft wie geschmiert. Auch hierfür vielen Dank.
-
-
-
-
-
-
-