Problème d'alignement d'un bloc

il doit manquer quelque-chose

Sujet résolu

WaNe

28 décembre 2005 à 19:20:18

Bonjour à tous !!

J'ai commencé mon site web :-°

et j'ai déjà un petit problème !!

Déjà voilà l'image de ma page test (support) CLIQUEZ ICI POUR LA VOIR!

Vous voyez le rond rouge ? Mon problème est situez là !!
Mon bloc "menu" ne va pas jusqu'au bout comme le bloc "haut-contenu" !!

Or dans le css je ne vois pas ce que je n'ai pas mis dans #menu et que j'ai mis dans #haut-contenu pour que ça fasse cela !!

Voici mon code CSS:

#haut-contenu
{
width: 100%;
margin: 1px 1px 1px;
background-image: url('images/haut-contenu.png');
background-repeat: no-repeat;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}
#menu
{
width: 100%;
margin: 1px 1x 1px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
margin: 0px 0px 0px;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 5px;
background-color: #ffffff;

Et mon code HTML au cas ou:

<div id="contenu" >
<div id="haut-contenu" >
<br/>
<br/>
<br/>
<center> KaiZokuOU - Zone de Tests - Warning !! </center>
<br/>
<br/>
<br/>
</div>
<div id="menu">
<center>
<p> Accueil |
<a href="/forum/">Forum</a> |
Chat |
</p>

</div>
</div>

Si quelqu'un pouvez m'aider !! o_O

Merci beaucoup les gars et les filles

strucky

28 décembre 2005 à 19:45:29

Salut !

Le padding s'additionne avec la largeur ou la hauteur, c'est à dire un width de par exemple 500px plus un padding left et right de 10px donnera une largeur totale de 520px.

Ton problème vient de là

WaNe

28 décembre 2005 à 19:49:32

Donc je dois augmenter mes paddings jusqu'à ce que j'arrive à ce que je veux ?

merci de te réponse

strucky

28 décembre 2005 à 19:56:41

Oui

Car là, ton #haut-contenu mesure width: 100% + padding: 10px et ton #menu mesure width: 100% + padding-left: 5px.

Il y a donc une différence de 15 px de large.

WaNe

28 décembre 2005 à 20:02:15

Mais bien sûr !! Rooh je suis bête !!

Merci beaucoup !!

Encore une question vite fait s'il te plait !

Tu vois haut-contenu et menu ils ont un border-bottom pour haut-contenu et un border-top pour menu de 1px chacun !

Comment faire fusionner ce border-bottom et ce border-top pour que ça ne fasse qu'une bordure de 1px ?

pS: Parce-que quand je laisse le border-bottom et que je supprime le border-top il y a un blanc .. ce n'est pas collé

Merci beaucoup, parce-que cette double barre me gène un peu
!!

encore merci

strucky

28 décembre 2005 à 20:12:10

Ce n'est pas possible de fusionner les bordures, sauf avec les cellules d'un tableau.
Donc, il faut que tu en supprimmes une des deux.

Citation : WaNe

pS: Parce-que quand je laisse le border-bottom et que je supprime le border-top il y a un blanc .. ce n'est pas collé

C'est normal que tu es un espace, puisque tu mets des margin à 1px sur chacun de tes blocs, mets les à 0 pour le bas de #haut-contenu et le haut de #menu.

WaNe

28 décembre 2005 à 20:42:37

C'est parfait merci

Désolé j'édites j'édites mais je trouve des problèmes au fur et à mesure que j'avance ...

SOus IE parfait ça fait ça:

http://kaizokuou.free.fr/sreen1.png

Et sous Firefox:

http://kaizokuou.free.fr/screen2.png

Pourquoi cette différence assez embetante ?

strucky

28 décembre 2005 à 21:03:40

Je m'en doutais

Ca dépasse avec FF, car le tout fais plus que 100%

Donc enlèves les width: 100%, il n'est pas necessaire de préciser une largeur puisque un élément de type block occupe par défaut toute la largeur de son élément parent.

Normalement ça devrait être bon.

WaNe

28 décembre 2005 à 21:39:29

Merci beaucoup c'est bon