Beiträge von jorge_e

jorge_e

Hallo

Ich benötige ein horizontales Menü, dass die Breite der Menüpunkte flexibel auf die Anzahl der Menüpunkte anpasst (siehe Bild).

Im Moment ist der Text zentriert (soll auch so bleiben) und die width auf 20% (5 Navigationpunkte). Der Kunde möchte allerdings hier noch weitere Punkte einfügen können. Also wenn ich 6 Punkte habe müsste ich das CSS entsprechend anpassen.

Gibt es eine Möglichkeit, dieses irgendwie zu automatisieren? Irgendwie mit width:auto - oder padding: 0 auto - oder irgendwie anders.

Ziel sollte sein, der Text zentriert, die Breite der Menüpunkte immer gleich gross und die Breite abhängig von der Anzahl der Einträge.

Hat mir jemand ein Tip?

Danke für Eure Hilfe

Grüsse Georg

jorge_e

ich habs mal so gemacht ... es scheint zu funktionieren ... der validator jammert zumindest nicht:

HTML

<div id="navigation">
<ul id="nav_main">
<li><img src="fileadmin/img/nav_idee_a.png" alt="" />
<div id="sub_container">
<ul id="sub_menu">
<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>
</ul></div>
</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>

Alles anzeigen

und das CSS:

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 {
    padding: 0 0 4px 0;
    line-height: 13px;
    background: url(../img/hg_subnav_unten.png) no-repeat left bottom;
    font-size: 9px;
}


ul#nav_main li #sub_container {
    position: absolute;
    top: 0;
    left: -110px;
    width: 110px;
    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;
}

Alles anzeigen

Also das DIV um das UL gemacht ... es schaut zumindest in den Browsern so aus, wie ich es möchte.

Danke für die Hilfe

Grüsse aus der Schweiz

Georg

jorge_e

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>

Alles anzeigen

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

Alles anzeigen

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

Beiträge von jorge_e

Flexibles horizontales Menü

ul mit 2 hintergrundbildern???

ul mit 2 hintergrundbildern???