[CSS/HTML] Menu staat onder elkaar, moet naast elkaar

[Verwijderd]

Beste tweakers,

ik loop tegen een probleem aan waar ik niet helemaal meer uit kom. Het volgende is het geval, check:
http://www.steakhousesilverado.nl/nachtwacht

Zoals je ziet staat het menu onder elkaar (verkeerde kleuren e.d, nog niet belangrijk).
Dit menu moet in blokken naast elkaar komen te staan.

Het menu wordt op deze manier opgeroepen:

code:

<div id="menu">
        <?php theme_menu('<li><a href="#file">#title</a></li>','<li class="active"><a href="#file">#title</a></li>'); ?>
      </div>

In de stylesheet staat het volgende:

code:

#menu {
    font: 0.7em Tahoma, sans-serif;
    font-size:12px;
    font-weight:bold;
    width: 200px;
    float: right;
}
#menu ul {
    margin: 0;
    padding: 0;
    list-style: inherit;
}

#menu li {
    display: block;
}

#menu a {
    display: block;
    padding: 5px 15px;
    border-bottom: 1px solid #FFFFFF;
    text-decoration: none;
    color: #663300;
    background-color: #B3C6FF;
}

#menu a:hover {
    background: #ed6413;
    color: #FFFFFF;
}

#menu .active a {
    background: #FFD9B3;
    color: #663300;
}

Hoe krijg ik het menu als blokken naast elkaar? Ik kom er niet meer uit...

Alvast hartstikke bedankt!

[Nielsvr]

Je li elementen naar links floaten?

code:

#menu li {
    display: block;
    float: left;
}

Moet je wel de breedte van je ul weg laten of groter instellen. Daarnaast ook een breedte in je li element instellen (omdat hij een block element is, anders wordt hij 100%).

[ Voor 45% gewijzigd door Nielsvr op 26-01-2010 16:41 ]

[Verwijderd]

Aii, simpele oplossing zeg. Het werkt! Ik ga me even in een hoekje zitten schamen.

[MueR]

Tip: gooi dat font eens door een font-face generator, dan krijg je wat mooiere anti-aliassed fonts in browsers die woff e.d. ondersteunen.

[Verwijderd]

Heb ik gedaan. Ik werk op een Mac, dus ik kan niet testen hoe het er nu op Windows uit ziet. Zie je verschil?

Overigens was ik net ergens anders en zag ik dat het font niet verscheen op een Windows7 laptop. Waar kan dat aan liggen?

[MueR]

Iets beter, maar nog steeds niet heel geweldig. Waarschijnlijk komt dat door het font zelf

"Een windows 7 laptop" is verder natuurlijk ongeveer zo duidelijk als zeggen dat je een reepje geheugen nodig hebt voor je moederbord, zonder dat je weet welk moederbord je hebt. Welke browser gaat het over?

[Verwijderd]

Haha, daar heb je helemaal gelijk in. Het gaat over een net-uit-de-doos Dell laptop, dus ik ga vanuit van de nieuwste software. Browser die gebruikt wordt is de nieuwste IE.

Ik heb nu overigens het stukje CSS van de generator gebruikt. Eerst werd alleen verwezen naar de ttf, nu dus ook naar de anderen (woff eot). Zou het daarmee iets te maken kunnen hebben?

Ik kan niet testen in IE, mijn grootste bezwaar tegen Mac.

[ Voor 0% gewijzigd door Verwijderd op 26-01-2010 17:28 . Reden: typo ]

[MueR]

Werkt hier in IE8 & IE8 Compatability mode. Verder nodeloos te zeggen dat Firefox en Chrome het ook doen.

[ Voor 41% gewijzigd door MueR op 26-01-2010 17:29 ]

[Verwijderd]

Thanks 4 testing!

Heb nu overigens ook een slider toegevoegd. Geeft wel wat extra's.

Verder nog opmerkingen over de algehele opzet van de site?

[martijn2008]

http://browsershots.org/ kan je zien of het er een beetje goed uitzien, grote fouten zie je meteen. En (bijna) alle browsers kan je checken. Kijk niet gek op als het laden even duurt. Veel plezier ermee.

[Kiphaas7]

Vergeet ook niet je floats te clearen...

[RobIII]

Verwijderd schreef op dinsdag 26 januari 2010 @ 17:33:
Verder nog opmerkingen over de algehele opzet van de site?

Sitechecks doen we hier niet aan Omdat verder alles wel zo'n beetje gezegd is brei ik er maar een einde aan.