Størrelse på nettside

[Rogosjin]

Jeg er ganske ny på html/css, og forsøker noe å lage en nettside. Det jeg har litt problemer med er sidens størrelse. Når jeg gjør nettleseren mindre krymper hele siden, det vil si at teksten legger seg under hverandre og banneret trekker seg sammen. Hvordan bør jeg løse dette problemet? Altså slik at man må skrolle seg bortover når siden krympes, i stedet for at den trekker seg sammen?

[lisA-]

Bruker du % til å bestemme bredden på ting i stedet for piksler? Vet ikke om det er det som gjør det, for jeg bruker det sjeldent selv.

Endret 14. august 2012 av lisA-

[phlake]

Du må bruke absolutte størrelser, f.eks pikselbredde og ikke prosent. Sånn er containeren på min egen side, Paulfiction.com:

 

.container {

height: 700px;

width: 900px;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

background-color: #eee;

border-top-width: 4px;

border-right-width: 4px;

border-bottom-width: 4px;

border-left-width: 4px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #fff;

border-right-color: #fff;

border-bottom-color: #fff;

border-left-color: #fff;

}

[Rogosjin]

Det ser ut til å være et poeng, og jeg trodde jeg hadde gjort det, men tydeligvis ikke på hele. Men hvor stor skal den være hvis den skal dekke hele skjermen? Vil ikke dette variere fra skjerm til skjerm?

[Bolson]

Det vi variere fra skjerm til skjerm, avhengig av skjermens oppløsning. Skal du dekke skjermflaten på en 2560 x 1440 skjerm så trengs andre tall enn på en 1024 x 768. Selv om det er lite bruk av skjermer nede i den størrelsen, så har eldre iPad og netbooks ofte 1024 bredde, og det er derfor lurt å holde seg innenfor 1000 piksler bredde.

 

Men det er ikke bare det som bestemmer størrelsen (bredden) og eventuelt høyden. Bredden har også noe med "lesbarhet" å gjøre. F.eks er lange linjer med tekst langt tyngre å lese enn kortere. I typografi er dette noe man er svært opptatt av, og regelen er at en tekstlinje ikke bør være mer enn 50 - 60 tegn lang (inklusive mellomrom). Fant en artikkel om dette.

 

http://baymard.com/blog/line-length-readability

 

Så lager du en nettside med f.eks to kolonner (typisk blogg), med skriftstørrelse rundt 12 piksler bør faktisk ikke hovedkolonna være mer enn ca 400 - 430 piksler bred. Sidekolonner skal være smalere. Det betyr at et bloggdesign i mange tilfeller ikke bør ha større bredde en 700 - 800 piksler.

[Rogosjin]

Det vi variere fra skjerm til skjerm, avhengig av skjermens oppløsning. Skal du dekke skjermflaten på en 2560 x 1440 skjerm så trengs andre tall enn på en 1024 x 768. Selv om det er lite bruk av skjermer nede i den størrelsen, så har eldre iPad og netbooks ofte 1024 bredde, og det er derfor lurt å holde seg innenfor 1000 piksler bredde.

 

Men det er ikke bare det som bestemmer størrelsen (bredden) og eventuelt høyden. Bredden har også noe med "lesbarhet" å gjøre. F.eks er lange linjer med tekst langt tyngre å lese enn kortere. I typografi er dette noe man er svært opptatt av, og regelen er at en tekstlinje ikke bør være mer enn 50 - 60 tegn lang (inklusive mellomrom). Fant en artikkel om dette.

 

http://baymard.com/b...gth-readability

 

Så lager du en nettside med f.eks to kolonner (typisk blogg), med skriftstørrelse rundt 12 piksler bør faktisk ikke hovedkolonna være mer enn ca 400 - 430 piksler bred. Sidekolonner skal være smalere. Det betyr at et bloggdesign i mange tilfeller ikke bør ha større bredde en 700 - 800 piksler.

 

Det finnes vel nettsider som fungerer på flere skjermstørrelser?

 

Det med skriften er greit, men det kan jo være at man ønsker et banner eller bakgrunnsbilde som dekker hele siden, og da må man vite målene.

[Bolson]

Alle nettsider fungerer på ulike skjermstørrelser, man trenger heller ikke at nettleservinduet skal fylle hele skjermen. Jeg personlig jobber på 2560 x 1440 piksler skjerm (Dell U2711)og har 2 stk 24'' med 1920 x 1200 hjemme.

 

Nettleservinduet er som oftest på 1150 x 950 piksler.

 

Og man kan lage sider med dynamisk bredde, f.eks gjennom bruk av min-width, max-width, eller 100 % dynamisk ved bruk av %. Men som sagt medfører det ofte at tekstlinjer blir for lange, og det er i dag svært få som gjør.

 

Det er ikke noe problem å legge bakgrunnsbilder etc over dynamisk bredde selv om tekstblokker etc har fast bredde.

Eksempler: http://www.hospiceforum.no/

http://www.emilogsamuel.no/wp/