[CSS] list items op 1 lijn plaatsen?

[Anoniem: 70957]

stel, ik gebruik voor mijn site het volgende:

code:

<div id="navigationMenu">
    <ul>
        <li><a class="menuLink" href="index.php#news">news</a></li>
        <li><a class="menuLink" href="index.php#projects">projects</a></li>
        <li>&nbsp;</li>

        <li><a class="menuLink" href="contact.php">contact</a></li>
    </ul>
</div>

standaard worden alle list items (li) netjes onder elkaar geplaatst. wat ik nu wil doen is deze list items _naast_ elkaar plaatsen (alles op een enkele regel dus), in plaats van onder elkaar, en wel met behulp van css. dit omdat er voor deze site waarschijnlijk meerdere stylesheets ontworpen zullen worden, waarbij er ook stylesheets zullen zijn die uitgaan van een navigatiemenu waarbij de items onder elkaar staan, wat dus standaard al het geval is.

is dit mogelijk met behulp van css?

_{wat zoekwerk mbv google leverde overigens erg weinig (lees: niets) op}

code:

#navigationMenu {
        background: url("dBgdDark.png") #7185dd;
        font-weight: bold;
        font-size: 8pt;
        color: #fff;
        margin: 0;
        padding: 5px;
        height: 1.2em !important;
        }

#navigationMenu ul {
        padding: 0;
        margin: 0;
        }

#navigationMenu li {
        list-style-type: none;
        }

[tomato]

Je kunt de li's een 'display: inline' geven (of een 'float: left').

[Anoniem: 2935]

Cascading Stylesheet:

#navigationMenu ul { display:inline; list-style-type:none; }
#navigationMenu li { display:inline; }

Zou moeten doen wat je wil.

code:

<li>&nbsp;</li>

Waar slaat dit op?

[Anoniem: 70957]

dat was m.. thnx

Anoniem: 2935 schreef op 21 August 2003 @ 00:31:
Waar slaat dit op?

een tot nog toe lege lijn..

[tomato]

Anoniem: 70957 schreef op 21 August 2003 @ 00:22:
_{wat zoekwerk mbv google leverde overigens erg weinig (lees: niets) op}

Dan ben ik erg benieuwd op welke termen je hebt gezocht, want zelfs op list horizontal css krijg je al 5 goede resultaten op de eerste pagina (en ja, dat zijn dan nog slechte zoektermen)...

[edwinistrator]

mijn favorietjes hierover:
http://www.simplebits.com/code/minitabs.html
http://www.stopdesign.com

[Anoniem: 2935]

Anoniem: 70957 schreef op 21 augustus 2003 @ 00:37:
dat was m.. thnx
[...]
een tot nog toe lege lijn..

Ik snap het nog niet helemaal, bedoel je niet eigenlijk zoiets?
Een lege list-item is nogal raar, lijkt me.

HTML:

<ul>
    <li>item</li>
    <li>item</li>
    <li class="separate">item</li>
    <li>item</li>
    <li>item</li>
</ul>

Cascading Stylesheet:

li.separate { margin-top:1em; }

[Bluestorm]

Dat vind ik persoonlijk minstens net zo raar. met zo'n .seperate klasse. Ik zou eigenlijk de voorkeur geven aan twee losse lijstjes dan. Dat zijn het toch eigenlijk ook?

[Anoniem: 2935]

Bluestorm schreef op 21 August 2003 @ 23:31:
Dat vind ik persoonlijk minstens net zo raar. met zo'n .seperate klasse. Ik zou eigenlijk de voorkeur geven aan twee losse lijstjes dan. Dat zijn het toch eigenlijk ook?

Dat zou natuurlijk ook nog wel eens kunnen