Problème d'alignement

Logiciel & apps Programmation
1

Bonsoir,

Je cherche à aligner 3 blocs horizontalement de manière à former une bannière.
Mon problème : mes blocs ne sont pas alignés. Quand j’essaie de les aligner, ils se chevauchent, c’est le bordel quoi ^^
J’ai essayé avec display: inline et des float: left mais c’est le même problème.
Url de la page : www.mes-promos.fr…

Je vous mets mes codes ci-dessous :


<div id="header">
 
 
<div id="logo"></div>
<div id="accueil"></div>
<div id="categories"></div>
<div id="marchands"></div>
<div id="profil"></div>
<div id="deconnexion"></div>
<div id="addcode"></div>
 
</div>



#header {
        width: 800px;
        height: 150px;
        }       
 
#logo {
        width: 390px;
        height: 150px;
        display: inline;
        background-image: url(images/images/header_01.gif);
        }
 
 
#colone1 {
        width: 167px;
        height: 150px;
        display: inline;
        }
 
#accueil {
        width: 167px;
        height: 50px;
        background-image: url(images/images/header_02.gif);
        }
 
#categories {
        width: 167px;
        height: 50px;
        background-image: url(images/images/header_04.gif);
        }
 
#marchands {
        width: 167px;
        height: 50px;
        background-image: url(images/images/header_06.gif);
        }
 
       
 
#colone2 {
        width: 243px;
        height: 150px;
        display: inline;
        }
 
#profil {
        width: 243px;
        height: 50px;
        background-image: url(images/images/header_03.gif);
        }
 
#deconnexion {
        width: 243px;
        height: 50px;
        background-image: url(images/images/header_05.gif);
        }
 
#addcode {
        width: 243px;
        height: 50px;
        background-image: url(images/images/header_07.gif);
        }

Merci d’avance ! :slight_smile:

2

Tu es sur qu’en mettant des float:left; à chaque div cela se chevauche ?
Vérifie aussi qu’en additionnant les largeurs+bordures+margins+paddings de tous tes div, tu ne dépasses pas la largeur de ton header.

3

Oui, j’ai refais des test tout à l’heure avec les float et ca ne fonctionne pas…
Pour la largeur, je suis sur oui, mon image avant que je ne la découpe faisait exactement 800px. J’ai essayé d’agrandir le bloc mais ca ne change rien helas…

4

Normalement avec des float:left; ça devrait marcher…


#header {
        }       
 
#logo {
        width: 390px;
        height: 150px;
        float:left;
        background-image: url(images/images/header_01.gif);
        }
 
 
#colone1 {
        width: 167px;
        height: 150px;
        float:left;
        }
 
#accueil {
        width: 167px;
        height: 50px;
        float:left;
        background-image: url(images/images/header_02.gif);
        }
 
#categories {
        width: 167px;
        height: 50px;
        float:left;
        background-image: url(images/images/header_04.gif);
        }
 
#marchands {
        width: 167px;
        height: 50px;
        float:left;
        background-image: url(images/images/header_06.gif);
        }
 
       
 
#colone2 {
        width: 243px;
        height: 150px;
        float:left;
        display: inline;
        }
 
#profil {
        width: 243px;
        height: 50px;
        float:left;
        background-image: url(images/images/header_03.gif);
        }
 
#deconnexion {
        width: 243px;
        height: 50px;
        float:left;
        background-image: url(images/images/header_05.gif);
        }
 
#addcode {
        width: 243px;
        height: 50px;
        float:left;
        background-image: url(images/images/header_07.gif);
        }

Ce code devrait aligner tous tes divs les uns à côté des autres. Teste-le et montres nous la page résultante :wink:

5

C’est bon, mon collègue à réussi !
Merci de ton aide InSiderZ :slight_smile: