[CSS]Bloc pas très docile !

Gameo -  
Ssylvainsab Messages postés 2884 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour à tous,

Alors voilà c'est simple, voici mon site :

http://cameleono07.free.fr/Gameo%20Zone/

Et vous pouvez constater que y a un bel écart blanc de 8pixels entre la bannière et le corps, et je ne sais absolument pas d'où ça provient, surtout que j'ai aucun 8px dans mon css...

Voici le html et le css : 

<!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>
  <link rel="stylesheet" type="text/css" href="style.css">   
  <title>Mon super site</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>

   <body>

       <!-- L'en-tête -->

       <div id="en_tete">
           
       </div>

       <!-- Les menus -->

       <div id="menu">       
           <div class="element_menu">
               <h3><span style="color:#5b5b3d;">MAIN</span><pan style="color:#ffde00;">MENU</span></h3>
               <ul>
                   <a href="page1.html">Lien</a><br />
                   <a href="page2.html">Lien</a><br />
                   <a href="page3.html">Lien</a><br />
               </ul>
           </div>
       
           <div class="element_menu">
                <h3><span style="color:#5b5b3d;">MAIN</span><pan style="color:#ffde00;">MENU</span></h3>
               <ul>
                   <a href="page4.html">Lien</a><br />
                   <a href="page5.html">Lien</a><br />
                   <a href="page6.html">Lien</a><br />
               </ul>
           </div> 
		   
		   <div class="element_menu">
               <h3><span style="color:#5b5b3d;">MAIN</span><pan style="color:#ffde00;">MENU</span></h3>
               <ul>
                   <a href="page1.html">Lien</a><br />
                   <a href="page2.html">Lien</a><br />
                   <a href="page3.html">Lien</a><br />
               </ul>
           </div>      
       </div>

       <!-- Le corps -->

       <div id="corps">
           <h1>Gameo Zone</h1>
       
           <p>
               Blablablablabla<br />
               BlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablabla
           </p>
       
           <h2>Salut ça farte ?</h2>   
           <p>
               BlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablabla
           </p>
           
           <h2>Hey ! Tu prends l'apéro ?</h2>   
           <p>
               BlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablablaBlablablablabla
           </p>
       </div>

       <!-- Le pied de page -->

       <div id="pied_de_page">
           <p>#&#312;nz. ~ Copyright © 2006/2007 ~ Tous droits réservés</p>
       </div>

   </body>
</html>


body
{
   width: 805px;
   margin: auto;
   margin-top: 0px;
   margin-bottom: 0px;   
   background-image: url("images/background.gif");
   background-position: center;
   background-repeat: repeat-y;
}

#en_tete
{
   width: 805px;
   height: 200px;
   background-image: url("images/banniere.gif");
   background-repeat: no-repeat;
   background-position: center;
   margin-bottom: 0px;
}

#menu
{
   float: left;
   width: 130px;
   background-image: url("images/backgroundmenu.gif");
   background-repeat: no-repeat;
}

.element_menu
{
   background-color: #fffdf1;
   color: #5b5b3d; 
   font-family: Tahoma;
   font-size: 11px;
}

.element_menu2
{
	background-color: #ffff00;
}

.element_menu h3
{   
   color: #ffde00;
   font-family: Tahoma;
   font-size: 11px;
   padding-left: 13px;
}

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

.element_menu a
{
   color: #5b5b3d;
   text-decoration: none;
}

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


/* Le corps de la page */

#corps
{
   margin-left: 130px;
   margin-bottom: 0px;
   margin-top: 0px;
   color: #5b5b3d;
   background-color: #fffdf1;
   background-repeat: repeat-x;
   background-image: url("images/backgroundmenu.gif");
   text-align: justify;
   padding-right: 20px;
}

#corps h1
{
   color: #5b5b3d;
   text-align: left;
   font-family: Tahoma;
   font-size: 12px;
   text-decoration: none;
}

#corps h2
{
   height: 20px;
   background-repeat: no-repeat;
   font-family: Tahoma;
   font-size: 12px;
   text-decoration: underline;
   padding-left: 30px;
   color: #5b5b3d;
   text-align: left;
}

#corps p
{
	font-family: Tahoma;
	font-size: 11px;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   text-align: center;
   font-family: Tahoma;
   font-size: 11px;
   text-decoration: underline, overline;
   color: #5b5b3d;
   background-repeat: repeat-x;
}


Merci d'avance ;)

A+
A voir également:

2 réponses

Réponse 1 / 2
king
 
Le plus simple est de créer un DIV conteneur et de mettre les autres par rapport au conteneur.

L'espace vient probablement d'un "position:absolute" manquant.

Pour IE, en général, il est plus simple de créer un CSS conditionnel pour lui, vu qu'il a de sérieux soucis de positionnement.
0
Réponse 2 / 2
Ssylvainsab Messages postés 2884 Date d'inscription   Statut Modérateur Dernière intervention   825
 
Bonsoir.

Sous quel navigateur es-tu ?
J'ai testé avec FF 2.0 et IE 6, pas de problème.

Il y a des trucs bizzares dans ton code :
<pan style
Ce serait pas plutôt
<span style

Pourquoi ne pas utiliser des CSS plutôt ?

Ah, et je vois que tu fais du xhtml 1.1
Normalement, il doit être servi en tant qu'application/xhtml+xml, et pas comme du text/html.
Tu devrais aussi mettre une déclaration xml.

Par contre, de cette facon ca ne passe pas sous IE.

Donc soit tu fais un site qui ne passe pas sous IE, soit tu affiches un doctype différent avec php selon le navigateur, soit tu fais du html 4.0

a plus
0

Discussions similaires

Le bloc lu n'est pas un bloc
AdizatouMaiga -
Chris 94 -

1 réponse
Brancher des BAES sans télécommande ?
Yasoda -
bendrop -

1 réponse
telecommande BAES
jerome218 -
Utilisateur anonyme -

3 réponses
schémas d'installation bloc sortie secours
elda -
nnnn -

6 réponses
nom de metier
E=MC² -
Raymond PENTIER -

2 réponses