category css

1, 2 en 3 css kolommen layout maken

0

Aphichat
okt 27, 2008

1 Star2 Stars3 Stars4 Stars5 Stars

Tags: ,

Als je even niet weet hoe je een stramien (1 kolom 2 kolommen 3 kolommen) voor je website in css moet maken heb ik hier alvast een beginnetje voor jullie.

  • een kolom pagina layout
  • twee kolommen pagina layout
  • drie kolommen pagina layout

Kopieer en plak onderstaande code in Dreamweaver of Kladblok en sla dit op als index.html
Vragen en opmerkingen zijn altijd welkom!

01. HTML Code


<html>
<head>
<title>1, 2, 3 layout</title>
</head>
<body>
<!-- 1 KOLOM -->
<div id="container">
  <div class="header">
    <p>Ik ben header</p>
  </div>
 <div class="content">
    <p>Ik ben content</p>
  </div>
  <div class="footer">
    <p>Ik ben footer</p>
  </div>
</div>
<div class="clear"></div>
<!-- 2 KOLOMMEN -->
<div id="container">
  <div class="header">
    <p>Ik ben header</p>
  </div>
  <div class="content-links">
    <p>Ik ben content LINKS</p>
  </div>
  <div class="content-rechts">
    <p>Ik ben content RECHTS</p>
  </div>
  <div class="footer">
    <p>Ik ben footer</p>
  </div>
</div>
<div class="clear"></div>
<!-- 3 KOLOMMEN -->
<div id="container">
  <div class="header">
    <p>Ik ben header</p>
  </div>
  <div class="drie-links">
    <p>Ik ben content LINKS</p>
  </div>
  <div class="drie-midden">
    <p>Ik ben content MIDDEN</p>
  </div>
  <div class="drie-rechts">
    <p>Ik ben content RECHTS</p>
  </div>
  <div class="footer">
    <p>Ik ben footer</p>
  </div>
</div>
</body>
</html>
<div></div>

01. CSS Code

/* settings */
* {margin: 0; padding:0;}
.clear {clear: both;}
body { background: #000;}
/* typografie */
p {
padding: 10px 0 0 10px;
}
/* standaart settings */
.header {
height: 50px;
float: left;
width: 800px;
border-bottom: 1px dotted #555;
background-color: #D3D3D3;
text-align: center;
}
.footer {
height: 40px;
width: 800px;
float: left;
background-color: #909090;
text-align: center;
}

/* container voor alle layouts */
#container {
margin: 20px auto 0 auto;
width: 800px;
}
/* 1 kolom */
.content {
height: 200px;
background: #0099FF;
}
/* 2 kolommen */
.content-links {
width: 500px; height: 200px;
background: #0099FF;
float: left;
}
.content-rechts {
width: 300px; height: 200px;
background: #0000AA;
float: left;
}
/* 3 kolommen */
.drie-midden {
width: 400px; height: 200px;
float: left;
background: #444;
}
.drie-links, .drie-rechts {
width: 200px; height: 200px;
float: left;
background: #0099FF;
}

  1. No Comments

    Er zijn nog geen comments geplaats. Wees de eerste!