✔ Text und BG unabhängig voneinander anordnen

[aTa]

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

 <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);        
}

 

[Maik]

Hi,

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

 

[ssurfer]

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:

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

 

[aTa]

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

 

[aTa]

Achso sorry, ich blende die Subnavi mit php ein.

 

[ssurfer]

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

 

[Maik]

Versuch es mal mit diesem Markup:

<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:

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);
}

 

[aTa]

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

 

[Maik]

Vergleiche nochmal diesen Abschnitt mit deiner Fassung:

<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.

 

[aTa]

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