En overskrift
En hel masse tekst sættes ind her.
Det er så indholdet på din side..
Tilbage til Box modellen - positionering med CSS
Siden er stadig opbygget vha. block elementet <div></div>, men
der er nu tilføjet
en <div> der skal holde styr på billedets position:
<div id="pic">Billedet sat ind her</div>
Så den komplette kodning til den flotte side ;) ser nu således ud:
<div id="container">
<div id="banner">En overskrift</div>
<div id="indhold">
<div id="pic"><img src="pics/orm.jpg"></div>
En hel masse tekst sættes ind her.<BR>Det er så indholdet på din side..
</div>
</div>
Og CSSén ser nu således ud:
body {
font-family: Arial;
font-size: 12pt;
}
div#container {
height: 200px;
width: 280px;
border: 2px solid black;
background-color: #FFFFFF;
}
div#banner {
background-color: #6495ED;
height: 50px;
font-family: "Arial Black";
font-size: 20px;
font-weight : bold;
padding-left: 5px;
padding-top: 5px;
}
div#indhold {
margin-left: 45px;
margin-right: 5px;
margin-top: 5px;
}
div#pic {
float: left;
width: 95px;
height: 79px;
}