28172 sujets

CSS et mise en forme, CSS3

Bonjour,
je suis actuellement en train de developper un petit site pour les commercants de ma ville.
Dans ce site je voudrais avoir un titre un peu comme un onglet, mais centré.


J'ai donc fait comme ceci :
Dans cette exemple je veut que left,center et right soit collé mais centré dans title. Et sans donner de dimension à center qui va changer en permanence.


<div class='title' >
	<div class='left'></div>
	<div class='center'> Le Titre</div>
	<div class='right'></div> 
</div>


Et le css suivant :

.title{
	width:inherit;
	display:block;
	font-weight:bold;
	height:25px;
	margin:auto;
	text-align:center;
	}
.left, .right {
	height:25px;
	width:5px;
	}

.left {
	background:url('../img/left.png') no-repeat;
	}
	
.center {
	background:url('../img/center.png') repeat-x;
	width:auto;
	height:23px;
	padding-top:2px;
	}
	
.right {
	background:url('../img/right.png') no-repeat;
	}


La taille herité par title est de 480px ( car c'est contenu dans un autre contenu qui lui est dans un autre conteneur etc). J'ai simplifié au maxi le code.

Le problème est que chaque div revient à la ligne. Celui qui à la width à auto prend toute la largeur.

Merci de m'aider parce que la je me prend la tente :aie:
Modifié par Gizmo_091 (18 Feb 2010 - 11:20)
coucou,

pour centrer ta div

il faut utiliser la propriété margin:auto; et renseigner width:100px; (par exemple)

normalement c'est bon
Oui ça je sais mais le problème c'est que je ne peu pas donner de dimension car le contenu est variable Smiley cligne

Mais on ma donné la solution sur un autre forum Smiley cligne

Je rajoutes à tous les 3:


display:inline-block;


à center:

vertical-align:top;
margin:0 -5px;
Sauf que la solution trouvée ne fonctionnera pas sous les versions d'Internet Explorer antérieures à la 8, puisqu'elles ne reconnaissent pas la valeur inline-block de display en tant que telle lorsqu'elle s'applique à un élément de bloc, comme div.