Eksempel, med opdelt HTML og CSS, er gyldigt jvf W3Cs validator (både HTML og CSS):
*** HTML fil (kald den hvad du vil)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style01.css">
</head>
<body>
<div id="divMaster">
<div id="divTop">
top / banner
</div>
<div id="divLeft">
<div id="divLeftOne">
<div class="divLeftItem divLeftItemLight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque, diam sed iaculis sodales, magna arcu dictum urna, nec lobortis mauris augue in orci. Phasellus commodo nisl sit amet lorem luctus eget scelerisque libero consectetur. Nulla mattis eros sed nibh pellentesque interdum. Quisque lacus risus, vehicula eu aliquam congue, dignissim at velit.
</div>
<div class="divLeftItem divLeftItemDark">
artikel, venstre, 2
</div>
<div class="divLeftItem divLeftItemLight">
artikel, venstre, 3
</div>
<div class="divLeftItem divLeftItemDark">
artikel, venstre, 4
</div>
<div style="clear: both"></div>
</div>
<div id="divLeftTwo">
<div class="divLeftItem divLeftItemLight">
artikel, hoejre, 1
</div>
<div class="divLeftItem divLeftItemDark">
Sed ultricies, mi at convallis pulvinar, justo metus molestie tortor, blandit ultricies dui ligula nec nibh. Aliquam nisi lorem, cursus at vehicula ac, iaculis at leo. Sed luctus lectus sit amet orci luctus sed porttitor ante euismod. Aliquam erat volutpat. Phasellus interdum, diam ac laoreet dignissim, est enim cursus metus, a gravida elit tellus at sapien. Vestibulum id odio quam. Aenean nec metus diam. Nullam eu tortor luctus nisi tempus faucibus ac et lectus. Integer gravida tempus fermentum. Nulla facilisi. Curabitur iaculis enim faucibus felis sagittis pharetra.
</div>
<div class="divLeftItem divLeftItemLight">
artikel, hoejre, 3
</div>
<div class="divLeftItem divLeftItemDark">
artikel, hoejre, 4
</div>
</div>
<div style="clear: both"></div>
</div>
<div id="divRight">
<div class="divRightItem">
<img src="
http://alkohol.dk/images/fugl.gif" alt="fugl">
</div>
<div class="divRightItem">
<img src="
http://alkohol.dk/images/glasogflasker2.gif" alt="flasker">
</div>
</div>
<div style="clear: both"></div>
<div id="divBottom">
kontaktoplysninger osv
</div>
</div>
</body>
</html>
*** CSS fil med FILNAVNET "style01.css"
#divMaster
{
background-color: #ffeeee; /* baggrundsfarve til masterboksen ("siden"), kan f.eks. vaere hvid */
width: 984px;
margin: 0 auto;
padding: 5px;
color: #000000; /* farve til teksten */
}
#divTop
{
height: 145px;
background-color: #ffffee; /* baggrundsfarve til toppen */
color: #000000; /* farve til teksten */
}
#divLeft
{
background-color: #eeffee; /* baggrundsfarve til venstre indholdsboks (med 2 kolonner) */
width: 745px;
float: left;
color: #000000; /* farve til teksten */
}
#divLeftOne
{
width: 370px;
float: left;
}
#divLeftTwo
{
width: 365px;
float: right;
}
#divRight
{
background-color: #eeeeff; /* baggrundsfarve til hoejre indholdsboks */
width: 222px;
float: right;
color: #000000; /* farve til teksten */
}
#divBottom
{
margin-top: 20px;
height: 40px;
background-color: #eeffff; /* baggrundsfarve til bunden der indeholder kontaktoplysninger */
text-align: center;
color: #000000; /* farve til teksten */
}
.divLeftItem
{
border-bottom: 1px solid #ff0000; /* farven til seperator-linien */
padding-bottom: 15px;
margin-bottom: 20px;
}
.divRightItem
{
margin-bottom: 20px;
}
Ny bruger
Nybegynder
Opret
Preview
