Hi
Ich hab wieder einmal ein Problem und zwar, hab ich meine neue Seite fast fertig, doch es gibt noch ein Problem und zwar bekomm ich keine Horizontale Navigation hin.
Hier ist der Link:
http://root.pcmasters.at/fxdesign/
Ich hoffe mir kann jemand helfen.
Danke

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 :

1 2 3 4 5

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 :

1 2 3 4

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.

Hi
Ich hab jetzt einen Hintergrund in die Bilder gemacht, aber angeblich funktioniert es immer noch nicht, hast du vll. den IE 6 installiert und könntest es bitte testen?
Danke

So wie es aussieht, liegt es am halbtransparenten PNG-Hintergrundbild des DIVs #topnav, dass die Links im IE6 nicht nutzbar/anklickbar sind, und so das Hintergrundbild nicht getauscht wird.

Möglicherweise liegt es an der Dimension der PNG-Grafik, wie auf http://www.daltonlp.com/view/217 im Absatz "Addendum: IE Link bug" hingewiesen wird.

Und würde es funktionieren, wenn ich noch einen kleinen Div erstelle, mit einer Hintergrund farbe, diesen platziere ich dann in dem Div #topnav?
danke

Kann ich dir auch nicht sagen, musst du einfach mal selbst erproben

Zitat von alex130

Und würde es funktionieren, wenn ich noch einen kleinen Div erstelle, mit einer Hintergrund farbe, diesen platziere ich dann in dem Div #topnav?
danke

Da du scheinbar nicht über den IE6 verfügst, hab ich das mal fix hiermit getestet

Code :

1 2 3 4 5 6 7 8 9 10

<div id="topnav">              <div style="background:#ccc;">                 <ul id="navigation">                         <li><a href="#" class="home"></a></li>                         <li><a href="#" class="about"></a></li>                         <li><a href="#" class="references"></a></li>                         <li><a href="#" class="contact"></a></li>                 </ul>              </div>         </div>

und es nützt nichts.