Problème d'alignement CSS

Par Noviste, il y a 10 ans

Les bases HTML/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

3 réponses

Carouge10, il y a 10 ans

Bonjour,

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

Whysyb, il y a 10 ans

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 !

Noviste, il y a 10 ans

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