Had ook niet anders van je verwacht
Toe maar! :d
O.k., daar gaan we. Ik pak meteen mijn belofte:
Zal ik later op terug komen.
weer op over tabelloos css-en, uit
de draad van een tijdje terug.
Maar wat ik allemaal niet aan ratatouille tegenkwam in de broncode van de huidige pagina! :shocked:
Het bulkt b.v. van het javascript voor de uitklapmenu's, wat het niet erg overzichtelijk maakt. De structuur van de pagina + bijbehorende css-opmaak is ook niet zodanig, dat je er makkelijk aanpassingen op kunt aanbrengen. En er zijn ook een
flink zwikkie (49) html-errors op de pagina verdwaald, die eerst gerepareerd zouden moeten worden...
Dan is het eenvoudiger om met een schone lei te beginnen, en systematisch de pagina-opzet opnieuw te ontwikkelen. Het betere doka-werk in feite: als we naar buiten komen, moet er iets moois te zien zijn.
Mijn streven:
- géén javascript,
- géén tabellen,
- zo snel mogelijke pagina's (want surfers zijn puur ongeduldig
),
- geen scrolbarren behalve de normale browser-scrollbar voor verticaal scrollen,
- pagina's gecentreerd in alle resoluties,
- alvast zoveel mogelijk rekening houden met latere opsplitsing in recyclebare php-fragmenten.
- en valid xhtml strict + valid css.
Om met het laatste te beginnen: in XHTML mogen tags niet met hoofdletters erin geschreven worden (bv. <META ... />). Het moet dus <meta ... /> enz. zijn. Hetzelfde geldt voor de aanduiding van eigenschappen: <meta Name="ABCD" ... /> mag dus ook niet, dat moet worden: <meta name="ABCD" .../>. De waarden van de eigenschappen die binnen de aanhalingstekens staan, mogen echter wel hoofdletters bevatten; dus het "ABCD" wordt wel goedgekeurd. Kleine letters en gemengde letters als value zijn ook goed.
Eigenlijk ga ik een vergelijkbaar recept volgen als
dit; en tegelijkertijd
deze goed in de gaten houden. Kijken waar het toe leidt!
Het eerste resultaat:
Een mooie kale pagina dus, maar het centreren is alvast gelukt. Als we geen rare dingen uithalen en alles netjes binnen de <body>-borders zetten, kan dat niet meer stuk.
Tweede stap: we gaan meteen iets raars uithalen.

Het "spiegelportret" aan de rechterkant moet buiten de gewone gecentreerde inhoud komen. Dat kan door deze afbeelding een absolute positie te geven, d.w.z. niet absoluut t.o.v. het punt (0,0) op het scherm - dan zou het niet bij alle resoluties goed gaan -, maar absoluut t.o.v. de rest van de inhoud (en meescrollend met de background). Dus t.o.v. punt (0,0) van zijn "parent element", de <body>; en dat kan gerealiseerd worden door opgave van de margin-left en margin-top:
Voorlopig kunnen we nu weer normaal gaan doen: het invoegen van de ingrediënten voor de header.
Er is alvast plek gereserveerd voor de tab-menu tabjes.
De bediening gaan we niet met javascript doen, maar met css-hovers. En door gebruik te maken van een zogenaamd "css-sprite" (gecombineerd img, waarvan steeds een deel gebruikt wordt) hoeft er ook geen (javascript-)preload van de images voor de verschillende hover-statussen plaats te vinden. Dit werkt razendsnel.
Maar dat komt de volgende ronde aan de beurt.
Voor nu nog even een discussiepunt:
dagelijks wisselende header?
Bij mij persoonlijk werkt dit als volgt:
- Na mijn eerste bezoek aan een site blijft er in mijn associatievelden een soort beeld van de pagina als totaal hangen. Daarin zijn logo en header beeldbepalende en identiteitsverschaffende elementen.
- Kom ik de volgende dag terug op die site, en staat er opeens een andere header op de homepage, dan put ik kennelijk uit mijn onderbewustzijn: want binnen een fractie van een seconde denk ik "verhip, dat is 'm niet!", op de voet gevolgd door: "eh, of wel?".
- De volgende tellen kijk ik naar het webadres en/of de tekst van de site, om me ervan te overtuigen dat ik toch echt goed zit.
- Dat hindert me ("hè, waarom moet dat nou zo nodig?"), want het scheelt me tijd om verder te gaan waar ik mee bezig was: iets op de site zoeken die ik zo de moeite waard vond om terug te komen!
Kortom, ik weet niet of het zo'n goed idee is om elke dag een ander plaatje in de header te zetten. Je zou het bv. maandelijks kunnen doen, dan kunnen in elk geval de snelle terugkeerders niet in verwarring komen. Of helemaal niet wisselen, en gewoon één hele mooie uitzoeken. Als het goed is, moet die in combi met de rest van de homepage genoeg prikkelen om meer foto's te willen zien: dus de site gaan verkennen op zoek naar wat er nog meer aan moois is.
Ook zijn er pagina's genoeg om op elke pagina een ander header-img te gebruiken: dat kan ook, en in mijn gevoel wint de site daarmee.
Tot zover deze opwellende gedachten!
Wordt vervolgd:
met vriendelijke groet,
CSShunter
PS: de theorie van de css-sprites staat in dit korte
artikeltje. Als je het weet: heel eenvoudig! Meer over het rangeren met background-images staat
hier.