Hoi Oipjuss,
1. de favicon
De favicon komt bij mij op Internet Explorer 7 prima door (evenals op Firefox).
2. Breedte-toestanden
De pagina-breedte (voor de tabel waar alles in gevangen zit) staat in de html keurig op 90%. Dat zou dus voor elke breedte van het beeldscherm (elke resolutie) moeten gelden. De 90% in de html maakt de in de css opgegeven breedte van de primaire tabel (700px) ongedaan (!).
Maar die 90% wordt zelf overruled door de breedtematen voor de cellen die je in de css hebt opgegeven: mainpic 200px + mainlogo 700px + begroeting 180px = 1080px totaal.
Dan klopt het dat ik op mijn 1024x768 scherm de rechterkant niet genoeg zie, en er een horizontale scrollbar onderaan ten tonele komt.
- Oplossing b.v.: ik zou de rechterkolom met de begroeting helemaal laten vervallen. Deze voegt niets toe (behalve breedte
): dat het vandaag 16 december is, weet ik al (of kan ik met een hovertje over de tijd in het systeemvak rechtsonder zo zien), en dat het nu avond is weet ik eigenlijk ook al.
- Verder kan de middenkolom ietsje smaller worden, dan blijft de tekst mooi links van de achtergrond-figuur i.p.v. eroverheen te schuiven.
- De 3 cirkel-segmentjes in de achtergrondfiguur zullen dan iets naar rechts verplaatst moeten worden om helemaal zichtbaar te worden.
Tenslotte is de
<div align="center"> een ouderwetse (en inmiddels afgekeurde) manier om een pagina te centreren. Deze <div> kan helemaal vervallen, als je in de css opneemt:
Code:
[FONT="Courier New"][SIZE="2"]body {
width: 90%;
margin: 0 auto;
}[/SIZE][/FONT]
De
0 hierin staat voor onder en boven, de
auto(matisch) geldt voor links en rechts van de opgegeven breedte: dat wordt dus elk 5%, want het overschot wordt netjes in tweeën gehakt.
3. De Internet Explorer-flits
Ik zie inderdaad niets in IE echt verschuiven bij een pagina-wissel, maar wel een flits. IE wist eerst de oude pagina, gaat dan de nieuwe downloaden, en pas als die er helemaal is wordt de nieuwe pagina gerenderd (ook als er al oude onderdelen zijn die hetzelfde zijn). Andere browsers wachten met het wissen van de oude pagina tot de nieuwe helemaal binnen is: die geven dan geen flits.
Oftewel: hoe langer het binnenhalen van een pagina duurt, hoe meer de flits in IE opvalt. En in jouw geval zijn het nogal "zware" pagina's: er zit in totaal ruim 180kB aan images in, die bij elke pagina opnieuw opgebouwd moeten worden. En een javascript dat ook wat vertraagt. Dan zit de nog te plaatsen content (en eventuele afbeeldingen daarin) er nog niet eens bij. Oplossingen kunnen zijn:
- Drastisch beperken van de kB's aan images. De achtergrond is nu een 64kB jpg-bestand, het logo een 44kB jpg-bestand (samen 108kB). Ik heb even zitten rommelen, en van de achtergrond een 20kB gif gemaakt, en van het logo een 12kB gif. Dat scheelt 76kB, oftewel het downloaden van deze twee gaat 5x zo snel. Ook de witte achtergrond van alletwee transparant gemaakt; mocht het logo over iets anders heen vallen, dan wordt de onderliggende afbeelding niet meer afgekapt met de rechthoekige witte achtergrond van het logo.
- Zie voor de voordeligste manier van opslaan van afbeeldingen bv. het artikeltje: Image saving.
- Er kan ook fikse img-winst geboekt worden door niet allemaal verschillende afbeeldingen te gebruiken voor de menu-tabs (en hun hover-varianten). Deze buttons kunnen allemaal samen in 1 image worden opgenomen, dat met css bediend kan worden. Daarmee ben je dan tevens van het javascript af! Ook prettig voor diegenen die geen javascript op hun browser aan hebben staan en met de script-hover niets zien gebeuren; die zien bij een css-hover wel iets gebeuren.
- Voorbeeld van een css-hover gestuurd menu alhier (en in de broncode ervan).
- Achtergrond-info hierbij: De patrijspoort-theorie en Een blokje knoppen.
Helpt dit?
Met vriendelijke groet,
CSShunter
