vraagje layhout css

[csshunter]

Hint:
De breedte-berekening is gebaseerd op randjes tussen de #navigatie li. Wat zou er moeten gebeuren als je de randjes weglaat?

 

[webdev]

owja natuurlijk haha! maar eersttoen ik nog het oude had, was er nog steeds ong. 1pixel fout. terwijl ik nog die border had!

 

[webdev]

alleen hoe kan ik dat menu achtergrond plaatje centreren?

 

[csshunter]

We gaan in een kringetje draaien! :d Zie de links in nummertjes #27 en #33 hierboven.
Als je daar niet genoeg aan hebt kan je nog de css-specificatie raadplegen, en zoeken naar "background-position". Daar staat alles in de meest uitgebreide vorm.

 

[webdev]

wat is het verschil als ik dingen in #navigatie li of in #navigatie a ?

 

[csshunter]

Voor sommige dingen maakt het niet uit, bv. bij een margin voor een horizontaal menulijstje:

#navigatie li {
   margin: 0 10px;
   padding: 0;
   }
#navigatie a {
   margin: 0;
   padding: 0;
   }

komt meestal op hetzelfde neer als:

#navigatie li {
   margin: 0;
   padding: 0;
   }
#navigatie a {
   margin: 0 10px;
   padding: 0;
   }

In beide gevallen is de afstand tussen de list-items 20px (10px aan de rechterkant van het linker item, en 10px aan de linkerkant van het rechter-item). Binnen die afstand kan je niet op een link klikken.

Maar bij padding (opvulling binnen een element) maakt het wel uit.

#navigatie li {
   margin: 0;
   padding: 0 10px;
   }
#navigatie a {
   margin: 0;
   padding: 0;
   }

geeft ook een afstand van 20px tussen de items. Omdat de opvulling in de <li>'s zit, is de ruimte tussen de items ook hier niet aanklikbaar: de <a>'s zitten binnen die ruimte.
Als je neemt:

#navigatie li {
   margin: 0;
   padding: 0;
   }
#navigatie a {
   margin: 0;
   padding: 0 10px;
   }

zit er optisch geen verschil in afstand tussen de items. Maar nu heeft de <a> de padding, en is dus de hele afstand tussen de items aanklikbaar (tot op de helft wordt het linker-item klikbaar, vanaf de helft van de tussenruimte wordt het rechter-item klikbaar).
Probeer maar met een background-kleurtje voor de <a>.

 

[webdev]

oke bedankt voor de uitleg!!!
ik snapte nog steeds niet hoe ik verticaal kon centreren, maar las iets op internet over line height en heb dat geprobeerd! en dat werkte! maar nu heb ik nog een vraag; want als ik die ps achtergrond als achtergrond doe bij dat menu, ik ik wil die transparant maken kan ik dat doen met

filter : alpha(opacity=60);
    opacity : 0.6;

maar dan wordt de tekst keur ook transparant, maar ik kan ik alleen de background transparant maken maar niet de tekst?