VanBerghem.Com

XHTML en CSS bestand opstellen

april 6th, 2008

Oké, je hebt gelezen dat je veel tijd en moeite kunt besparen als je de inhoud (HTML) en de presentatie (CSS) scheid. Maar hoe doe je dat in de praktijk? Hoe voorkom ik dat ik dat ik mijn HTML documenten toch gewijzigd moeten worden als ik het ontwerp van de website wil veranderen? Het antwoord is eigenlijk veel makkelijker dan dat veel mensen denken. Als je continuïteit wil hebben in het ontwerp van je pagina moet die continuïteit ook in de XHTML zitten. De XHTML moet het raamwerk vormen waar de CSS - de stilering en lay-out, aan wordt opgehangen. In meeste gevallen bestaat een pagina uit een kop, inhoud, navigatie (links) en een voet. Je zou het kunnen vergelijken met een vrouw en hoe ze zich kleed. De vrouw zelf is de XHTML en haar kleding, make-up, accessoires en schoenen zijn de CSS. Mocht een vrouw dit lezen, wil ik duidelijk maken dat ik de term kop niet gebruik om beledigend te zijn maar om verwarring te vermeiden met het hoofd element (<head>) in de pagina. Deze vergelijking slaat op wat zich binnen het <body> element bevind. De navigatie links moet je hier zien als een accessoire omdat die niet een vaste plek heeft op het lichaam. Soms worden de navigatie links tussen de kop en de inhoud geplaatst en steeds vaker tussen de inhoud en de voet of helemaal op het eind. De verschillende onderdelen worden elk tussen <div> elementen geplaatst en krijgen elk een uniek "id" zoals in het volgende voorbeeld.

Voorbeeld

<div id="header">

Dit maakt het mogelijk om gelijkwaardige elementen in de verschillende <div>’s een andere opmaak te geven. Om extra controle te geven over de pagina in zijn geheel plaats je all deze <div>’s binnen een andere <div> zodat de het XHTML document er als volgt uitziet.

XHTML

<body>
<div id="container">
  <div id="header">
      <h1>Naam van Website of Bedrijf</h1>
      <p>Motto van Website of Bedrijf</p>
  </div>
  <div id="content">
      <h2>Pagina Titel of Onderwerp</h2>
      <p>Lorem ipsum dolor sit amet,
     consectetuer adipiscing elit.
     Curabitur nulla lectus,
     suscipit ullamcorper, iaculis non,
     semper ac, arcu.
     Nullam nunc purus, blandit ac,
     dapibus vel, pretium in, mi.
     </p>
  </div>
<div id="navigation">
    <h2>Links</h2>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="#">pagina 2</a></li>
      <li><a href="#">pagina 3</a></li>
      <li><a href="#">pagina 4</a></li>
    </ul>
</div>
<div id="footer">
  <p>© copyright 2008 Company Name</p>
</div>
</div>
</body>

Het CSS bestand zou er dan zou uit kunnen zien.

CSS

* {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  border-style: none;
  list-style-type: none;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: #000000;
   background-color: #66CCFF;
}
#container {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  color: #44CCFF;
  background-color: #000000;
  border-bottom: thick solid #FFFF00;
}
#header h1 {
   font-size: 2em;
  font-weight: bold;
  text-align: center;
}
#header p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.9em;
  font-style: oblique;
  text-align: right;
  margin-right: 1em;
}
#content {
  padding: 10px;
  float: right;
  width: 600px;
}
#content h2 {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 0.7em;
}
#content p {
  margin-bottom: 1em;
}
#navigation {
  width: 180px;
  margin-top: 1em;
}
#navigation h2 {
  font-size: 1em;
  font-weight: bold;
  font-variant: small-caps;
  text-transform: capitalize;
  text-align: center;
}
#navigation ul {
  border: thin solid #FFFF00;
}
#navigation li {
  margin: 3px;
}
#navigation li a {
  text-transform: capitalize;
  color: #666666;
  border: thin solid #000066;
  display: block;
  padding: 5px;
}
#navigation li a:hover {
  color: #000000;
  border: thin solid #0000CC;
  background-color: #0099CC;
}
#footer {
  clear: both;
  margin-top: 2em;
  border-top: thick solid #FFFF00;
  width: 100%;
}
#footer p {
  font-size: 0.8em;
  text-align: center;
}

In andere artikels wordt in gegaan waarom men dit op deze wijze doet.

Posted in (X)HTML, CSS | 1 Comment »

 
« Previous Entries