Navi mit CSS designen => passt nicht zusammen

[Fishmasta]

nach vielem hin und her bin ich bzgl. meines projektes jetzt vom photoshop slice / html / frames / objects weg und werde es wohl doch in css bzw. php stylen.

aber im photoshop slice hat alles so schön zusammen gepasst

das erste problem habe ich nun aber schon seit einer stunde mit der navi.
hier der link: KLICKEEEEEEEEEEEEEEEEEEEEEN

wie bekomme ich die navi so hin: HIER AUCH KLICKEN ???

den quelltext zur .html seht ihr ja wenn ihr auf ansicht->quelltext anzeigen geht
hier der link zur .css: HIER KLICKEN

achja:
was ich auch noch strange finde ist, dass die navi wenn ich keine hintergrundbilder sondern eine hintergrundfarbe verwende bündig am header anliegt aber mit den bildern wirds der oben zu sehende murks :sad:

ich hoffe ihr könnt mir erneut helfen!
thx!

 

[mermshaus]

Was ist denn das li2-Element?

 

[Fishmasta]

das li2 element soll der trennstrich sein der den hintergrund der navi nach jedem feld optisch unterteilt
pfad zur grafik: KLICK

die begrenzer für das linke oder das rechte ende: KLICK
der eigentliche hintergrund der navi: KLICK

 

[mermshaus]

Es gibt kein li2-Element.

- [Invalid] Markup Validation of http://www.marvinfischenich.de/testds/test.html - W3C Markup Validator

 

[Fishmasta]

wie mach ich dem denn das li2 element bekannt?
der validator sagt, mein css ist OK!
oder gibt es eine alternative lösung?

 

[threadi]

Gar nicht. Verwende <li> als Element.

 

[Fishmasta]

der text muss aber padding8.5 haben, damit der navihintergrund komplett in der höhe angezeigt wird
die trennlinien müssen aber padding 0 haben.
wie soll das in einem element vereinbart werden?

 

[threadi]

8.5 Pixel gibt es nicht. Es gibt nur ganze Pixel, keine halben oder Viertel.

Was Du versuchst wäre auch anders, sauberer machbar. Aber in deinem Fall würde es auch reichen statt

<li2>

eine Klasse zu verwenden

<li class="trenner">

und die CSS-Eigenschaft entsprechend von "li2" auf "li.trenner" abzuändern. Dann wäre zumindest erstmal der Quellcode sauber.

 

[Fishmasta]

8.5 Pixel gibt es nicht. Es gibt nur ganze Pixel, keine halben oder Viertel.

leider fehlt bei 8 ein pixel, bei 9 wird einer zu viel dargestellt (das bild wird erneut eingefügt).
nur wenn ich 8.5 einstelle, passt es!

sauber ist der code jetzt, ja!
aber das mit der navi klappt immer noch nicht -.-

 

[threadi]

8 Pixel sind 8 Pixel, 9 Pixel sind 9 Pixel. Wenn Du da irgendeinen krummen Wert einträgst ist es eher Glück, dass überhaupt irgendwas passiert. Denn halbe Pixel gibt es nicht.

Wie gesagt wäre für die Navigation eine andere Lösung besser. Z.B. solltest Du für die Trennstriche nicht extra <li>'s aufbauen sondern diese als Hintergrundbild ins <li> des Links aufnehmen. Dem Link kannst Du dann den blauen Hintergrund geben.

<ul>
<li><a href="#">Linktitel</a></li>
<li><a href="#">Linktitel</a></li>
<li><a href="#">Linktitel</a></li>
</ul>

li {
 background-image: url(trenner.png);
 background-repeat: no-repeat;
 background-position: 0 0;
 display: inline;
 float: left;
}
li a {
 background-image: url(blauerhintergrund.png);
 background-repeat: repeat-x;
 display: block;
}

Das noch mit den nötigen Abständen und Schriftfarben versehen .. fertig.