Hej!
Jag har ett par exempel som jag skrivigt till en vänn i England om design med CSS som du kan kolla på. Testa att lägga in koden i ett html dokument och kolla på det och studera källkoden.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>basicDesignWithCSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
width:510px;
}
.top{
padding:5px;
width:500px;
height:20px;
background-color:#666666;
}
.box1Main {
background-color:#999999;
padding:5px;
width:500px;
}
.boxMainLeft {
background-color:#CCCCCC;
padding:5px;
width:245px;
float:left;
}
.boxMainRight {
background-color:#999999;
padding:5px;
width:245px;
float:right;
}
.boxMainBottom {
background-color:#009966;
padding:5px;
width:500px;
}
.bottomLeft {
background-color:#FF9900;
padding:5px;
width:160px;
float:left;
}
.bottomMiddle {
background-color:#FFCC00;
padding:5px;
width:160px;
float:left;
}
.bottomRight {
background-color:#FFCCCC;
padding:5px;
width:160px;
float:right;
}
.clearFloat {
clear:both;
}
.myLink a:link {
color:#00FF00;
text-decoration:none;
}
.myLink a:visited {
color:#00FF00;
text-decoration:none;
}
.myLink a:hover {
color:#FF0000;
text-decoration:none;
}
.myLink a:active {
color:#00FF00;
text-decoration:none;
}
-->
</style>
</head>
<body>
<!--
We start of with a basic 2 part box, with a top and main box
-->
<!--Top-->
<div class="top">
Box 1
</div>
<!--Main-->
<div class="box1Main">
Main text 1!<br />
Main text 2!<br />
Main text 3!<br />
Main text 4!
</div>
<br />
<!--
Lets advance and make the same as above but adding left and right into main.
-->
<!--Top-->
<div class="top">
Box 2
</div>
<!--Main Left-->
<div class="boxMainLeft">
Main text left 1!<br />
Main text left 2!<br />
Main text left 3!<br />
Main text left 4!<br />
</div>
<!--Main Right-->
<div class="boxMainRight">
Main text right 1!<br />
Main text right 2!<br />
Main text right 3!<br />
Main text right 4!<br />
</div>
<div class="clearFloat"></div>
<br />
<!--
Lets advance even more adding a 3rd box in our main.
-->
<!--Top-->
<div class="top">
Box 3
</div>
<!--Main Left-->
<div class="boxMainLeft">
Main text left 1!<br />
Main text left 2!<br />
Main text left 3!<br />
Main text left 4!<br />
</div>
<!--Main Right-->
<div class="boxMainRight">
Main text right 1!<br />
Main text right 2!<br />
Main text right 3!<br />
Main text right 4!<br />
</div>
<!--Main Bottom-->
<div class="boxMainBottom">
MAIN!
</div>
<br />
<!--
Lets advance even more adding a 3rd box in our main.
-->
<!--Top-->
<div class="top">
Box 4
</div>
<!--Main Left-->
<div class="boxMainLeft">
Main text left 1!<br />
Main text left 2!<br />
Main text left 3!<br />
Main text left 4!<br />
</div>
<!--Main Right-->
<div class="boxMainRight">
Main text right 1!<br />
Main text right 2!<br />
Main text right 3!<br />
Main text right 4!<br />
</div>
<!--Main Bottom-->
<div class="boxMainBottom">
MAIN!
</div>
<!--Bottom Left-->
<div class="bottomLeft">
<p class="myLink"><a href="#">Link 1</a></p>
</div>
<!--Bottom Middle-->
<div class="bottomMiddle">
<p class="myLink"><a href="#">Link 2</a></p>
</div>
<!--Bottom Right-->
<div class="bottomRight">
<p class="myLink"><a href="#">Link 3</a></p>
</div>
<div class="clearFloat"></div>
</body>
</html>
Annars har väll W3school gamska bra tutorials,
http://www.w3schools.com/
Ha det och lycka till!