style sheet gemmes som style.css i samme mappe som siden
body {
Font-family: verdana;
font-size: 11px;
color: #000;
margin-top:0px;
margin-bottom:0px;
padding:0px;
background-color: #fff;}
/*Starter selv sideindelingen med de forskellige div boxe*/
/*heunder den box som centrere indholdet på siden*/
.holder {
position: relative;
width: 963px;
height: 20px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/*background-color: #fff;*/
}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
min-height: 200px;
height: auto;
}
/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
position: relative;
float: left;
width: 957px;
height: 300px;
border: 3px solid #94aec4;
background-color: #fff;
background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .indhold {
min-height: 300px;
height: auto;
}
/*heunder den conten hvor indhold på siden skal sættes ind*/
.content {
position: relative;
float: right; /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
width: 740px;
height: 10px;
padding: 10px;
margin-top: 20px;
background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
min-height: 10px;
height: auto;}
/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/
.toplogo {
position: relative;
float: left;
width: 957px;
height: 90px;
background-color: #fff;
border-top: 1px solid #94aec4;
/*herunder kan du indsætte toplogo
background: url(../image/toplogo.jpg);
background-repeat: repeat-y;*/}
/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
position: relative;
font-size: 11px;
float: left;
padding: 0px 0px 0px 10px;
width: 947px;
height: 20px;
color: #fff;
border-top: 1px solid #94aec4;
background-color: #435a6e;
display: inline;
z-index: 200;}
/*heunder left indhold , her kan du evt lave menu*/
.left {
position: relative;
float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
width: 155px;
height: 500px;
margin-right: 0px;
padding: 5px;
background-color: #bbb;*/}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
min-height: 500px;
height: auto;}
.bund {
position: relative;
font-size: 11px;
float: left;
width: 960px;
height: 20px;
text-align: center;
margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid #94aec4;
}
Siden gemmes som what ever
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Udvid</title>
<meta http-equiv="Content-Language" content="da" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style/alink.css" />
</head>
<body>
<div class="holder">
<!--indhold starter her og denne div er den der udvider -->
<div class="indhold">
<!--Toplogo starter herunder-->
<div class="toplogo">Toplogo</div>
<!--Vandrette menu starter her-->
<div class="menu"></div>
<!--Left starter her og kan bruges til alt mulig indhold-->
<div class="left">Venstre
</div><!--Left slutter her-->
<!--Contente starter her-->
<div class="content">
Indhold på siden sættes ind her
<div class="curvy">
<em id="ctl"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>
</div><!--Content slutter her-->
</div><!--Indhold slutter her-->
<div class="bund">Bund bjælke</div>
</div>
</body>
</html>
prøve ovenstående resultate kan ses på
http://websmeden.dk/test/css/siden.php
