Navigation horizontal zentrieren
![](/uploads/default_avatar/thumb/missing.png)
- css
hallo!
Ich versuche eine Navigationsleiste horizontal zu zentrieren. Problem: Die Links müssen schick sein - so wie der Designer das möchte :)
Heißt: sie müssen eine bestimmte Größe haben um z.B. beim hover die Hintergrundgrafik korrekt anzuzeigen.
Die Höhe/ den Abstand kann ich IMHO nur definieren, wenn a ein Blockelement ist (display: block;) oder in einem Blockelement steckt (ul > li). Sobald dies aber der Fall ist, müssen mittels float die Elemente nebeneinander gestellt werden (weil ja horizontal). Sobald das aber passiert, kann ich das Blockelement nicht mehr mittig ausrichten, ohne dass ich eine Breitenangabe mache.
Da aber die Anzahl der Elemente variieren kann (CMS), ist es IMHO unmöglich mit Breitenangaben zu arbeiten (weil dann würde es ja ohne Probleme gehen). Die einzigste Breitenangabe kann ich nur da machen, wo die Zeile definiert wird. Nicht aber bei den Inhaltselementen.
Würde ich zum Beispiel die Breite von a definieren, würde dies bei zu kurzem Text einen viel zu großen Abstand zum nachfolgenden Element ausmachen. Was letztendlich wieder beschissen aussieht.
Kann man hier einen Lösungsweg finden?
#subnavline {
font-weight: bold;
font-size: 11px;
color: #D196A2;
height: 35px;
width: 999px;
margin: 0;
text-align: center;
}
#subnavline a {
margin: 0;
text-decoration: none;
padding: 9px 10px 10px 10px;
}
#subnavline a:hover, #subnavline a.aktiv {
padding: 11px 8px 8px 12px;
}
#subnavline.bauen {
background: url(../px/navi_bauen.gif);
}
#subnavline.bauen a {
color: #fff;
}
#subnavline.bauen a:hover, #subnavline.bauen a.aktiv {
background: url(../px/hover_bauen.gif);
}
<div id="subnavline" class="bauen">
<a href="#">sadfasdf</a>
<a href="#">adsfasdf</a>
</div>
gruß.
roger.
Hi Roger,
das siehst du etwas zu pessimistisch. Hier solltest du was für dich finden. Der "kein float ohne Maße" Grundsatz ist outmoded. Hintergrundbilder sind auch kein Problem, nimmst halt'n ganz schmales und repeat-x.
Problem kriegst du nur, wenn die Navigationspunkte sich über eine fixe Breite automatisch verteilen und quasi wachsen oder schrumpfen sollen. Wenn der Kunde die Navi selbst ändern können soll, ist das aber ja auch nicht sinnvoll. Ruckzuck wär alles aus den Fugen...
Gruß
Antipitch
PS: Wie man möglichst barrierefreie grafische Links macht, findest du auf Ulrichs Homepage
hallo!
das siehst du etwas zu pessimistisch. Hier
Danke, das hab ich schon verinnerlicht.
Es soll tatsächlich so sein, dass mal ein Link hinzu kommt und mal einer verschwindet. Schon allein deswegen, weil der Navigation für ein Submenü ist, dass von den einzelnen Kategorien natürlich unterscheidet.
gruß.
roger.