Basis basen (geen slicen)

Ik heb in mijn vorige tutorial de basis van stylesheets uitgelegd! Nog niet gelezen? Doe dat dan eerst. Klik hier voor de basis stylesheets.

We gaan eerst beginnen met de standaard html.

<!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" xml:lang="en" lang="en">
<head>
<title>Titel van je document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<center> // deze gebruik ik om de site in het midden te zetten
<body>

</body>
</center>
</html>

Hierboven dus de standaard opmaak. En ik heb dus xHTML gebruikt bovenin om te zorgen dat de layout in zoveel mogelijk browsers het zelfde weergeeft.

We gaan nu de style sheets in het document plaatsen. Natuurlijk hoef je niet persé de stylesheets
op te roepen binnen het html bestand. Je kan ze ook vanuit een ander bestand oproepen, dan gebruik je

<!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" xml:lang="en" lang="en">
<head>
<title>Titel van je document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
 background: #ffffff;
 font-size: 11px;
 font-family: verdana;
}
#container {
 background: #777777;
 width: 794px;
 overflow: hidden;
 margin: 0px auto;
 margin-left: 3px;
 margin-right: 3px;
}
#header {
 width: 800px;
 height: 140px;
 background: #000000;
}
-->
</style>
</head>
<center> // deze gebruik ik om de site in het midden te zetten
<body>
<div id="header"></div>
<div id="container">
inhoud van de div
</div>
</body>
</center>
</html>

Even een korte uitleg over de div:

# voor de stylenaam = oproepen als: . voor de stylenaam = oproepen als:
Dit was je eerste onderhouds layout in kleur codes!

binnenkort gaan we een uitgebreide layout basen

die center is zo overbodig zet heel je layout in een container > {margin:0 auto;} en het staat vanzelf in het midden en noem waar je je inhoud inzet anders > content of zo

Ik ben zoiezo al slecht in alles met scripten, snap de helft niet van al die codes maar ik ga wel een week dingen zitten te proberen

Marjolein schreef:

die center is zo overbodig

zet heel je layout in een container > {margin:0 auto;} en het staat vanzelf in het midden en noem waar je je inhoud inzet anders > content of zo

marjolein. Ja ik ben nog beginnend. Maar dit werkt. maar dank voor de tip!

font-size: 11px;
font-family: verdana;
->
font: 11px Verdana;

Paull schreef:

marjolein. Ja ik ben nog beginnend. Maar dit werkt. maar dank voor de tip!

Tuurlijk werkt de center tags maar is niet de gangbare manier. Je layout met table coderen werkt ook maar wordt niet meer gewaardeerd. Als je dan toch lerende ben, leer het dan zoals de webmasters het graag willen, zonder overbodige tags

oké, sorry dat ik jullie dan met deze tutorial lastig val

Paull schreef:

oké, sorry dat ik jullie dan met deze tutorial lastig val

lastig vallen doe je ons niet hoor, juist fijn dat je je kennis wil delen met anderen. Maar sta open voor verbeteringen, als ik iets doe wat beter kan neem ik die tips ook van harte aan

Miel schreef:

font-size: 11px;

font-family: verdana;
->
font: 11px Verdana;

Ja css shorthand, ik gebruik meestal het nettere voluit css want anders lijkt het net of je er niet de tijd voor hebt/wilde nemen. En dan is het voor de potiëntele koper makkelijker om hier en daar aanpassingen te maken

ik ben met Tunygue eens, anders lijkt het net alsof je te lui bent om je body style uit te typen

Paull schreef:

ik ben met Tunygue eens, anders lijkt het net alsof je te lui bent om je body style uit te typen

tunyQue jongedame

sorry

Marjolein schreef:

die center is zo overbodig

zet heel je layout in een container > {margin:0 auto;} en het staat vanzelf in het midden en noem waar je je inhoud inzet anders > content of zo
Tuurlijk werkt ie, behalve in IE natuurlijk

Die hele CSS is zo te schrijven:

body{ background: #FFF; font: 11px Verdana; }
#container{ background: #FFF; width: 794px; overflow: hidden; margin: 0 auto; }
#header{ widows: 800px; height: 140px; background: #000; }

Wat jij bij #container doet slaat nergens op, je doet eerst:
margin: 0px auto;
en daarna
margin-left: 3px;
margin-right: 3px;

Wat je dus eigenlijk doet is die "auto" die je eerst geset hebt weer opheffen, want margin: 0px auto; is hetzelfde als:

margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;

Ik heb na het posten van deze tutorial al wat meer geleerd, dus die centers enzo heb ik ook niet meer nodig, Slotje mag hier wel op