28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

au sein d'un fieldset je souhaite centrer 2 menus déroulants select. Au dessus de ces 2 select je veux mettre un label pour apporter une information aux menus déroulants. J'ai donc créer 2 boites div, chacune contenant un label et un select.
Je pensais pouvoir centre ces 2 div au sein de mon fieldset (qui si je ne m'abuse est de type block donc sert de conteneur à mes 2 div) au moyen de postion absolute:
div.gauche{
	position:absolute;
	top:1em;
	left:5%;
}


et
div.droite{
	position:absolute;
	top:1em;
	right:5%;
}


malheureusement ces 2 div ne sont pas centrés au sein de mon fieldset mais en haut de la page.

Ma question est donc : pourquoi est-ce que les 2 div ne restent pas au sein de leur conteneur c'est à dire la balise fieldset ?

Par avance merci pour vos réponses,
kerzut
Bonjour,
kerzut a écrit :
pourquoi est-ce que les 2 div ne restent pas au sein de leur conteneur c'est à dire la balise fieldset ?
Parce que tu extrais tes 2 div du flux en imposant un positionnement absolu, et que le positionnement absolu se fait en référence avec le premier élément ancêtre qui a un positionnement soit absolu soit relatif.
Il est probable que ton élément fieldset soit en positionnement static, et ne serve donc pas de référence pour le positionnement de tes 2 div.
merci Xavier pour ta réponse.
Ma balise fieldset (en fait il y en aura plusieurs dans ma page) est placée naturellement (c'est-à-dire ni en absolu ni en relatif), il faudrait donc que je place tous mes fieldset en relatif ou aurais-tu une autre solution pour mon problème.

Je te remercie.
kerzut
Il y a de plusieurs solutions. Celle que tu indiques en est une : position:relative pour l'élément fieldset.

Il est également possible d'abandonner le positionnement absolu pour tes div et de les avoir l'une à coté de l'autre en faisant flotter la première.

Enfin si tu connais la taille de tes div, tu peux les positionner en relatif, et décaler la position de l'une d'elles avec les propriétés top et left (ou right et bottom) pour les avoir cote à cote. Ce n'est pourtant pas cette dernière solution que je conseillerais puisqu'elle rend le design dépendant d'un paramètre qui ne peut donc plus varier.
Salut.
tu peux aussi si tes deux boites ont identiques faire une classe commune pour les deux et display:inline;