Verders!
Stap 15: logo positioneren
We gaan het logo er maar eens in zetten: links laten drijven, zodat de ruimte rechts ervan benut kan worden. Als er in de html een <h1> bij gezet wordt, kan die met css weer onzichtbaar gemaakt worden: goed voor text-browsers en voor Google! Want het woord "
-weggehaald-" staat wel in de figuur, maar dat kan de Google-robot niet lezen.
Het logo krijgt een link naar de homepage, de afbeelding mag geen randje krijgen, en als je al op de homepage bent, moet je geen handje zien. Dat wordt dus:
HTML:
<div id="logo">
<h1><a href="/" title="Home"><img src="images/puravida_logo.png"
width="150" height="185" alt="" /><span>-weggehaald-, praktijk voor
-weggehaald-</span></a>
</h1>
</div>
en:
Code:
#logo {
float: left;
width: 150px;
margin-top: 50px;
padding-left: 65px; /* geen margin-left i.v.m IE6 double margin bug */
}
h1 {
margin: 0; /* geen onverwachte afstanden boven/beneden via de hidden h1 */
padding: 0; /* idem */
}
a img {
border: 0;
}
#logo span {
position: absolute;
left: 0;
margin-left: -9999px;
}
#logo a {
outline: 0;
}
#home #logo a {
cursor: default;
}
Verder zal het logo iets aangepast moeten worden. De tekst "
-weggehaald-" is bij verkleining van het logo wel scherp zichtbaar voor drukwerk, maar niet voor vertoning op scherm. Oorzaak: de resolutie op scherm is in pixels, en die zijn veel groter dan de 300 of 600 dots per inch die voor de details in drukwerk kunnen zorgen. Vandaar de concessie om de originele verhoudingen iets te wijzigen: een wat groter lettertype voor de BT-tekst:
Stap 16: het inhoud-vak
De <div> voor het inhoud-vak hoeft niet te drijven, want komt vanzelf naast het logo te staan. Met een linkermarge van 280px blijft het vak recht naar beneden lopen, ook als de hoogte van het logo voorbij is. Tegelijkertijd kan het begin van de menu-strook op de juiste plek komen:
Code:
#menu ul {
...
margin: 0 20px 0 262px; /* voorlopige linker-margin van 200px is gecorrigeerd */
...
}
#inhoud {
margin: 120px 20px 20px 280px;
height: 400px; /* tijdelijk; de tijdelijke hoogte van de body kan nu geschrapt worden */
border: 1px dotted fuchsia;
}
Stap 17: inhoud-vak opsplitsen
De inhoud kan nu opgedeeld worden in een linkerkolom en een rechterkolom:
HTML:
<div id="inhoud">
<div id="linkerkolom">
(linkerkolom)
</div>
<div id="rechterkolom">
(rechterkolom)
</div>
</div>
En de linkerkolom laten we links drijven:
Code:
#linkerkolom {
float: left;
width: 300px;
height: 400px; /* tijdelijk; de tijdelijke hoogte van de #inhoud kan nu geschrapt worden */
border: 1px dotted blue;
}
Stap 18: met clear geen geklier!
Hola! :shocked:
Opeens is in fase 17 de witte <body> onder de linkerkolom verdwenen, en staat daar nu de achtergrond-afbeelding van de pagina doorheen...
How come? - Een float drijft, en staat daarmee los van de normale stroom van de indeling (de "normal flow"). In dit geval houdt de normale stroom op onder het woord "(rechterkolom)", en daar eindigt dus ook de witte body.
De remedie is om onder de float een <div> neer te zetten met de "clear" eigenschap. D.w.z. het erna volgende element niet naast de float zetten (als daar nog ruimte over is), maar er onder. Zo'n clearing div hoeft zelf geen "echte hoogte" te hebben, dan gaat het ook goed:
HTML:
<div id="inhoud">
<div id="linkerkolom">
(linkerkolom)
</div>
<div id="rechterkolom">
(rechterkolom)
</div>
<div class="clearB"><!-- hoogste kolom wint --></div>
</div>
Met:
Code:
.clearB {
clear: both;
height: 1px;
margin-bottom: -1px;
}
Gelukkig:
Stap 19: de rechterkolom van de inhoud
De rechterkolom kan nu naar rechts gefloat worden, tegen de rechterrand van de #inhoud.
Code:
#rechterkolom {
float: right;
width: 300px;
height: 250px; /* tijdelijk */
border: 1px dotted green;
}
Stap 19a: de rechterkolom het hoogst
Even proberen wat er gebeurt als de rechterkolom hoger is dan de linkerkolom. Ja, alles past zich (dankzij de clearB) keurig aan aan de hoeveelheid inhoud in de hoogste kolom van de twee.
Stap 20: footertje erbij
De laatste ontwerp-stap is nu kinderspel:
Code:
#footer {
margin: 0 20px 0 280px; /* voor IE6: padding-bottom in de body ipv margin-bottom hier! */
border: 1px dotted green;
}
=============
Zo, hiermee hebben we je oorspronkelijke vraag wel zo ongeveer opgelost
:
Hoe kan het dat wanneer je de positie van een laag in beide pagina's op dezelfde hoogte insteld, de browser de ene pagina anders weergeeft dan de andere.
de afbeelding wordt hoger weergegeven in de browser.
Weet iemand hier een oplossing voor?
We hebben nu gemaakt:
- een indelings-sjabloon voor de html (met de verschillende <div>-secties), en
- met css de bijpassende opmaak gemaakt, die geheel van de html gescheiden is,
- terwijl helemaal geen javascript nodig is voor de functionaliteit van de pagina,
- en er zegge en schrijve maar 3 afbeeldingen gebruikt worden (achtergrond, menu en logo) met een totale zwaarte van 47kB -dat waren er 15 van tezamen > 70kB, zodat de pagina aanzienlijk in snelheid heeft gewonnen (elk op te vragen img geeft ook extra vertraging).
Daar kan geen Dreamweaver tegenop!
=============
De finishing touch
Nu kan de css die we in de <head> hebben staan verhuisd worden naar een mooi los stylesheet: dat kan dan ook voor alle andere pagina's gebruikt worden, en geen enkele pagina kan in de verleiding komen iets hoger of lager te zetten (want ze moeten allemaal dezelfde css volgen).
Het stylesheet is precies de css die we al hebben, maar dan zonder de <style> en </style> begin- en eind-tag. In feite dus een kaal text-bestand, dat de uitgang
.css krijgt:
In de <head> van de html van elke pagina komt nu een link naar de vindplaats van het stylesheet te staan, bv.:
HTML:
...
<link rel="stylesheet" type="text/css" href="stylesheets/puravida.css" />
</head>
...
Hiermee is de overblijvende html in de <body> heerlijk helder geworden: je kiepert de tekst er zo in en het gaat vanzelf goed.
Daarmee resteert het leukere werk: puntjes op de i in de css, en vullen die hap!
Dat gaat dus beresnel, want als je één pagina hebt, kopieer je die even om 'm te vullen met andere inhoud (en op te slaan met nieuwe naam, dat wel).
Showcase
Zo heb ik even 3 pagina's in elkaar gedraaid (Home, pv en pag1) met hetzelfde stylesheet. Via het menu kan je van de een naar de ander gaan (de andere menu-links werken niet). Zie hier:
- Proefpagina's: www.developerscorner.nl/csshunter/tests/pv-home.htm
- Valid html en css.
- Komt 47/47 door de Quickscan van het Kwaliteitsmodel Webrichtlijnen, als er even een php-pagina van wordt gemaakt met een utf-8 karakterset in de php-header (nu: 46/47).
- Gecentreerd v/a 1024*768px, resolutie-bestendig, lettergrootes kunnen door bezoeker worden aangepast, werkt in Firefox, Chrome, Safari, Internet Explorer 6, 7, 8. *)
Dat was dan het laatste deel van de serie.
Succes!
CSShunter
_______________
*) IE8 lijkt een ouderwetse "peekaboo" te hebben (soms een flits als je over het menu hovert), maar ik bekijk IE8 niet lokaal maar via een remote server, dus daar zou het ook aan kunnen liggen. Doet IE8 het rechtstreeks wel goed?
