28172 sujets

CSS et mise en forme, CSS3

Problème positionnement div

Bonjour,

J'ai un pb de positionnement de div.

Je fais un cadre div (cadre_nom) dans lequel je mets 2 autres div (cadre_nom_gauche et cadre_nom_droite) afin de pouvoir aligner mes labels dans chaque cadre, càd aligner les Nom, adresse, code postal l'un au dessus de l'autre dans la div de gauche et aligner le prénom, suite adresse, ville l'un au dessus de l'autre dans la div de droite.

Jusque là mes label et mes input s"affichent comme je le souhaite.

Le problème est que mon cadre de droite s'affiche bien à droite, mais décalé de quelques px en hauteur, je retrouve donc une bande de blanc au dessus du cadre de droite et bien sûr une bande de couleur de même hauteur en bas comme ceci :

------------
               -------------
gauche
                 droite
-----------
               -------------


Et lorsque je mets une bordure (border: 1px solid #000;) dans le div de droite, il se repositionne comme il faut.

Portion de code ressorti du code source de la page :

<div id='cadre_nom'>
<div id='cadre_nom_gauche'>
<p><label class='lab_gauche' for='nom'>Nom : </label><input id='nom' size=25 name='nom'></p>
<p><label class='lab_gauche' for='adr1'>Adresse : </label><input id='adr1' size=25 name='adr1'></p>
<p><label class='lab_gauche' for='cp'>Code postal : </label><input id='cp' size=5 name='cp'></p>
</div>
<div id='cadre_nom_droite'>
<p><label class='lab_gauche' for='prenom'>Prénom : </label><input id='prenom' size=25 name='prenom'></p>
<p><label class='lab_gauche' for='adr2'>Suite adresse : </label><input id='adr2' size=25 name='adr2'></p>
<p><label class='lab_gauche' for='ville'>Ville : </label><input id='ville' size=25 name='ville'></p>
</div></div>



#cadre_nom {           /* pour nom et adresse */
	width: 700px; 
	height: 140px;
	border: 1px solid #000;           /* cadre autour du div couleur noire */
	box-shadow: 1px 1px 1px #4c6ec8;  /* ombre autour du cadre */
}

#cadre_nom_gauche {           
	width: 349px; 
	height: 139px;
	float: left;
	padding-left: 5px;
	background-color:#dee5f4;         /* couleur bleu plus foncé que la couleur de fond d'écran */
}

#cadre_nom_droite {           
	width: 349px; 
	height: 139px;
	margin-left:349px;
	background-color:#dee5f4;         
	border: 1px solid #000;        /* rajouter pour essai afin de voir le div sur l'écran */                                   
                                       mais cela change apparemment quelque chose dans le positionnement de la div !!   
}

.lab_gauche {                         /* pour dimensionner les label et donc aligner les input */
   width: 100px;
   display: inline-block;
}


Je comprends rien à ce décalage, que se passe t-il ?, que faut il faire pour que ces deux div s'alignent bien sans rajouter cette bordure ??
Merci de vos réponses.
Cordialement.
Modifié par pat16 (27 Oct 2013 - 09:45)
Pour Raphael, je n'ai rien trouvé dans la fusion des marges qui se rapporte à mon problème !!

Merci tournikoti, çà a l'air de correspondre à ce que je cherche mais je ne vois pas où tu déclares et développes la class gauche et droite ??

Cordialement.
Administrateur
pat16 a écrit :
Pour Raphael, je n'ai rien trouvé dans la fusion des marges qui se rapporte à mon problème !!

Et pourtant c'est exactement un cas de fusion de marge : la marge externe haute du premier paragraphe du bloc #cadre_nom_droite s'applique à son parent.
Reprends tranquillement l'article à partir de "Fusion des marges entre un élément et son parent" et tu devrais te rendre compte que c'est ce qui se passe chez toi.

La preuve est que le problème est résolu en supprimant la marge haute des paragraphes :

p {margin-top: 0}


Par contre, ton code et ton positionnement pose des soucis d'accessibilité par exemple en naviguant au clavier : l'ordre des champs n'est pas du tout respecté Smiley ohwell
Modifié par Raphael (27 Oct 2013 - 20:30)
Bonjour pat16.

Il n'y a pas de parties gauche ou droite dans mon exemple.
En fait, j'ai construit cet affichage en donnant d'une part des dimensions aux éléments et d'autre part en laissant ces mêmes éléments se positionner dans le flux.
Comme tu as dû le voir, je vais l'usage du "display:inline-block".
Nul besoin de faire l'usage de "float:left" ou "float:right" pour le positionnement qui ne servent à rien, sinon à alourdir le code.
Attention à ne pas mettre les deux input sur deux lignes séparées.
L'astuce, qui consiste à les accolées, permet d'éviter l'introduction d'une espace de séparation dans le bloc "inline-block".
Je pense que dans le lien indiqué par Raphaël, il est fait part de cette technique où il place après la balise input un <!-- et juste avant la balise suivante un --> !

Comme je ne suis pas un expert, d'autres membres feront mieux que moi sur ce genre de problème.
Ce que j'ai essayé de faire par cet exemple, c'est de rester dans le flux.

Une autre solution consisterait à utiliser les "display:table", "display:table-row" et "display:table-col, pour faire un positionnement en CSS et non en HTML.

@+
Bonjour,

Tournikoti, ta solution n'est pas mauvaise, mais on ne peut pas donner une taille différente à chacun des input, sinon on décale !!

Raphael, désolé mais je ne vois toujours pas que c'est une fusion de marge, malgré la lecture de tes 2 bouquins que j'ai, CSS 2 et CSS Avancées. Mais en reprenant les dimensions de chaque boîte en tenant compte des border, margin, .. j'ai réussi à tout représenter comme je le souhaitais.

Merci à vous deux.
Cordialement
Administrateur
pat16 a écrit :
Raphael, désolé mais je ne vois toujours pas que c'est une fusion de marge, malgré la lecture de tes 2 bouquins que j'ai, CSS 2 et CSS Avancées.

- Tu as un div #cadre_nom_droite qui n'a pas de margin
- Ce div est parent d'un paragraphe qui a - par défaut - des margin hautes et basses
- En vertu de la Fusion de Marges, la marge haute du <p> fusionne avec la marge de son parent <div> et s'applique au-dessus du parent. En clair, c'est le div entier qui est poussé vers le bas.

C'est exactement ce qui est décrit dans l'article dans la partie "Exemple simple de fusion des marges enfant—parent".

La Fusion de Marges est un phénomène extrêmement courant et important à comprendre dans la vie d'un intégrateur.
Modifié par Raphael (28 Oct 2013 - 10:21)
Ok pour cette marge haute (invisible et non de mon fait) du <p>, je commence à y voir plus clair, mais pourquoi cela s'applique t-il à mon div de droite et non pas à celui de gauche qui a aussi des <p> ??

Merci.
Administrateur
pat16 a écrit :
Ok pour cette marge haute (invisible et non de mon fait) du &lt;p&gt;, je commence à y voir plus clair, mais pourquoi cela s'applique t-il à mon div de droite et non pas à celui de gauche qui a aussi des &lt;p&gt; ??

Parce que ton div de gauche est flottant, ce qui annule la fusion de marge. C'est expliqué en détail dans l'article Smiley cligne

Note : la marge haute du <p> n'est pas invisible, elle s'applique sans se cacher Smiley cligne Le navigateur applique des marges par défaut sur certains éléments, c'est son droit. Et ces marges s'appliquent.
D'ailleurs quand tu écris plusieurs paragraphes à la suite, tu peux constater qu'ils sont espacés entre eux : ce sont les marges appliquées dans la feuille de style du navigateur.
Modifié par Raphael (28 Oct 2013 - 18:08)
Merci Raphael, je te remercie pour tout, voilà finalement mon code final :

#cadre_nom {
    width: 700px;
    height: 140px;
    border: 1px solid #000;
    box-shadow: 1px 1px 1px #4c6ec8;
}
  
#cadre_nom_gauche {        
    width: 344px;          /* 700 / 2 - 1 de border - 5 de padding */
    height: 139px;         /* 140 - 1 de px */
    float: left;           /* pour rester en ligne */
    padding-left: 5px;
    background-color:#dee5f4;
}
  
#cadre_nom_droite {        
    width: 349px;          /* 700 / 2 - 1 de border */
    height: 139px;         /* 140 - 1 de px */
    float: left;           /* pour rester en ligne */
    background-color:#dee5f4;
}


et qui marche comme je le souhaite, merci encore.
Bonne soirée.
Cordialement.
Sujet clos
Aller à