Hoi Vincent,
... <div id="logo"> en <div id="robo"> verwijderen (en dan gewoon met css zorgen dat de height van de header goed staat ingesteld), toch?
Correct! :thumb:
=====
... Moet ik het dan in css robo-logo.png als een achtergrondplaatje van de <div id="container"> gebruiken?
Ook correct!
=====
... Alleen hoe krijg ik de titel dan gesplitst in grijs en groene tekst? Kan ik dat ook in css doen, of is daar een andere truc voor?
Ja, met css in combinatie met html: wat groen moet worden zet je in de html tussen een <span></span> (een "overspanning" dus), en via css vertel je dat alle <span>'s in een kop-tag <h1> de kleur groen moeten krijgen:
Code:
...
h1 span {
color: green;
}
Zodra de span is afgelopen, wordt het weer de gewone kleur van de <h1>.
=====
De speciale truc bewaar ik nog even... Eerst maar eens kijken of ik het zonder kan oplossen... Of is een en-en aanpak eigenlijk het beste?
Dat zal blijken!
Nu was ik ook wel nieuwsgierig wat er zou gaan gebeuren in Internet Explorer als je alles zou doen volgens mijn tips.
En ... ik kwam uit op een en-en
-en-en benadering, want ook van de 6 afbeeldingen voor het menu plus hun 6 varianten voor de actuele pagina kan samen 1 image gemaakt worden:
robo-sprite.png; draagt weer bij tot een hogere pagina-snelheid.
Die gaat er in als
koek achtergrond-afbeelding van de menu-links, en met css wordt steeds het goede gedeelte van de combinatie op zijn plaats gesjord.
Omdat de afbeelding er toch is, kan in één moeite door ook met css geregeld worden dat een knop verandert als je er met de muis overheen gaat. Dan ziet de bezoeker/ster meteen resultaat van zijn/haar gemuis.
Door aan elke pagina in de <body>-tag verder een class toe te voegen met de naam van de id die die pagina in het menu-lijstje heeft, wordt er automatisch voor gezorgd dat de actuele pagina het groene driehoekje krijgt. Er kan dan voor elke pagina exact hetzelfde menu gebruikt worden. Css is wonderschoon!
De tabel voor het uitlijnen van het gecentreerde adresblok op de home-pagina kan verdwijnen, als je daarvoor een schrijfmachine-letter gebruikt met vaste letterbreedte, zoals de Courier. Het rechterdeel van elke regel kan dan gewoon met spaties op z'n plek gebracht worden.
Wat ook nog speelt, is dat de #footer nu wel onderaan staat, maar dat het mis zou gaan bij een pagina waar veel tekst op komt, of als de bezoeker een niet zo hoog venster heeft:
Daar valt van af te komen door het recept te volgen dat
hier staat: de hele pagina-inhoud komt in een super-container, en de #footer staat daar los van. Alweer: wat css-toestanden doen de rest.
De copyright-afbeelding in de #footer kan ook gemist worden (wéér 1 minder!), als je daarvan gewone tekst maakt die "drijvend" gemaakt is met {float: left;}. De rest van de #footer kan dan los daarvan rechts uitgelijnd worden op dezelfde hoogte.
- Zo houden we dus maar 3 images over van de oorspronkelijke 9 (groene bg, logo/header en menu), naast het favicon.
En bij een nieuw geopende pagina op de site hoeft er niets extra's aan images gedownload te worden.
Als ook nog de html geschoffeld wordt tot valid html, laat Internet Explorer al bijna geen flits meer zien: soms helemaal niet, en soms heel erg kort, vanwege de groene achtergrondkleur die over wit weer groen moet worden. Maar daarvoor kunnen we dan de laatste
en gebruiken: de IE-pagina overgang, die er met 1 extra regeltje in de html in kan komen.
=====
Al met al heb ik het volgende model gebakken:
- Test: robo-nw.htm
- De css zit (voorlopig) allemaal in de pagina zelf, met her & der wat toelichting.
- Alleen de 3 bovenste menu-links gaan ergens naar toe.
- Onder "banden brengen" zit een identieke pagina, maar nu met heel weinig tekst.
- Onder "banden halen" zit een pagina met juist heel veel tekst.
Als je dan als allereerste regel (dus nog vóór het Doctype) de php-regel toevoegt:
HTML:
<?php header("Content-type: text/html; charset=utf-8"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
en de pagina-extensie verandert van
.htm naar
.php, dan komt de pagina niet alleen heelhuids door de html- en css-validator, maar scoort deze ook 47/47 op de Webrichtlijnen Quickscan, die strenger is in de kwaliteitseisen.
Met vriendelijke groet,
CSShunter
