28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer horizontalement automatiquement un cadre

Bonjour,

Dans mon design, j'ai 3 cadres arrondis. Ces 3 cadres arrondis doivent être les uns à cotés des autres.

J'ai donc :

#cadres {
	background-color: #424941;
	height: 200px;
	width: 100%;
}
.cadre_uni {
	float: left;
	/*	trbl	*/
	height: 256px;
	width: 273px;
}


#cadres est le div qui englobe mes 3 cadres.
.cadre_uni est la totalité d'UN seul cadre.

J'ai donc un float:left pour les mettre sur la mêle "ligne" horizontalement, à gauche.

Le truc, c'est que j'aimerais que (étant donné que mon design est extensible) appliquer des marges automatiques sur mes cadres, de façon à ce que tout d'abord les 3 cadres soient répartis de façon équitable horizontalement :

<-------->| CADRE 1 |<-------->| CADRE 2 |<-------->| CADRE 2 |<-------->

Où <--------> qui correspondrait à la largeur entre chaque cadre, serait toujours la même.

Avez-vous une idée ?

Bonne journée !
Modifié par Jeoffrey54 (19 Jan 2010 - 14:33)
En faite, je n'en vois pas personnellement, mais je suis persuadé, que malgré le faite que le design est extensible, que le plus simple est de définir une marge fixe en haut et à gauche (ou en bas et à gauche), car sur certaines résolutions, cela peut avoir des résultats imprévisibles, tant visuellement qu'au niveau esthétique... mais n'étant pas un pro de la prose css, je laisse le soin à d'autre de vous répondre de manière plus technique.

cdlt.
Olivier.
je propose de passer par des conteneur qui vont determiner l'espace 'vital' de cahque cadre, placer le cadre au centre de celui-ci et coller une marge gauche negative de la moitié de la largeur du cadre ...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
html, body{ width:100%;
            margin:0;
            padding:0;}

.spacer{ float:left; 
		  position:relative;
		  width:33%;
         border: 0;
         margin: 0 ;
         padding:0 ;
         border: solid 1
         }
.cadre { position:relative;
         width: 20%;
         left:50%;
         margin-left:-10%;
         border:solid 1px red         
         }
</style>
</head>

<body>
<div class="spacer">
	<div class="cadre">&nbsp;</div>
</div>	
<div class="spacer">
	<div class="cadre">&nbsp;</div>
</div>	
<div class="spacer">
	<div class="cadre">&nbsp;</div>
</div>	
</body>

</html>
Sujet clos
Aller à