recept! :: Dreamweaver zonder apDiv's en tabellen
Hoi Sander,
... volgens mij heb ik voor de lay out alleen maar div tags gebruikt en geen tabellen.
Volgens mij zie ik in de broncode staan:
HTML:
<body>
<table height=100% cellspacing=0 cellpadding=0 align=center>
<tr>
<td valign=middle>
... enz.
Ik kan wel aardig overweg met dreamweaver maar weet lang niet wat alles betekent.
Voor Dreamweaver zijn uitgebreide Engelse handleidingen op internet:
Zelf heb ik geen Dreamweaver, dus ik kan niet vertellen hoe je het in DW via de ontwerp-weergave voor elkaar kunt stoven.
Maar ik kan wel aardig overweg met de broncode.
Het recept is dan als volgt.
Hier eerst even diep ademhalen!
- Ga naar de code-weergave van de pagina.
- Wis alles wat daar staat, en plak er het volgende in:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- http://www.helpmij.nl/forum/showthread.php/615919-Teksten-en-afbeeldingen-bewegen-niet-mee -->
<meta name="robots" content="noindex, nofollow" /><!-- alleen voor deze testpagina -->
<title>haha-1</title><!-- alleen voor deze testpagina -->
<meta name="description" content="Dit is de website beschrijving voor Google!" />
<meta name="keywords" content="keywords, here" />
<style type="text/css">
/* hier gaat voorlopig de css komen */
</style>
</head>
<body>
<p>(hier komt de pagina-inhoud)</p>
<p><a href="http://validator.w3.org/check?uri=referer">Valid xhtml1.0 Strict</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid css2.1</a></p>
</body>
</html>
- Sla de pagina op met een nieuwe naam!
Hiermee volg je het aanbevolen
pagina-model volgens de standaarden van w3c.
- Resultaat: www.developerscorner.nl/csshunter/tests/haha-1.htm
- Dit is het startpunt: vervolgens gaan we beetje bij beetje de elementen van boven naar beneden toevoegen. En steeds controleren of het nog goed gaat!
Want herstellen zodra een probleem zich voordoet is 1000x beter dan eerst de complete lay-out maken en op het laatst corrigeren: zoals met de apDiv's blijkt dat soms gewoon niet te kunnen...
- Zie ook de Golden Rules of CSS.
= = = = = = = = = =
Het eerste wat we nu gaan doen, is voor Firefox ruimte aan de rechterkant maken voor de scrollbar. Als je een korte pagina hebt (die helemaal op het scherm past) en ergens anders op de site een lange pagina (die in hoogte niet op het scherm past), zou je anders een verspringing links-rechts krijgen bij een wissel tussen deze pagina's -- omdat de ene pagina geen scrollbar heeft, en de andere wel.
Maak hiervoor de volgende css in het style-blok in de <head>:
Code:
html {
height: 100%;
padding: 1px;
}
De padding (opvulling) van 1px maakt dat de pagina net 1px hoger is dan de schermhoogte, en er moet dus altijd een scrollbar aan de rechterkant komen.
Het tweede wat we nu gaan doen, is de pagina in het midden zetten voor elke beeldschermbreedte. Voeg aan het style-blok toe:
Code:
body {
width: 800px; /* de gekozen breedte; niet meer dan 980px */
margin: 10px auto; /* boven en beneden 10px speling, links/rechts automatisch = gecentreerd */
padding: 0; /* alle browsers hetzelfde */
border-left: 1px dotted fuchsia; /* tijdelijk */
border-right: 1px dotted fuchsia; /* tijdelijk */
}
Met een maximale breedte van 980px past de pagina in elk geval op een resolutie van 1024*768px. Ook bij een grotere breedte komt de pagina in het midden. Het tijdelijke stippel-randje links en rechts is om te zien waar je zit.
= = = = = = = = = =
Nu is de achtergrond-kleur aan de beurt. Voor de <body> moet die wit worden, en voor de rest grijs. Voeg dus toe:
Code:
html {
...
background: #999999;
color: black;
}
body {
...
background: #F0F0F0;
color: black;
}
De tijdelijke stippellijntjes kunnen er nu meteen uit. Om het contrast tussen de letters en de achtergrond niet te groot te maken, had je de letters grijzer gemaakt op de witte achtergrond. Het geeft echter een veel rustiger beeld en betere leesbaarheid als je het precies omgekeerd doet: de achtergrond heel licht grijs, en de letters zwart houden.
We zien nu dat de afstand boven de <body> niet in alle browsers de opgegeven 10px is, maar soms ongeveer 16px. Niets van aantrekken, dat komt omdat de <p> nog niet genormaliseerd is -- dat komt later goed.
= = = = = = = = = =
Volgende stap: de eerste <div>, de <div id="header"> met het logo er in, kan in de html komen.
HTML:
<div id="header">
<img src="images/logo-witte-letters.png" width="333" height="85" alt="Logo Witte Letters" />
</div>
Omdat een <div> een "block-element" is, en zonder tegenbericht altijd de volle beschikbare breedte inneemt van het element waar het in zit (hier: de <body>), hoeft er niets speciaals aan css mee te gebeuren.
Voor het img is wel wat css nodig: dat heeft als het in een regel staat altijd een paar lege pixels eronder, zodat letters met een neerhaal (zoals een "p") ook wat ruimte krijgen. Hier is dat niet nodig, en dat wordt opgelost door het img een "vertical-align" mee te geven. Tegelijkertijd wordt ook verboden om er een randje omheen te zetten. Dat komt van pas als je van een img een link wilt maken (bv. bij het logo: naar de homepage), anders zou daar een vette blauwe rand omheen komen. Dus:
Code:
img {
border: 0;
vertical-align: top;
}
= = = = = = = = = =
Zo staat het logo stuik tegen de randen. Als je dat anders wilt, kan dat bv. door paddings (vulstukjes) op te geven voor de #header. Ook een ander achtergrondkleurtje voor deze <div> is mogelijk:
Code:
#header {
padding: 15px 20px; /* opvulling boven/beneden: 15px; links/rechts: 20px; */
background: #F0D46F;
color: black;
}
= = = = = = = = = =
De fotokop-letters afbeelding moet hieronder komen, met een tussenruimte van 15px aan de bovenkant. Eronder = op de volgende regel, met een <br />:
HTML:
<div id="header">
<img src="images/header-witte-letters.gif" width="333" height="85" alt="Logo Witte Letters" /><br />
<img id="fotokop" src="images/fotokop-letters.jpg" width="278" height="184" alt="Fotokop Letters" />
</div>
De 15px erboven kan met css geregeld worden:
Code:
#fotokop {
margin-top: 15px;
}
= = = = = = = = = =
De volgende afbeelding komt er gewoon naast ...
HTML:
<div id="header">
<img src="images/header-witte-letters.gif" width="333" height="85" alt="Logo Witte Letters" /><br />
<img id="fotokop" src="images/fotokop-letters.jpg" width="278" height="184" alt="Fotokop Letters" />
<img id="rozekop" src="images/header2-roze-letters.gif" width="418" height="111" alt="Logo Roze Letters" />
</div>
... en de afstanden worden weer geregeld met css:
#rozekop {
margin-top: 45px;
margin-left: 40px;
}
= = = = = = = = = =
Intussen eens even kijken hoe het geheel zich gedraagt bij trekken en duwen aan het window-formaat, en bij andere resoluties!
Gaat het goed? Dan verder!
= = = = = = = = = =
De menu-items stonden er allemaal in als apDiv's, maar dat gaan we nu niet doen. We maken er een mooi horizontaal lijstje van:
HTML:
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Over ons</a></li>
<li><a href="/">Werkwijze</a></li>
<li><a href="/">Tarief</a></li>
<li><a href="/">Contact</a></li>
</ul>
<div class="clearL"><!-- voor doortrekken menubalk --></div>
</div>
De bijbehorende css is:
Code:
#menu {
background: #005F60;
color: white;
}
#menu ul {
margin: 0 0 0 20px;
padding: 0;
list-style: none;
}
#menu li {
float: left;
margin: 0;
padding: 0;
}
#menu a {
padding: 10px 15px;
display: block;
background: #005F60;
color: white;
}
#menu a:hover {
background: white;
color: #005F60;
}
.clearB {
clear: both;
}
Het hoe en waarom van deze menu-css laat ik hier kortheidshalve achterwege.
Over de opbouw van zo'n menulijstje staat
ergens anders op het forum (vanaf stap 5) wat uitleg.
= = = = = = = = = =
Nu kunnen we even regelen dat alle letters in het goede lettertype komen, en voor alle browsers de lettergrootte normaliseren. Door het lettertype in de <body> op te geven, zijn we in 1 klap van alles af. Dan hoeven alleen eventuele afwijkende lettertypes in een bepaalde container opgegeven te worden:
Code:
body {
...
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
font-size: 100.1%;
}
= = = = = = = = = =
Dan komen de twee kolommen: de #maincontent en de grijze #rechterkolom. Die kunnen naast elkaar komen door de ene naar links te laten drijven {float:left;} en de andere naar rechts {float:right;}. Erna komt weer een zg. "clearing div" om de achtergrond van de body te laten doorlopen. We beginnen met de #maincontent:
HTML:
<div id="maincontent">
<p>(hier komt de rest van de pagina-inhoud)</p>
</div>
<div class="clearB"><!-- voor doortrekken body-achtergrond --></div>
Met in de css:
Code:
#maincontent {
float: left;
width: 505px; /* echte breedte is incl. padding: 505+30 = 535px */
padding: 0 10px 0 20px;
border-right: 1px dotted fuchsia;
}
= = = = = = = = = =
Nu de rechterkolom erbij (met voor de veiligheid een paar px speling ertussen):
HTML:
<div id="rechterkolom">
<p>(hier komt de inhoud van de rechterkolom)</p>
</div>
Met:
Code:
#rechterkolom {
float: right;
width: 230px; /* echte breedte is incl. padding: 230+15+15 = 260px */
padding: 0 15px 0 15px;
background: #CCCCCC;
color: black;
border-left: 1px dotted green;
}
= = = = = = = = = =
We zien dat nu de achtergrond van de rechterkolom niet doorlopt tot op de grond. Dat komt door het drijvend maken van de kolom. Maar hier is een oplossing voor: we geven de <body> aan de rechterkant een achtergrondfiguur mee met de kleur en de breedte van de rechterkolom! (Dit is de zg. "faux column" techniek: een nep-kolom).
De achtergrondfiguur hoeft niet hoog te zijn, 1px is in principe voldoende; want de figuur kan verticaal herhaald worden. Maar om de browser niet te veel werk te geven, kan beter een hoogte van bv. 100px genomen worden:
De css wordt:
Code:
body {
...
background: #F0F0F0 url(images/bg-rechterkolom.gif) repeat-y 100% 0;
}
De 100% zorgt ervoor dat de horizontale afstand van de afbeelding helemaal rechts begint, en van daaruit terug de body in loopt.
= = = = = = = = = =
Onder de twee kolommen kan nu de footer over de volle breedte gezet worden. De losse clearing-div kan er nu uit, als in plaats hiervan de footer zelf de class="clearB" meekrijgt:
HTML:
<div id="footer" class="clearB">
ik ben de footer!
</div>
Met bijvoorbeeld:
Code:
#footer {
background: #005F60;
color: white;
text-align: center;
}
= = = = = = = = = =
Daarmee is het template klaar, en kunnen we straffeloos gaan opvullen.
= = = = = = = = = =
Rest nog om alle css-styles uit de <head> te halen en in een apart stylesheet te zetten (
stylesheets/haha.css; niet vergeten de url's van de background-images naar de goede mappen te laten verwijzen), en dit in de head van elke pagina aan te haken:
HTML:
...
<link rel="stylesheet" type="text/css" href="stylesheets/haha.css" />
</head>
= = = = = = = = = =
Ziezo!
Nu kan je weer uitademen.
Mooi van de tabel en al die apDiv's af:
- sterk vereenvoudigde, overzichtelijke html gekregen,
- en alle styles staan herkenbaar in het stylesheet.
En dit alles zonder dat de hele Dreamweaver nodig was. :d
Succes ermee!
Met vriendelijke groet,
CSShunter
___________
PS: Alle mapnamen en bestandsnamen heb ik in kleine letters staan, om fouten te voorkomen. In Windows (lokaal) maakt het gebruik van kleine/hoofdletters niet uit, wel op een server.
