Header collé a la mainbox
sangnom
Messages postés
7
Date d'inscription
Statut
Membre
Dernière intervention
-
anonyme -
anonyme -
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
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
A voir également:
- Header collé a la mainbox
- Gpt header corruption ✓ - Forum Windows 10
- Ae collé ✓ - Forum Windows
- Verre trempé qui ne colle pas sur les bords ✓ - Forum iPhone
- Bad pool header ✓ - Forum Windows 7
- Style d'écriture a copier coller - Guide
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...
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...
Bonjour,
Je viens de tester (mais j'ai pas les images) et le seul espace que je vois c'est tout simplement ton menu...
Je viens de tester (mais j'ai pas les images) et le seul espace que je vois c'est tout simplement ton menu...
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.
SUPER !!!!
Ca marche nickel et ca à meme corrigé un problème d'affichage sur dreamweaver.
Merci pour l'aide si rapide !
Ca marche nickel et ca à meme corrigé un problème d'affichage sur dreamweaver.
Merci pour l'aide si rapide !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
