Header collé a la mainbox

Fermé
sangnom Messages postés 7 Date d'inscription jeudi 30 juillet 2009 Statut Membre Dernière intervention 25 septembre 2011 - 2 août 2009 à 12:20
 anonyme - 2 août 2009 à 13:01
Bonjour,

Je suis en train de réaliser mon site, tout se passe bien à part une chose que je ne comprends pas. C'est à propos de mon header. Un espace se crée automatiquement entre lui et le reste de mon site (mainbox) Je veux de toute facon en créer un mais je n'ai rien demandé et comme j'aime comprendre et avoir le controle sur les choses je m'en remet a vous.

mon XHTML:

<body>

<div id="header">
</div>

<div id="mainbox">

<div id="menu">
<ul>
<li><a class="m1" href="menu1.html"></a></li>
<li><a class="m2" href="menu2.html"></a></li>
<li><a class="m3" href="menu3.html"></a></li>
<li><a class="m4" href="menu4.html"></a></li>
<li><a class="m5" href="menu5.html"></a></li>
</ul>
</div>


<div id="corps">
</div>

</div>



</body>



Mon CSS:

body {
background-image: url(images/fond.gif);
margin: 0;
}

#header {
background-color: #036;
width: 100%;
height: 80px;
border-bottom: 2px #111111 solid;

}

#mainbox {
width: 900px;
height: 600px;
margin: auto;
padding: 0;
}

#menu {

width: 100%;
height: 50px;
background-image: url(images/alpha.png);
background-position: center;
margin: auto;
}

#corps {
background-color: #F99;
width: 100%;
height: 600px;
margin: auto;

}

Voila si quelqu'un sait éclairer ma lanterne sur ce petit problème ca me ferait bien plaisir.

Merci

5 réponses

Bon, a tout hasard, essaye ca :

HTML :

<body>
<div id="header"></div>
<div id="mainbox">
<div id="menu">
<ul>
<li><a class="m1" href="menu1.html">Menu 1</a></li>
<li><a class="m2" href="menu2.html">Menu 2</a></li>
<li><a class="m3" href="menu3.html">Menu 3</a></li>
<li><a class="m4" href="menu4.html">Menu 4</a></li>
<li><a class="m5" href="menu5.html">Menu 5</a></li>
</ul>
</div>
<div id="corps"></div>
</div>
</body>


CSS :

* {
margin: 0;
padding: 0;
}

body {
text-align: center;
background: url(images/fond.gif);
}

#header {
background: #036;
width: 100%;
height: 80px;
border-bottom: 2px #111111 solid;
}

#mainbox {
width: 900px;
height: 600px;
margin: 0 auto;
}

#menu {
height: 50px;
background-image: url(images/alpha.png) center;
margin: 0 auto;
}

#corps {
background-color: #F99;
height: 600px;
margin: 0 auto;
}



En définissant * { margin: 0; padding: 0; } ça applique un padding et un margin de 0 à tous les éléments de ta page. Car je ne sais pas si tu sais, mais IE ou Firefox ou les autres ont des paddings ou des marges différentes DE BASE. Donc pour éviter les espaces indésirables, toujours utiliser * { margin: 0; padding: 0; } en début de code CSS


Je ne sais pas si ca t'aide pour le probleme, mais ce que je sais c'est que ca t'aidera forcément de le faire...
1
Bonjour,



Je viens de tester (mais j'ai pas les images) et le seul espace que je vois c'est tout simplement ton menu...
0
sangnom Messages postés 7 Date d'inscription jeudi 30 juillet 2009 Statut Membre Dernière intervention 25 septembre 2011
2 août 2009 à 12:40
Et bien justement je comprends pas qu'ily ait un espace entre le menu et le header, il n'ya aucune raison étant donné que les <div> dans le html sont l'une à la suite de l'autre et que je n'ai défini aucune marge dans le css.
0
sangnom Messages postés 7 Date d'inscription jeudi 30 juillet 2009 Statut Membre Dernière intervention 25 septembre 2011
2 août 2009 à 13:00
SUPER !!!!

Ca marche nickel et ca à meme corrigé un problème d'affichage sur dreamweaver.

Merci pour l'aide si rapide !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Ravi que ça t'ai aidé !!
0