Hoi davidkennis,
Je hebt nu in
http://home.kpn.nl/dakab000/index.html een container #alles zitten die wel gecentreerd is, maar ... daarbinnen zitten een aantal <div>'s met een
absolute positie. Absoluut: altijd een vast aantal pixels ten opzicht van de bovenkant en de linkerkant van het scherm.
Die absoluut gepositioneerde containers ontsnappen dan aan het gecentreerde werk: op deze manier kan het nooit lukken om bij alle resoluties de pagina mooi in het midden te krijgen. Daarom gaat het dus mis.
Ik heb ook nog wat andere tips. Hier komen ze (zie steeds de gebruikte broncode in de test-pagina's).
Tip
Zet tijdens het ontwerpen steeds alle css in de <head> van de pagina, dan heb je alles meteen bij de hand (in de code-weergave). Als alles klaar is, kan het een mooi apart stylesheet worden.
Tip
Je zit nu met het centreren in je maag, terwijl de vormgeving van de pagina al een eind op weg is. Dat is veel moeilijker op te lossen dan wanneer je met een schone lei begint.
Daarom: begin bij het begin, werk systematisch van boven naar beneden, en maak steeds in orde wat nog niet klopt als je de pagina test in de browser. Dan kan je later nooit voor verrassingen komen te staan. Zie ook de
Golden Rules of CSS .
Tip
Je achtergrondfiguur "zwart naar blauw achtergrond.png" (
http://home.kpn.nl/dakab000/Images/zwart%20naar%20blauw%20achtergrond.png) is loeigroot: 1920*1024px, en
423kB zwaar. Dat maakt de pagina trager dan nodig is.
- Je kunt volstaan met een verticaal baantje van bv. 100px breed, en dat met css horizontaal laten herhalen. Dan heb je maar 1,25kB nodig (!): daka-bg-nw.png.
- Met SmushIt (probeer deze Firefox add-on of download via deze pagina) kan je de bestandsgrootte vaak omlaag krijgen.
Tip
Gebruik nooit spaties in bestandsnamen en mapnamen. Voor het aanroepen van zulke bestanden moet je eigenlijk de code %20 op de plaats van elke spatie zetten, maar dat maakt de naam erg onoverzichtelijk,
bv.: zwart%20naar%20blauw%20achtergrond.png, en is bron van fouten.
- Beter kan je een streepje of onderstreepje gebruiken om woorden van elkaar los te maken,
bv.: zwart-naar-blauw-achtergrond.png.
Tip
Het laten herhalen gaat als volgt:
HTML:
html {
background: #00668A url(images/daka-bg-nw.png) repeat-x;
}
De #00668A is de kleur helemaal onderaan in het baantje. Mocht de pagina erg hoog worden (bv. als een hele grote resolutie wordt gebruikt), dan wordt die kleur er naadloos onderaan vastgeplakt, en zie je geen verschil.
Tip
Als
DOCTYPE voor de html (de allereerste regel van de html-code) kan je het beste de
Strict variant nemen, die de beste actuele standaard is en de beste cross-browser resultaten geeft (zit al in Test 1).
Tip
Nu pakken we de breedte en het centreren aan. In plaats van de breedte en het centreren aan een <div id="alles">...</div> binnen de <body> op te dragen, kan je dat net zo goed meteen aan de <body> zelf opdragen:
Code:
body {
width: 980px;
margin: 10px auto;
padding: 0;
}
In plaats van 1024px breed moet je wat minder nemen, omdat de breedte van de scrollbar aan de rechterkant er nog van af moet. Anders pas het er op een resolutie van 1024*768px net niet op, en komt er onderaan z'n vervelende horizontale scrollbar.
Tip
Een éénkleurige balk aan de linkerzijkant (en/of rechterzijkant, en/of boven en/of onder) hoef je niet met een image te maken, maar kan met een border-breedte van de <body>. Deze kan zo je zo breed (en/of hoog) maken als je wilt.
Omdat de breedte van borders altijd toegevoegd worden aan de breedte van het element waar het de rand van is, moet hier de breedte van de <body> kleiner gemaakt worden, zodat het samen weer 980px breed is. Of nog wat minder, zodat je op 1024*768px nog goed de verlooptint van de background ernaast kunt zien.
Tip
Je kunt ook met de eigenschap {background: fixed;} de achtergrond vastzetten op het scherm, zodat de background-afbeelding niet mee omhoog scrollt, maar blijft staan terwijl de inhoud erlangs omhoog scrollt.
Tip
Nu komt de splitsing tussen het kop-gedeelte, de <div id="header">, en de inhoud: de <div id="content">. Later moet het menu er nog tussen.
Omdat de #header een doorkijkje is naar de achtergrond-afbeelding, moet de achtergrondkleur van de <body> en nu uit, om die toe te voegen aan de #content.
De foto van het gebouw is eigenlijk een illustratie: dus die kan er makkelijk ingehangen worden als background-image.
Suggestie: de plaats van foto en logo omkeren, want logo's staan meestal linksboven.
Verder:
maak images nooit groter in formaat dan wat op scherm moet komen, maar maak ze precies zo groot. Browsers kunnen ze niet zo mooi verkleinen, en het scheelt ook flink aan kB's die gedownload moeten worden.
Ik zou ook de foto wat minder bovenkant en onderkant geven, dan wordt deze minder overheersend (scheelt ook weer kB's) en ziet de toeschouwer meteen meer van de inhoud; en ook de verticale lijnen van het gebouw even echt verticaal maken.
Dat kan met het gratis ShiftN:
www.shiftn.de.
Tip
Zet het logo er in met de gebruikelijke klik-mogelijkheid om snel naar de homepage te gaan.
En weer: verklein tot het exacte te gebruiken formaat. Het kan hier qua kleuren makkelijk met een transparante gif: dan doen we dat om troubles met oude IE6-gebruikers te vermijden (bij een transparante png is er voor IE6 een png-fix nodig).
Tip
De menu-balk is nu zo:
HTML:
<div id="Menubalk">
<ul id="Menu">
<li><a href="index.html">Welkom</a> <a href="#Nieuws"> Nieuws</a>
<a href="#Producten"> Producten</a> <a href="Contactpagina.html">Contact</a></li>
</ul>
</div>
Je kunt beter de menu-items stuk voor stuk in een <li> zetten, die kunnen dan ook een afstand van elkaar krijgen en apart opgemaakt worden. Omdat er maar één <ul> in de #menu-container zit, hoeft deze geen apart id te krijgen: met de cascade-regels van de css krijgen we de <ul> en de <li>'s van het menu evengoed te pakken:
HTML:
<div id="menu">
<ul>
<li><a href="index.html/">Home</a></li>
<li><a href="nieuws.htm">Nieuws</a></li>
<li><a href="producten.htm">Producten</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</div>
Zonder opmaak zien ze er nog zo uit:
Tip
Eerst zetten we de bullets uit, en bepalen we de afstand totaan de linkerkant. Ook een achtergrond-kleur voor de menubalk erbij.
Tip
Dan zetten we de list-items <li> naast elkaar met {float: left;} en met een rechter-afstand van bv. 25px voor de tussenruimte (voor oudere IE's kan het gevaarlijk zijn om zomaar {float:left} met een margin-left te combineren. Voorkomen is beter dan genezen!
Tip
Hé, het menu is nu uit zijn vakje gekomen, en de #content zit er niet meer onder.
Dat komt door het gebruik van het floaten: daarmee worden de drijvende elementen onttrokken aan de "normal flow" (de normale stroom van neerzetten op de pagina).
- Dit valt te verhelpen door de <ul> een {overflow: hidden;} te geven.
- Meteen doen we er maar een padding--top en padding-bottom van 5px voor de <ul> bij, dan is er wat vrije afstand tot het begin van de #content.
- Test 10: www.developerscorner.nl/csshunter/tests/daka-nw10.htm.
Tip
Nu kunnen de links van het menu opgemaakt worden met een eigen kleur en achtergrondkleur, zodat het knoppen gaan lijken. Het lettertype en het letterformaat was nog niet bepaald, die zetten we erbij in de <body>:
Code:
body {
...
font-family: Arial, Helvetica, sans-serif;
font-size: 100.1%;
}
In de <a>-opmaak kan tegelijk de letterzwaarte op vet gezet worden.
Tip
Nu zijn het nog wel erg magere links/knoppen. Er kan wat meer vlees omheen door ze een padding te geven; maar ook moeten we daar ruimte voor creëren in de <li>'s, door deze een aangepaste padding onder en boven te geven, bv.:
Code:
#menu a {
...
padding: 3px 10px; /* boven en onder 3px, links en rechts 10px */
border: 1px solid #00769F;
}
#menu li {
padding: 4px 0; /* boven en onder hetzelfde als de 3px link-padding boven en onder, plus 1px voor de border van de link */
}
Tip
Resteert voor het menu nog iets moois voor als je eroverheen gaat met de muis. Voor de toegankelijkheid hoort daar ook dezelfde opmaak bij voor de focus-status van een link:
Code:
#menu a:hover,
#menu a:focus {
color: #00769F;
background: #DCEBF0;
}
Tip
Nu kan de #content opgemaakt worden. Ik zou geen knalzwart op knalwit gebruiken, maar bv. zwart op iets gebroken wit (bv. in de serie van de blauwen, maar dan met wat minder verzadiging (meer grijsblauw, tegen het wit aan). Dat geeft een rustiger beeld, en is toch goed leesbaar.
De kopjes zouden in een erg donkere blauwe kleur kunnen, om in de sfeer te blijven.
De
lettergroottes kunnen het beste
niet in px of in pt opgegeven worden, maar
in de "em-eenheid": 1em = 100% van de lettergrootte van het omvattende element.
Maak de groottes ook niet te klein, dat leest onprettig voor mensen met een hoge resolutie.
Tip
Dan hoeft er alleen nog de uitsmijter bij, bv. in een <div id="footer">. De pagina kan gevuld worden, en de tijdelijke hoogte van de #content kan er uit.
En een favicon
erbij voor de herkenbaarheid in de browser-tabbladen maakt 'm wel zo ongeveer bedrijfsklaar.
Al met al hoeft er dus geen enkele {position: absolute;} gebruikt te worden, en is de pagina erg flexibel geworden. Niet alleen gecentreerd bij alle schermformaten, maar ook het door de bezoeker vergroten/verkleinen van de lettergrootte is nu mogelijk geworden. De layout van de pagina past zich automatisch aan.
En door het slimmere gebruik van images is de pagina all-in nu maar 42kB in plaats van 536kB geworden: dat is ruim 12 keer zo snel.
Met vriendelijke groet,
CSShunter
