Footer poussé en bas par le menu comme sur IE

1 mai 2006 à 17:35:59

Bonjour a tous!

1)Je suis en train de coder mon site et j'ai "un problème".
En faites sous FF, le menu est par dessus le footer mais sous IE, le footer est poussé par le menu et c'est se que je veux sur IE et FF.
http://artsgamer.free.fr et regardez le sous IE et FF.
Comment faire?
Voici les codes:
<div id="menu">

<div class="haut_element_menu">
<p> Créer son site web </p>
</div>

<div class="element_menu">
<ul>

<li>Site web pour débutant </li>
<li> Allez plus loin </li>
<li> Annexe </li>
</ul>

</div>

<div class="haut_element_menu">
<p> Graphisme </p>
</div>
<div class="element_menu">
<ul>
<li> Photoshop </li>
<li> 3D / 2D </li>
<li> Fond d'écran </li>
<li> Icone </li>
</ul>
</div>

<div class="haut_element_menu">
<p> Communauté </p>
</div>
<div class="element_menu">
<ul>
<li> Tutos des membres </li>
<li> Forum </li>
<li> Mini-chat </li>
<li> Livre d'or </li>
<li> Contact </li>
</ul>
</div>

<div class="haut_element_menu">
<p> Votre compte </p>
</div>
<div class="element_menu">
<ul>
<li> Profil </li>
</ul>
<ul>
<li> Envoyer une création </li>
<li> Vos création </li>
</ul>
<ul>
<li> Proposer une news </li>
<li> Vos news </li>
</ul>
<ul>
<li> Proposer un tutorial </li>
<li> Vos tutos </li>
</ul>
</div>
</div>
<div id="footer">
<p>
Design et code par m0nk3y. © Copyright - Art's gamer - Interdit de recopier partiellement ou entierment le contenu
de <strong> Art's gamer</strong> sans l'accord de l'auteur.
<a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fartsgamer.free.fr&usermedium=all"> CSS 2.0</a>
</p>
</div>

Et le css:

#menu
{
height: auto;
width: 229px;
float: left;
background-image: url("images/menu/menu.gif");
}

.haut_element_menu
{
height: 64px;
width: 215px;
margin-left: 5px;
text-align: center;
background-image: url("images/menu/haut_element_menu.gif");
}

.element_menu
{
height: auto;
width: 205px;
margin-left: 13px;
margin-bottom: 5px;
}

#footer
{
width: 1000px;
height: 90px;
background-image: url("images/footer/footer.gif");
margin: 0px;
}
2) Regardez la bannière et la speed_barre sous FF et IE. Sur IE c'est bien mais sous Firefox il y a une marge. Même en mettant margin: 0px sa ne marche toujours pas. Voici mes codes
<div id="banniere">

</div>

<div id="speed">
<div id="gauche">
<p></p>
<ul>
<li>| Accueil </li>
<li>| Forum </li>
<li>| Graphisme</li>
<li>| Vos images</li>
<li>| Contact </li>
</ul>
</div>
<div id="droite">
<ul>
<li>| Inscription </li>
<li>| Connection </li>
</ul>
</div>
</div>

#banniere
{
width: 1000px;
height: 192px;
margin: 0px;
background-image: url("images/banniere/banniere.gif");
}
#speed
{
width: 1000px;
height: 48px;
border-bottom: 1px solid black;
margin: 0px;
background-image: url("images/speed/speed.gif");
}

div #gauche li
{
list-style-type : none;
float : left;
padding: 0 0.5em;
}

div #droite li
{
list-style-type: none;
padding : 0 0.5em;
float : right;
}

Savez-vous d'ou cela peut-il provenir?
Merci d'avance pour vos réponses!
Amicalement: m0nk3y.

PS: Je vous ai mis seulement les codes des différents partie. Sachez que entre le menu et le footer il y a un

Edit: Je ne vois pas se qu'il y a en trop dans mon HTMl?!

strucky

1 mai 2006 à 20:02:27

Salut,

Comme d'habitude => clear: both sur ton pied de page.

Et mets des margin à 0 sur tous les blocs.

D'ailleurs, faudrait revoir ton html, car c'est un peu du n'importe-quoi, il y a énormément de blocs qui sont inutiles.

pascall

1 mai 2006 à 20:58:30

salut,
essaies en mettant ça :

#corps
{
width: 771px;
height: auto;
margin-left: 0px;
margin-bottom: 0px;
border-bottom: 1px solid black;
background-image: url("images/corps/corps.gif");
margin-top:0px;
float:right;
clear:right;
}

edit
un clear:both marche aussi bien

Sword

1 mai 2006 à 21:37:59

Pour le footer sa marche nikel

Merci!

Mais par contre pour la bannière et la speed barre sa ne marche toujours pas sur FF.
Sous IE le corps est poussé sur la droite.
Voici tout mes codes sa seras surement plus claire:

<!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> <?php echo $titre; ?> </title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="Design de base" href="design/design.css"/>
</head>
<body>

<div id="contenu">

<div id="banniere">

</div>

<div id="speed">
   <div id="gauche">
<p></p>
   <ul>
   <li>| Accueil </li>
   <li>| Forum </li>
   <li>| Graphisme</li>
   <li>| Vos images</li>
   <li>| Contact </li>
   </ul>
</div>
<div id="droite">
   <ul>
   <li>| Inscription </li>
   <li>| Connection </li>
   </ul>
</div>
</div>


<div id="menu">

<div class="haut_element_menu">
<p> Créer son site web </p>
   </div>

<div class="element_menu">
   <ul>

<li>Site web pour débutant </li>
<li> Allez plus loin </li>
<li> Annexe </li>
   </ul>

</div>

<div class="haut_element_menu">
<p> Graphisme </p>
   </div>
<div class="element_menu">
<ul>
   <li> Photoshop </li>
<li> 3D / 2D </li>
<li> Fond d'écran </li>
<li> Icone </li>
   </ul>
</div>

<div class="haut_element_menu">
<p> Communauté </p>
   </div>
<div class="element_menu">
   <ul>
   <li> Tutos des membres </li>
   <li> Forum </li>
   <li> Mini-chat </li>
   <li> Livre d'or </li>
   <li> Contact </li>
   </ul>
</div>

<div class="haut_element_menu">
   <p> Votre compte </p>
</div>
<div class="element_menu">
   <ul>
   <li> Profil </li>
   </ul>
   <ul>
   <li> Envoyer une création </li>
   <li> Vos création </li>
</ul>
<ul>
   <li> Proposer une news </li>
   <li> Vos news </li>
</ul>
<ul>
   <li> Proposer un tutorial </li>
   <li> Vos tutos </li>
</ul>
</div>
</div>

<div id="corps">

<div id="haut_corps">
</div>

<div id="corps">
<p> Tout le blabla ici </p>
</div>
<div id="footer">
<p>
   Design et code par m0nk3y. © Copyright - Art's gamer - Interdit de recopier partiellement ou entierment le contenu
   de <strong> Art's gamer</strong> sans l'accord de l'auteur.
<a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a>
   <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fartsgamer.free.fr&usermedium=all"> CSS 2.0</a>
</p>
</div>
</div>
</body>
</html>

Et CSS:

body
{
height: auto;
width: 95%;
margin-left: 10px;
}

#banniere
{
width: 1000px;
height: 192px;
margin: 0px;
background-image: url("images/banniere/banniere.gif");
}

#menu
{
height: auto;
width: 229px;
float: left;
background-image: url("images/menu/menu.gif");
border-right: 1px solid black;
margin-right: 20px;
}

.haut_element_menu
{
height: 64px;
width: 215px;
margin-left: 5px;
text-align: center;
background-image: url("images/menu/haut_element_menu.gif");
}

.element_menu
{
height: auto;
width: 205px;
margin-left: 13px;
margin-bottom: 5px;
}

#speed
{
width: 1000px;
height: 48px;
border-bottom: 1px solid black;
margin: 0px;
background-image: url("images/speed/speed.gif");
}

div #gauche li
{
list-style-type : none;
float : left;
padding: 0 0.5em;
}

div #droite li
{
list-style-type: none;
padding : 0 0.5em;
float : right;
}

#haut_corps
{
background-image: url("images/corps/haut_corps.gif");
width:771px;
height: 72px;
margin: 0px;
}
#corps
{
width: 771px;
height: auto;
margin-left: 229px;
border-bottom: 1px solid black;
background-image: url("images/corps/corps.gif");
}

#footer
{
width: 1000px;
height: 70px;
background-image: url("images/footer/footer.gif");
margin: 0px;
padding-top: 20px;
clear: both;
}

Savez vous d'ou cela proviens?
Merci encore

pascall

1 mai 2006 à 22:59:59

je voudrai un petit renseignement
sous IE avec ce css le corps est en bas de page
est ce que c'est uniquement chez moi que ca fait ca ?

le code que j'avais donné marche sous IE mais pas sous FF :-°

Riko

1 mai 2006 à 23:09:18

Salut,
moi aussi le corps est en bas de page sous IE

strucky

2 mai 2006 à 8:30:42

Comme je t'ai dis mets des margin 0 à tous tes blocs, car en initialisant tes marges à 0 en mettant

*{ margin: 0 }

Le problème est règlé, donc trouve les blocs ayant des marges.

pascall

2 mai 2006 à 22:29:02

salut
pour regler le probléme de décalage du corps sous IE essaies ce css là

body
{
height: auto;
width: 95%;
margin-left: 50px;
}
#contenu
{
background-color: #F1F1F1;
border: 1px solid black;
width: 1000px;
height: auto;
}
#banniere
{
width: 1000px;
height: 192px;
margin: 0px;
background--image: url("images/banniere/banniere.gif");
}
#menu
{
height: auto;
width: 229px;
float: left;
background-image: url("images/menu/menu.gif");
border-right: 1px solid black;

}
.haut_element_menu
{
height: 64px;
width: 215px;
margin-left: 5px;
text-align: center;
background-image: url("images/menu/haut_element_menu.gif");
}
.element_menu
{
height: auto;
width: 205px;
margin-left: 13px;
margin-bottom: 5px;
}
#speed
{
width: 1000px;
height: 48px;
border-bottom: 1px solid black;
margin: 0px;
background-image: url("images/speed/speed.gif");
}
#gauche li
{
list-style-type : none;
float : left;
padding: 0 0.5em;
}
#droite li
{
list-style-type: none;
padding : 0 0.5em;
float : right;
}
#haut_corps
{
background-image: url("images/corps/haut_corps.gif");
width:750px;
height: 72px;
}
#corps
{
width: 750px;
height: auto;
margin-left: 229px;
border-bottom: 1px solid black;
background-image: url("images/corps/corps.gif");
}
#footer
{
width: 1000px;
height: 70px;
background-image: url("images/footer/footer.gif");
margin: 0px;
padding-top: 20px;
clear: both;
}

/* Les titres */
h1
{
text-align: center;
text-decoration: underline;
font-weight: bold;
}
p
{
text-indent: 30px;
}
/* Autre */
img
{
border: none;
}
h3
{
text-decoration: underline;
}
.message
{
width: 400px;
border: 1px solid black;
height: auto;
margin-left: 50px;
background-color: #94ACC7

}

.pseudo
{
border-right: 1px solid black;
padding-right: 10px;
color: #074386;
text-decoration: underline;
margin: 5px;
width: 115px;
}
.pseudo2
{
border: 1px solid black;
padding-right: 10px;
color: #074386;
text-decoration: underline;
margin-left: 50px;
width: 115px;
}