[CSS] Menu zit vast?

[Delicousation]

Beste,

Ik ben nog niet zolang geleden gestart met het 'ontrafelen van de mysteries der html/css', m.a.w ik ben een beginner. De eerste stapjes gingen goed, maar nu ik net de transparante 'header' van mijn eerste webpagina wilde vervangen door een leuke afbeeldingen kwam ik met een probleem te zitten. Omdat mijn header een bepaalde grootte heeft ben ik verplicht om mijn horizontale menu wat naar beneden te verschuiven, maar dit lukt met totaal niet? Ik zou denken dat je het gewoon met padding-top kan oplossen, maar dit schijnt niet te lukken. Dit is het stukje css code van mijn menu (ik houd css en html uiteraard gescheiden):

.ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

a

{

float:left;

width:6em;

text-decoration:none;

color:white;

background-color:darkred;

padding:0.2em 0.6em;

border-right:1px solid lightblue;

border-left:1px solid lightblue;

}

a:hover {background-color:#ff3300;}

li {display:inline;}

Alle hulp is welkom! Alvast bedankt

[stegisoft]

Je vind hier (klik) hoe je moet doen.

[Delicousation]

Dit had ik al eens eerder geprobeerd zonder resultaat, heb nu nog eens met vanalles geprutst (qua 'postition') en nu blijkt dit wel te werken. Maar er komen helaas nieuwe problemen in de plaats. Er verschijnt nog maar 1 "blokje" van het menu op mijn scherm. Daarnaast is er ook niets meer te zien van de andere css-codes zoals 'border-color'. Maak ik misschien een fout tegen de hiërarchie van verschillende codes?

Mocht de html-kant van dit menutje enig belang hebben;

<div class="header"><center><p class="hoofdtekst"></p></center></div>

<ul class="navbar">

<li><a href="/home/" title="Home">Home</a></li>

<li><a href="/over-ons/" title="Leden">Leden</a></li>

<li><a href="/producten/" title="Evenementen">Evenementen</a></li>

<li><a href="/contact/" title="Contact">Contact</a></li>

<li><a href="C:\Users\Abc\Documents\Gastenboek.html" title="Gastenboek">Gastenboek</a></li>

<li><a href="C:\Users\Abc\Documents\Fotoalbum.html" title="Fotoalbum">Fotoalbum</a></li>

</ul>

25 augustus 2012 aangepast door Delicousation
Onvolledig

[stegisoft]

Als je <ul></ul> dan hebt je maar slechts 1 menu kolom met titels

Border-color moet je kijken bij CSS onder navbar

[Delicousation]

Ookal pas je display:inline toe?

Is er dan toch een of andere manier om dit probleem op te lossen?

Een verticaal menu nemen is niet echt een alternatief..

[ecence]

net zoals delicousation zegt zet ook even display:inline bij je ul

.ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

display:inline

}

en waarom heb je een . voor ul staan, nu lijkt het net of je een class ul bedoelt, als je dit verandert in ul (dus zonder punt),

of verandert in .navbar zal er waarschijnlijk ook verschil ontstaan.

dus

ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

display:inline

}

.navbar

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

display:inline

}