Bia Rask ● Webbkurs

HTML & CSS

POSITIONERING MED CSS

 

Läs om CSS i Adobes användarhandbok för Dreamweaver.

CSS Tutorials och CSS Referens från w3schools är ovärderliga som upplsagsböcker för dig som vill använda CSS.

Boxar

Tänk i boxar

I webbdesignsammanhang talar man om boxar. Man tänker sig fyrkantiga lådor som innehåller element (en rubrik, ett stycke eller nästan vad som helst). En box kan också vara en större box som innehåller en eller flera andra mindre boxar.

För att kunna styra utseendet hos dessa tänker man sig själva ytterhöljet på lådan som border. Kanten finns där oavsett om man gör den tjock eller låter den vara helt osynlig. Avståndet mellan boxen och andra boxar alternativt kanten på webbläsarfönstret kallar man margin. Luften i boxen, mellan ytterhöljet och innehållet kallar man padding.

Det är viktigt att veta att när du anger storlek för en box gäller det själva innehållet. Padding och border tillkommer om det fått några mått (annars är de 0px). Om boxen är 250px bred och 100 px hög, paddingen 10px och bordern 5px bred, tar boxen med kant upp 280px (5+10+250+10+5=280) gånger 130px (5+10+100+10+5=130).

"Förvaringsboxar"

En box kan vara en större box som innehåller en eller flera andra mindre boxar. Tidigare kallade man dessa större boxar för divar, <div>. En div är en del av webbsidan som hör ihop på något sätt. Div-taggen finns kvar, men i HTML5 rekommendas att man använder mer specifika taggar som <header>, <nav>, <section>, <article>, <aside>, <figure> och <footer> istället om någon av dem passar.

Om vi vill skapa en box att ha menyn i lägger vi in taggen <nav> i html-filen. Ofta ger man den ett unikt namn också, ett id, för att kunna styra var den ska ligga på sidan. <nav id="huvudmeny">innehåll</div>.

I stilmallen bestämmer vi hur boxen ”huvudmeny” ska se ut, till exempel kan den få ljusgrå bakgrund och en sex pixlar tjock svart kant.

#huvudmeny {background-color:#CCCCCC; border: 6px solidblack;}

Om vi vill ange samma mått på alla fyra sidor räcker det att vi anger det en gång. Vill vi ha olika mått börjar man att ange måttet upptill och går sedan samma väg som klockan runt. Lägg märke till att det inte ska vara något mellanslag mellan siffran och px!

#huvudmeny {
    background-color:#CCCCCC;
    border:3px solid black;
    padding:15px 10px 20px 5px;
    margin:0px;
    }

Anledningen till att det står #huvudmeny som väljare är att deklarationen gäller en box som fått attributet id och värdet huvudmeny. I stilmallen skriver man # i stället för id. Om man istället skriver nav som väljare gäller regeln alla nav-boxar (menyboxar).

Förutom möjligheten att styra var menyn hamnar ger den id-märkta boxen oss möjlighet att formatera innehållet i den på annat sätt än likadana väljare på övriga sidan. Väljaren #huvudmeny a gör att bara länkarna i den boxen, inte sidans övriga länkar, formateras enligt regeln man ställer upp.

 

Positionering

Positionera boxar

Boxar används ofta för att dela in webbsidan i olika delar och styra var på webbsidan olika innehåll ska hamna. Boxarna blir lådor – synliga eller osynliga – att stoppa in innehåll i. Om man inte anger annat, kommer de att hamna under varandra i den ordning som angetts. Divarna kan också ligga i varandra, man kan ha en eller flera mindre lådor i en stor.

Man kan styra divarnas placering genom att välja positionerigsvariant och mått för över- eller underkant och vänster eller höger.

Det finns fyra typer av positionering: static, fixed, relativ och absolute.

För att försöka förklara hur det fungerar ska jag ge några exempel. I alla exemplen utgår vi från följande kod i html-filen:

<div id="container">
<div id="rosa"></div>
<div id="gul"></div>
<div id="lila"></div>
</div>
<!-- Här slutar container -->

Jag har kommenterade sluttaggen för att det är svårt se vilken av divarna som slutar där när avståndet är stort mellan start- och sluttagg. Gör gärna det du också! Eventuell felsökning blir mycket lättare.

Position: static

Static är standard. Anger du inte vilken typ av positionering du vill använda utgår webbläsaren från att du vill använda denna. Boxarna staplas nedanför varandra i den ordning de kommer i koden i html-dokumentet (ordningen i css-filen styr alltså inte). De kommer inte att påverkas av top, bottom, left eller right-inställningar i stilmallen.

body {
     background-color: #999;
     }
#container {
     background-color: #FFF;
     height: 200px;
     width: 200px;
     margin-right: auto;
     margin-left: auto;
     }
#rosa {
     background-color:#F9F;
     height:50px;
     width:50px;
     }
#gul {
     background-color:#FF6;
     height:50px;
     width:50px;
     }
#lila {
     background-color:#96F;
     height:50px;
     width:50px;
     left:75px;
     top:75px;
     }

 

Kommentarer

De rödmarkerade deklarationerna till väljaren #lila blir overksamma med positioneringen static. Den lila boxen lägger sig under den gula.

På grund av att boxen #container fått värdet auto för margin-right och margin-left centreras den.

Position: fixed

Måtten som anges utgår från webbläsarens fönster. Rutan kommer inte att flyttas när man scrollar. Element med position:fixed undantas ur det vanliga flödet och hamnar där måtten säger oavsett var i ordningen i html-koden det ligger.

body {
     background-color: #999;
     }
#container {
     background-color: #FFF;
     height: 200px;
     width: 200px;
     margin-right: auto;
     margin-left: auto;
     }
#rosa {
     background-color:#F9F;
     height:50px;
     width:50px;
     position:fixed;
     }
#gul {
     background-color:#FF6;
     height:50px;
     width:50px;
     position:fixed;
     }
#lila {
     background-color:#96F;
     height:50px;
     width:50px;
     left:75px;
     top:75px;
     position:fixed;
     }

 

Kommentarer

I det här exemplet ligger den lila rutan 75 pixlar från webbläsarfönstrets vänstra kant och 75 pixlar från ovankanten.

Att den rosa rutan inte syns beror på att den ligger under den gula. De har samma inställningar. Att de ligger uppe till vänster i den grå rutan beror på att inte left och top angivits för den. Hade det stått 0px för de egenskaperna hade de hamnat längst upp till vänster i webbläsarfönstret istället för i container-boxen.

 

Position: relative

I det här läget flyttas boxen så många pixlar som anges från den plats den skulle ha haft med standardinställningen static. I staticläget låg den lila direkt under den gula. Nu har den flyttats 75 pixlar neråt och åt höger.

body {
     background-color: #999;
     }
#container {
     background-color: #FFF;
     height: 200px;
     width: 200px;
     margin-right: auto;
     margin-left: auto;
     }
#rosa {
     background-color:#F9F;
     height:50px;
     width:50px;
     position:relative;
     }
#gul {
     background-color:#FF6;
     height:50px;
     width:50px;
     position:relative;
      }
#lila {
     background-color:#96F;
     height:50px;
     width:50px;
     left:75px;
     top:75px;
     position:relative;
     }

 

Kommentar

Den lila rutan flyttas 75 pixlar åt höger och neråt jämfört med var den skulle ha placerats med standardpositioneringen static.

Position: absolute

Måtten som anges utgår från föräldraelementet, det vill säga den box boxen ligger i. Detta gäller dock bara om föräldraelementet har en annan positionering än standardvärdet static! Vill du att läget ska anges från en "samlingsbox" (t.ex. <div id="wrapper">) måste du alltså ge den (wrapper) någon annan positionering än standardvärdet. Om inget föräldraelement med annan positionering finns utgår positionering från <html>, dvs webbläsarfönstrets kant.

body {
     background-color: #999;
     }
#container {
     background-color: #FFF;
    height: 200px;
     width: 200px;
     margin-right: auto;
     margin-left: auto;
     position:relative;
     }
#rosa {
     background-color:#F9F;
     height:50px;
     width:50px;
     position:absolute;
     }
#gul {
     background-color:#FF6;
     height:50px;
     width:50px;
     position:absolute;
    }
#lila {
     background-color:#96F;
    height:50px;
     width:50px;
     left:75px;
     top:75px;
     position:absolute;
   }

 

Kommentarer

Att den rosa rutan inte syns beror på att den ligger under den gula. De har samma inställningar. Vilken av rutorna som hamnar överst kan styras med z-index vid absolute positionering. Ju högre tal, desto högre upp i högen hamnar boxen. Exempel:

z-index:1;
z-index:2;
z-index:-1;

Den lila rutan flyttas 75 pixlar åt höger och neråt från kanten på föräldraelementet #container. (Boxen lila ligger ligger inuti boxen #container, och #container har en annan positionering än static, i det här fallet relative.)

Float

För att kunna lägga boxar vid sidan av varandra måsta man använda sig av egenskapen float. Boxarna, som alltså kan vara olika typer av element (divar, texter, bilder mm), kan flyta åt vänster eller höger. Float används ofta för att skapa kolumner för texter eller i fotogallerier för att rada upp bilder intill varandra.

Float kan också användas för att få text att lägga sig runt bilder. Texten lägger sig så långt till vänster/höger som det är möjligt, där det är tom yta.

Ett flytande element flyttar sig alltså så långt åt vänster eller höger det kan. Om flera flytande element ryms intill varandra hamnar de sida vid sida. Tar utrymmet slut hoppar det som inte ryms ned till nästa rad.

Om vi plockar fram experimentet med de färgglada boxarna igen blir det så här:

body {
     background-color: #999;
     }
#container {
     background-color: #FFF;
     height: 200px;
     width: 200px;
     margin-right: auto;
    margin-left: auto;
     }
#rosa {
     background-color:#F9F;
     height:50px;
     width:50px;
     }
#gul {
     background-color:#FF6;
     height:50px;
     width:50px;
     float:right;
     }
#lila {
     background-color:#96F;
     height:50px;
     width:50px;
     left:75px;
     top:75px;
     float:right;
   }

 

Kommentarer

Den gula rutan lägger sig längst åt höger. Den lila rutan lägger sig så nära den kan.

(Egenskaperna left och top till väljaren #lila blir i detta fall overksamma eftersom vi har använt standardpositioneringen static.)

 

Clear

Om man vill avbryta floatingen, till exempel flör att få nästa element att hamna på en ny rad, använder man egenskapen clear tillsammans med någon av värdena left, right eller both. (Man behöver inte skapa en klass för varje ny rad som i exemplet nedan, utan kan skriva in deklarationen till andra väljare.)

.nyrad {
     clear:both;
     }