The above website was made as should be: the whole lay-out is managed in the CSS document.
See part of the HTML here.
<head>
<title>Go for Nature natuur-reizen</title>
<style type="text/css">
<!--
@import url(go-for-nature.css);
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<img src="Puttertjes.jpg" alt="reizen in de natuur, reizen voor de natuur" width="750" height="147" title="" /></div>
<div id="subTop"></div>
<div id="menuL">
<p><a href="nieuws.htm">Nieuws</a></p>
<p><a href="polen/polen.htm">Polen</a></p>
<p><a href="slowakije/slow.htm">Slowakije</a></p>
<p><a href="italie/italie.htm">Italië</a></p>
<p><a href="zweden/zweden.htm">Zweden</a></p>
<p><a href="finland/finland.htm">Finland</a></p>
<p><a href="bulgarije/bulgarije.htm">Bulgarije</a></p>
<p><a href="sitemap.htm">Reis-zoeker</a></p>
</div>
<div id="main_column">
<div id="main_content">
<h1>Welkom</h1>
<p>Ontdek de wereld die jou dichter brengt bij natuur en cultuur in de wilde natuurgebieden van Europa.<br />
Avontuurlijke natuur- en cultuurreizen naar de meest wonderschone en ongerepte natuurgebieden van Europa.</p>
<p> Reizen die je uitdagen, veranderen en inspireren.</p>
<p><img src="Wandelen-in-de-natuur.jpg" alt="Wandeltochten in de natuur" title="" width="412" height="138" /></p>
<p>Met lokale gidsen natuur beleven en voelen... Maar ook een steentje bijdrage aan het behoud van natuur. </p>
<p> Natuurlijk duurzaam reizen, zo kunnen ook andere in de toekomst blijven genieten van de ongerepte natuur.</p>
<p> Reizen ín de Natuur?<br />
Reizen vóór de Natuur?<br />
Go for Nature! </p>
<p><img src="Ingang.jpg" alt="Lynx" width="412" height="138" title="" /></p>
<p><strong>Kijk vlug verder!<br />
</strong><img src="valid.gif" alt="Valid XHTML and CSS" title="" width="186" height="56" /></p>
</div>
</div>
<div id="menuR">
<p><a href="formule.htm">Formule</a></p>
<p><a href="zwaarte.htm">Zwaarte van de reizen</a></p>
<p><a href="boeken.htm">Hoe boeken</a></p>
<p><a href="reizen.htm">Individuele en groepsreizen</a></p>
<p><a href="maat.htm">Maatwerk</a></p>
<p><a href="stichting.htm">De Stichting</a></p>
<p><a href="duurzaam.htm">Duurzaam!</a></p>
<p><a href="contact.htm">Contact</a></p>
<p><a href="disclaimer.htm">Disclaimer</a></p>
<p><a href="nieuwsbrief.htm">Nieuwsbrief</a></p>
</div>
</body>
(I am not saying this is great web scripting, but it is as good as I can.)
The part that is red refers to the CSS document.
You can see several pieces of code like <div id="...">. Div stands for division, a part of the web page, while id is the name under which the lay-out in the CSS for that part of the page is described.
(MenuL: menu left side; MenuR: menu right side.)
Here you see the page as it looks like in the HTML editor Adobe Dreamweaver. The dotted lines contain the various div's. 1 is the div
main_column, in which 2, main_content, is nested.
See this part of the code now:
</div>
</div>
<div id="menuR">
The first </div> is where main_column ends, while the second indicates where main_content ends.
Find the texts Welkom (welcome) and Ontdek de wereld (discover the world) in both screendumps and in the HTML. In the screendumps you can see they are different fonts.
Now have a look at the CSS:
body
{
background: #ffffff url(bg.jpg) repeat-y fixed top;
text-align: center;
padding: 0;
padding-top: 20px;
margin: 0;
}
h1
{
font-size: 1.6em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336600;
line-height: 1.5em;
text-align: center;
}
h2
{
font-size: 1.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
h3
{
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336600;
text-align: center;
}
#container
{
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
margin: auto; /* for non IE browsers */
}
#top
{
height: 147px;
background: #ffffff;
}
#subTop
{
height: 50px;
background-color: #d5edb3;
background-image: url(PAN.gif);
background-repeat: no-repeat;
background-position: right top;
}
#menuL
{
padding-top: 20px;
float: left;
width: 104px;
background-color: #d5edb3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: bold;
text-align: right;
line-height: 16px;
letter-spacing: .1em;
}
#menuL p
{
margin: 0;
padding: 5px 10px;
color: #d5edb3;
}
#menuL a
{
padding-right: 3px;
padding-bottom: 2px;
display: block;
text-decoration: none;
border-style: none solid solid none;
border-width: 0px 3px 3px 0px;
border-color: #5e9542;
}
#menuL a:link
{
color: #336600;
text-decoration: none;
}
#menuL a:visited
{
color: #336600;
text-decoration: none;
}
#menuL a:hover
{
border-color: #666666;
color: #000000;
text-decoration: none;
}
#main_column
{
background-color:#ffffff;
float: left;
width: 450px;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
text-align: left;
line-height: 16px;
letter-spacing: .1em;
}
#main_content
{
margin: 0px;
width: 450px;
}
********************************************
Now find in this CSS
}
#main_column
{
and
}
#main_content
{
Both are followed by the instructions for the lay-out of these div's. main_content inherits anything indicated under main_column because it is nested in that div.
margin: 0px; width: 450px; is the exception on that for main_content.
In the HTML you saw <p>Ontdek de wereld. <p> stands for paragraph, and the font is described in the CSS as font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em;" under "main_column.
The text Welkom is preceded in the HTML by <h1> which stands for header 1, or the largest header. It is described in the CSS under h1 {.
