HTML Repetition
"Block" och "Inline"
De flesta taggarna är antingen ett block element eller inline element.
Block startar och slutar oftast med en ny rad i webbläsaren.
Till exempel har vi div, p, h1, ul, table .
Inline elements visas normalt utan att starta på en ny rad.
Till exempel span, strong, a, img, td .
Div-taggen är en tagg utan defaultinställningar förutom att den är ett block element och får en ny rad före respektive efter div-taggen start och slut. Den används som behållare och kan innehålla andra block eller inline taggar.
Vi styr utseendet och uppförandet med stilmallsinställningar. Div-taggen aänvänds för att styra utseendet på webbsidor, gruppera och styra webbsidans innehåll.
Boxmodellen
En total bredd på ovanstående exempel blir:
bredd = content(width) + 2*padding + 2*borderwidth + 2*margin
(när det är lika på både vänster och höger sida)
se även w3schools info
Test av boxmodellen
Här kommer ett exempel som är lämpligt att exprimentera med.
1) ta bort doctype raden och titta hur det ser ut i Chrome, Firefox, IE jämfört med om den finns med och webbsidan tolkas enligt riktlinjerna för html5. Utan doctype tolkar läsaren koden enligt egna specifika webbläsarinställningar.
<!DOCTYPE html>
<html>
<head>
<title>Boxmodellen</title>
<style>
body {
margin:0px;
font-family:Calibri, Arial, sans-serif;
}
.yttreDiv {
width: 340px;
padding:10px;
margin:10px;
border:10px blue solid;
background-color:lightsalmon;
}
.inreDiv {
width: 200px;
padding: 25px;
margin: 0px 20px;
border: 25px black solid;
background-color: lightskyblue;
}
.bredd {
width:400px;
margin:0;
padding:0px;
background-color:darkkhaki;
}
</style>
</head>
<body>
<div class="yttreDiv">
<div class="inreDiv">
Boxmodellen
</div>
</div>
<div class="bredd">
400px
</div>
</body>
</html>
Margin är avståndet utanför kantlinjen. Margin är transparant.
Padding ser till att avståndet mellan innehållet och kantlinjen blir ett visst avstånd. Padding får bakgrundens färg.
Lek lite med inställningarna så du blir säker på hur de fungerar.
Float och clear
Float ser till att just det block elementet flyter till vänster på sidan så långt det går. Om det inte får plats så flyttas det ner under det tidigare elementen.
Clear ser till att allt ska hamna under det som finns till vänster(left) eller höger(right) eller båda delarna(both).
Här kommer ett till exempel som är lämpligt att exprimentera med.
1) ändra width på rubrik
2) öka istället bredd på kolumn2 (eller padding eller border), vad händer och varför
3) varför hamnar allt i mitten
4) varför hamnar texten i sidfoten i mitten men inte rubriken
?) Hur får man kolumnerna i samma färg ( t ex khaki färgen). Vi vill inte se någon laxrosa färg.
Tips! Det kan vara smart att sätta rubrik taggarna (h1-h6 taggarna) till margin:0 och padding:0 för att lättare kunna styra utseendet på sina sidor. Eftersom de har som default att det ska vara luft ovanför och under och det är inte alltid vi har koll på hur mycket luft det blir.
Vi använder en div-tagg, "container", som behållare för allt och som har overflow:hidden för att div-taggens kantlinje ska synas under utvecklingen. Om vi inte hunnit skapa eller vill ha sidfot (med clear:both) så vill vi att det ska se bra ut ändå. Det gör det med denna inställning. Om vi bygger nedanstående som har en sidfot utan overflow:hidden så skulle det se tokigt ut tills vi lagt till sidfoten, först då hade allt ordnat sig och kantlinjen omslutit allt.
<!DOCTYPE html>
<html>
<head>
<title>2 kolumner</title>
<style>
body {
margin:0px;
font-family:Calibri, Arial, sans-serif;
}
.container {
width:500px;
margin:auto;
padding: 0px;
border:1px black solid;
background-color:lightsalmon;
overflow:hidden; /* viktig när man bygger för att det ska bli bra utan eventuell sidfot med clear:both */
}
.rubrik {
/*width:100%; */ /* onödig */
padding:10px 50px;
margin:0px;
border-bottom:1px black solid;
background-color:lightskyblue;
}
.kolumn1 {
width:230px;
/*height:200px;*/ /*väldigt begränsande, oflexibelt*/
margin:0;
padding:10px;
float:left;
background-color:#C93;
}
.kolumn2 {
width:229px;
/*height:200px;*/ /*väldigt begränsande, oflexibelt*/
margin:0;
padding:10px;
border-left:1px black solid;
float:left;
background-color:#396;
}
.sidfot {
text-align:center;
margin:0;
padding:10px;
border-top:1px black solid;
background-color:#999;
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="rubrik">
Hej svejs!
</div>
<div class="kolumn1">
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx
</div>
<div class="kolumn2">
yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy yy
</div>
<div class="sidfot">
© PB
</div>
</div>
</body>
</html>