1. Deze website gebruikt cookies en vergelijkbare technologieën. Dat houdt in dat wij het gedrag van bezoekers verzamelen, gebruiken en met derden delen om u een optimale gebruikerservaring te bieden. Cookies van derden kunnen worden gebruikt om advertenties te tonen die aansluiten op uw interesses. Door deze website verder te gebruiken, gaat u akkoord met ons gebruik van cookies. Leer Meer.

Website omzetten naar XHTML + CSS

Discussie in 'Webdesign' gestart door D Drmmr, 3 jul 2007.

?

Wat vind je van deze tutorial?

  1. Ik wist dit allemaal al

    26,3%
  2. Ik heb weer wat opgestoken

    47,4%
  3. I have seen the light!

    5,3%
  4. Ik kan het niet helemaal volgen

    10,5%
  5. Ik snap er niks van

    10,5%
  1. D Drmmr

    D Drmmr Heeft veel posts

    [hand]
    Ik was afgelopen week bezig om een website van me een make-over te geven wat betreft de source code (layout blijft gelijk). Het leek me wel nuttig om de dingen waar ik tegenaan ben gelopen te delen, aangezien ik vaak zie dat mensen die een website maken niet goed weten om te gaan met o.a. de CSS om hun website vorm te geven.

    De oude website maakte wel gebruik van CSS, maar niet echt op een consistente manier. Het was eigenlijk een mengelmoes van allerlei verschillende manieren van aanpak en truckjes die ik in de loop van de tijd had geleerd.
    De website waar het om gaat is http://giro.ddrmmr.nl/. Voor de versie van 2007 heb ik de layout (van 2006) aangepast en wat kleine dingen verbeterd. Dat was hier en daar best lastig, omdat de site niet helemaal goed opgebouwd was. Daarom heb ik hem nu zo'n beetje helemaal opnieuw gemaakt, om er voor te zorgen dat ik zo'n probleem volgend jaar niet weer heb. ;)

    Ter vergelijjking geef ik hier even de source van een aantal pagina's. De website zelf maakt gebruik van php om de html te maken, maar daar wil ik in deze tutorial niet op ingaan. Mijn doel was om de source van de pagina's xhtml 1.0 valide te maken en de css helemaal te scheiden van de html.

    index.html
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Giro toto</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <STYLE type="text/css">
    	/* layout for all stuff that differs from the iframe goes here */
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	body {
    		background: white url('img/background.jpg') repeat scroll;
    	}
    	/* containers, positioning */
    	.top_banner {
    		background: url('img/header_2007.png') no-repeat 50% 50%;
    		position: relative;
    		top: 0px;
    		left: 0px;
    		height: 120px;
    		width: 100%;
    		/* png is not supported properly by IE */
    		background: expression("url('img/header_2007.jpg') no-repeat 50% 50%");
    	}
    	.leftmenu {
    		width: 10%;
    	}
    	.leftmenu_firstlink {
    		font-weight: bold;
    		color: #274818;
    		text-align: center;
    		margin: 12 0 6 0;
    	}
    	.leftmenu_link {
    		font-weight: bold;
    		color: #274818;
    		text-align: center;
    		margin: 6 0 6 0;
    	}
    	.leftmenu_text {
    		font-style: italic;
    		text-align: center;
    		margin: 24 0 6 0;
    	}
    	.leftmenu_spacer {
    		height: 6px;
    	}
    	.body_frame {
    		border: 1px outset #ffdfe6;
    		margin: 0;
    		padding: 0;
    	}
    	.right {
    		width: 10%;
    	}
    	.bottom {
    		height: 24px;
    		/*width: 95%; /* fix FF bug */
    		padding: 0 6;
    		font: 10px verdana;
    	}
    	/* links */
    	a {
    		color: #333;
    		text-decoration: underline;
    	}
    	a:hover {
    		text-decoration: overline;
    	}
    </STYLE>
    </HEAD>
    
    <BODY>
    <table border=0 width=100% height=100% cellpadding=0 cellspacing=0>
    	<tr>
    		<td colspan=4 class="top_banner"> </td>
    	</tr>
    	<tr>
    		<td width=10% align=center valign=top class="lefmenu">
    			<div class="leftmenu_firstlink"><a href='index.php'>Home</a></div>
    			<div class="leftmenu_link"><a href='register.php' target=BodyFrame>Register</a></div>
    			<div class="leftmenu_link"><a href='index.php?page=login.php'>Log in</a></div>
    			<div class="leftmenu_link"><a href='rules.php' target=BodyFrame>Rules</a></div>
    			<div class="Leftmenu_link"><a href='faq.php' target=BodyFrame>FAQ</a></div>
    			<div class="Leftmenu_link"><a href='files/Tips for how to select a team.doc'>Tips</a></div>
    			<div class="leftmenu_link"><a href='contact.html' target=BodyFrame>Contact</a></div>
    			<div class="leftmenu_text">Links</div>
    			<div class="leftmenu_link"><a href='http://www.ddrmmr.nl' target=_blank>D Drmmr</a></div>
    			<div class="leftmenu_link"><a href='http://www.nationaalcomputerforum.nl' target=_blank>NCF</a></div>
    			<div class="leftmenu_link"><a href='http://giroditalia2007.gazzetta.it/it/news.php' target=_blank>Official Giro website</a></div>
    			<div class="leftmenu_link"><a href='http://www.cyclingnews.com/road/2007//giro07/' target=_blank>Giro news</a></div>
    		</td>
    		<td colspan=2 width=80% class="body_frame">
    			<IFRAME name=BodyFrame src="main.php" width=100% height=100% frameborder=0>
    				Your browser does not support frames.<BR>
    				Click <a href="main.php">here</a> to view this site without frames.
    			</IFRAME>
    		</td>
    		<td width=10% class="right">
    		</td>
    	</tr>
    	<tr>
    		<td></td>
    		<td align=left valign=center class="bottom">
    			Copyright &copy; 2006-2007 Jelle Hurkens. All rights reserved.
    		</td>
    		<td align=right valign=center class="bottom">
    			<i>Other sites:</i> &nbsp; <a href="http://www.ddrmmr.nl">D Drmmr</a> &nbsp; <a href="http://games.ddrmmr.nl">Games</a> &nbsp; <a href="http://math.ddrmmr.nl">Math</a> &nbsp; <a href="http://cpp.ddrmmr.nl">C++</a>&nbsp;
    		</td>
    		<td></td>
    	</tr>
    </table>
    
    </BODY>
    </HTML>
    
    main.html
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    
    <HEAD>
    <TITLE>Giro toto</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK href="AllStyles.css" rel="stylesheet" type="text/css">
    </HEAD>
    
    <BODY>
    <div class="menu"><table border=0>
    <tr>
    	<td class="menu_item"><a href='login.php'>Log in</a></td>
    	<td class="menu_item"><a href='rankings.php'>Rankings</a></td>
    	<td class="menu_item"><a href='register.php'>Register</a></td>
    	<td class="menu_active"><a href='main.php'>Home</a></td>
    </tr>
    </table></div>
    <p>
    	Welcome to the Giro toto, the cycling manager game for the Giro d'Italia 2007.
    </p>
    <p>
    	There are currently 17 participants in the toto. If you would like to join, click the 'Register' link on the top or left.
    </p>
    <BR>
    <p>
    	The Giro d'Italia 2007 has finished, which means the final rankings are now available.
    </p>
    <p>
    	We congratulate Forza Eufemanio with your win. As a reward you are allowed to start next year with € 5 million less. :P
    </p>
    <p>
    	Thanks everybody who participated. We hope you've enjoyed the Giro (Toto) and will join again next year!
    </p>
    <BR>
    </BODY>
    
    </HTML>
    
    register.html
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    
    <HEAD>
    <TITLE>Giro toto - Registration</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK href="AllStyles.css" rel="stylesheet" type="text/css">
    <SCRIPT type="text/JavaScript">
    // De JavaScript code is niet zo interessant, dus die heb ik weggelaten.
    </SCRIPT>
    </HEAD>
    
    <BODY OnLoad="document.getElementById('name').focus();">
    <div class="menu"><table border=0>
    <tr>
    	<td class="menu_item"><a href='login.php'>Log in</a></td>
    	<td class="menu_item"><a href='rankings.php'>Rankings</a></td>
    	<td class="menu_active"><a href='register.php'>Register</a></td>
    	<td class="menu_item"><a href='main.php'>Home</a></td>
    </tr>
    </table></div>
    <H1>Registration</H1>
    <p>
    	You can register by filling out the form below.
    </p>
    <FORM action='/register.php' OnSubmit='return CheckForm();' method=POST>
    <INPUT type=hidden name=Source value='Register'>
    <p class="no_padding"><table border=0>
    	<tr>
    		<td>Name:</td>
    		<td><INPUT type=text id=name name=Name size=40 maxlength=32 value=''></td>
    		<td>(min 4, max 32 characters)</td>
    	</tr>
    	<tr>
    		<td>Team name:</td>
    		<td><INPUT type=text id=team_name name=TeamName size=40 maxlength=32 value=''></td>
    		<td>(min 4, max 32 characters)</td>
    	</tr>
    	<tr>
    		<td>E-mail:</td>
    		<td><INPUT type=text id=email name=Email size=40 maxlength=255 value=''></td>
    		<td>(see below)</td>
    	</tr>
    	<tr>
    		<td>Password:</td>
    		<td><INPUT type=password id=pw1 name=Pw size=40 maxlength=32></td>
    		<td>(min 4, max 32 characters)</td>
    	</tr>
    	<tr>
    		<td>Verify password:</td>
    		<td><INPUT type=password id=pw2 name=Verify size=40 maxlength=32></td>
    		<td></td>
    	</tr>
    <tr>
    	<td colspan=2 align=center><INPUT type=submit name=Submit value='Register'>&nbsp<INPUT type=reset name=Reset value='Reset'></td>
    </tr>
    </table></p>
    </FORM>
    <p>
    	Your e-mail address will be used for administrative purposes only. It will not be visible for any of the players in the Giro Toto.
    </p>
    <p>
    	Once you have registered, you will need to activate your account by following the link provided in the e-mail that you will receive on the specified address. You will not be able to log in, until you have activated your account.
    </p>
    <BR>
    </BODY>
    
    </HTML>
    
    rankings.html
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    
    <HEAD>
    <TITLE>Giro toto - Rankings</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK href="AllStyles.css" rel="stylesheet" type="text/css">
    </HEAD>
    
    <BODY>
    <div class="menu"><table border=0>
    <tr>
    	<td class="menu_item"><a href='login.php'>Log in</a></td>
    	<td class="menu_active"><a href='rankings.php'>Rankings</a></td>
    	<td class="menu_item"><a href='register.php'>Register</a></td>
    	<td class="menu_item"><a href='main.php'>Home</a></td>
    </tr>
    </table></div>
    <p>
    	These are the rankings in the Giro toto after stage 21:
    </p>
    <p class="no_padding"><table border=1 width=100%>
    	<tr>
    		<th align=left>Place</th>
    		<th align=left></th>
    		<th align=left>Team</th>
    		<th align=left>Wealth</th>
    		<th align=left></th>
    		<th align=left>Team</th>
    		<th align=left>Points</th>
    		<th align=left></th>
    		<th align=left>Team</th>
    		<th align=left>Last day</th>
    	</tr>
    	<tr>
    		<td>1</td>
    		<td></td>
    		<td>Forza Eufemiano</td>
    		<td>€ 86373731</td>
    		<td></td>
    		<td>Forza Eufemiano</td>
    		<td>5281</td>
    		<td></td>
    		<td>Roze is voor meisjes</td>
    		<td>347</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td></td>
    		<td>Viva La Omerta</td>
    		<td>€ 82388196</td>
    		<td></td>
    		<td>Viva La Omerta</td>
    		<td>4861</td>
    		<td></td>
    		<td>Viva La Omerta</td>
    		<td>324</td>
    	</tr>
    	<tr>
    		<td>3</td>
    		<td></td>
    		<td>Flaming Os</td>
    		<td>€ 80317911</td>
    		<td></td>
    		<td>Quickpin</td>
    		<td>4710</td>
    		<td></td>
    		<td>Forza Eufemiano</td>
    		<td>317</td>
    	</tr>
    	<tr>
    		<td>4</td>
    		<td></td>
    		<td>Quickpin</td>
    		<td>€ 79676697</td>
    		<td></td>
    		<td>Flaming Os</td>
    		<td>4620</td>
    		<td></td>
    		<td>Flaming Os</td>
    		<td>295</td>
    	</tr>
    	<tr>
    		<td>5</td>
    		<td></td>
    		<td>Roze is voor meisjes</td>
    		<td>€ 78312656</td>
    		<td></td>
    		<td>Selle Italia be nice to me</td>
    		<td>4604</td>
    		<td></td>
    		<td>Quickpin</td>
    		<td>289</td>
    	</tr>
    	<tr>
    		<td>6</td>
    		<td></td>
    		<td>Selle Italia be nice to me</td>
    		<td>€ 75879607</td>
    		<td></td>
    		<td>Roze is voor meisjes</td>
    		<td>4506</td>
    		<td></td>
    		<td>Rainaldo Cycling</td>
    		<td>274</td>
    	</tr>
    	<tr>
    		<td>7</td>
    		<td></td>
    		<td>Good team, bad manager</td>
    		<td>€ 75728959</td>
    		<td></td>
    		<td>Good team, bad manager</td>
    		<td>4374</td>
    		<td></td>
    		<td>Selle Italia be nice to me</td>
    		<td>272</td>
    	</tr>
    	<tr>
    		<td>8</td>
    		<td></td>
    		<td>Rainaldo Cycling</td>
    		<td>€ 75313518</td>
    		<td></td>
    		<td>Rainaldo Cycling</td>
    		<td>4369</td>
    		<td></td>
    		<td>Good team, bad manager</td>
    		<td>266</td>
    	</tr>
    	<tr>
    		<td>9</td>
    		<td></td>
    		<td>Giro de gyros</td>
    		<td>€ 64707236</td>
    		<td></td>
    		<td>Giro de gyros</td>
    		<td>3516</td>
    		<td></td>
    		<td>Crash dEpargne</td>
    		<td>221</td>
    	</tr>
    	<tr>
    		<td>10</td>
    		<td></td>
    		<td>Team Birillo</td>
    		<td>€ 63399328</td>
    		<td></td>
    		<td>Crash dEpargne</td>
    		<td>2533</td>
    		<td></td>
    		<td>empella racing</td>
    		<td>163</td>
    	</tr>
    	<tr>
    		<td>11</td>
    		<td></td>
    		<td>carrembolee</td>
    		<td>€ 56129530</td>
    		<td></td>
    		<td>Team Birillo</td>
    		<td>2501</td>
    		<td></td>
    		<td>Xanlands Team</td>
    		<td>12</td>
    	</tr>
    	<tr>
    		<td>12</td>
    		<td></td>
    		<td>Crash dEpargne</td>
    		<td>€ 53960406</td>
    		<td></td>
    		<td>empella racing</td>
    		<td>1463</td>
    		<td></td>
    		<td>Team Birillo</td>
    		<td>0</td>
    	</tr>
    	<tr>
    		<td>13</td>
    		<td></td>
    		<td>empella racing</td>
    		<td>€ 50633046</td>
    		<td></td>
    		<td>carrembolee</td>
    		<td>1280</td>
    		<td></td>
    		<td>GiroMaster</td>
    		<td>0</td>
    	</tr>
    	<tr>
    		<td>14</td>
    		<td></td>
    		<td>GiroMaster</td>
    		<td>€ 50000000</td>
    		<td></td>
    		<td>Xanlands Team</td>
    		<td>113</td>
    		<td></td>
    		<td>Sebjuh Squad</td>
    		<td>0</td>
    	</tr>
    	<tr>
    		<td>15</td>
    		<td></td>
    		<td>Sebjuh Squad</td>
    		<td>€ 50000000</td>
    		<td></td>
    		<td>GiroMaster</td>
    		<td>0</td>
    		<td></td>
    		<td>Aniet</td>
    		<td>0</td>
    	</tr>
    	<tr>
    		<td>16</td>
    		<td></td>
    		<td>Aniet</td>
    		<td>€ 50000000</td>
    		<td></td>
    		<td>Sebjuh Squad</td>
    		<td>0</td>
    		<td></td>
    		<td>carrembolee</td>
    		<td>0</td>
    	</tr>
    	<tr>
    		<td>17</td>
    		<td></td>
    		<td>Xanlands Team</td>
    		<td>€ 49691170</td>
    		<td></td>
    		<td>Aniet</td>
    		<td>0</td>
    		<td></td>
    		<td>Giro de gyros</td>
    		<td>0</td>
    	</tr>
    </table></p>
    <BR>
    </BODY>
    
    </HTML>
    
    AllStyles.css
    HTML:
    body {
    	background-color: #ffb5c5;
    	margin: 6;
    	padding: 0;
    	color: #333;
    }
    
    .menu {
    	background: #b34637;
    	position: relative;
    	direction: rtl;
    	width: 100%;
    	margin: 0 0 18 0;
    	font: 10px verdana;
    }
    .menu_item {
    	background: #fcfbac;
    	padding: 2 6 2 6;
    }
    .menu_active {
    	background: #fbde79;
    	padding: 2 6 2 6;
    }
    .menu a {
    	font: 12px verdana;
    	color: #b34637;
    }
    
    a {
    	text-decoration: none;
    	color: #b40c0c;
    }
    a:hover {
    	text-decoration: underline;
    }
    
    H1 {
    	margin: 24 6 36 6;
    	text-align: center;
    	font: bold;
    }
    p {
    	background: white;
    	position: relative;
    	left: 6%;
    	width: 88%;
    	margin: 0 0 12 0;
    	padding: 1 6;
    	border: 1px inset #ffdfe6;
    }
    .no_padding {
    	/*padding: 0;*/
    }
    .msg {
    	top: 60px;
    	text-align: center;
    	margin: 0 0 24 0;
    }
    table {
    	margin: 2 0;
    }
    th {
    	font: bold;
    	padding: 1 2 1 2;
    }
    td {
    	padding: 0 2 0 2;
    }
    
    [/hand]
     
    Laatst bewerkt: 3 jul 2007
  2. D Drmmr

    D Drmmr Heeft veel posts

    Re: Een website omzetten naar XHTML + CSS

    [hand]
    Dat moet anders

    In de oude versie heb ik gebruik gemaakt van een aantal makkelijke technieken om de website vorm te geven, zoals een inline frame en tabellen voor de indeling. Die technieken hebben alleen grote nadelen wat betreft de bruikbaarheid en het gemak waarmee je het kunt aanpassen. Daar zal ik hier verder niet op ingaan.

    Mijn doel was om de tabellen voor de indeling en de iframe eruit te halen. Verder wilde ik de inhoud (html) en opmaak (css) scheiden en beide wat netter maken. De html moet xhtml 1.0 valide zijn (te valideren op http://validator.w3.org/). De layout van de website heb ik gecontroleerd in Opera, FireFox en Internet Explorer 6.


    De stappen

    Tijdens het omzetten van de html en css ben ik tegen een aantal dingen aangelopen, die ik hier stapsgewijs afga.


    Het begin: doctype
    Om te beginnen moet iedere website het juiste doctype hebben. Hiermee geef je aan hoe de html in je document genterpreteerd moet worden. Door dit juist op te geven, zorg je er voor dat verschillende browsers op eenzelfde manier omgaan met je website en het dus makkelijker is om die in elke browser er goed uit te laten zien.
    De eerste twee regels van ieder html bestand zijn:
    HTML:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    

    Meta tags
    Met meta tags kun je een heleboel informatie over je site weergeven die gebruikt kan worden door zoekmachines, zoals een omschrijving, sleutelwoorden en de taal van de website. Ik heb de volgende meta tags gebruikt (google kan je uitleggen wat ze betekenen ;)):
    HTML:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="msnbot" content="NOODP"/>
    <meta name="description" content="Giro Toto 2007"/>
    <meta name="keywords" content="Giro d'Italia 2007 toto manager game"/>
    <meta name="Language" content="english"/>
    

    Algemene css
    Er zijn een paar algemene dingetjes waarmee je de css een stuk makkelijker kunt maken en er ook weer voor kunt zorgen dat je website in verschillende browsers hetzelfde wordt weergegeven. Het eerste is de marges en paddings resetten.
    HTML:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    Hiermee stel je de margin en padding op 0 voor ieder element. :yahoo:
    Verder wil ik hyperlinks niet aangeven met een streep eronder, tenzij je er met je muis overheen gaat. De kleur van de hyperlinks zet ik hier hetzelfde als normale tekst. Dit gebruik ik op deze manier voor de links in het menu en de voettekst. In de inhoud van mijn pagina zal ik de links nog een andere kleur geven, maar dat komt straks.
    HTML:
    a {
    	color: #274818;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    

    Weg met de tabellen
    Ik wilde geen tabellen meer gebruiken voor de indeling van de website, omdat die daarvoor niet goed geschikt zijn. Maar ik wilde de layout van de site wel nagenoeg hetzelfde houden. Dat houdt in dat de website de hele pagina moest beslaan (zowel in de lengte als in de breedte) en de inhoud in het middelste vak moest scrollen, terwijl alles eromheen blijft staan.

    Het makkelijkste is om allereerst je website in elementen (vakken) te verdelen. Bij deze website zijn er vier elementen te onderscheiden: het titelplaatje bovenaan, het menu links, de inhoud in het midden en de voettekst onderaan. Die vier dingen zet ik ieder in een aparte div met een id om de css makkelijker te kunnen schrijven.
    HTML:
    <body>
    	<div id="header">
    	</div>
    	<div id="menu">
    	</div>
    	<div id="content">
    	</div>
    	<div id="footer">
    	</div>
    </body>
    
    Vervolgens gebruik ik css om de vier elementen de juiste layout te geven.

    Header
    Het plaatje van de header moet in het midden bovenaan komen. Omdat het een plaatje is, staat de hoogte van dit element vast op 120 pixels. Ik wil echter een .png bestand gebruiken voor het plaatje, alleen dat wordt in IE6 niet goed weergegeven, dus daar gebruik ik een .jpg voor. Het .jpg bestand is groter dan het .png bestand, dus in andere browsers wil ik de kleinere gebruiken. De css ziet er als volgt uit:
    HTML:
    #header {
    	width: 100%;
    	height: 120px;
    	background: url('img/header_2007.png') no-repeat 50% 50%;
    	/* png is not supported properly by IE6 */
    	background: expression("url('img/header_2007.jpg') no-repeat 50% 50%");
    }
    
    Door het element een breedte van 100% te geven, is het makkelijk om het plaatje te centreren. De 'expression' wordt alleen door IE6 begrepen (andere browsers slaan het over), dus daarmee kan ik er makkelijk voor zorgen dat in IE6 het .jpg bestand wordt weergegeven en in alle andere browser het .png bestand.

    Menu
    Het verticale menu aan de linkerkant moet 10% van de paginabreedte innemen. Mocht het verticaal niet passen, dan moet het gewoon doorlopen (de pagina wordt dan dus hoger). In het menu zet ik twee lijsten met links. Dit stond allemaal in tabellen, maar nu wil ik inhoud en opmaak zoveel mogelijk scheiden. Een tabel met maar 1 kolom is per definitie nutteloos; je hebt gewoon een lijst met elementen. Dus kan ik beter een lijst gebruiken om de links in te zetten. Omdat ik twee verschillende sets van links heb (binnen en buiten de website), gebruik ik twee lijsten.
    (Dit staat dus in de html)
    HTML:
    <div id="menu">
    	<ul>
    		<li><a href="index.php">Home</a></li>
    		<li><a href="register.php">Register</a></li>
    		<li><a href="login.php">Log in</a></li>
    		<li><a href="rules.php">Rules</a></li>
    		<li><a href="faq.php">FAQ</a></li>
    		<li><a href="files/Tips for how to select a team.doc">Tips</a></li>
    		<li><a href="contact.php">Contact</a></li>
    	</ul>
    	<ul>
    		<li>Links</li>
    		<li><a href="http://www.nationaalcomputerforum.nl">NCF</a></li>
    		<li><a href="http://giroditalia2007.gazzetta.it/it/news.php">Official Giro website</a></li>
    		<li><a href="http://www.cyclingnews.com/road/2007//giro07/">Giro news</a></li>
    	</ul>
    </div>
    
    Ik wil natuurlijk wel dat het menu er fatsoenlijk uit komt te zien, dus een beetje css is wel vereist.
    HTML:
    #menu {
    	width: 10%;
    }
    #menu ul {
    	list-style: none;
    	margin: 1.5em 0;
    }
    #menu li {
    	font-style: italic;
    	text-align: center;
    	margin: 0.5em 0;
    }
    #menu a {
    	font-style: normal;
    	font-weight: bold;
    }
    
    Een beetje uitleg hierbij:
    #menu ul geeft aan dat de css alleen geldt voor ul tags die binnen een element met id "menu" zitten. Deze css is dus niet van toepassing op ul's buiten het menu (wel zo makkelijk). Voor de marges gebruik ik 'em', zodat de marges relatief zijn t.o.v. de tekstgrootte. 1em is evenveel als de hoogte van het standaard lettertype, wat in de browser is in te stellen. Als iemand een groter lettertype kiest, groeien de marges mee, zodat de paginaindeling niet uit z'n verband wordt getrokken.

    Content
    De inhoud stond in een iframe, maar daar moet ik niks meer van hebben. Het wordt daarmee vrij lastig om een directe link naar een pagina te kunnen maken. In plaats daarvan wil ik de inhoud gewoon in de content div zetten. Op die inhoud ga ik beneden verder in.
    De content div moet horizontaal 80% van de paginabreedte innemen en links en rechts 10% vrij laten. Verticaal moet het zich uitstrekken van 120 pixels onder de bovenkant tot 24 pixels boven de onderkant van de pagina. Ik kreeg dit het beste voor elkaar met een absolute uitlijning van de div. De css ziet er als volgt uit:
    HTML:
    #content {
    	position: absolute;
    	top: 120px;
    	bottom: 24px;
    	height: expression(document.body.clientHeight - 144 + "px");
    	left: 10%;
    	width: 80%;
    	border: 1px outset #ffdfe6;
    	padding: 3em 0 1em 0;
    	overflow: auto;
    	background: #ffb5c5;
    	color: #333;
    }
    
    position: absolute; houdt in dat de indeling van het element onafhankelijk is van de overige elementen. Het is wel relatief t.o.v. het bovenliggende element, maar dat is hier de body, dus is het relatief t.o.v. de hele pagina.

    Met top en bottom geef ik aan hoever het element van de uiteinden van het bovenliggende element moet komen. Nu kan iedereen die de basisschool heeft afgemaakt uitrekenen hoe hoog het element dan moet worden (als je weet hoe hoog de pagina in de browser is), maar IE6 kan dat niet. Daarom gebruiken we weer een 'expression' om aan IE6 te vertellen hoe hoog de content div moet worden.
    Voor de breedte van dit element kan dat probleem worden voorkomen door op te geven hoeveel ruimte er links van het element moet komen en hoe breedt het moet zijn.

    overflow: auto; geeft aan dat er een scrollbalk in het element moet komen als de inhoud er niet in past. Het element zelf blijft even groot, ongeacht de inhoud.

    Footer
    De voettekst bestaat uit een copyright tekst en een lijstje met links naar andere pagina's. De voettekst moet in zijn geheel onder de inhoud komen (dus niet links of rechts ervan) en de copyright tekst moet links worden uitgelijnd en het lijstje met links rechts. De hoogte van de voettekst heb ik vastgezet op 24 pixels, zodat er genoeg ruimte overblijft voor de inhoud van de pagina. De voettekst moet verticaal gecentreerd worden.
    Dit is de html:
    HTML:
    <div id="footer">
    	<div id="footer_left">
    		Copyright &copy; 2006-2007 Jelle Hurkens. All rights reserved.
    	</div>
    	<div id="footer_right">
    		<ul>
    			<li>Other sites:</li>
    			<li><a href="http://www.ddrmmr.nl">D Drmmr</a></li>
    			<li><a href="http://games.ddrmmr.nl">Games</a></li>
    			<li><a href="http://math.ddrmmr.nl">Math</a></li>
    			<li><a href="http://cpp.ddrmmr.nl">C++</a></li>
    		</ul>
    	</div>
    </div>
    
    En dit is de css:
    HTML:
    #footer {
    	position: absolute;
    	bottom: 0;
    	height: 24px;
    	left: 10%;
    	width: 80%;
    	font: 0.6em verdana;
    	color: #274818;
    }
    #footer_left {
    	float: left;
    	margin: 0 6px;
    	height: 24px;
    	line-height: 24px;
    }
    #footer_right {
    	float: right;
    	margin: 0 6px;
    }
    #footer_right ul {
    	display: inline;
    	list-style: none;
    }
    #footer_right li {
    	float: left;
    	margin: 0 6px;
    	height: 24px;
    	line-height: 24px;
    	font-style: italic;
    }
    #footer_right a {
    	font-style: normal;
    }
    
    Ik gebruik twee divs, omdat het ene stuk links uitgelijnd moet worden en het andere rechts. Ook inhoudelijk zijn het verschillende dingen, dus het gaat niet alleen om de layout. ;)
    Het links en rechts uitlijnen gaat makkelijk met een float. Om de tekst in het linker gedeelte verticaal te centreren zet ik zowel de hoogte als de regelhoogte (line-height) op de totale hoogte van het voettekstelement, 24 pixels. Het zou nog mooier zijn als we het op 100% konden zetten, maar dat werkt niet. :idea:
    De lijst met links in het rechter gedeelte wil ik naast elkaar plaatsen. Dat kan heel gemakkelijk door in de li tags 'float: left;' te zetten. Omdat de tekst in de li elementen komt te staan, moeten we daar de hoogte en regelhoogte instellen om het hele zooitje verticaal te centreren.

    Het heeft mij ook wel even wat moeite gekost om dit allemaal goed te krijgen, maar door goed te kijken naar wat er gebeurd met de css die je schrijft, kun je het uiteindelijk wel laten doen wat je wilt. Ik heb bijvoorbeeld gekeken hoe groot de verschillende elementen nou eigenlijk worden door ze een andere achtergrondkleur te geven. Op die manier heb ik uitgevonden hoe ik de lijst met links verticaal kon centreren. (Het truckje van de regelhoogte heb ik al eerder via google gevonden. ;))

    In het volgende stuk ga ik in op de inhoud van de pagina.
    [/hand]
     
    Laatst bewerkt: 4 jul 2007
  3. D Drmmr

    D Drmmr Heeft veel posts

    [hand]
    De inhoud

    Algemeen
    In de inhoud wil ik hyperlinks onderscheiden van normale tekst door ze een andere kleur te geven. Om te voorkomen dat ook hyperlinks buiten de content div deze kleur krijgen, gebruik ik de volgende css:
    HTML:
    #content a {
    	color: #b34637;
    }
    

    Tweede menu
    In de inhoud van de pagina moet een tweede menu komen te staan. Dit is een horizontaal menu waarin de elementen rechts uitgelijnd worden en het hele menu heeft een achtergrond die over de hele breedte door moet lopen. Voor de duidelijkheid heb ik een plaatje van hoe het eruit is komen te zien en hoe het ook moest worden.

    [​IMG]

    Het is me niet gelukt om het menu met een relatieve positie goed weer te geven in zowel Opera, FF als IE6, dus heb ik gekozen voor een absolute positie.
    De html van het menu:
    HTML:
    <div id="content">
    	<div id="menu2">
    		<ul>
    			<li class="active"><a href="#">Home</a></li>
    			<li><a href="#">Register</a></li>
    			<li><a href="#">Rankings</a></li>
    			<li><a href="#">Log in</a></li>
    		</ul>
    	</div>
    </div>
    
    en de css:
    HTML:
    #menu2 {
    	position: absolute;
    	top: 6px;
    	left: 6px;
    	right: 6px;
    	background: #b34637;
    }
    #menu2 ul {
    	float: right;
    	margin: 2px 3px;
    	list-style: none;
    }
    #menu2 li {
    	float: left;
    	margin: 0 0 0 3px;
    	padding: 0 6px;
    	background: #fcfbac;
    }
    #menu2 li.active {
    	background: #fbde79;
    }
    #menu2 a {
    	font: 0.8em verdana;
    }
    
    De gehele lijst heeft dus een 'float: right;' om het hele menu rechts uit te lijnen. De elementen van de lijst hebben een 'float: left;' om ze in de juiste volgorde naast elkaar te zetten. De marge boven en onder de elementen van de lijst heb ik in de lijst zelf gezet, omdat het anders niet goed werd weergegeven in IE6. Verder spreekt het denk ik wel voor zich.

    Omdat het tweede menu nu een absolute positie heeft, komt de tekst die ik in de inhoud zet erdoorheen te staan. Om dat op te lossen, heb ik de padding in de content div aangepast.
    HTML:
    #content {
    	/* ... */
    	padding: 3em 0 1em 0;
    }
    
    Nu had ik een ander probleem. Er waren namelijk pagina's die geen menu hadden. Daarin werd nu de tekst een stuk van de bovenkant afgehouden, terwijl er geen menu te zien was. Ik heb hier voor een pragmatische oplossing gekozen door bij zulke pagina's een header in de menubalk (zonder menu) te zetten. Hierbij moest ik nog een beetje met de marges spelen om de hoogte van de menubalk bij het menu en bij zo'n header gelijk te krijgen. In Opera en IE6 is de hoogte nu gelijk, maar in FF verschilt het 1 pixel.
    HTML:
    <div id="content">
    	<div id="menu2">
    		<h1>Giro Toto rules</h1>
    	</div>
    </div>
    
    HTML:
    #menu2 h1 {
    	margin: 3px 0 4px 0;
    	width: 100%;
    	text-align: center;
    	font: bold 0.8em verdana;
    	color: white;
    }
    

    Tekst
    In de oude versie stond ieder stukje tekst (en ook tabellen) in een paragraaf. Iedere paragraaf had een witte achtergrond en een omlijning (zie plaatje hierboven). In de nieuwe versie wilden de tabellen echter niet meer binnen de paragraaf blijven staan, waardoor je een witte streep kreeg (de paragraaf) met daaronder de tabel. :blink:
    Ik heb besloten om voor de witte stukken div's te maken, waar n of meer paragrafen, tabellen of wat dan ook kon komen te staan. Hierdoor kwamen vaker een aantal paragrafen in hetzelfde blok te staan, terwijl die eerst allemaal in een eigen blok stonden. Ik vind het er zelf eigenlijk een stuk overzichtelijker uitzien, alle tekst die bij elkaar hoort, staat in hetzelfde blok. Zo zie je maar hoe nuttig het kan zijn als je je inhoud goed moet ordenen (dingen die bij elkaar horen bij elkaar zetten).
    Een voorbeeldje van de html (dit staat in de content div):
    HTML:
    <div class="text_block">
    	<p>Welcome to the Giro toto, the cycling manager game for the Giro d'Italia 2007.</p>
    	<p>There are currently 17 participants in the toto. If you would like to join, click the 'Register' link on the top or left.</p>
    </div>
    <div class="text_block">
    	<p>The Giro d'Italia 2007 has finished, which means the final rankings are now available.</p>
    	<p>We congratulate Forza Eufemanio with your win. As a reward you are allowed to start next year with &euro; 5 million less. :P</p>
    	<p>Thanks everybody who participated. We hope you've enjoyed the Giro (Toto) and will join again next year!</p>
    </div>
    
    en de css erbij:
    HTML:
    #content div.text_block {
    	border: 1px inset #ffdfe6;
    	background: white;
    	margin: 0 6% 1em 6%;
    	padding: 0 6px;
    }
    #content p {
    	margin: 0.25em 0;
    }
    #content table {
    	margin: 0.25em 0;
    }
    

    Knoppen
    Een laatste probleempje waar ik tegenaan liep, was de padding bij knoppen in een formulier. Doordat ik ben begonnen met alle margins en paddings op 0 te zetten, werden deze ook op 0 gezet, wat er niet uit ziet. Ik heb voor alle input tags de padding ingesteld en voor knoppen maak ik een aparte class aan om die in de breedte wat meer ruimte te geven.
    HTML:
    #content input {
    	padding: 1px 2px;
    }
    #content input.button {
    	padding: 1px 6px;
    }
    

    Het eindresultaat

    Hier nog even de code van het eindresultaat. Alles is ook in actie te zien op giro.ddrmmr.nl.

    index.html
    HTML:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="msnbot" content="NOODP"/>
    <meta name="description" content="Giro Toto 2007"/>
    <meta name="keywords" content="Giro d'Italia 2007 toto manager game"/>
    <meta name="Language" content="english"/>
    <title>Giro toto</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
    	<div id="header">
    	</div>
    	<div id="menu">
    		<ul>
    			<li><a href="index.php">Home</a></li>
    			<li><a href="register.php">Register</a></li>
    			<li><a href="login.php">Log in</a></li>
    			<li><a href="rules.php">Rules</a></li>
    			<li><a href="faq.php">FAQ</a></li>
    			<li><a href="files/Tips for how to select a team.doc">Tips</a></li>
    			<li><a href="contact.php">Contact</a></li>
    		</ul>
    		<ul>
    			<li>Links</li>
    			<li><a href="http://www.nationaalcomputerforum.nl">NCF</a></li>
    			<li><a href="http://giroditalia2007.gazzetta.it/it/news.php">Official Giro website</a></li>
    			<li><a href="http://www.cyclingnews.com/road/2007//giro07/">Giro news</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div id="menu2">
    			<ul>
    				<li class="active"><a href="#">Home</a></li>
    				<li><a href="#">Register</a></li>
    				<li><a href="#">Rankings</a></li>
    				<li><a href="#">Log in</a></li>
    			</ul>
    		</div>
    		<div class="text_block">
    			<p>Welcome to the Giro toto, the cycling manager game for the Giro d'Italia 2007.</p>
    			<p>There are currently 17 participants in the toto. If you would like to join, click the 'Register' link on the top or left.</p>
    		</div>
    		<div class="text_block">
    			<p>The Giro d'Italia 2007 has finished, which means the final rankings are now available.</p>
    			<p>We congratulate Forza Eufemanio with your win. As a reward you are allowed to start next year with &euro; 5 million less. :P</p>
    			<p>Thanks everybody who participated. We hope you've enjoyed the Giro (Toto) and will join again next year!</p>
    		</div>
    	</div>
    	<div id="footer">
    		<div id="footer_left">
    			Copyright &copy; 2006-2007 Jelle Hurkens. All rights reserved.
    		</div>
    		<div id="footer_right">
    			<ul>
    				<li>Other sites:</li>
    				<li><a href="http://www.ddrmmr.nl">D Drmmr</a></li>
    				<li><a href="http://games.ddrmmr.nl">Games</a></li>
    				<li><a href="http://math.ddrmmr.nl">Math</a></li>
    				<li><a href="http://cpp.ddrmmr.nl">C++</a></li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>
    
    register.html
    HTML:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="msnbot" content="NOODP"/>
    <meta name="description" content="Giro Toto 2007"/>
    <meta name="keywords" content="Giro d'Italia 2007 toto manager game"/>
    <meta name="Language" content="english"/>
    <title>Giro toto - The manager game for the Giro d'Italia</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script type="text/JavaScript">
    // JavaScript niet interessant
    </script>
    </head>
    <body onload="document.getElementById('name').focus();">
    	<div id="header">
    	</div>
    	<div id="menu">
    		<ul>
    			<li><a href="index.php">Home</a></li>
    			<li><a href="register.php">Register</a></li>
    			<li><a href="login.php">Log in</a></li>
    			<li><a href="rules.php">Rules</a></li>
    			<li><a href="faq.php">FAQ</a></li>
    			<li><a href="files/Tips for how to select a team.doc">Tips</a></li>
    			<li><a href="contact.php">Contact</a></li>
    		</ul>
    		<ul>
    			<li>Links</li>
    			<li><a href="http://www.nationaalcomputerforum.nl">NCF</a></li>
    			<li><a href="http://giroditalia2007.gazzetta.it/it/news.php">Official Giro website</a></li>
    			<li><a href="http://www.cyclingnews.com/road/2007//giro07/">Giro news</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div id="menu2">			<ul>
    			<li><a href="index.php">Home</a></li>
    			<li class="active"><a href="register.php">Register</a></li>
    			<li><a href="rankings.php">Rankings</a></li>
    			<li><a href="login.php">Log in</a></li>
    			</ul>
    		</div>
    				<div class="text_block">
    			<p>You can register by filling out the form below.</p>
    		</div>
    		<div class="text_block">
    			<form action="dummy.php' onsubmit='return CheckForm();" method="post">
    				<input type="hidden" name="Source" value="Register"/>
    				<table border="0">
    					<tr>
    						<td>Name:</td>
    						<td><input type="text" id="name" name="Name" size="40" maxlength="32" value=""/></td>
    						<td>(min 4, max 32 characters)</td>
    					</tr>
    					<tr>
    						<td>Team name:</td>
    						<td><input type="text" id="team_name" name="TeamName" size="40" maxlength="32" value=""/></td>
    						<td>(min 4, max 32 characters)</td>
    					</tr>
    					<tr>
    						<td>E-mail:</td>
    						<td><input type="text" id="email" name="Email" size="40" maxlength="255" value=""/></td>
    						<td>(see below)</td>
    					</tr>
    					<tr>
    						<td>Password:</td>
    						<td><input type="password" id="pw1" name="Pw" size="40" maxlength="32"/></td>
    						<td>(min 4, max 32 characters)</td>
    					</tr>
    					<tr>
    						<td>Verify password:</td>
    						<td><input type="password" id="pw2" name="Verify" size="40" maxlength="32"/></td>
    						<td></td>
    					</tr>
    					<tr>
    						<td></td>
    						<td><input class="button" type="submit" name="Submit" value="Register"/>&nbsp;<input class="button" type="reset" name="Reset" value="Reset"/></td>
    						<td></td>
    					</tr>
    				</table>
    
    			</form>
    
    		</div>
    		<div class="text_block">
    			<p>Your e-mail address will be used for administrative purposes only. It will not be visible for any of the players in the Giro Toto.</p>
    			<p>Once you have registered, you will need to activate your account by following the link provided in the e-mail that you will receive on the specified address. You will not be able to log in, until you have activated your account.</p>
    		</div>
    	</div>
    	<div id="footer">
    		<div id="footer_left">
    			Copyright &copy; 2006-2007 Jelle Hurkens. All rights reserved.
    		</div>
    		<div id="footer_right">
    			<ul>
    				<li>Other sites:</li>
    				<li><a href="http://www.ddrmmr.nl">D Drmmr</a></li>
    				<li><a href="http://games.ddrmmr.nl">Games</a></li>
    				<li><a href="http://math.ddrmmr.nl">Math</a></li>
    				<li><a href="http://cpp.ddrmmr.nl">C++</a></li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>
    
    rankings.html
    HTML:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="msnbot" content="NOODP"/>
    <meta name="description" content="Giro Toto 2007"/>
    <meta name="keywords" content="Giro d'Italia 2007 toto manager game"/>
    <meta name="Language" content="english"/>
    <title>Giro toto - The manager game for the Giro d'Italia</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
    	<div id="header">
    	</div>
    	<div id="menu">
    		<ul>
    			<li><a href="index.php">Home</a></li>
    			<li><a href="register.php">Register</a></li>
    			<li><a href="login.php">Log in</a></li>
    			<li><a href="rules.php">Rules</a></li>
    			<li><a href="faq.php">FAQ</a></li>
    			<li><a href="files/Tips for how to select a team.doc">Tips</a></li>
    			<li><a href="contact.php">Contact</a></li>
    		</ul>
    		<ul>
    			<li>Links</li>
    			<li><a href="http://www.nationaalcomputerforum.nl">NCF</a></li>
    			<li><a href="http://giroditalia2007.gazzetta.it/it/news.php">Official Giro website</a></li>
    			<li><a href="http://www.cyclingnews.com/road/2007//giro07/">Giro news</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div id="menu2">			<ul>
    			<li><a href="index.php">Home</a></li>
    			<li><a href="register.php">Register</a></li>
    			<li class="active"><a href="rankings.php">Rankings</a></li>
    			<li><a href="login.php">Log in</a></li>
    			</ul>
    		</div>
    		<div class="text_block">
    			<p>These are the rankings in the Giro toto after stage 21:</p>
    		</div>
    		<div class="text_block">
    			<table border="1">
    				<tr>
    					<th>Place</th>
    					<th></th>
    					<th>Team</th>
    					<th>Wealth</th>
    					<th></th>
    					<th>Team</th>
    					<th>Points</th>
    					<th></th>
    					<th>Team</th>
    					<th>Last day</th>
    				</tr>
    				<tr>
    				<tr>
    					<td>1</td>
    					<td></td>
    					<td>Forza Eufemiano</td>
    					<td>&euro; 86373731</td>
    					<td></td>
    					<td>Forza Eufemiano</td>
    					<td>5281</td>
    					<td></td>
    					<td>Roze is voor meisjes</td>
    					<td>347</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td></td>
    					<td>Viva La Omerta</td>
    					<td>&euro; 82388196</td>
    					<td></td>
    					<td>Viva La Omerta</td>
    					<td>4861</td>
    					<td></td>
    					<td>Viva La Omerta</td>
    					<td>324</td>
    				</tr>
    				<tr>
    					<td>3</td>
    					<td></td>
    					<td>Flaming Os</td>
    					<td>&euro; 80317911</td>
    					<td></td>
    					<td>Quickpin</td>
    					<td>4710</td>
    					<td></td>
    					<td>Forza Eufemiano</td>
    					<td>317</td>
    				</tr>
    				<tr>
    					<td>4</td>
    					<td></td>
    					<td>Quickpin</td>
    					<td>&euro; 79676697</td>
    					<td></td>
    					<td>Flaming Os</td>
    					<td>4620</td>
    					<td></td>
    					<td>Flaming Os</td>
    					<td>295</td>
    				</tr>
    				<tr>
    					<td>5</td>
    					<td></td>
    					<td>Roze is voor meisjes</td>
    					<td>&euro; 78312656</td>
    					<td></td>
    					<td>Selle Italia be nice to me</td>
    					<td>4604</td>
    					<td></td>
    					<td>Quickpin</td>
    					<td>289</td>
    				</tr>
    				<tr>
    					<td>6</td>
    					<td></td>
    					<td>Selle Italia be nice to me</td>
    					<td>&euro; 75879607</td>
    					<td></td>
    					<td>Roze is voor meisjes</td>
    					<td>4506</td>
    					<td></td>
    					<td>Rainaldo Cycling</td>
    					<td>274</td>
    				</tr>
    				<tr>
    					<td>7</td>
    					<td></td>
    					<td>Good team, bad manager</td>
    					<td>&euro; 75728959</td>
    					<td></td>
    					<td>Good team, bad manager</td>
    					<td>4374</td>
    					<td></td>
    					<td>Selle Italia be nice to me</td>
    					<td>272</td>
    				</tr>
    				<tr>
    					<td>8</td>
    					<td></td>
    					<td>Rainaldo Cycling</td>
    					<td>&euro; 75313518</td>
    					<td></td>
    					<td>Rainaldo Cycling</td>
    					<td>4369</td>
    					<td></td>
    					<td>Good team, bad manager</td>
    					<td>266</td>
    				</tr>
    				<tr>
    					<td>9</td>
    					<td></td>
    					<td>Giro de gyros</td>
    					<td>&euro; 64707236</td>
    					<td></td>
    					<td>Giro de gyros</td>
    					<td>3516</td>
    					<td></td>
    					<td>Crash dEpargne</td>
    					<td>221</td>
    				</tr>
    				<tr>
    					<td>10</td>
    					<td></td>
    					<td>Team Birillo</td>
    					<td>&euro; 63399328</td>
    					<td></td>
    					<td>Crash dEpargne</td>
    					<td>2533</td>
    					<td></td>
    					<td>empella racing</td>
    					<td>163</td>
    				</tr>
    				<tr>
    					<td>11</td>
    					<td></td>
    					<td>carrembolee</td>
    					<td>&euro; 56129530</td>
    					<td></td>
    					<td>Team Birillo</td>
    					<td>2501</td>
    					<td></td>
    					<td>Xanlands Team</td>
    					<td>12</td>
    				</tr>
    				<tr>
    					<td>12</td>
    					<td></td>
    					<td>Crash dEpargne</td>
    					<td>&euro; 53960406</td>
    					<td></td>
    					<td>empella racing</td>
    					<td>1463</td>
    					<td></td>
    					<td>Team Birillo</td>
    					<td>0</td>
    				</tr>
    				<tr>
    					<td>13</td>
    					<td></td>
    					<td>empella racing</td>
    					<td>&euro; 50633046</td>
    					<td></td>
    					<td>carrembolee</td>
    					<td>1280</td>
    					<td></td>
    					<td>GiroMaster</td>
    					<td>0</td>
    				</tr>
    				<tr>
    					<td>14</td>
    					<td></td>
    					<td>GiroMaster</td>
    					<td>&euro; 50000000</td>
    					<td></td>
    					<td>Xanlands Team</td>
    					<td>113</td>
    					<td></td>
    					<td>Sebjuh Squad</td>
    					<td>0</td>
    				</tr>
    				<tr>
    					<td>15</td>
    					<td></td>
    					<td>Sebjuh Squad</td>
    					<td>&euro; 50000000</td>
    					<td></td>
    					<td>GiroMaster</td>
    					<td>0</td>
    					<td></td>
    					<td>Aniet</td>
    					<td>0</td>
    				</tr>
    				<tr>
    					<td>16</td>
    					<td></td>
    					<td>Aniet</td>
    					<td>&euro; 50000000</td>
    					<td></td>
    					<td>Sebjuh Squad</td>
    					<td>0</td>
    					<td></td>
    					<td>carrembolee</td>
    					<td>0</td>
    				</tr>
    				<tr>
    					<td>17</td>
    					<td></td>
    					<td>Xanlands Team</td>
    					<td>&euro; 49691170</td>
    					<td></td>
    					<td>Aniet</td>
    					<td>0</td>
    					<td></td>
    					<td>Giro de gyros</td>
    					<td>0</td>
    				</tr>
    			</table>
    		</div>
    	</div>
    	<div id="footer">
    		<div id="footer_left">
    			Copyright &copy; 2006-2007 Jelle Hurkens. All rights reserved.
    		</div>
    		<div id="footer_right">
    			<ul>
    				<li>Other sites:</li>
    				<li><a href="http://www.ddrmmr.nl">D Drmmr</a></li>
    				<li><a href="http://games.ddrmmr.nl">Games</a></li>
    				<li><a href="http://math.ddrmmr.nl">Math</a></li>
    				<li><a href="http://cpp.ddrmmr.nl">C++</a></li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>
    
    style.css
    HTML:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: url('img/background.jpg') repeat;
    	color: #274818;
    }
    
    a {
    	color: #274818;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    
    
    #header {
    	width: 100%;
    	height: 120px;
    	background: url('img/header_2007.png') no-repeat 50% 50%;
    	/* png is not supported properly by IE6 */
    	background: expression("url('img/header_2007.jpg') no-repeat 50% 50%");
    }
    
    #menu {
    	width: 10%;
    }
    #menu ul {
    	list-style: none;
    	margin: 1.5em 0;
    }
    #menu li {
    	font-style: italic;
    	text-align: center;
    	margin: 0.5em 0;
    }
    #menu a {
    	font-style: normal;
    	font-weight: bold;
    }
    
    #content {
    	position: absolute;
    	top: 120px;
    	bottom: 24px;
    	height: expression(document.body.clientHeight - 144 + "px");
    	left: 10%;
    	width: 80%;
    	border: 1px outset #ffdfe6;
    	padding: 3em 0 1em 0;
    	overflow: auto;
    	background: #ffb5c5;
    	color: #333;
    }
    
    #content a {
    	color: #b34637;
    }
    
    #menu2 {
    	position: absolute;
    	top: 6px;
    	left: 6px;
    	right: 6px;
    	background: #b34637;
    }
    #menu2 h1 {
    	margin: 3px 0 4px 0;
    	width: 100%;
    	text-align: center;
    	font: bold 0.8em verdana;
    	color: white;
    }
    #menu2 ul {
    	float: right;
    	margin: 2px 3px;
    	list-style: none;
    }
    #menu2 li {
    	float: left;
    	margin: 0 0 0 3px;
    	padding: 0 6px;
    	background: #fcfbac;
    }
    #menu2 li.active {
    	background: #fbde79;
    }
    #menu2 a {
    	font: 0.8em verdana;
    }
    
    #content div.text_block {
    	border: 1px inset #ffdfe6;
    	background: white;
    	margin: 0 6% 1em 6%;
    	padding: 0 6px;
    }
    #content h2 {
    	margin: 0.25em 0;
    	font-size: 1em;
    }
    #content p {
    	margin: 0.25em 0;
    }
    #content table {
    	margin: 0.25em 0;
    }
    #content th {
    	padding: 1px 2px;
    }
    #content td {
    	padding: 0 2px;
    }
    #content input {
    	padding: 1px 2px;
    }
    #content input.button {
    	padding: 1px 6px;
    }
    
    #footer {
    	position: absolute;
    	bottom: 0;
    	height: 24px;
    	left: 10%;
    	width: 80%;
    	font: 0.6em verdana;
    	color: #274818;
    }
    #footer_left {
    	float: left;
    	margin: 0 6px;
    	height: 24px;
    	line-height: 24px;
    }
    #footer_right {
    	float: right;
    	margin: 0 6px;
    }
    #footer_right ul {
    	list-style: none;
    }
    #footer_right li {
    	float: left;
    	margin: 0 6px;
    	height: 24px;
    	line-height: 24px;
    	font-style: italic;
    }
    #footer_right a {
    	font-style: normal;
    }
    

    Conclusie

    Wat ik met deze tutorial wilde bereiken, is laten zien hoe je een website kunt vormgeven met css. Het is goed mogelijk om inhoud en vormgeving gescheiden te houden en dat maakt het wel zo makkelijk om de website bij te houden en te gebruiken. Door op deze manier te werk te gaan, heb ik zelfs een aantal verbeteringen in de vormgeving gebracht waar ik anders nooit op was gekomen. Het dwingt je als het ware om na te denken hoe je de informatie op je website zo goed (lees duidelijk) mogelijk kunt presenteren.

    Uiteindelijk ziet de website er niet in iedere browser exact hetzelfde uit, maar het ziet er wel telkens (in Opera, FF en IE6 tenminste) uit zoals de bedoeling was. Een pixeltje meer of minder maakt niet zo veel uit. Ik ben er in ieder geval tevreden over. :)
    [/hand]
     
    Laatst bewerkt: 6 aug 2007

Deel Deze Pagina