[Résolu] Design mal structuré - Ici, mon design est mal structuré... par woldshadow - page 1

Bonjour à tous, jai besoin d'aide à nouveau voici mon problème:
Dans les tutoriaux de Mateo, je fais mon design mais le menu cole sur le corps... j'ai regarder les sources dans les exemples de mateo et lui c'est les mêmes scripts que moi et son design est correcte. Voici mes scripts xhtml vous pourrez les enregistrer dans un dossier avec le code css et vous pourrez voirm on design mais sans la banniere...

code xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur Knight Champions! </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="C:\Documents and Settings\woldshadow\Desktop\mon site\couleurs.css" rel="stylesheet" media="screen" />
</head>

<body>
<div id="en_tete">
<img src="C:\Documents and Settings\woldshadow\Desktop\mon site\knightchampions.jpg" alt="Bannière du site" title="Serez-vous le vainqueur?" />
</div>

<div id="menu">

</div>

<div id="menu"> 

<div class="element_menu"> 
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">lien</a></li>
<li><a href="page2.html">lien</a></li>
<li><a href="page3.html">lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">lien</a></li>
<li><a href="page5.html">lien</a></li>
<li><a href="page6.html">lien</a></li>
</ul>
</div>
</div>

<div id="corps">
<h1>Knight Champions MMORPG</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu...
<br/>Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes,<br />
on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué).<br />
Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait,<br />
j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance.<br />
MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>

</div>

<div id="pied_de_page">
<p>Copyright "Gabriel créateur du jeu Knight Champions" 2006, tous droits réservés</p>
</div>

</body>
</html>

code css:

body
{
width: 760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;

}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #626262;
border: 2px solid black;
margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

/* Le corps de la page */

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}

#corps h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;

background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}

merci à tous et j'espere que quel qu'un va pouvoir m'aider précisement!

woldshadow

7 janvier 2006 à 19:39:55