Resolutieverhoudingen met CSS

[foxserv]

Heb een website gebouwd waarbij de schermopbouw ( teksten, plaatjes, buttons enz. )is gebaseerd op resolutie 1280x1024, daarin ziet het er dus 'best wel gelikt' uit, za'k maar zegge. Heb het ook wel zover dat het er op kleinere resoluties ( neem zelf 1024x768 als referentie ) ook 'toonbaar' uitziet, maar dan wel met veel verticaal gescroll. Mijn ideaalbeeld is dat de schermindeling zoals ik die op 1280x1024 zie, automatisch wordt herschaald zodat ik op resolutie 1024x768 ( or whatever ) zeg maar 'uiterlijk' hetzelfde beeld krijg. Heb in css al zoveel mogelijk % en px gebruikt omdat ik uit de documentatie had begrepen dat deze 'formaten' relatief t.o.v. de resolutie waren en dus het totaalbeeld in het kader daarvan zouden herschalen .... blijkbaar niet ( helemaal ) dus
Meerdere css-en ( voor praktisch elke resolutie een eigen ), zoals ergens gesuggereerd werd, is mij te omslachting en denk ook niet dat dat sowieso een handige oplossing is. Hoeveel resoluties wil je dan gaan 'afschermen' en hoe wil je dat op den duur allemaal gaan onderhouden?? Kortom, dit moet toch met ��n css te regelen zijn, alleen HOE?????

 

[csshunter]

Hoi foxserv,
Aha, eigenlijk wil je dus een compleet zoombare pagina voor als de bezoeker op een willekeurige resolutie zit.
In principe kan dat door alle breedte-maten in % op te geven.

• Zie bv.: home.tiscali.nl/developerscorner/gigastyle/gigastyle-index.html
  (reserve-kopie, want originele site is nu uit de lucht; links doen het niet allemaal)
• Toelichting in het stylesheet: home.tiscali.nl/developerscorner/gigastyle/elastico.css

Maar er zitten wel wat haken en ogen aan, bv.:

• Als ook alle images automatisch moeten meeschalen, kan je geen gebruik maken van background-images, want daarvan kunnen de maten niet opgegeven worden (altijd op ware grootte). Puur onhandig als je mooie css-hovers of css-sprites voor de pagina gebruikt. - Of je zou er javascript op los moeten laten.
• De lettergroote is obstakel. Als een kolom smaller wordt bij een lagere resolutie, dan ontkom je er niet aan dat de kolom hoger wordt om alle tekst te tonen - dus meer scrollen (of een lelijke extra scrollbar per <div>).
  Nu zou je met javascript ook wel de lettergrootte kunnen laten zoomen, maar dan wordt bij een lage resolutie de lettergrootte veel te klein voor de leesbaarheid (of als je uitgaat van lage resolutie: letters bij grote resoluties loeigroot).

Het zal dus altijd wat schipperen blijven, in het algemeen gesproken.
Voor mogelijk een paar concretere suggesties:
Toon mij uw link, en ik zal zeggen wie u bent!

Met vriendelijke groet,
CSShunter