[Website] Site tonen op verschillende resoluties

[Verwijderd]

Voor school heb ik met een klasgenoot een website gemaakt met photohop CS2. de website zelf is goed van formaat (momenteel op 800 x 600. Maar volgens de leraar moet de site op verschillende resoluties perfect blijven (ook op 42ïnch schermen). Maar ik zou graag willen weten hoe we dit gedaan krijgen. Ik heb overal gezocht maar heb niks kunnen vinden.

groetjes

[Noork]

Nou volgens mij is het onzin wat je leraar zegt. Got heeft toch ook een vaste breedte. Je gaat de site toch niet uitsmeren op een 42" inch monitor, dat leest voor geen ene meter.

[P_de_B]

Vaste breedte geven en de leraar uitleggen dat browservensters op grote schermen niet perse fullsize hoeven te zijn is in mijn ogen de beste oplossing. Mensen moeten een beetje af van het idee dat een webpagina je hele scherm moet innemen.

[Verwijderd]

Noork schreef op dinsdag 31 januari 2006 @ 15:22:
Nou volgens mij is het onzin wat je leraar zegt. Got heeft toch ook een vaste breedte. Je gaat de site toch niet uitsmeren op een 42" inch monitor, dat leest voor geen ene meter.

idd dat zeiden we ook al, maar hij blijft bij zijn standpunt

[Noork]

Verwijderd schreef op dinsdag 31 januari 2006 @ 15:22:
[...]


idd dat zeiden we ook al, maar hij blijft bij zijn standpunt

Nou ja, dan moet je het maar doen zoals je leraar zegt. Gewoon width=100% o.i.d. Leg je principes aan de kant en ga voor een goed cijfer

[Cubix]

Zoek op de term 'liquid', dat zal hij vast wel willen, net als het gebruik van frames.

Docenten ompraten heeft vaak geen zin...

[Folkert]

Je kan de breedte van je site absolutt of dynamisch bepalen. Als je site 800px breed is, zal deze altijd 800px breed zijn, ook op een 42inch plasma scherm()... Je kan je site ook een procentuele breedte meegeven, bijvoorbeeld 100%, wat betekent dat de site dus schermvullend zal zijn, dit zal op zeer brede schermen niet erg prettig lezen aangezien je zinnen krijgt van 60 woorden achter elkaar...

[Geert.H]

volgens mij begrijpt de TS dat ook wel, maar zijn docent niet. Wat ook nog een oplossing is om met een javascriptje de breedte te checken en verschillende site's maken, maar ik denk dat de 100% oplossing beter is.
Hoewel, als ik jou was zou ik naar de directie stappen wegens incompetentie van de leraar. Want, met alle respect, wat voor een leraar heb je? Wij hadden dan misschien ook wel een leraar die er niet veel vanaf wist, maar die wist tenminste dat wij er meer van wisten en luisterde ook.

[ Voor 2% gewijzigd door Geert.H op 31-01-2006 15:27 . Reden: spelling ]

[Boelie-Boelie]

Misschien is het punt van de docent wel dat fixed width niet al te moeilijk is en hij wil dat men leert liquid layouts te maken. Dat heeft niet meteen te maken met incompetentie.
http://www.maxdesign.com.au/presentation/page_layouts/
http://alistapart.com/articles/negativemargins/
Als je je zorgen maakt om line length, dan zet je er een max-width op. Heb je wel een liquid layout zoals de docent wil, maar die slechts tot een bepaalde grootte meerekt.

[ Voor 34% gewijzigd door Boelie-Boelie op 31-01-2006 15:37 . Reden: aanvulling max-width ]

[Bosmonster]

Snap het probleem ook niet zo. Je zit toch niet op school om de leraar te kopieren? Je zit op school om te leren. Als jij er zeker van bent dat je iets beter doet dan de docent, dan doe je het zoals jij het wilt. Geeft hij je een laag cijfer hierdoor dan kun je daar misschien wat tegen doen.

Wat mij niet duidelijk is is of je die site nu voor de docent maakt (hij de opdrachtgever is) of dat het een opdracht is. Als hij opdrachtgever is en absoluut niet om te praten, tja dan heb je pech

Bovendien zijn er genoeg sites die liquid wel werken, zoals webshops (neem een Amazon.com). Wat ook een boute aanname is is dat mensen met grote resoluties ook gemaximaliseerd surfen natuurlijk. Je ontwerp wordt met liquid niet per definitie uitgesmeerd Maar schaalt wel netjes mee met de browser, wat soms dus best gewenst kan zijn.

Voor een 'normale' contentsite is liquid 9 van de 10 keer echter absoluut niet interessant.

[ Voor 6% gewijzigd door Bosmonster op 31-01-2006 15:32 ]

[Folkert]

Hier nog een interessante link (ook voor je leraar... )
http://psychology.wichita...tynews/42/text_length.htm

En nog een linkje:
http://clagnut.com/blog/268 en http://clagnut.com/blog/269/

[ Voor 26% gewijzigd door Folkert op 31-01-2006 15:43 ]

[Verwijderd]

Vraag hem anders eens naar het marktaandeel aan mensen dat met 42" plasma schermen aan het internetten is.

[Wim-Bart]

Je leraar is niet één van de slimste maar ja er zijn meerder oplossingen. Ik zelf werk voornamelijk met .css bestanden waarin ik hard de breedte en soms ook de hoogte definieer voor de sites. Hierbij ga ik als volgt te werk:

Bepaal breedte van weer te geven browser op resolutie van 800 x 600 voor diverse browsers. Er blijken dus verschillen te zitten tussen IE, FF, Opera etc. Ik neem de meest effectieve breedte welke op alle browsers er het zelfde uitziet en ga rekenen vanuit deze breedte. Als basis zorg ik ervoor dat er altijd een tabel met één of meerdere regels zonder border, padding etc. ligt op de pagina. Bijvoorbeeld een cell voor de header en een cell voor het menu en een cell voor de body:

header

body

footer

Ik zorg ervoor dat de achtergrond altijd wit is en reken voor de content vanuit deze waarden.

Wat je nu kunt doen is meerdere sytlesheets maken welke identiek zijn maar verschillen voor verschillende resoluties:

site800.css voor 800 breed
site1024.css voor 1024 breed
site1280.css voor 1280 breed
site.css voor algemene stylen

Je maakt een site load page waarin je een javascriptje opneemt. Deze test de X (en eventueel Y)resolutie van de browser en laad je eigenlijke site. Het javascriptje laad het tweede document (je eigenlijke site met een parameter, bijvoorbeeld /site.php?res=1024. In de startpagina van de site neem je een scriptje op die er voor zorgt dat het juiste css wordt geladen en de resolutie in het sessieobject van je applicatie zet. Overige pagina's lezen dan het sessieobject uit. Je kan ook een cookie gebruiken in plaats van het sessie object.

[Folkert]

wim-bart schreef op dinsdag 31 januari 2006 @ 15:42:
Je leraar is niet één van de slimste maar ja er zijn meerder oplossingen. Ik zelf werk voornamelijk met .css bestanden waarin ik hard de breedte en soms ook de hoogte definieer voor de sites. Hierbij ga ik als volgt te werk:

Bepaal breedte van weer te geven browser op resolutie van 800 x 600 voor diverse browsers. Er blijken dus verschillen te zitten tussen IE, FF, Opera etc. Ik neem de meest effectieve breedte welke op alle browsers er het zelfde uitziet en ga rekenen vanuit deze breedte. Als basis zorg ik ervoor dat er altijd een tabel met één of meerdere regels zonder border, padding etc. ligt op de pagina. Bijvoorbeeld een cell voor de header en een cell voor het menu en een cell voor de body:

header

body

footer

Ik zorg ervoor dat de achtergrond altijd wit is en reken voor de content vanuit deze waarden.

Wat je nu kunt doen is meerdere sytlesheets maken welke identiek zijn maar verschillen voor verschillende resoluties:

site800.css voor 800 breed
site1024.css voor 1024 breed
site1280.css voor 1280 breed
site.css voor algemene stylen

Je maakt een site load page waarin je een javascriptje opneemt. Deze test de X (en eventueel Y)resolutie van de browser en laad je eigenlijke site. Het javascriptje laad het tweede document (je eigenlijke site met een parameter, bijvoorbeeld /site.php?res=1024. In de startpagina van de site neem je een scriptje op die er voor zorgt dat het juiste css wordt geladen en de resolutie in het sessieobject van je applicatie zet. Overige pagina's lezen dan het sessieobject uit. Je kan ook een cookie gebruiken in plaats van het sessie object.

3 stylesheets? Ik denk dat je een dergelijk systeem beter kan oplossen door de body tag een bepaalde ID of class mee tegeven. Hierdoor blijf je gewoon een enkele css gebruiken en bepaalt het top element hoe breed het wordt...

[Geert.H]

@boelie-boelie, als dat het punt is van de docent dan zou die dat wel duidelijker moeten maken (of de TS maakt het niet genoeg duidelijk natuurlijk).

@wim-bart, wat doe je dan als iemand met een resolutie van 1024 zijn scherm niet heeft gemaximaliseerd? Volgens mij kan je beter met procenten gaan werken.

@folkert, dan prop je dus 3 stylesheets in één, lijkt me niet zo'n verschil

[ Voor 12% gewijzigd door Geert.H op 31-01-2006 15:48 ]

[BCC]

[b][message=25120923,noline]wim-bart schreef op dinsdag 31 januari 2006 @
Je maakt een site load page waarin je een javascriptje opneemt. Deze test de X (en eventueel Y)resolutie van de browser en laad je eigenlijke site. Het javascriptje laad het tweede document (je eigenlijke site met een parameter, bijvoorbeeld /site.php?res=1024. In de startpagina van de site neem je een scriptje op die er voor zorgt dat het juiste css wordt geladen en de resolutie in het sessieobject van je applicatie zet. Overige pagina's lezen dan het sessieobject uit. Je kan ook een cookie gebruiken in plaats van het sessie object.

Eeh, au? Wat als ik niet fullscreen browse, geen javascript gebruik of cookies uit heb staan? En als je een kleurtje wil veranderen mag je AL je stylesheets door. Proffesionele oplossing

[Folkert]

Ghoekzema schreef op dinsdag 31 januari 2006 @ 15:47:
@folkert, dan prop je dus 3 stylesheets in één, lijkt me niet zo'n verschil

3 in een? waarom? Je hoeft in je css maar 3 id's/classes te definieren met een verschillende breedte.

HTML:

<body id="width-1024">
    <div id="content">test</div>
</body>

Als je je css een beetje inteligent opzet kan je hier heel veel mee doen hoor!

Cascading Stylesheet:

body#width-1024 div#content
{
  width: 600px;
}

body#width-800 div#content
{
  width: 400px;
}

body#width-600 div#content
{
  width: 300px;
}

Dit is dus een voorbeeldje... even de id van je body aanpassen en klaar...

[ Voor 32% gewijzigd door Folkert op 31-01-2006 16:36 ]

[Verwijderd]

Cascading Stylesheet:

div#content
{
  width: 50%;
}

?

[Zandor]

laat hem gewoon dit draadje lezen,
krijgt ie vanzelf rode oortjes