Hoi Hans,
Jazeker, er zijn manieren om het logo op de goede plaats te krijgen. Maar in de huidige structuur van de pagina is dat niet zo eenvoudig, en dan staan de andere dingen nog niet op hun goede plaats.
Eerlijk gezegd is de structuur en de layout van de pagina nogal een ratjetoe. Er zijn tabellen voor de opmaak gebruikt (met inwendig daar weer tabellen in), de tabelcellen zijn dan weer absoluut gepositioneerd (dwz. ze ontsnappen weer aan de tabelstructuur), er staan styles in een style-blok in de head, allerlei elementen hebben (daarnaast) eigen inline styles, enz. Ik ben bang dat het op zo'n manier nooit gaat lukken.
- De { position: absolute; } die peter vazed ook aangaf, gecombineerd met vaste breedtes van elementen (in opgegeven pixels) betekent bv. dat alles altijd op een vaste (absolute) plek vanaf de linkerbovenhoek van het scherm wordt weergegeven, en de beeldschermbreedte geen enkele invloed kan hebben op de pagina.
- Als je overal de { position: absolute; } uithaalt, glijdt de layout van de hele pagina onderuit als een topzware dikkerd met gladde zolen op een stevig beijzelde schuin hellende straat ...
Het enige dat er op zit, is in mijn ogen een nieuwe start: de pagina helemaal opnieuw opzetten, en dan veel eenvoudiger (zonder tabellen, zonder absoluutheden, en met gescheiden css voor alle layout).
Daarbij ook steeds van boven naar beneden te werken (beginnen met de kop, i.p.v. deze er later overheen te plakken), dan schuift alles mooi door naar beneden als er onderweg ergens iets verandert.
De hoofdstructuur lijkt me:
HTML:
<body>
<div id="kop">...</div>
<div id="menu">...</div>
<div id="inhoud">...</div>
</body>
Nu zijn er in principes twee opties.
Vaste breedte
Als je dan bv. voor de body een vaste breedte van 780px aanhoudt, en de margins links en rechts op automatisch zet, blijft de pagina altijd in het midden, en valt bij 800x600 nog net niet buiten beeld:
Code:
body {
width: 780px;
margin: 0 auto;
}
Desktop-beeldschermen van 800x600px zijn inderdaad weinig meer in omloop, dus de vaste breedte kan wel wat groter worden. Maar heel veel mensen gebruiken 1024x768px, dus ik zou bij een vaste breedte zeker niet breder gaan dan ca. 980px (de scrollbar rechts en een beetje speling komen er nog bij!).
Nadeel van deze methode: bij hoge resolutie-beeldschermen krijgt de bezoeker links en rechts naast de pagina grote ongebruikte vlakken te zien.
Liquid Layout
Een "vloeibaar ontwerp", d.w.z. alle (breedte-)maten worden in relatieve eenheden (% = % van beeldschermbreedte) opgegeven, en de hoogtematen worden in principe losgelaten. Dan past de pagina zich qua layout helemaal automatisch aan aan de monitor waarmee deze bekeken wordt.
Nadeel van deze methode: bij ingewikkelde opmaak moeilijker in elkaar te zetten; soms zijn listen nodig om Internet Explorer (-versies) goed te laten draaien; leesbaarheid kan gevaar lopen als de regels (bij grote schermen) over de volle breedte komen te staan. Maar:
alles kan!
Met vriendelijke groet,
CSShunter
PS:
Nog een WEERWAARSCHUWING:
Ga niet de weg op met de
Webstat/Motigo-teller (of keer onmiddellijk terug), want deze is verradelijk en niet te vertrouwen (pop-up's en erger, zowel voor de bezoeker als voor de site):
lees en huiver. Weg ermee!
