Hoi Dominique,
Er zijn 2 methoden om een site zo veel mogelijk te laten passen op elk beeldscherm:
- Een zogenaamde "liquid layout" gebruiken, waarbij alle breedten in de opmaak geen pixel-maat hebben, maar zijn vastgelegd in procenten van de breedte van het beeldscherm. Een voorbeeld is deze pagina hier. Om hierbij ook de achtergrond-figuren mooi met de breedte te laten veranderen, is best een klusje.
- Makkelijker is vaak om van een vaste breedte uit te gaan, en dan de hele site te centreren. Past ie er dan niet op, dan begint alles altijd aan de linkerkant (en komt er eventueel aan de onderkant een scrollbalk om de rechter-spullen allemaal te kunnen zien).
Om mezelf te beschermen, zet ik mijn beeldscherm bij het ontwerpen van een site altijd op 1024x768px. Als de site het daarop doet, gaat het automatisch goed op grotere resoluties. Het formaat 1024x768px wordt nog redelijk veel gebruikt, en 800x600px nauwelijks meer (maar kan altijd via de scrollbar bekeken worden).
Wat het lastig maakt, is als je de layout maakt met behulp van tabellen. Die kunnen alle kanten op wiebelen zonder dat je alles goed in de hand hebt. Vooral als je tabel-opmaak gaat mixen met css-opmaak, kan het aardig fout gaan. En tabellen maken ook de html "prettig onoverzichtelijk".
Hier een rijtje tips:
- Weg met de tabellen! Op mars naar css!
- De breedte kan het best vastgezet worden op zo'n 980px, dan heb je nog ruimte voor de rechter-scrollbalk en wat speling aan de zijkanten. Dat oogt meestal mooier dan alles precies tegen de zijkanten aan. - Hier moet dus de header en het kader op aangepast worden.
- Ook het menu mag dus niet breder zijn. Nu is je menu opgebouwd uit een "stijve afbeelding", waarbinnen de links als tekst-links zijn neergezet. Dat gaat goed als de bezoeker de standaard-lettergroote heeft aan staan, maar het kan fout gaan als dat niet zo is. Dan lopen de tekst-links de plaatjes uit:
Hierbij helpt het niet om je font-size in vaste px op te geven: goede browsers trekken zich daar (gelukkig) niets van aan - anders zouden mensen die het nodig hebben, de voor hen te kleine lettertjes nooit kunnen vergroten!
Je kunt het menu ook helemaal als plaatje maken, inclusief de letters (die zijn daar in dit geval groot genoeg voor). Dan heb je van eventuele vergroting van letters door de bezoeker geen last. Dit heeft ook als voordeel, dat je een "dubbel-plaatje" van het menu kunt maken, waarbij de bovenste helft het normale menu is, en je het onderste deel kan gebruiken als "hover-plaatje" voor een menu-item waar je overheen muist.
Ook hiervoor kun je css gebruiken: dat rangeert dan telkens het goede gedeelte van de onderbalk op de plek van het menu-item. Tegelijkertijd kan de actuele pagina ook de andere kleur krijgen, dan weet je meteen waar je zit in het menu.
- Het kadertje om de inhoud heen is ook verraderlijk. Dit is nu een gefixeerde afbeelding. Maar bij font-vergroting (door de bezoeker) en bij een grotere pagina wandelt de tekst het kadertje uit.
- De oplossing is om het kader te splitsen: een afbeelding met de ronde hoekjes als bovenstuk, dat er altijd opgezet wordt (met de goede breedte), een middenstuk dat rekbaar is (zich verticaal herhalende afbeelding), en een onderstuk (weer een eenmalige afbeelding).
- Het middenstuk wordt gekoppeld aan de #content-wrapper (<div>) waar alle tekst in zit, dan past de hoogte zich altijd automatisch aan. Het bovenstuk en het onderstuk worden daar elk in een laagje bovenop gezet, zodat de ronde hoekjes de rechtopstaande lijnen van het middendeel overlappen.
Dan zie ik dat je regelmatig transparante png's gebruikt om afbeeldingen mooi over elkaar heen te zetten. Dat heeft het nadeel dat Internet Explorer 6 (er zijn nog wat volksstammetjes die die gebruiken
) er rare grijze vlakjes bij maakt, wat het hele effect verloren laat gaan:
Dit is op zich wel te verhelpen (door er wat extra javascript tegenaan te gooien), maar het kan net zo goed zonder die transparante png's. De achtergrond staat immers altijd links-rechts op dezelfde plaats. En om de kader-afbeeldingen kleiner in kB's te maken, kunnen daar gif'jes met transparantie van gemaakt worden (die kan IE6 wel aan).
Als alles met css-gebruik voor de opmaak wordt gemaakt, hou je prachtige "kale" html over, die erg overzichtelijk is, bijvoorbeeld:
HTML:
<body id="home">
<div id="header"><!-- ! --></div>
<div id="menu">
<ul>
<li><a class="home" href="home.html"></a></li>
<li><a class="nieuws" href="nieuws.htm"></a></li>
<li><a class="presentatie" href="presentatie.htm"></a></li>
<li><a class="collectie" href="collectie.htm"></a></li>
<li><a class="openingsuren" href="openingsuren.htm"></a></li>
<li class="last"><a class="contact" href="contact.html"></a></li>
</ul>
</div>
<div id="content-wrapper">
<div id="content-top"><!-- ! --></div>
<div id="content">
<h1>Kidz & Blitz</h1>
<div class="kolom">
<h2>Welkom!</h2>
<p>Leuk dat je even binnenspringt op onze site.</p>
<p>Kom vrijblijvend eens langs in
<a href="http://maps.google.be/maps?q=olen+be">Olen</a> om in
een modern en vrolijk kader kennis te maken met de uiteenlopende
collecties voor jullie kids van 2-12 jaar.</p>
<h2>Nieuws!</h2>
<p>Op 27, 28 en 29 augustus 2010 gaat onze winkel open!<br>
Kom zeker eens langs op dit feestelijk openingsweekend!</p>
<p>Voor meer info zie de pagina "<a href="nieuws.htm">Nieuws</a>".</p>
</div>
</div>
</div>
<div id="footer">
Realisatie door <a href="http://www.dm-design.be">www.dm-design.be</a> |
<a href="mailto:info@dm-design.be">info@dm-design.be</a>
</div>
</body>
Ter illustratie heb ik een modelletje van de css gemaakt (met aangepaste afbeeldingen).
Met vriendelijke groet,
CSShunter
[edit]Als je in Firefox in het menu "Beeld > Zoomen > Alleen tekst zoomen" instelt, kan je met de Control-toets ingedrukt het muiswieltje draaien om de lettergrootte te veranderen.
Kijk wat er dan met het kadertje gebeurt!
PS:
- "Kidz & Blitz kende ik nog niet, waar zitten ze?" - Vermeld op de welkom-pagina altijd de plaatsnaam!
- "Is het wel dit jaar, of is het een oude webpagina?" - Vermeld bij een datum altijd het jaartal!
[/edit]
