Måleenheter med CSS / HTML

[dimdal]

Hei,

 

Bare lurer på hvilke måleenheter jeg skal bruke til å sette størrelse på div elementer og egentlig alt annet på siden..

 

Har hørt at em skal brukes, men at cm,mm,inches osv er absolutte.

 

Noen som kjapt kan forklare dette?

[flodhest]

Til tekst kan du bruke em, pt, og px. Til Div's bør du bruke px.

Endret 24. oktober 2004 av flodhest

[dimdal]

Takker og bukker =)

[AndersGustav]

Til tekst kan du bruke em, pt, og px. Til Div's bør du bruke px.

Hva er forholdet mellom disse?

(sylfersk i gamet, og har lurt på dette litt)

[Loomy]

mm, cm, og inches bør du IKKE bruke. Denslags hører ikke hjemme på PCen med mindre du lager en trykksak eller lignende.

 

px er absolutt, og brukes mye til bredde/høyde på div's og sånt. Ulempen med px er at den er absolutt og vil bli seendes større/mindre ut avhengig av hvilken oppløsning man har. F.eks vil en 760-770px bred side ta opp kun halvparten av skjermen hos en med 1600x1200 oppløsning, mens den gjerne tar opp hele skjermen på en med 800x600. dette er uansett ikke noe stort problem så lenge man ikke bruker 1600x1200 på en 15" skjerm

px bør ikke brukes til å definere skriftstørrelse, bl.a pga. at man i IE ikke kan justere skriftstørrelsen med nettleserens innebygde funksjon (stor ulempe for svaksynte f.eks). Isteden bør man bruke em eller %:

 

em funker bra til å sette skriftstørrelsen. Det er en ikke-absolutt størrelse som lar alle browsere justere størrelsen manuelt, mer kan jeg egentlig ikke si om den saken

 

Andre enheter er vel "%", "pt" og innebygde "nøkkelord" om man kan kalle de det (large, small, x-small, normal, etc)

 

 

Noen nyttige linker:

http://alistapart.com/topics/typography/

http://www.media.uio.no/prosjekter/fleksib...n/typograf.html

Endret 24. oktober 2004 av Loomy

[haugsand]

http://www.w3.org/TR/REC-CSS2/syndata.html#values

 

Bruk:

em, ex, px, %

 

Ikke bruk:

in, cm, mm, pt, pc

[Simon Zimmermann]

Det var en samtale om temaet måleenheter i Webkafeen for en liten stund siden.

URL: Link til samtalen

Endret 24. oktober 2004 av Waldmeister

[dimdal]

Okey.. så absolutte størrelser bør brukes på f.eks bilder, for ellers vil de strekke seg for langt ved høyere oppløsning, eller den andre veien..

 

Og % i størrelser for å sette et element som skal fylle x del av skjermen uansett oppløsning da?

[Simon Zimmermann]

Okey.. så absolutte størrelser bør brukes på f.eks bilder, for ellers vil de strekke seg for langt ved høyere oppløsning, eller den andre veien..

Bilder har en størrelse(eks. 400x300px). Pixel er en absolutt størrelse og brukes derfor for å angi størrelsen på bilder.

Og % i størrelser for å sette et element som skal fylle x del av skjermen uansett oppløsning da?

Ja, det stemmer.

Endret 24. oktober 2004 av Waldmeister

[Wizendraw]

Dette har vært litt hodebry for meg, ettersom jeg ikke klarer se for meg et design med headerbilde osv og med %-verdier?

Da vil jo bredden måtte være minst så og så mye uansett, for ikke å skvise bildet?

[PoleCat]

Wizendraw: 1976 er et eksempel som har et "dynamisk" headerbilde, der den overflødige delen av bildet skjules dersom bredden blir mindre.

[Wizendraw]

Wizendraw: 1976 er et eksempel som har et "dynamisk" headerbilde, der den overflødige delen av bildet skjules dersom bredden blir mindre.

Ja, der har du noen som har løst det ja.

 

Men man sitter fremdeles igjen med ihvertfall to "problemer":

 

*Det tar unødig tid å laste sida ettersom den må laste bilde som ikke vises likevel (regner jeg med)

 

*De som måtte sitte med 1600*1200 ser sannsynligvis noen ender på det bildet?

 

EDIT: Endra til 2948*1536 bare for å teste (), og ja, hele siden orienterte seg til venstre. Så ikke pent ut, for å si det sånn. Men så er det jo ytterst få som faktisk sitter med sånne oppløsninger også da, men vi higer etter den perfekte siden, eller hva?

Endret 24. oktober 2004 av WizendraW

[Arve Systad]

Uansett, når du sitter med en slik oppløsning, så vil du antageligvis vite om at du skiller deg litt ut, og at oppløsning er grunnen til at nettopp slikt kan skje. Kun folk som arbeider masse med grafikk har behov for denslags oppløsninger.

[Wizendraw]

Uansett, når du sitter med en slik oppløsning, så vil du antageligvis vite om at du skiller deg litt ut, og at oppløsning er grunnen til at nettopp slikt kan skje. Kun folk som arbeider masse med grafikk har behov for denslags oppløsninger.

Ja, det er jeg da fullstendig klar over, men det var mest for å sjekke hvordan den ble

[SilverKhan]

Det går jo ann å lage en header slik:

[header]bakgrunnsbilde som repeteres[slutt]

 

Headeren kan være ganske stor også, så har du en seamless bakgrunn så det ser pent ut

[Simon Zimmermann]

Det går jo ann å lage en header slik:

[header]bakgrunnsbilde som repeteres[slutt]

Joda, fungerer sikkert, men kan du fortelle meg hva du mener med dette. Skjønte ikke helt hvordan du vil at det skal se ut.

[SilverKhan]

<div id="bakgrunn"><div id="headerstart"></div><div id="headerend"></div></div>

 

#bakgrunn: har et bakgrunnsbilde som repeteres, denne ligger underst.

#headerstart: har et bakgrunnsbilde som er inntil den venstre siden, ligger i over "bakgrunn"

#headerend: har et bakgrunnsbilde som ligger inntil den høyre siden, ligger i over "bakgrunn"

 

Bredden på headeren setter du i % og da vil headerene tilpasse seg til vinduet

 

Dersom man klarer å ha et seamless bakgrunn i bakgrunns-div'en så kan det bli riktig pent:p

 

Håper dette var en bedre forklaring.

 

Kort: headeren er en bakgrunn som du legger bilder oppa i hver ende...

[Arve Systad]

<div id="bakgrunn"><div id="headerstart"></div><div id="headerend"></div></div>

 

#bakgrunn: har et bakgrunnsbilde som repeteres, denne ligger underst.

#headerstart: har et bakgrunnsbilde som er inntil den venstre siden, ligger i over "bakgrunn"

#headerend: har et bakgrunnsbilde som ligger inntil den høyre siden, ligger i over "bakgrunn"

 

Bredden på headeren setter du i % og da vil headerene tilpasse seg til vinduet

 

Dersom man klarer å ha et seamless bakgrunn i bakgrunns-div'en så kan det bli riktig pent:p

 

Håper dette var en bedre forklaring.

 

Kort: headeren er en bakgrunn som du legger bilder oppa i hver ende...

Da må du legge float: right; til på den enden som skal ligge til høgre, samt at du må passe på alle marger/paddings og borders.

[SilverKhan]

ville bare prøve å forklare tanken litt bedre, det var ikke ment somnoen fullstendig kode, og selvfølgelig har du helt rett