CSS - DIV

Roosweb · 2006-06-22, 01:40

Hej. Jag söker en guide till hur man använder DIV som dom flesta nya sidor använder, har du en bra länk till en bra gude om DIV så ge mig den då gärna.
MVH
Roosweb

blipplopp · 2006-06-22, 02:16

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!

Roosweb · 2006-06-22, 02:19

Tack så mycket, ska genast kolla in det hära, kul att börja lära sig göra mer "riktiga" sidor, tack igen och ha det bra!

/Roosweb

Björn · 2006-06-22, 02:31

http://www.thenoodleincident.com/tutorials...sson/boxes.html

http://www.hoglind.org/css-solutions/

Roosweb · 2006-06-22, 02:58

Tack för dom här också

N!cklas · 2006-06-22, 07:23

http://nyhetsbrev.idg.se/showmail.asp?id=14749#3

SiC · 2006-06-26, 15:52

"Börja använda divs!"
http://www.htmlsidan.se/?visa=artiklar&id=20

"Så funkar clear: both;"
http://www.ansluten.net/?visa=artikellas&id=13

"Vad man bör tänka på när man webbutvecklar!"
http://www.ansluten.net/?visa=artikellas&id=3

"I början av en hemsida"
http://www.htmlsidan.se/?visa=artiklar&id=66

Så där, där är ett par stycken läsvärda artiklar. Kolla även in "Design i XHTML med CSS" på http://www.td-webdesign.se/inspiration/?nr=nov05#del7

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

CSS - DIV