Hallo
ich habe eine ul für eine Unternavigation. Die Navigation ist wie folgt aufgebaut:
HTML
<div id="navigation">
<ul id="nav_main">
<li><img src="fileadmin/img/nav_idee_a.png" alt="" />
<ul id="sub_menu"><div id="sub_container">
<li><a href="#">Fakten und Zahlen</a></li>
<li><a href="#">Ernährung</a></li>
<li><a href="#">Bewegung</a></li>
<li><a href="#">Fittness</a></li>
</div></ul>
</li>
<li><img src="fileadmin/img/nav_macher_n.png" alt="" /></li>
<li><img src="fileadmin/img/nav_programm_n.png" alt="" /></li>
<li><img src="fileadmin/img/nav_galerie_n.png" alt="" /></li>
<li><img src="fileadmin/img/nav_referenzen_n.png" alt="" /></li>
</ul>
</div>Die ul so mit runden Ecken erstellt werden. Ich hab das über das CSS so gelöst:
Code
ul#nav_main {
margin: 0 0 0 110px;
}
ul#nav_main li {
position: relative;
display: block;
padding: 0 0 1px 0;
}
ul#sub_menu {
position: absolute;
top: 0;
left: -110px;
width: 110px;
padding: 0 0 4px 0;
line-height: 13px;
background: url(../img/hg_subnav_unten.png) no-repeat left bottom;
font-size: 9px;
}
#sub_container {
padding: 4px 0 0 0;
background: url(../img/hg_subnav_oben.png) no-repeat left top;
}
ul#sub_menu li {
display:block;
height:16px;
background-color: #e1deb9;
padding: 2px 4px 2px 4px;
}Das dumme ist nur, dass ich ja für ein xhtml-Dokument das DIV-Tag nicht in der Liste haben darf. Eigentlich bräuchte ich das UL-Tag 2 Hintergrundbilder. Das geht aber nicht.
Aber ich brauch noch ein Element, wo ich eine Hintergrundbild mit den runden Ecken unterbringen kann. Da das ganze in ein CMS kommt kann ich nicht expliziet das letzte LI-Tag ansprechen.
Hat mir zufällig jemand einen kleinen Tip, wie man das Problem xhtml konform löst?
Danke für Eure Mühe
Grüsse Georg