Ämne: CSS - DIV
Visa ett inlägg
Oläst 2006-06-22, 02:16 #2
blipplopp blipplopp är inte uppkopplad
Nykomling
 
Reg.datum: Jun 2006
Inlägg: 5
blipplopp blipplopp är inte uppkopplad
Nykomling
 
Reg.datum: Jun 2006
Inlägg: 5
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!
blipplopp är inte uppkopplad   Svara med citatSvara med citat