[CSS] ul, li justify? Menu verspreiden over gehele breedte

[Sjoerd]

Ik probeer mijn menu met een X aantal elementen te spreiden over de gehele breedte van mijn div.
Helaas wil dit niet echt lukken.

Ik heb dus een div die 800 breed is, binnen deze div mijn menu:

HTML:

<div id="navigation">
         <ul>
                <li>
                    test
                </li>
                <li>
                    test
                </li>
                <li>
                    test
                </li>
                <li>
                    test
                </li>
       </ul>
</div>

Volgens de css

Cascading Stylesheet:

#navigation {
    width:800px;
}
#navigation ul{
    list-style:none;
    background-color:#0099FF;
}
#navigation li{
    display:inline;
}

Nu kan ik wel een text-align:center; toevoegen aan #navigation, het probleem is echter dat het menu dan wel gecentreerd is maar nog altijd niet de complete breedte van mijn 800px brede div inneemt.
ook spelen met justify binnen de <ul> lijkt geen oplossing.

Het probleem is verder dat het aantal menu items niet vast ligt, anders had ik desnoods margin-left:Xaantal px kunnen geven aan elke <li>, maar die optie vervalt nu dus.

Iemand een idee?

[BtM909]

Wil je dat de UL de volledige breedte inneemt (doet ie standaard al) of dat de li's (evenredig) worden verdeeld over de volle breedte (lastiger )

[Sjoerd]

BtM909 schreef op vrijdag 12 september 2008 @ 11:28:
Wil je dat de UL de volledige breedte inneemt (doet ie standaard al) of dat de li's (evenredig) worden verdeeld over de volle breedte (lastiger )

Helaas het tweede, door de achtergrond kleur aan de ul te geven zag ik inderdaad al dat hij de volledige breedte gebruikte.

De <li>'s evenredig verdelen over de breedte is dus de uitdaging hier
(meestal kom ik er wel met wat proberen en nadenken maar nu omdat het dus geen vast aantal is is het ineens een stuk moeilijker )

[Dav1d]

RobIII in "Uitlijnen floating divs"

[BtM909]

Wat dus niet werkt in FF3 en Chrome for example

[Sjoerd]

Dav1d schreef op vrijdag 12 september 2008 @ 11:34:
RobIII in "Uitlijnen floating divs"

Dat is al een hele goede trap in de juiste richting, probleem is echter dat door die width:140 (bv) je toch weer vast zit met het aantal elementen, wanneer ik bv meer dan 6 li's heb, verschuift de hele layout doordat de totale breedte groter wordt dan 800.
En hetzelfde wanneer je maar 2 elementen hebt, dan staat het niet meer in het midden

Ik blijf er even echter mee stoeien kijken wat het geeft

BtM909 schreef op vrijdag 12 september 2008 @ 11:38:
Wat dus niet werkt in FF3 en Chrome for example

had ik nog niet getest maar inderdaad

[ Voor 14% gewijzigd door Sjoerd op 12-09-2008 11:40 ]

[Verwijderd]

Je zou je ul met een script om kunnen bouwen naar een table, zoals dit: Verwijderd in "[CSS] Totaal van rechts floatende elemen...". Maar dat is dus een javascript-oplossing.

[Sjoerd]

Verwijderd schreef op vrijdag 12 september 2008 @ 14:53:
Je zou je ul met een script om kunnen bouwen naar een table, zoals dit: Verwijderd in "[CSS] Totaal van rechts floatende elemen...". Maar dat is dus een javascript-oplossing.

Ja het liefste zou ik het toch met css doen, tenzij het niet anders gaat natuurlijk. Tot nu toe echt nog nergens op internet een oplossing gevonden.

Mocht het nu echt niet lukken met css kan ik het met een inline style en php wel oplossen, maar dat is toch weer net iets minder

[RobIII]

BtM909 schreef op vrijdag 12 september 2008 @ 11:38:
Wat dus niet werkt in FF3 en Chrome for example

In FF3 en Chrome werkt het ook

[Sjoerd]

RobIII schreef op vrijdag 12 september 2008 @ 15:07:
[...]

In FF3 en Chrome werkt het ook

maar helaas is het nog niet bruikbaar door die vaste breedte die opgegeven moet worden of is dat op een andere manier te omzeilen?

[moozzuzz]

Cascading Stylesheet:

#content ul.fotoboekfoto   {list-style: none; margin: 0px; padding: 0px;}
#content li.fotoboekfoto   {display: inline; text-align: center; padding:0; margin: 0;}
#content li.fotoboekfoto a {border: 0px;}
#content li.fotoboekfoto img {border: 10px solid #ffffff; background-Color: #f9f9f9; vertical-align:middle;}

De UL zelf heb ik toen luiheid-gewijze gewoon tussen <center>'s gezet.

Gebruikt toen ik naar Schotland op kamp ging.

[Bozozo]

Ik zou serverside een regeltje CSS toevoegen met de juiste breedtje in procenten.

[Dav1d]

Sjoerd schreef op vrijdag 12 september 2008 @ 11:39:
Dat is al een hele goede trap in de juiste richting, probleem is echter dat door die width:140 (bv) je toch weer vast zit met het aantal elementen, wanneer ik bv meer dan 6 li's heb, verschuift de hele layout doordat de totale breedte groter wordt dan 800.

Die <li>'s hoeven niet per se een fixed width te hebben hoor.

moozzuzz schreef op vrijdag 12 september 2008 @ 17:55:
De UL zelf heb ik toen luiheid-gewijze gewoon tussen <center>'s gezet.

Dat is niet wat TS wil en <center> is deprecated.

Ik heb een voorbeeld voor je uitgewerkt. Volgens mij is dit wat je beoogt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <style type="text/css">
            #nav
            {
                margin: 0;
                padding: 0;
                list-style: none;
                width: 800px;
                text-align: justify;
                text-justify: distribute;
                background-color: #0099FF;
            }
            
            #nav li
            {
                display: inline-block;
                text-align: left;
                background-color: #FFFF66;
            }
            
            #nav #dummy
            {
                width: 100%;
                height: 0;
                line-height: 0;
                font-size: 0;
            }
        </style>
        <!--[if IE]>
            <style type="text/css">
                #nav li
                {
                    display: inline;
                }
            </style>
        <![endif]-->
    </head>
    <body>
        <ul id="nav">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li id="dummy">&nbsp;</li>
        </ul>
    </body>
</html>

Toelichting: De clou zit hem in het feit dat 'text-align: justify' de laatste regel altijd ongemoeid laat. In dit geval is eerste regel 'tekst' ook direct de laatste, dus haalt het niets uit. Voor Internet Explorer is de Microsoft-proprietary 'text-align-last' property hiervoor een oplossing. Deze heeft het inmiddels geschopt tot opname in de CSS3 draft, dus de nog ontbrekende ondersteuning in Gecko/WebKit/Opera is aanstaande. Voor nu, als workaround, heb ik een extra (zij het niet zichtbaar) regel geforceerd.

Of bedoel je dat alle menu items automatisch dezelfde breedte moeten aannemen en samen die 800 pixels vullen?

[Sjoerd]

Dav1d schreef op vrijdag 12 september 2008 @ 22:08:
[...]
Die <li>'s hoeven niet per se een fixed width te hebben hoor.
[...]

Ik heb een voorbeeld voor je uitgewerkt. Volgens mij is dit wat je beoogt:

Geweldig!
Ik ben nog wel een tijd aan het sukkelen geweest om het werkend te krijgen bij mij, maar alles werkt nu.

Even een toelichting wat bij mij het probleem was:
zo deed hij het niet:

PHP:

...
// Construct the link
            $menuOutput .= '<li'.$imageEffect.'>';
            $menuOutput .= $a . $linkDisplay . '</a>';
            $menuOutput .= '</li>';
        }
        $menuOutput .= '<li id="dummy">&nbsp;</li> ';
        return '<ul id="nav">' . $menuOutput . '</ul>';

en zo wel:

PHP:

...
// Construct the link
            $menuOutput .= '<li'.$imageEffect.'>';
            $menuOutput .= $a . $linkDisplay . '</a>';
            $menuOutput .= '</li> ';
        }
        $menuOutput .= '<li id="dummy">&nbsp;</li> ';
        return '<ul id="nav">' . $menuOutput . '</ul>';

Enige verschil is dat ik achter </li> een spatie moest zetten werkt perfect nu !