Storlekar

I denna lektionen får du lära dig hur man ändrar storlek på element.

Med egenskaperna width och height (som betyder bredd respektive höjd) kan du ändra storleken på vissa element. För att visa hur det fungerar ha vi följande HTML-kod:

HTML - HyperText Markup Language
<!-- En vanlig paragraf med en svart ram runt sig. --> <p style="border: 1px solid black;">Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.</p>

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Som du ser så är bredden som standard 100% bred, och höjden anpassar sig automatiskt efter innehållet. Det är för att <p>-taggen bland annat har följande CSS-kod som standard:

CSS - Cascading Style Sheets
width: 100%; /* Bredden är 100% bred. */ height: auto; /* Höjden anpassar sig automatiskt. */

Dessa kan vi ändra. Vi kan ange att bredden ska vara 50%:

CSS - Cascading Style Sheets
#paragraf{ width: 50%; /* Var 50% bred av den bredden som den taggen du ligger i är */ }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Eller vi kanske vill att bredden ska vara ett bestämt antal pixlar?

CSS - Cascading Style Sheets
#paragraf{ width: 200px; }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Men vad händer om vi även lägger in ett värde på height, så att texten inte får plats i rutan? Jo, det här händer:

CSS - Cascading Style Sheets
#paragraf{ width: 200px; height: 100px; }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Inte så lyckat, men med egenskapen overflow kan vi lösa bot på det. Om vi ger den värdet hidden så visar webbläsaren inte det som inte får plats i rutan.

CSS - Cascading Style Sheets
#paragraf{ width: 200px; height: 100px; overflow: hidden; /* Göm det som inte får plats i rutan */ }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Om vi istället ger overflow värdet scroll så infogas scrollar på sidorna.

CSS - Cascading Style Sheets
#paragraf{ width: 200px; height: 100px; overflow: scroll; /* Visa scrollar i rutan */ }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Men dem visas även ifall dem inte behövs, vilket kan vara fult.

CSS - Cascading Style Sheets
#paragraf{ width: 500px; height: 200px; overflow: scroll; /* Visa scrollar i rutan */ }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Om vi bara vill visa dem då det behövs kan vi ge overflow värdet auto.

CSS - Cascading Style Sheets
/* Scroll behövs, kommer att visas */ #paragraf{ width: 200px; height: 300px; overflow: auto; }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

CSS - Cascading Style Sheets
/* Scroll behövs inte, kommer inte att visas */ #paragraf{ width: 500px; height: 200px; overflow: auto; }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Utöver width och height så finns även egenskaperna min-width, max-width, min-height och max-height, som anger en minsta respektive högsta bredd eller höjd.

CSS - Cascading Style Sheets
#paragraf{ width: 75%; /* Var 75% bred */ min-width: 250px; /* Men var minst 250 pixlar bred */ max-width: 600px; /* Och max 600 pixlar bred */ }

Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text. Detta är en lång och meningslös text.

Testa att ändra bredden på webbläsarfönstret med musen. Du kommer då se att paragrafen aldrig kommer att vara mindre är 250 pixlar bred eller bredare än 600 pixlar. Om bredden är någonstans däremellan så är den 75% bred av taggen den ligger i.

En tråkig sak med min-width, max-width, min-height och max-height är att webbläsaren Internet Explorer 6 inte stödjer dessa egenskaper, så om du har den webbläsaren kommer paragrafen alltid att vara 75% bred av taggen den ligger i.

Gå till nästa lektion, Listor.