Raar menu

[Goeroeboeroe]

Je kunt alles uitrekenen in procenten, maar dat is vaak niet zo'n goed idee.
Stel dat je scherm 1024 px breed is, houd je zeg maar 970 over (scrollbar en zo kosten ook ruimte). Als je dan links 'n kolom met 'n menu hebt en je maakt die 20 % is dat 194 px breed. Breed genoeg.
Maar op 'n scherm van 800 px breed is 't nog maar 160 px. En op 'n heel breed scherm wordt 't heel breed.
Dus ook op 'n scherm van 1024 px breed kun je eigenlijk maar 160 px gebruiken, anders kom je bij 'n smaller scherm in de problemen.
Wat vaak wordt gedaan is 'n vaste breedte, zoals jij hebt gedaan.
'n Andere manier is zo'n maximumbreedte. Waarbij je dan bijvoorbeelde linker- en rechterkolom 'n vaste breedte geeft, en de middelste kolom de rest op laat vullen.
Dan hoef je dus niet veel te rekenen, terwijl je toch het scherm optimaal gebruikt.
Goed testen blijft wel nodig, want vooral op 'n kleiner scherm kan iets er opeens totaal anders uitzien dan je in gedachten had.

Maar die breedte van 90 % die jij eerst had, dat zou ik dus niet zo snel doen. Omdat het op 'n smal scherm te smal is en op 'n breed scherm nog steeds te breed kan zijn.

Overigens zul je op 'n breed scherm natuurlijk ook heel vaak zien dat mensen de browser niet het hele scherm laten gebruiken, of bookmarks open hebben staan, of zoiets. Er zijn heel veel sites die onleesbaar breed worden op 'n heel breed scherm, en dat voorkom je met 'n smaller venster voor de browser of bookmarks open of zo.
Maar ik vind het persoonlijk wel netter om rekening te houden met 'n breed scherm.

 

[jappertjeh]

Als ik dat zo lees, lijkt mij het het handigst om het menu een vaste breedte te geven en de rest op te laten vullen. Daar heb ik nog wel wat vraagjes over:
1. Heb met photoshop een vaste banner gemaakt bovenaan mn pagina, die is 750px breed. Als ik die mee vergroot wordt ie dan bij bijv. 900px niet heel hoog ook? of valt dat op zo'n scherm wel mee? ik snap dat dat experimenteren wordt.
2. Hoe zet ik dit in mijn CSS? maximum-width:900px(bijvoorbeeld) bij menu en wat dan bij mn div container?
3. De letters vergroten niet automatisch mee neem ik aan, aangezien ik font-sizes heb gezet. Krijg je dan niet bij grote schermen hele grote vakken met in verhouding kleine lettertypen?

 

[Goeroeboeroe]

1) 'n Afbeelding laten vergroten of verkleinen door de browser is vrijwel altijd 'n heel slecht idee. 'n Browser is geen gespecialiseerd grafisch programma, waardoor de kwaliteit vrij snel (veel) slechter kan worden.
In principe kun je ook alleen de breedte veranderen en de hoogte niet, maar dan krijg je al snel 'n lachspiegel-effect.
Wat je bijvoorbeeld zou kunnen doen is de banner breder maken, in het midden op het scherm zetten, en dan alleen het deel laten zien wat op het scherm past. Dus dat er links en rechts wat wegvalt op 'n kleiner scherm.
Of 'n smallere banner gecombineerd met 'n achtergrondkleur, die aansluit op de zijkanten van de banner. Dan heb je ook niet zo'n grote afbeelding om te downloaden.

2) Geen idee, zie verderop.

3) De lettergrootte verandert alleen maar bij zoomen of als mensen de lettergrootte zelf veranderen (en dan bij IE alleen als de eenheid em is, bij px niet). Dus je kunt heel lange regels krijgen. Om dat te voorkomen is die max-width.

Ik vind 't heel moeilijk om sommige vragen te beantwoorden, omdat ik je site niet ken. Daardoor is er 'n redelijke kans dat dingen die ik zeg niet kloppen. Dat is ook de reden dat ik vraag 2 niet kan beantwoorden. Ik weet niet hoe je banner is weergegeven: img of achtergrond-afbeelding? Breedte opgegeven of niet? Effen kleur aan de zijkanten? Enz.

Ik ga iets heel raars zeggen. (Doe ik wel 'ns vaker trouwens, maar meestal kondig ik 't niet aan )
Ik zou, als ik jou was helemaal opnieuw beginnen.

Zo, bijgekomen van de schrik?
Je hebt nu wat ervaring opgedaan, waar je dan gelijk rekening mee kunt houden. De soort vragen waar je nu tegenaan loopt moet je eigenlijk als eerste beantwoorden. Hoe breed mag mijn site worden? Vaste breedte of procenten? Enz. Dan kun je met het maken van zo'n banner bijvoorbeeld daar al rekening mee houden.
Als je dat allemaal achteraf gaat bepalen, is het veel en veel meer werk en het is maar de vraag of het ooit helemaal goed wordt.

Dit klinkt misschien wat vreemd, maar mijn ervaring is dat dit vaak veel minder werk is dan achteraf grote veranderingen gaan invoeren. Als je 'n nieuwe pagina ontwerpt en gelijk rekening houdt met die basisdingen, kun je grote delen van de oude pagina gewoon kopiëren en opnieuw gebruiken. Uiteindelijk werkt dat vaak veel sneller en prettiger. Nou moet je je banner misschien aanpassen, en als je dat hebt gedaan blijken de divs weer te breed te worden, en dan...

Je kunt dan ook vanaf het allereerste begin voortdurend in meerdere resoluties testen, met meerdere browsers (Firefox, Safari, Google Chrome, IE 6/7/8, Opera) en vooral: voortdurend valideren. (IE 6/7/8 kan lastig zijn op dezelfde computer, maar Microsoft levert gratis images voor VirtualPC waarmee je deze drie browsers gelijktijdig kunt draaien, zie http://www.microsoft.com/downloads/...90-958f-4b64-b5f1-73d0a413c8ef&DisplayLang=en )
Als je vanaf het allereerste begin steeds probeert hoe 't eruit ziet op 'n scherm van 800 en 1280 breed, levert dat later ook geen problemen meer op. Je kunt bijvoorbeeld vanaf 't begin controleren of je pagina in 't midden staat, en als je voortdurend controleert zie je gelijk wanneer 't misgaat en weet je dus ook gelijk door welke wijziging dat komt.
En bijvoorbeeld je menu kun je gewoon net zo gebruiken als het nu is. Dat heb je al gemaakt, dus dat hoeft niet nog 'ns. (Hoogstens wat kleine aanpassingen in de breedte of zo.)
't Is maar 'n idee, maar de soort vragen die je stelt zijn heel moeilijk achteraf op te lossen, omdat ze eigenlijk helemaal in het begin gesteld moeten worden.

 

[jappertjeh]

Hoi, terug van weg geweest
Het heeft dus een tijdje stil gelegen, maar ik ben er weer. Mijn voornaamste probleem is dat ik nu mijn menu een vaste breedte heb gegeven, en dan laat ik de rest van de pagina vullen door het tekstvak. Ik heb hier max-widths overal meegegeven, alleen dat tekstvak geef ik dus geen vaste width of percentage, alleen een max-width. Als ik dit doe komt hij onder mijn menu omdat hij blijkbaar de hele pagina wil vullen met zijn breedte. Hoe krijg ik dit naast elkaar zonder percentages of vaste breedte te geven?