Forum : Problème d'alignement CSS

Bonjour,
J'ai un problème avec le positionnement de mes div. Je suis un peu perdu.. voici mon code et un une image de mon problème:

code html

<div id="left" class="column1">
                <div id="titre" class="vert">TABLEAU DE BORD</div>
                    <div id="box-bord">
                        <!--zone 1 -->
                        <div id="gauche" class="zone1">
                            <center><img src="http://avatar-retro.com/habbo-imaging/avatarimage?figure=hr-100.hd-180-1.ch-210-66.lg-270-82.sh-290-91&gender=M"></center>
                        </div>
                        <!--zone 2 -->
                        <div id="centre" class="zone2">
                        hhhhhhh
                        </div>
                        <!--zone 3 -->
                        <div id="droite" class="zone3">
                        ddddd
                        </div>
                    </div>
            </div>

code css

/* TABLEAU DE BORD */
.contenu .box-bord { /*  sur cette ligne, les "." sont en réalité des "#" */
    background-color: #FFF;
    border-radius: 0px 0px 4px 4px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    border-width: medium 1px 1px;
        border-top-width: medium;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
    border-style: none solid solid;
        border-top-style: none;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
    border-color: -moz-use-text-color rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2);
        border-top-color: -moz-use-text-color;
        border-right-color: rgba(0, 0, 0, 0.2);
        border-bottom-color: rgba(0, 0, 0, 0.2);
        border-left-color: rgba(0, 0, 0, 0.2);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
        border-image-source: none;
        border-image-slice: 100% 100% 100% 100%;
        border-image-width: 1 1 1 1;
        border-image-outset: 0 0 0 0;
        border-image-repeat: stretch stretch;
    padding: 9px;
        padding-top: 9px;
        padding-right: 9px;
        padding-bottom: 9px;
        padding-left: 9px;
    font-size: 14px;
    color:white;
    background-image: url(../MyHabboTV/images/mepage.png);
    background-size: 100%;
    height: 137px;
}
/**/
.gauche{
    float: left;

}
.zone1 {
    width: 120px;
    height: 120px;
    display: inline-block; 
}
.centre{
    float:center;

}
/**/
.zone2{
    width: 335px;
    height: 120px;
    margin-left: 10px;
    display: inline-block;
    position: top;
}
/**/
.droite{
    float:right;

}
.zone3{
    width: 303px;
    height: 120px;
    margin-left: 10px;
    display: inline-block;
}

/* fin TABLEAU DE BORD */

mon problème en image

http://www.noelshack.com/2016-01-1452019364-probleme.png

Whysyb

Réponse acceptée

Bonjour Noviste,

le problème dans ton code viens du display: inline-block. En effet pour avoir tes bloc alignés comme tu le souhaite tu dois spécifier un alignement vertical (vertical-align: top). rajoute une class à tes élément zone-1, zone-2 et zone-3, par exemple la class zone et un élément en clear-both pour éviter les problèmes liés au float :

Le html :

        <div id="gauche" class="zone zone1">
            <center><img src="http://avatar-retro.com/habbo-imaging/avatarimage?figure=hr-100.hd-180-1.ch-210-66.lg-270-82.sh-290-91&gender=M"></center>
        </div>
        <!--zone 2 -->
        <div id="centre" class="zone zone2">
            hhhhhhh
        </div>
        <!--zone 3 -->
        <div id="droite" class="zone zone3">
            ddddd
        </div>        
        <hr class="clear"> <--! L'élément en clear-both -->

Puis le css :

.zone{
    vertical-align: top;
}
.clear{
    clear: both;
    opacity: 0;
    padding: 0;
    margin: 0;
}

En espérant t'avoir aidé,

A plus !

Carouge10

Bonjour,

Vous déclarez un id "box-bord" et dans le css vous appelez un class "box-bord".
Est-ce normale ?

Noviste

Auteur

courage10 ce n'est pas bien grave.. et whysyb merci pour ta reponse. je testerais ta solution demain.

Problème d'alignement CSS

3 réponses