Centrer un div dans un autre div [Résolu]

ramkin · 18/10/2011, 21h07

Bonjour à tous,
Je voudrais centrer horizontalement un div à l'intérieur d'un autre div. C'est du déjà vu je sais, mais là j'ai des contraintes au niveau du positionnement qui me font tourner bourrique.

Voici d'abord le code html, rien d'exceptionnel

:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<div id="bandeau">
	<div id="image"><img src="asterix_et_obelix.gif"></div>
	<div id="texte">ASTERIX<br>et<br>OBELIX</div>
</div>
 
</body>
</html>

puis le CSS:

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
div#bandeau {
position: relative;
height:300px;
margin: auto;
border: 2px solid black;
background-color: #fffadb;
}
div#image {
position: absolute;
height:150px;
left: 5px;
z-index: 1;
}
div#texte {
position: absolute;
width: auto;
bottom: 0px;
text-align: center;
background-color: #CCCCCC;
font-size: 50px;
font-family: Comic sans MS;
border: 3px ridge brown;
padding: 3px 20px 3px 300px; 
color:black;
font-weight: bold;
margin: 0 auto; 
}

ET voici le RESULTAT

Je voudrais simplement que Astérix et le texte soit centrés, juste en horizontal, dans le bandeau jaune mais je n'y arrive pas.

Je précise que j'ai une/deux contraintes, c'est d'ailleurs ce qui me pose problème:
- le texte (div gris) doit avoir son bottom à 0, c'est-à-dire que le bas doit être aligné avec le bas du bandeau jaune.
- l'image doit rester "collée" au texte sans bien sûr mordre dessus. En gros c'est l'ensemble image + texte tel qu'il s'affiche actuellement que je veux centrer.

Si quelqu'un a une idée, parce que là, je sature

NoSmoking · 18/10/2011, 22h51

Bonsoir,
essaies avec cela

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
29
30
31
32
33
34
35
div#bandeau {
  position : relative;
  height :300px;
  margin : auto;
  border : 2px solid black;
  background-color : #fffadb;
}
 
div#image {
  position : absolute;
  height : 300px;      /* correction largeur */
  width : 50%;         /* ajout moitie conteneur */
  top : 0;             /* position en haut */
  left : 0;            /* et a gauche */
  text-align : right;  /* force image sur la droite */
  z-index : 1;
}
 
div#texte{
  color : black;
  font-size : 50px;
  font-family : Comic sans MS;
  font-weight : bold;
  text-align : center;
 
  background-color : #CCCCCC;
  border : 3px ridge brown;
 
  position : absolute;
  width : auto;
  bottom : 0px;
  left : 50%;            /* decalage dans la partie droite */
  padding: 3px 20px 3px 300px;
  margin-left : -300px;  /* decalage du padding left */
}

voir les commentaires inside, il y a sûrement d'autres méthodes

ramkin · 19/10/2011, 11h11

Ouaaou!!

Impressionné je suis! On m'avait déjà conseillé de jouer avec des marges négatives, mais j'avoue ne pas tout bien comprendre l'idée. Ca me semble être la bonne voie, merci pour le déblocage!!

Une dernière petite chose. Ceci s'inscrit dans un projet plus global. Je te mets un exemple ICI
(Clique à gauche pour changer de série.)

Le texte n'est pas toujours de la même longueur, et l'image non-plus (encore que ça ça peut se régler s'il le faut).

Il y a donc parfois un décalage du texte qui n'est plus centré (Les mystérieuses citées d'or), ou bien un problème avec l'image qui ne se place pas bien dans son "espace alloué" (Tom Sawyer).

Ce n'est pas grand chose, je pinaille un peu

, mais si tu as quelques conseils éventuellement...

oceane751 · 19/10/2011, 18h03

sous ie 9, le texte est derrière l'image...
cf la PJ

ramkin · 19/10/2011, 18h56

Citation:

Envoyé par oceane751

sous ie 9, le texte est derrière l'image...
cf la PJ

Ah oui j'oubliais de préciser que tout ça est fait pour Firefox...

NoSmoking · 19/10/2011, 22h34

Citation:

Envoyé par ramkin

Ah oui j'oubliais de préciser que tout ça est fait pour Firefox...

c'est une erreur, cela devrait être compatible.

- Pour Tom Sawyer, l'image est plus large que les autres donc l'effet ne peut être le même, dans ce genre de mise en page il est important de "formater" ce qu'on manipule.

- Pour Les mystérieuses citées d'or, cela devrait être Les<br>mystérieuses<br> citées d'or.

PS : pas IE9 pour tester

ramkin · 20/10/2011, 00h26

Solution!! Puisque je veux que ce soit l'image qui s'aligne sur le texte, il suffit simplement de mettre le div image DANS le div texte:

Code :

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

1
2
3
4
5
6
 
<div id="bandeau">
	<div id="texte">ASTERIX<br>et<br>OBELIX
		<div id="image"><img id="sans_lien" src="images/asterix_et_obelix.gif"></div>
	</div>
</div>

Et ca me donne donc CECI, ce qui me convient parfaitement. Après, comme tu le dis NoSmoking, je n'ai plus qu'à formater mes images, et ça roule!

Par contre effectivement, sous IE, le bandeau se retrouve SUR le <table> de la liste des épisodes. Plus exactement le bas du div bandeau est aligné avec le bas du <table>. Mais je ne vois pas pourquoi...

Je mets le code (version épurée) :

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
<div id="en_tete">
	<center>
	<div id="texte">ASTERIX<br>et<br>OBELIX
		<div id="image"><img id="sans_lien" src="images/asterix_et_obelix.gif"></div>
	</div>
	<table>
	<tr>
		<td><<img src="images/asterix_le_gaulois.gif"><br>Astérix le Gaulois</td>
		<td><img src="images/asterix_et_cleopatre.gif"><br>Astérix et Cléopâtre</td>
		<td><<img src="images/les_12_travaux_d_asterix.gif"><br>Les 12 travaux d'Astérix</td>
		<td><img src="images/asterix_et_la_surprise_de_cesar.gif"><br>Astérix et la surprise de Cesar</td>
	</tr>
	<tr>
		<td><img src="images/asterix_chez_les_bretons.gif"><br>Astérix chez les Bretons</td>
		<td><<img src=	"images/asterix_et_le_coup_du_menhir.gif"><br>Astérix et le coup du menhir</td>
		<td><img src="images/asterix_et_les_indiens.gif"><br>Astérix et les Indiens</td>
		<td><img src="images/asterix_et_les_vikings.gif"><br>Astérix et les Vikings</td>
	</tr>
	</table>
	</center>
</div>

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
29
30
31
32
33
34
35
36
37
38
39
40
41
table {
background: #eeeeee;
border: 5px ridge red;
font-family: Comic sans MS;
font-size: 12px;
color: black;
width: auto;
margin: 320px 0px 0px 5px;
}
td {
padding: 2px;
text-align: center;
vertical-align: top;
}
 
div#en_tete {
position: relative;
height:300px;
margin: auto;
}
div#image {
  position : absolute;
  bottom : 0px;
  left : 10px;
  z-index : 1;
}
div#texte{
  left : 48%;
  padding: 3px 20px 3px 300px;
  margin-left : -300px;
  color : black;
  font-size : 50px;
  font-family : Comic sans MS;
  font-weight : bold;
  text-align : center;
  background-color : #CCCCCC;
  border : 3px ridge brown;
  position : absolute;
  width : auto;
  bottom : 0px;
}

Et le résultat

NoSmoking · 20/10/2011, 22h37

essaies de structurer ton document comme ceci

Code html :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>[...]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
#serie {
  margin : auto;
  margin-top : 20px;"
}
 
#serie td {
  padding : 2px;
  text-align : center;
  vertical-align : top;
}
</style>
</head>
<body>
<div id="en_tete">
  <div id="texte">ASTERIX<br>et<br>OBELIX
    <div id="image"><img id="sans_lien" src="images/asterix_et_obelix.gif"></div>
  </div>
</div>
<div>
  <table id="serie">
  <tr>
    <td><a href="films/asterix_et_obelix/asterix_le_gaulois.avi"><img src="images/asterix_le_gaulois.gif"></a><br>Astérix le Gaulois</td>
    <td><a href="films/asterix_et_obelix/asterix_et_cleopatre.avi"><img src="images/asterix_et_cleopatre.gif"></a><br>Astérix et Cléopâtre</td>
    <td><a href="films/asterix_et_obelix/les_12_travaux_d_asterix.avi"><img src="images/les_12_travaux_d_asterix.gif"></a><br>Les 12 travaux d'Astérix</td>
    <td><a href="films/asterix_et_obelix/asterix_et_la_surprise_de_cesar.avi"><img src="images/asterix_et_la_surprise_de_cesar.gif"></a><br>Astérix et la surprise de Cesar</td>
  </tr>
  <tr>
    <td><a href="films/asterix_et_obelix/asterix_chez_les_bretons.avi"><img src="images/asterix_chez_les_bretons.gif"></a><br>Astérix chez les Bretons</td>
    <td><a href="films/asterix_et_obelix/asterix_et_le_coup_du_menhir.avi"><img src="images/asterix_et_le_coup_du_menhir.gif"></a><br>Astérix et le coup du menhir</td>
    <td><a href="films/asterix_et_obelix/asterix_et_les_indiens.avi"><img src="images/asterix_et_les_indiens.gif"></a><br>Astérix et les Indiens</td>
    <td><a href="films/asterix_et_obelix/asterix_et_les_vikings.avi"><img src="images/asterix_et_les_vikings.gif"></a><br>Astérix et les Vikings</td>
  </tr>
  </table>
</div>
</body>
</html>

- ajout d'un doctype, ici HTML5
- insertion de la table dans une DIV
- modification des margin de celle ci, la TABLE, voir style inline.
- suppression des id="centrage" sur les TD, une ID doit ETRE UNIQUE, remplacées par une class
...plus quelques détails

Pas tester, pas IE9...

<edit>
OPERA, CHROME même défaut de décalage sur ta page que ce qui est annoncé sur IE9...
</edit>

ramkin · 24/10/2011, 14h47

Avec un peu de retard désolé...

Merci NoSmoking, la solution est bien de mettre le table dans un div et de jouer avec les marges.

Par contre je n'ai pas compris le:

Code :

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

suppression des id="centrage"  sur les TD, une ID doit ETRE UNIQUE, remplacées par une class

En tout cas le problème est résolu, y compris sous IE.

Un grand merci à toi NoSmoking pour tes conseils.

NoSmoking · 24/10/2011, 18h26

Citation:

Envoyé par ramkin

Par contre je n'ai pas compris le:

Code :

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

suppression des id="centrage"  sur les TD, une ID doit ETRE UNIQUE, remplacées par une class

c'est rapport à ce que j'ai vu dans les cpages que tu as proposé.
une ID doit ETRE UNIQUE dans un document, d'ailleurs si on n'en as pas besoin inutile de la mettre, mais elle peut servir pour le CSS.
à lire http://css.developpez.com/faq/?page=...html#css_class

24/10/2011, 14h47	#9
ramkin Invité de passage Inscription : septembre 2011 Messages : 12 Détails du profil Informations forums : Inscription : septembre 2011 Messages : 12 Points : 2 Points : 2	Avec un peu de retard désolé... Merci NoSmoking, la solution est bien de mettre le table dans un div et de jouer avec les marges. Par contre je n'ai pas compris le: Code : Sélectionner tout - Visualiser dans une fenêtre à part suppression des id="centrage" sur les TD, une ID doit ETRE UNIQUE, remplacées par une class En tout cas le problème est résolu, y compris sous IE. Un grand merci à toi NoSmoking pour tes conseils.
	00

19/10/2011, 11h11	#3
ramkin Invité de passage Inscription : septembre 2011 Messages : 12 Détails du profil Informations forums : Inscription : septembre 2011 Messages : 12 Points : 2 Points : 2	Ouaaou!! Impressionné je suis! On m'avait déjà conseillé de jouer avec des marges négatives, mais j'avoue ne pas tout bien comprendre l'idée. Ca me semble être la bonne voie, merci pour le déblocage!! Une dernière petite chose. Ceci s'inscrit dans un projet plus global. Je te mets un exemple ICI (Clique à gauche pour changer de série.) Le texte n'est pas toujours de la même longueur, et l'image non-plus (encore que ça ça peut se régler s'il le faut). Il y a donc parfois un décalage du texte qui n'est plus centré (Les mystérieuses citées d'or), ou bien un problème avec l'image qui ne se place pas bien dans son "espace alloué" (Tom Sawyer). Ce n'est pas grand chose, je pinaille un peu , mais si tu as quelques conseils éventuellement...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email