Html en CSS, noobvraagje

[James007]

Een goedenavond al te gader

Na het voltooien van het boekje "html en css, de basis" heb ik mij op het maken van een navigatiebalk gegooid, via een opsomming.

Vraag 1:
Zoals je hier kan zien, is de huidige pagina in het menu met een donkerblauw kleurtje aangegeven. Dit heb ik gedaan door bijvoorbeeld in home.html, de ID "huidig" toe te kennen aan het list item "home".
Later kan ik dan via mijn stylesheet een donkerblauw kleurtje toekennen aan #huidig a.

Het stylesheet dat geldt voor de pagina's vind je hier.

Je ziet ook dat er 2 lichtblauwe bandjes blijven staan langs boven en onder. Dit omdat ik het donkerblauw aan het het a-element heb toegekend en niet aan het hele list item.

Nu heb ik ook het donkerblauw toegekend aan het hele list item via

#huidig {
color: #00C;
}

Dit maakt het huidige list-item toch NIET donkerblauw.
Ook heb ik het geprobeerd met

#huidig {
background: #00C;
}

maar ook dat wou niet lukken.

Vraag 2:
Waarom is de spatie tussen de list items in Internet Explorer groter als in Firefox? Ik heb bij de list-items in mijn stylesheet aangegeven dat border-collapse op "collapse;" moest staan... maar enkel Firefox doet dit blijkbaar.

In Firefox:

En in Internet Explorer:

Help James

James

 

[peter vazed]

Dit:
#navigatie li {
background-color: #09F; /*lichtblauw*/
border-style: solid none;
border-collapse: collapse;
border-width: 1px;
border-color: #DDD;
text-align: center;
padding: 0px 0px 0px 0px;
width: 10em;
}


En inderdaad de weergave in IE en FF is anders, altijd anders. Open maar een willekeurige pagina in IE en FF en kijk tot hoever de tekst te zien is tot onderkant beeldscherm.

Tevens kun je net als bij plaatjes in cellen de code op één lijn zetten. Dit om een betere gesloten weergave te krijgen.
In dit geval van de list:
<li id="huidig"><a href="Home.html">Home</a></li><li><a href="Personeel.html">Personeel</a></li><li><a etcetera....

 

[James007]

Aaahhh ik dacht al waar blijft Peter?

Je kan de padding wel naar 0px zetten overal, maar dan blijven mijn knopjes niet even breed, en dat wil ik wel.
Het probleem is dus dat de padding niet de kleur van de a mee overneemt. De padding kan überhaupt geen kleur hebben zeker?

James

 

[peter vazed]

Moi? Je suis ici ..........
Stap voor stap:
http://www.webreference.com/programming/css_style2/index.html

http://www.ssi-developer.net/css/menu-rollover-effect.shtml

Een css menu vereist denkwerk.
En let op: het moet in IE én in FF werken. Dus testen.
Met de eerste link kom je al verder denk ik.

 

[Egel]

#navigatie #huidig { background: #00C;}

...</li><li>... zorgt er idd voor dat Ie er geen spatie (> extra regel) tussen zet.


Vr.Gr. Egel.

 

[James007]

Ik heb het voorbeeld van die eerste link gereconstrueerd en ga zodadelijk proberen om mijn stijlblad ook aan te passen.

http://www.softwareking.frihost.net/overigen/lijst2.html#nogo

James

 

[James007]

Resultaat:
http://www.softwareking.frihost.net/overigen/nieuwelijst/Home.html

Dank aan beiden

[topic solved]

James

 

[peter vazed]

Mooi geworden :thumb:
Nuttig gebruik van de hover.

 

[James007]

spijtiggenoeg zie ik in Internet Explorer dat de infoblokjes niet allemaal gelijk staan/beginnen. damn...
De afstand wordt blijkbaar berekend vanaf het woord in de link-vakjes. Is het woord langer, dan begint het infovakje vroeger....

Internet Explorer moet altijd lastig doen.... tegenover andere browsers.

James

 

[peter vazed]

Je text align niet center zetten.

#navigatie a, #navigatie a:visited {
text-decoration: none;
color: #FFF;
font-family: arial, times;
font-weight: bold;
display: block;
position: relative;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
text-align:left;
text-decoration:none;
padding:0.25em;
}