[CSS] Menu horizontaal plaatsen

[Matthijs1982]

Ik heb een menu d.m.v. lists. ik wil dat dit een horizontaal menu wordt. op dit moment krijg ik dit alleen verticaal.

Ik heb alle stappen op de website van het originele menu doorlopen, maar krijg het niet voor elkaar om dit horizontaal te krijgen op mijn website. Als ik het originele menu van de website kopieer werkt dit wel horizontaal. Als ik dan de broncode bekijk en mijn opzet met het originele menu vergelijk, zie ik geen verschil.

Weet iemand wat ik verkeerd doe?

Voorbeeld staat hier:
link verwijderd

Dit is de website van het menu dat ik gebruik:
http://www.seoconsultants.com/css/menus/horizontal/

[ Voor 7% gewijzigd door Matthijs1982 op 15-09-2006 12:17 ]

[Rowanov]

Is niet gek ingewikkeld:

HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>

Cascading Stylesheet:

ul {
  list-style: none;
}
li {
  float: left;
}

Dit is de basis van het principe.

Edit:
In jouw geval dus dit even weghalen, omdat het nogal nutteloos is om iets relatief te positioneren en er voor de rest niets mee te doen:

Cascading Stylesheet:

#menu li {position: relative;}

en dan vervangen door:

Cascading Stylesheet:

#menu li {float: left;}

offtopic:
@Da Devil: diefstal! grrrrrr

[ Voor 43% gewijzigd door Rowanov op 10-09-2006 17:34 ]

[tjmv]

HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>

Cascading Stylesheet:

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

Werkt ook. Het is maar net wat je het fijnst vindt.

offtopic:
Bedankt voor het typen van de code btw

[Matthijs1982]

Ik heb de float left toegevoegd. Dit maakt echter geen verschil. Als ik de originele html van de website van het menu kopieer in mijn website met precies dezelfde css, werkt het wel.
de fout zit dus in mijn html deel, alleen zie ik niet waar. ik heb volgens mij precies dezelfde code.

Ik heb nu dit veranderd:

Cascading Stylesheet:

#menu li {
position: relative;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

[Rowanov]

Misschien is het zowieso verstandig om dit principe eens in een kale pagina in elkaar te zetten en ook echt te kijken wat de css doet; als je het gewoon kopieert heb je geen idee. Het menu is ook niet voor niets in een artikel vorm op internet gegooid, je kan adhv. het artikel leren hoe je zo'n menu kunt maken.

Even ter verduidelijking; mijn code werkt hier prima. De conclusie is dan, dat er iets anders in de weg zit wat het kan verknallen zoals:
• breedte van je ul
• overlappende style declareringen

[ Voor 24% gewijzigd door Rowanov op 10-09-2006 17:38 ]

[Matthijs1982]

Maar als ik het menu wat ik nu heb weghaal en de html code van de website kopieer en plak werkt het gewoon goed.

Bovenstaande voorbeelden maken geen verschil.

[Matthijs1982]

Ik heb het aantal menuitems teruggebracht tot twee. Dat het menu te groot is en daardoor verticaal wordt uitgelijnd is dus ook niet het probleem.
Overlappende style declareringen kan ook niet, want het originele menu werkt wel en dan verander ik niks aan de css.

[ Voor 28% gewijzigd door Matthijs1982 op 10-09-2006 17:43 ]

[deCube]

Haal de h2 tags eens weg.

[Rowanov]

Matthijs1982 schreef op zondag 10 september 2006 @ 17:41:
Ik heb het aantal menuitems teruggebracht tot twee. Dat het menu te groot is en daardoor verticaal wordt uitgelijnd is dus ook niet het probleem.
Overlappende style declareringen kan ook niet, want het originele menu werkt wel en dan verander ik niks aan de css.

Zolang je het principe niet zelf begrijpt en maar blijft knippen en plakken gaat het nooit wat worden; begin eens met een schoon document en bouw je menu vanaf het begin op, regel voor regel.

[kaassouffle]

(vind het een rare manier. Heb je wel echt alles overgenomen zoals het op die site staat? In broncode staat ook dit:

<!-- Begin Grab This - You'll need this external CSS file and the IE Statement below -->

<style type="text/css">@import url("css/menuh.css");</style>


Heb je dat ook overgenomen? En de blabla whatever:hover file?

volgens mij kun je beter zelf een menu opbouwen.. en niet deze proberen werkend te krijgen... (of em zelf stap voor stap na bouwen.. kijken wat er misgaat)

-edit-
(zie vorige post dus)

[ Voor 3% gewijzigd door kaassouffle op 10-09-2006 18:11 ]

[Matthijs1982]

Ik heb alles erin staan. De if IE code, de juiste css en alles in een lege pagina gezet. Ik blijf het menu verticaal zien.

Zelf een menu bouwen, lukt me niet. Zover ben ik niet met css.

Ik heb de code gekopieerd van de website van het menu en onder mijn code geplakt. Allebei maken ze gebruik van dezelfde css.
Alleen werkt het originele menu wel en die van mij niet.
link verwijderd

De html code is van beide menu's hetzelfde.

[ Voor 49% gewijzigd door Matthijs1982 op 15-09-2006 12:17 ]

[kaassouffle]

andere zoeken?

http://www.alistapart.com/articles/dropdowns/
\[CSS+HTML] Dropdown menu dikke balk bij huidige menuitem
http://www.sovavsiti.cz/css/horizontal_menu.html
http://www.udm4.com/

(niet allemaal bekeken zelf)

[ Voor 6% gewijzigd door kaassouffle op 10-09-2006 19:25 ]

[Matthijs1982]

Bedankt voor jullie hulp. Suckerfish heb ik ook. Alleen krijg ik die niet zo mooi opgemaakt, daarom wilde ik deze uitproberen.

ik denk dat het aan de HTML ligt. Ik ga ermee aan de slag. Wanneer iemand nog suggesties heeft wat ik moet aanpassen, dan hoor ik die graag.

[Rowanov]

Ter informatie; jouw constructie is een voorbeeld van een Suckerfish menu

ja, dat klopt, maar ik bedoel het menu van HTMLDog, Sons of Suckerfish

Dat is dus een Suckerfish menu; Suckerfish is sec gezien de techniek die gebruikt maakt van :hover om speciale effecten aan de site toe te voegen, met enkel gebruik van css (en javascript om te constructie in IE te stutten).

[ Voor 67% gewijzigd door Rowanov op 10-09-2006 19:55 ]

[Matthijs1982]

ja, dat klopt, maar ik bedoel het menu van HTMLDog, Sons of Suckerfish

[Matthijs1982]

het probleem is opgelost. Ik had een <ul></ul> te weinig bij het begin van de hoofdnavigatie en de eindnavigatie. Ik had deze aan het begin van het blok gezet en aan het eind, maar deze moest openen bij elke hoofdnavigatie.

[Rowanov]

Dat zoiets simpels zo lastig op te sporen is

Voor volgende keer aan de debug-checklist even de validator toevoegen, om te zien of je geen dingen mist