Code: Selecteer alles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>K-SUS CSS v1.0</title>
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div id="wrap">
<div id="header">
<h2>kCSS v1.0</h2>
<p id="by"><?php echo "// by CaSeS"?></p>
</div>
<div id="nav">
( Home | Links | Scripts | Tips | gofckurSelf | 1337 )
</div>
<div id="main" class="meen">
kCSS v1.0 beta i now available in the download section! Download it. Typperdetyppppp Flieppperderfliepppppppp
<div id="minibar">
Minibar
</div>
</div>
<div id="footer">
Copyright <?php echo date("Y"); ?> K-SUS Inc. All rights reserved
</div>
</div>
</body>
</html>Dit moet niet zo moeilijk zijn geloof ik maar ik heb nog niet geslapen vannacht.. dit begint een obsessie te worden haha.
Ik ben aan het oefenen met CSS en ben een basis aan het vormen die ik later evt. zou kunnen hergebruiken.
Ik wil een zootje templates maken om even te wennen.
Ik heb een simpele code gemaakt met Div, CSS en wat GIFjes in photoshop om het wat completer te maken.
http://www.k-sus.nl/basis/
Zoals je ziet druk de tekst van mijn main div, de minibar div aan de kant.
Css: (let niet op de comments, ik ben nieuw dus dat is makkelijker voor mij zo om te onthouden)
Code: Selecteer alles
/*
K-SUS' STD CSS v1.0
WWW.K-SUS.NL
ZIE ..HANDIG/IMG
*/
/* <HTML></HTML> */
html{
font-size: 100%; /* IE heeft problemen met "em" dus voor IE, is deze regel nodig (zie body fontsize)*/
}
/* <BODY></BODY> */
body{
font-size: 1em; /* Body font is std. 16px, dus 1em=16px */
font-family: georgia, serif; /* Als de font Georgia niet aanwezig is, pak dan serif, and so on */
text-align: center; /* Alles in de viewport word gecentreerd, dit handig voor de content wrapper */
color: #444; /* Tekst Kleur */
background: #e6e6e6; /* Achtergrond waardes */
padding: 0; /* Hoeveel ruimte moet er worden vrijgehouden tussen de inhoud van
margin: 0; /* Marge tussen elementen. PADDING/MARGIN VOLGORDE: boven rechts onder links */
}
#wrap{
width: 61.875em; /* 46.25em; */ /* 740px Mooi voor 800x600 reso. Doe voor 1024x768 niet meer als 990 breed */
margin: 1.5em auto; /* */
margin-top: 0.9375em;
margin-bottom: 0.9375em;
margin-left: auto;
margin-right: auto;
}
#header {
width: 54em;
height: 5em;
color: #fff;
background-image:url('../img/top.gif');
padding: 0.5em;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.550em;
margin-top: 0.252em;
text-align: left;
}
#nav {
width: 54em;
height: 1.2em;
color: #8a990b;
padding: 0.5em;
padding-bottom: 0.8em;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.500em;
font-size: 0.8em;
font-family: verdana;
}
#main {
width: 54em;
height: 20em;
color: #6d761c;
background: #fff;
padding: 0.5em;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.500em;
padding-top: 1em;
text-align: left;
background-image:url('../img/main_bgtop.gif');
background-repeat: no-repeat;
}
.meen {
padding-right: 5em;
}
#minibar {
width: 8em;
height: 19em;
float: right;
background-color: #f8fae7;
color: #6d761c;
background-image:url('../img/minibar_bgleft.gif');
background-repeat: no-repeat;
padding-left:1.8em;
padding-top:0.60em;
padding-bottom:0.8em;
position:inherit;
}
#footer {
width: 54em;
color: #a09f9f;
padding: 0.5em;
font-size: 0.53em;
margin-left: auto;
margin-right: auto;
font-family: verdana;
}
#by {
font-family: courier;
text-align: right;
}
http://www.K-SUS.nl/basis/
Ik ben ook wel benieuwd wanneer ik .class gebruik en/of #id/element toe moet passen.
met class (div) heb ik nog niet gewerkt, maar dat lijkt me handig om op verschillende div's toe te passen als dat mogeijk is.