Tweede vervolg
* #nav: float: center bestaan niet, weggehaald
* #content_container stond 100%% (twee keer procent)
* #nav ul: background-color: none: none is geen kleur. Dat is transparent, maar de hele regel kan weg
* margin: 0 heb ik op allerlei plaatsen weggehaald. Dat is standaard en meestal overbodig.
* width: 100% is meestal standaard in een blok-element, dus ook vaak verwijderd. (Een blok-element is het makkelijkst te herkennen aan dat het op een nieuwe regel begint, zoals een <div> of <p>)
* text-decoration: none op tig plaatsen weggehaald. Hoeft alleen in links (<a>), op andere plaatsen werkt het niet.
* De height: 100% bij body, html leverde in combinatie met de footer een verticale scrollbalk op. Foeilelijk en niet nodig. Dat komt omdat de footer iets uitsteekt buiten de body. En als je de body dan 100% maakt, past de footer nét niet meer binnen het venster. Bovendien viel 'n klein stukje van de tekst weg (de onderste lussen van de 'g' en zo).
Ik heb dit opgelost door bij #footer_container toe te voegen:
position: fixed;
bottom: 0;
fixed wil zeggen: vaststaan ten opzichte van het venster van de browser, dus scrolt ook niet mee.
bottom: 0 wil zeggen: op 0 px vanaf de onderkant, dus onderaan het venster
De hoogte binnen de footer heb ik ook wat aangepast, want dat kwam niet helemaal lekker uit (bij #footer_container, #footer en #footer_linxs)
Belangrijk: bij #content moet worden toegevoegd: margin-bottom: 45px
Die fixed footer staat gewoon overal asociaal overheen. Dus ook over het onderste deel van de inhoud van #content, als er meer tekst en zo in staat. Door een marge aan de onderkant te geven, staat de footer over een leeg stuk heen, en dat is niet erg.
* Bij #content_container moet width: 100% weg. Dit maakt deze div 100% breed ten opzichte van het venster van de browser, dus de volle breedte. Maar links en rechts komt er nog 27% in de breedte bij van de linker- en rechterkolom. De totale breedte wordt dan 154%. Dat past niet en levert een horizontale scrollbalk op, die overbodig is.
* margin: 0 0 0 0 mag ook als margin: 0. Is overzichtelijker
En margin-top: 0; margin-bottom: 0; enz. mag ook als margin: 0
* De linker- en rechterkolom een breedte van 27% is dus prima. Dan past de breedte zich aan aan de breedte van het venster. En de middelste kolom een marge links en rechts van 27% is ook prima, want dus staat nu dus altijd netjes tussen de linker- en rechterkolom in. Ongeacht hoe breed het scherm is en zo.
* text-align: left weggehaald op tig plaatsen. Is standaard, dus meestal overbodig.
* Zag de vraag toevallig in de css: bij padding is px prima. Meestal maakt het bij padding niet zo heel veel uit als de verhoudingen iets veranderen bij 'n andere lettergrootte of zo. Hooguit bij 'n héél grote letter.
* Ik zou de font-family verhuizen van #nav naar body. Dan geldt die voor de hele pagina, behalve de delen die eventueel anders moeten.
* #nav zelfde breedte gegeven als content_container met behulp van margin: 0 27% (als je geen waarde voor onder en links opgeeft, krijgen die dezelfde waarde als boven en rechts, dus eigenlijk staat hier margin: 0 27% 0 27%
Nu #nav altijd exact boven de middelste kolom, ongeacht de breedte van het venster. Voor dit soort dingen zijn procenten dus prima.
* min-height bij #links_container weggehaald. Werkt alleen in Opera en geeft daarin dan ook nog problemen.
* #links_container en #rechts_container met behulp van margin-top: -10px (negatief) 10 px omhoog gezet. De height bij #nav li die voor de openingen zorgt in het menu, duwt de twee kolommen ook iets omlaag, en dit corrigeert het.
* marge bij #nav a weggehaald, omdat de links in het hoofdmenu daardoor niet goed te verdelen waren
* Menu verdeeld: elke ingang krijgt 16,66%. Procenten is altijd ten opzichte van de ouder. De menu-ingangen zitten in een <li>, en de ouder daarvan is de <ul>. Oftewel: de menu-ingangen zijn nu over zes gelijke stukken neergezet in de <ul> met het hoofdmenu.
Alleen onstaat er dan een probleem: niet alle woorden passen, zeker niet op iets kleinere schermen. Er is gewoon geen ruimte. Een aantal mogelijkheden, de keuze is aan jou:
* Je vindt dat niet erg (kan ik me niet voorstellen, maar goed)
* Kleinere letter. Die wordt dan wel érg klein
* Kortere woorden (beste oplossing!) Maar dan moet je wel kortere woorden bedenken.
* Elke ingang een andere breedte geven. Alle zes de <li>'s uit het hoofdmenu een eigen id geven, en dan bij de eerste met 'Home' bijvoorbeeld width: 12%; bij 'Arrangementen' width: 20%. Zoiets. Dit is ook 'n goede oplossing, maar vereist enig gepuzzel. Hoewel ik 'n symmetrische verdeling persoonlijk het mooiste vindt, maar dat is een kwestie van smaak.
* De css voor het menu was ernstig mishandeld
De correcties:
#nav ul ul {position: absolute; display: none;}
Elke <ul> die binnen een andere <ul> zit, die weer binnen #nav zit. Dit zijn dus de <ul>'s waarbinnen de submenu's zitten, één <ul> voor elk submenu.
Normaal genomen worden ze verborgen met display: none;
position: absolute zorgt ervoor dat ze óver de content heen komen te staan. Anders zouden ze bij openen de hele pagina omlaag schuiven.
#nav ul ul li {display: block; width: 100%;}
De ingangen binnen een <ul> die weer binnen een <ul> binnen #nav ligt. Aan deze voorwaarde voldoen alleen de <li>'s van de submenu's, want alleen die liggen binnen twéé <ul>'.s
Elders heb ik alle <li>'s naar links gefloat, waardoor ze niet onder elkaar, maar naast elkaar komen te staan. Maar de <li>'s van de submenu's moeten wel onder elkaar. Daar zorgt display: block voor. (Een blok-element begint op 'n nieuwe regel.)
Ik had ook een breedte van 16.66% opgegeven. Dat was leuk voor het hoofdmenu, maar ook deze <li>'s krijgen die breedte. En omdat de <ul>'s van de submenu's smal zijn, is 16.66 % daarvan héél smal. Ik geef ze 'n breedte van 100%. In procenten, dat is ten opzichte van de ouder, dus even breed als de ouder. Dat is de <ul> van het submenu. En die is weer even breed als de <li> uit het hoofdmenu. Oftewel: de submenu's zijn nu even breed als de knoppen in het hoofdmenu.
#nav li:hover ul {display:block;} Maak zichtbaar
Als ik over een <li> hover, maak dan de daarin zittende <ul> zichtbaar. Als ik over een tekst in het hoofdmenu hover, maak dan het bijbehorende submenu zichtbaar.
* Internet Explorer 7 heeft wat afwijkingen in de marge. Geen belangrijke dingen. De ondersteuning voor dit onding wordt ook door mij langzaamaan afgebouwd, dus aan dit soort onbelangrijke verschillen ga ik geen tijd meer verspillen. Er zijn wel twee belangrijke dingen die gecorrigeerd moeten worden. Daarvoor is voor IE 7 'n eigen kleine stylesheet toegevoegd. De koppeling staat al in de <head>, werkt verder precies hetzelfde als 'n normale.
Het stukje met
Code: Selecteer alles
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie-7.css">
<![endif]-->
is een toverspreuk die zorgt dat alleen IE 7 dit ziet.
#nav li {height: 30px;}
De openingen tussen de ingangen weggehaald, want in IE 7 sluit het menu als de cursor op zo'n opening komt, en dat is 'n beetje sadistisch. Dit ziet er ook goed uit en het werkt.
#nav ul ul li {width: 100px;}
Anders maakt IE 7 de submenu's niet breder dan de tekst die erin staat, en dat oogt heel lelijk.
Nou, dat was het. Ik hoor het wel als er iets nog niet bevalt, of als je nog vragen hebt.
Ik neem trouwens aan dat niet alles gelijk duidelijk is. Maar als je iets niet begrijpt en bijvoorbeeld 10 px even verandert in 20 px, zie je vaak gelijk wat het effect is.
Veel leesplezier. (Hmmm, hoop ik
)