Faire rentrer un menu droite avec les DIV par HuGoLiN - page 1

Bonjour à tous, j'ai un problème pour la création de mon site

MON SITE

Quand j'essaie de mettre mon menu à droite, ça bug, je ne sais pourquoi :'(

!
A chaque fois, ils me le mettent à droite en bas, avec le pied de page o_O

Je vous passe les codes!

body
{
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
}

#en_tete
{
width: 896px;
height: 100px;
background-color:#999999;
background-repeat: no-repeat;
border: 1px solid black;
margin-bottom: 10px;
}

div#menu_horizontal {
width : 896px;
height : 35px;
background-color:#999999;
border: 1px solid black;
margin-bottom: 10px;
}

div#menu_horizontal ul {
list-style-type : none;
}

div#menu_horizontal li {
padding : 0 0.5em;
}

li.bouton_gauche {
float : left;
}

li.bouton_droite {
float : right;
}

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

.element_menu
{
background-color: #999999;
background-repeat: repeat-x;

border: 1px solid black;

margin-bottom: 20px;
}

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

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

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

#corps
{
margin-left: 130px;
margin-bottom: 30px;
padding: 5px;
width: 500px;
color: #00000;
background-color: #999999;
background-repeat: repeat-x;
border: 1px solid black;
}

#lastnews
{
float: right;
width: 120px;
}
.element_lastnews
{
background-color: #999999;
background-repeat: repeat-x;

border: 1px solid black;

margin-bottom: 20px;
}

#pied_de_page
{
padding: 5px;
height: 25px;
color: #000000;
background-color: #999999;
background-repeat: repeat-x;

border: 1px solid black;
}

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>G&A | Games and Arts</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />

<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>

<body>
<div id="en_tete">

</div>

<div id="menu_horizontal">
<ul>
<li class="bouton_gauche"><a href="accueil.php">Accueil</a></li>
<li class="bouton_gauche"><a href="news.php">News</a></li>
<li class="bouton_gauche"><a href="livreor.php">Livre d'or</a></li>
<li class="bouton_droite"><a href="admin.php">Admin</a></li>
<li class="bouton_droite"><a href="contact.php">Contact</a></li>
</ul>
</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>Salut à tous!!!!!!!!</h1>
<p>Salut à tous!!!!!!! </p>
<p align="center">Salut à tous!!!!!!! </p>
<p align="right">Salut à tous!!!!!!! </p>
<p align="center">Salut à tous!!!!!!! </p>
<p>Salut à tous!!!!!!! </p>
<p align="center">Salut à tous!!!!!!! </p>
<p align="right">Salut à tous!!!!!!! </p>
</div>

<div id="lastnews">
<div class="element_lastnews">
<h3>Titre menu</h3>
Chalute
</div>
</div>

<div id="pied_de_page">
<p>qdqsd</p>
</div>

</body>
</html>

Merci de votre réponse

HuGoLiN

14 avril 2006 à 16:50:10

strucky

14 avril 2006 à 17:55:34

Salut,

C'est normal.

Les éléments flottants doivent être mis avant les éléments qui ne "flottent pas".

Donc place ton div lastnews avant ton div corps.

Nb:
- Passe ton doctype en Xhtml1.0
- align: center n'est pas valide en Xhtml

14 avril 2006 à 18:19:10

Merci pour ta réponse!!

Faire rentrer un menu droite avec les DIV

Faire rentrer un menu droite avec les DIV

Supprimer

Modérer

Signaler le message aux modérateurs