Centrage de div en largeur [Résolu]

[balsamique]

Bonjour à tous,

J'ai un petit souci de centrage de div. Avec 4 div (24% chacun), ils étaient centrés dans la largeur mais j'ai préféré mettre les deux images dans le même div et j'en ai donc trois maintenant. J'ai essayé de les mettre à 33% de largeur, dimensione fixe pour celui du milieu, etc... mais rien n'y fait...
Quelqu'un a une petite idée de comment je peux résoudre?
Nerci d'avance.

Voici un bout de mon css

Code :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#cadre_bas {
	z-index: 99;
	visibility: visible;
	position: fixed;
	bottom: 110px;
	height: 300px;
	width: 100%;
	left: 0px;
	padding: 5px;
}
 
 #cadre_affinato_texte {
	z-index: 100;
	border: thin solid #FFF;
	color: #FFF;
	vertical-align: bottom;
	height: 250px;
	width: 30%;
	float: left;
	padding: 5px;
	filter: alpha(opacity=70);
	opacity: 0.7;
	background-color: #000;
}
 
 #cadre_image_bottiglie {
	z-index: 100;
	color: #FFF;
	vertical-align: bottom;
	height: 300px;
	width: 360px;
	float: left;
	padding: 5px;
}
 
 #cadre_extra-vecchio_texte {
	z-index: 100;
	border: thin solid #FFF;
	color: #FFF;
	vertical-align: bottom;
	height: 250px;
	width: 30%;
	float: left;
	padding: 5px;
	background-color: #000;
	filter: alpha(opacity=90);
    opacity: 0.9;
	}

et mon html

Code html :

1
2
3
4
5
6
7
8
9
10
11
  <div id="cadre_bas">
 <div id="cadre_affinato_texte">
<h4 class="pagecourante">Aceto balsamico tradizionale di Modena</h4>
<h7>Aceto balsamico tradizionale invecchiato almeno 12 anni nelle nostre batterie. Esprime già un buon grado di maturazione con evidenti caratteristiche balsamiche. Adatto per verdure, carni e crostacei, a cui conferisce un inconfondibile sapore.</h7>
</div>
 <div id="cadre_image_bottiglie"><img src="../images/affinato_confezione.jpg" />
<img src="../images/extravecchio_confezione.jpg" /></div>
<div id="cadre_extra-vecchio_texte"> 
<h4 class="pagecourante">Aceto balsamico tradizionale di Modena extra vecchio</h4>
<h7>Aceto balsamico tradizionale invecchiato almeno 25 anni nelle nostre batterie. E' il prodotto di punta della nostra azienda, con ampio e complesso bouquet, grande corposità e caratteristiche gustative molto evidenti e decise che lo portano ad essere molto apprezzato su tutte le preparazioni culinarie, da impiegare a crudo per non disperderne gli aromi.</h7></div>
</div>

Le résultat est visible en ligne ici

[jreaux62]

Code css :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
	<style type="text/css">
#cadre_bas {
	z-index: 99;
	visibility: visible;
	position: fixed;
	bottom: 110px;
	height: 300px;
 
	width: 99%;
	left: 0;
	margin: 0;
}
 
#cadre_affinato_texte {
	z-index: 100;
 
	position: absolute;
	left:10px;
 
	border: thin solid #FFF;
	color: #FFF;
	vertical-align: bottom;
	height: 250px;
	width: 30%;
	padding: 5px;
	filter: alpha(opacity=70);
	opacity: 0.7;
	background-color: #000;
}
 
 #cadre_image_bottiglie {
	z-index: 99;
 
	position: absolute;
	left:50%; margin-left:-180px; /* milieu - (demi-largeur) */
	text-align:center;
 
	color: #FFF;
	vertical-align: bottom;
	height: 300px;
	width: 360px; /* (largeur) */
	padding: 5px;
 
	background:orange;
}
 
 #cadre_extra-vecchio_texte {
	z-index: 100;
 
	position: absolute;
	right:10px;
 
	border: thin solid #FFF;
	color: #FFF;
	vertical-align: bottom;
	height: 250px;
	width: 30%;
	padding: 5px;
	filter: alpha(opacity=70);
	opacity: 0.7;
	background-color: #000;
	}
	</style>

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="cadre_bas">
	<div id="cadre_affinato_texte">
		<h4 class="pagecourante">Aceto balsamico tradizionale di Modena</h4>
		<h6>Aceto balsamico tradizionale invecchiato almeno 12 anni nelle nostre batterie. Esprime già un buon grado di maturazione con evidenti caratteristiche balsamiche. Adatto per verdure, carni e crostacei, a cui conferisce un inconfondibile sapore.</h6>
	</div>
	<div id="cadre_image_bottiglie"><img src="../images/affinato_confezione.jpg" />
		<img src="../images/extravecchio_confezione.jpg" alt="" />
	</div>
	<div id="cadre_extra-vecchio_texte"> 
		<h4 class="pagecourante">Aceto balsamico tradizionale di Modena extra vecchio</h4>
		<h6>Aceto balsamico tradizionale invecchiato almeno 25 anni nelle nostre batterie. E' il prodotto di punta della nostra azienda, con ampio e complesso bouquet, grande corposità e caratteristiche gustative molto evidenti e decise che lo portano ad essere molto apprezzato su tutte le preparazioni culinarie, da impiegare a crudo per non disperderne gli aromi.</h6>
	</div>
</div>

Remarques :
1/ il n'existe PAS de balises <h7> ! <h1> ... <h6>
2/ les balises <img> doivent avoir un alt="" :

Code :

<img src="../images/affinato_confezione.jpg" alt="" />

[balsamique]

Merci pour ta réponse complète et exhuastive.
Ce petit bout de code va m'aider à approndir les marges négatives.

[jreaux62]

Tant qu'à faire du CSS :
au lieu de mettre <h4 class="pagecourante"> :
met juste <h4> et :

Code :

1
2
#cadre_affinato_texte h4, #cadre_extra-vecchio_texte h4 { ...... }
#cadre_affinato_texte h6, #cadre_extra-vecchio_texte h6 { ...... }

ps : j'ai mis h6, mais h5 serait mieux (car ca suit directement h4 !)

[balsamique]

Envoyé par jreaux62

Tant qu'à faire du CSS :
au lieu de mettre <h4 class="pagecourante"> :
met juste <h4> et :

Code :

ps : j'ai mis h6, mais h5 serait mieux (car ca suit directement h4 !)

En fait j'ai utilisé cette classe (je j'utilise aussi pour mes menus) pour la couleur du texte.