Hi,
ich habe eine Navigation die hat nen Hintergrund bzw jeder einzelne Navipunkt einen Hintergrund. Jetzt ist es so dass ich unteranderem eine Subnavi habe, ich klick auf einen Hauptpunkt und ein Unterpunkt fährt raus. Nun möchte ich den Unterpunkt aber ein bischen nach rechts rücken, klappt aber nicht weil er nicht nur den Text nach rechts rückt sondern auch den Hintergrund. Ich weiss aber nicht wie ich das verhindern kann.
Hab mein ein Bild angehängt wo man sieht wie es momentan aussieht.

Danke schonmal.
Markus

Noch etwas Code

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<li><a href="?id=chor">Chor</a></li> <li><a href="?id=historie">Historie</a></li> <li><a href="?id=mitglieder">Mitglieder</a></li> <li id="subnavi"><a href="satzung.pdf" target="_blank">Vereinssatzung</a></li> <li id="subnavi"><a href="geschaeftsordnung.pdf" target="_blank">Gesch&auml;ftsordnung</a></li> <li id="subnavi"><a href="?id=neuemitglieder">neue Mitglieder</a></li>   ul#navi { border-top:2px solid #acacac; padding-left: 0px; list-style: none; margin-top:0px; margin-left:10px; } #navi a { display: block; text-decoration:none; width: 145px; /* Grafikbreite */ line-height: 22px; /* Grafikhöhe */ background: url(images/navi_bg.png); font-weight:bold; color: #666666; padding-left:5px; } #navi a:hover { display: block; width: 145px; /* Grafikbreite */ line-height: 22px; /* Grafikhöhe */ background: url(images/navi_bg_over.png);         }

Hi,

zieh mal von der Breite das Maß ab, um das die Subnavi nach rechts eingerückt werden soll.

Hi,

ich gehe mal davon aus, du baust das Menu mit Listen-Elemente auf.
Dann setze die Links auf display:block. Diese erhalten das Hintergrundbild und den Text kannst du ja dann mit padding einrücken lassen.

ssurfer

Aufbau:

Code :

1 2 3 4 5 6 7 8

<ul> <li>Menuitem</li> <li>Menuitem</li>   <ul>     <li>Submenuitem</li>     <li>Submenuitem</li>   </ul> </ul>

Hmm das klappt nicht..
Ich hab nun mal der Grafik 10px abgezogen weil ich der Subnavi padding-left: 10px gegeben habe...
http://singvolution.de/index.php?id=mitglieder

Die haben schon display:block

Achso sorry, ich blende die Subnavi mit php ein.

Das macht ja nichts.
Die Subnavi muss nur von einem ul-Element umschlossen sein.

Versuch es mal mit diesem Markup:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<ul id="navi">              <li><a href="?id=start">Startseite</a></li>              <li><a href="?id=aktuelles">Aktuelles</a></li>              <li><a href="?id=chor">Chor</a></li>              <li><a href="?id=historie">Historie</a></li>              <li><a href="?id=mitglieder">Mitglieder</a>                         <ul class="subnavi">                             <li><a href="satzung.pdf" target="_blank">Vereinssatzung</a></li>                             <li><a href="geschaeftsordnung.pdf" target="_blank">Geschäftsordnung</a></li>                             <li><a href="?id=neuemitglieder">neue Mitglieder</a></li>                         </ul>              </li>              <li><a href="?id=sponsoren">Sponsoren</a></li>              <li><a href="?id=schaeferkarra">Schäferkarra</a></li>              <li><a href="?id=kirbe">Kirbe</a></li>              <li><a href="?id=interaktiv">Interaktiv</a></li>              <li><a href="?id=gaestebuch">Gästebuch</a></li>              <li><a href="?id=impressum">Impressum</a></li>              <li><a href="http://www.liederkranz-kemnat.de">Liederkranz</a></li> </ul>

und diesem CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

ul#navi, ul.subnavi  { margin: 0; margin-left: 10px; padding: 0; list-style:none; }   ul#navi { border-top:2px solid #acacac; }   #navi li a { display: block; text-decoration:none; width: 145px; /* Grafikbreite */ line-height: 22px; /* Grafikhöhe */ background: url(http://singvolution.de/images/navi_bg.png); font-weight:bold; color: #666666; padding-left:5px; }   #navi li a:hover { background: url(http://singvolution.de/images/navi_bg_over.png); }   #navi li ul.subnavi li a { display: block; text-decoration:none; width: 135px; /* Grafikbreite */ line-height: 22px; /* Grafikhöhe */ background: url(http://singvolution.de/images/navi_bg.png); font-weight:bold; color: #666666; }   #navi li ul.subnavi li a:hover { background: url(http://singvolution.de/images/navi_bg_over.png); }

Schon fast nur es hängt immer noch zu weit rechts...
Wieso kann ich die beiden nicht unabhängig voneinander positionieren?

Vergleiche nochmal diesen Abschnitt mit deiner Fassung:

Code :

1 2 3 4 5 6 7

<li><a href="?id=mitglieder">Mitglieder</a>         <ul class="subnavi">                 <li><a href="satzung.pdf" target="_blank">Vereinssatzung</a></li>                 <li><a href="geschaeftsordnung.pdf" target="_blank">Geschäftsordnung</a></li>                 <li><a href="?id=neuemitglieder">neue Mitglieder</a></li>         </ul> </li>

Das schliessende </li> vom Menüpunkt "Mitglieder" sitzt bei dir an der falschen Stelle.

Super nur schneidet er das Hintergrundbild der Navi an der Stelle ab...

Logisch, denn die Subnavi ist ja auch um 10 Pixel schmäler.

Von daher wirst du für diese Links eine "verkürzte" Grafik einsetzen müssen.

Nachtrag: Oder du positionierst das Hintergrundbild dementsprechend

Code :

1 2 3

#navi li ul.subnavi li a:hover { background: url(http://singvolution.de/images/navi_bg_over.png) [b]-10px 0[/b]; }

PERFEKT
Danke!!

Keine Ursache, bin eben auf der langen Leitung gestanden ... wird Zeit, dass ich meinen Hunger stillen gehe.