D Drmmr
Heeft veel posts
- Lid geworden
- 5 jul 2005
- Berichten
- 13.482
- Waarderingsscore
- 151
[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
main.html
register.html
rankings.html
AllStyles.css
[/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 © 2006-2007 Jelle Hurkens. All rights reserved.
</td>
<td align=right valign=center class="bottom">
<i>Other sites:</i> <a href="http://www.ddrmmr.nl">D Drmmr</a> <a href="http://games.ddrmmr.nl">Games</a> <a href="http://math.ddrmmr.nl">Math</a> <a href="http://cpp.ddrmmr.nl">C++</a>
</td>
<td></td>
</tr>
</table>
</BODY>
</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>
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'> <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>
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>
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;
}
Laatst bewerkt door een moderator: