design web [part 2]
Si, si c'est possible.
Comment allons nous agencez le tableau?
Nous allons agencez le tableau avec, une cellule ou il y aura la banniere,
à la seconde ligne,une cellule pour le menu, une pour le texte principal et là derniere pour les partenaires,
Et la 3eme est derniere ligne , pour les "information".
Ce qui vous donnes le code ainsi:
- Code: Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design.css" rel="stylesheet" type="text/css" title="Theme du site" />
</head>
<body>
<table>
<tr>
<td colspan="3" id="banniere">
</td>
</tr>
<tr>
<td id="menu" valign="top">
<b>Menu principal</b>
<a href="index.html">acceuil</a><br />
<a href="blog.html">blog</a><br />
<a href="forum.html">forum</a><br />
</td>
<td id="texteprin" valign="top">
</td>
<td id="partenaires" valign="top">
</td>
</tr>
<tr>
<td colspan="3" id="info">
</td>
</tr>
</table>
</body>
</html>
Un nouveau venue "valign", il indique où le texte doit être alignez, mais contrairement à text-align du css, qui parle de gauche/droit/centre, valign lui fait: haut(top)/bas(bottom)/centre(center).
- Code: Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design.css" rel="stylesheet" type="text/css" title="Theme du site" />
</head>
<body>
<table>
<tr>
<td colspan="3" id="banniere">
</td>
</tr>
<tr>
<td id="menu" valign="top">
<b>Menu principal</b>
<a href="index.html">acceuil</a><br />
<a href="blog.html">blog</a><br />
<a href="forum.html">forum</a><br />
</td>
<td id="texteprin" valign="top">
<h1>Bienvenue, sur mon site!</h1>
<p>Bienvenue sur monsupersite.com , mon site vous propose des news qui m'ont marquez, mais surtout mon blog! Je vous propose aussi mon petit forum, où vous pourrez parlez des debats...enfin bref, merci de votre visite!</p>
<h2>Le créateur</h2>
Le créateur c'est moi! Un gars comme vous, sauf que moi, j'ai eu LE SITE où l'on peut apprendre le xhtml/css (et bientot le php), facilement! Enfin bref, le truc qui tue de la mort et qui rend jaloux les copains d'ecoles!
<h2>Remerciment</h2>
Je remercie le rotveller de ma voisine pour m'avoir encouragé à lire les tutos disponible sur ce site, ainsi, je peut enfin dire ce que je vis...aidez moi! Les bébé rotveller on envahit ma chambre, ceci est un SOS! (c'est une blague, evidemment...).
</td>
<td id="partenaires" valign="top">
<b>partenaires</b>
<a href="http://www.google.fr">google</a><br />
<a href="http://www.msn.fr">msn</a><br />
<a href="http://www.monsitegratuit.com">Mon site gratuit</a><br />
</td>
</tr>
<tr>
<td colspan="3" id="info">
<p>Copyright © monsupersite.com .<br />
<a href="#banniere">Il n'y à plus rien à lire, cliquez ici pour remonter!</a></p>
</td>
</tr>
</table>
</body>
</html>
Bon, evidemment leCSS!
CSS
Le body doit faire 800px, le site doit etre cnetrez, et la page doit ni touche le haut, ni le bas du navigateur. Et une petit image de fond
- Code: Tout sélectionner
body
{
margin: auto;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("http://www.enregistrersous.com/images2/112553745120071211095246.jpg");
}
La bannière 800 sur 120px.
- Code: Tout sélectionner
#banniere
{
width: 800px;
height: 120px;
background-image: url("banniere.jpg");
}
Un menu de 100px, avec comme couleur de fond, blanc.
- Code: Tout sélectionner
#menu
{
width: 100px;
background-color: #ffffff;
}
Le texte principal, 600px de large, avec comme couleur blanc
- Code: Tout sélectionner
#texteprin
{
width: 600px;;
background-color: #ffffff;
}
Les partenaires, comme le menu, 100px, et avec fond blanc
- Code: Tout sélectionner
#partenaires
{
width: 100px;;
background-color: #ffffff;
}
info,le texte centré au centre et un fond blanc
- Code: Tout sélectionner
#info
{
text-align: center;
background-color: #ffffff;
}
Allez, un petit code css complet
- Code: Tout sélectionner
body
{
margin: auto;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("http://www.enregistrersous.com/images2/112553745120071211095246.jpg");
}
#banniere
{
width: 800px;
height: 120px;
background-image: url("banniere.jpg");
}
#menu
{
width: 100px;
background-color: #ffffff;
}
#texteprin
{
width: 600px;;
background-color: #ffffff;
}
#partenaires
{
width: 100px;;
background-color: #ffffff;
}
#info
{
text-align: center;
background-color: #ffffff;
}
Voila, vous savait faire 2design diffèrent, évidemment, vous pouvez changer le design...en quelque code css!
