Discussion :

[Gizmo_091]

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.

J'ai donc fait comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class='title' >
	<div class='left'></div>
	<div class='center'> Le Titre</div>
	<div class='right'></div> 
</div>

Et le css suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
.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

[vodiem]

salut Gizmo_091 et bienvenu,

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class='title' >
	<div class='left'></div>
	<div class='right'></div> 
	<div class='center'> Le Titre</div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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;
	float:left;
	}
 
.center {
	background:url('../img/center.png') repeat-x;
	width:auto;
	height:23px;
	padding-top:2px;
	}
 
.right {
	background:url('../img/right.png') no-repeat;
	float:right;
	}

[Gizmo_091]

Merci pour ta réponse et ton accueil.
Alors maintenant le milieu est toujours étiré sur toute la largeur, il ecrase le left et le right est a la ligne mais a droite .

Possibilité de voir le resultat ici : http://arpajon.renouveau.free.fr/new/index.php à la page Les Commercants, ce sont les titre en haut des bloc orange qui pose problème.

[vodiem]

la div center doit être mis en dernier.
rajoute à cette class center:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0 5px;

[Gizmo_091]

Merci , j'ai pas bien compris pourquoi rajouter la margin que tu m'as indiqué mais ça fait sont boulot .

Maintenant plus dur, car on est pas arrivé au rendu que je voulais exactement, là sa prend toute la largeur et moi j'aimerais que le titre soit centré et qu'il fasse juste la taille du texte.

[vodiem]

j'aimerais que le titre soit centré et qu'il fasse juste la taille du texte.

tu remets les div center au milieu.
tu retires les floats.
tu rajoutes à tous les 3:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

display:inline-block;

à center:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
vertical-align:top;
margin:0 -5px;

[Gizmo_091]

nikel, merci

[Gizmo_091]

Je remotne le topic car j'ai parlé un peu trop vite, effectivement ça fonctionne sour firefox mais pas sous ie ( http://arpajon.renouveau.free.fr )
Les trois cadre de la page d'acceuil utilise ses propriété css .

Merci à toi vodiem, j'ai rajouté les margin à 0 mais ça change rien.
PS : chez moi je n'ai plus le tag resolu sur le topic ..

[vodiem]

sur center:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
margin:0;
float:left;
height:25px;
width:290px;

ca marche avec ie et ff, mais la largeur est fixe...

[Macmillenium]

Bonjour,

Je remotne le topic car j'ai parlé un peu trop vite, effectivement ça fonctionne sour firefox mais pas sous ie ( http://arpajon.renouveau.free.fr )

La valeur inline-block n'est pas implémentée sur IE7- (correctement) et FF2, il existe cependant quelque solutions :

Sous IE7- : l'émulation de inline-block sur les éléments block nécessite l'attribution du layout (petite recherche sur le terme) + display:inline :

(code à mettre entre commentaire conditionnel visant IE7 et inférieurs) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
display:inline;
zoom:1 /* attribution du layout */

Sous FF2 : Si tu vises encore ce navigateur, tu peux passer par display:-moz-inline-stack une déclaration propre à Gecko qui permet d'obtenir un rendu presque similaire (Attention, cette déclaration a plusieurs effets secondaires, prévoir l'ajout d'un élément tampon neutre afin de corriger les éventuels bugs).

[Gizmo_091]

Merci pour l'astuce,
je suis désolé j'ai oublié de préciser quelques chose, apres avoir vu ce que ça donnais j'ai décider de conserver l'apparence que j'avais à ce moment la du topic : http://www.developpez.net/forums/d87...e/#post4999485

c'est a dire que je veut que ça prenne toute la largeur du cadre et non plus seulement la taille du texte.
Donc pour ce qui est de la largeur c'est bon mais j'ai toujours c'est petit blanc sur ie, c'est juste ça.