✔ Horizontale Navigation

Status
Nicht offen für weitere Antworten.
Hi,

tausch einfach für die Links display:block gegen float:left aus, dann klappt's auch mit der horizontalen Ausrichtung der Navigation.
 
Hi
danke für deine wieder mal sehr gute Hilfe, natürlich klappt es so wie du es gesagt hast, aber jetzt hab ich nen kleinen Abstand zwischen header und Navigation und ich bekomm die Links einfach nicht in die Mitte...
Vielleicht könntest du mir bitte nochmal helfen?
Danke
 
Hi,

die Lücke zum Header ergibt sich durch die Polsterungseigenschaften des Listenelements, die derzeit nicht auf null zurückgesetzt sind.

Da hier die Gesamtbreite des Menüs bekannt ist, lässt es sich mittels margin:0 auto horizontal zentrieren:

Code: 
ul#navigation {
margin:0 auto;
padding:0;
width:496px;
}
Für den Fall, dass die Breite mal nicht bekannt ist, hat Stu Nicholls eine Methode entwickelt, um so eine floatende Liste horizontal zu zentrieren: http://www.cssplay.co.uk/menus/centered.html
 
Hi
Danke aber ein Problem hab ich immer noch und zwar, dass die Navigation im IE nicht in einer Zeile dargestellt wird, ich nehme an es hängt mit der Liste zusammen, könntest du mir da bitte auch noch einmal helfen?
Danke
 
Das Problem hierbei ist, dass der Hover-Effekt mittels unterschiedlichen background-position-Werten vollzogen wird, die PNG-Grafik für die älteren IEs aber nicht als Hintergrundbild eingebunden wird, und das angedachte Konzept der Hintergrundbild-Verschiebung beim Überfahren der Links so in den älteren IEs nicht funktioniert.
 
naja aber beim IE 6 sollte das schon funktionieren oder?
Außerdem wird es sogar im IE7 falsch angezeigt..
 
Nein, im IE6 funktioniert es eben nicht, da ja er bekanntermaßen das PNG-Format nicht unterstützt, und du deshalb dafür eigens in dem seperaten IE-Stylesheet style_ie6.css den "AlphaImageLoader"-Workaround eingesetzt hast, damit er die Transparenz darstellt.

Dass im IE7 die Menüpunkte nun treppenförmig angeordnet werden, liegt daran, dass du die anfangs enthaltende CSS-Regel entfernt hast:

Code: 
ul#navigation li { /* Selektor für einen Listenpunkt in unserer Navigationsliste */
  display: inline;
  list-style: none;
}
 
Und wenn ich bei den Grafiken nen Hintergrund mache, also dass sie nicht mehr transparent sind, funktioniert es dann im IE 6? Oder unterstützt dieser gar kein background-position?
Danke
 
Grundsätzlich unterstützen alle IE-Versionen die background-position-Eigenschaft.

Wenn die Grafik aber nicht mittels background bzw. background-image als Hintergrundbild eingesetzt wird, was mit dem "AlphaImageLoader"-Hack der Fall ist, kann die Positionierung des Hintergrundbildes auch nicht funktionieren. Eigentlich logisch, oder?

Entweder teilst du die PNG-Grafiken jeweils in zwei Grafiken auf, und tauscht diese beim Überfahren der Links, anstatt ihre Hintergrundposition zu verändern, oder du verzichtest auf die halbtransparenten PNG-Grafiken im Menü und somit auf den "AlphaImageLoader"-Hack, und kannst mit background-position das Hintergrundbild beim Überfahren des Links verschieben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück