Centrage d'un DIV imbriqué [Résolu]

zooffy · 24/02/2011, 11h26

Bonjour à tous.

ça fais deux bonnes heures que je cherche à faire un truc et là, je sèche.

Je voudrais mettre un DIV qui prend toute la page (sur cette partie là, j'ai bon) quelque soit la taille et la résolution de l'écran.
Dans ce DIV je voudrais mettre un autre DIV qiu sera plus petit, dont je vais préciser les dimensions en hauteur et en largeur et qui sera centré en hauteur et en largeur, c'est là que je trouve pas.

Pour l'instant (voir le code que je mets en fin de message) le DIV intérieur prend toute la largeur (ça je comprend pas) et ne fait pas plus haut que le contenu.

Je crois qu'un détail tout bête m'échappe, mais je vois pas lequel.
Pouvez vous m'aider ?

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
 
<div id="divFond" runat="server" style="background-image:url('/app_Themes/fond-opaque.png');
    background-repeat:repeat;
    position:absolute;
    top:0px; 
    bottom:0px; 
    left:0px;
    right:0px;
    padding-left:auto;
    padding-right:auto;
    text-align:center;
    vertical-align:middle;
    z-index:1000; 
    border:solid 1px Red;">
    <div id="divDevant" style="text-align:left;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    z-index:1001; 
    background-color:Black;
    color:White;
    border:solid 5px White;">
    Le contenu
    </div></div>

ornitho13 · 24/02/2011, 11h40

Pour faire ce que tu veux, il faut jouer avec les top, left et les margin.

Voici un exemple:

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
30
31
32
33
34
35
36
37
38
39
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
	<head>
		<title>ton titre</title>
		<style type="text/css">
			#divFond{
				background-image:url('/app_Themes/fond-opaque.png');
			    background-repeat:repeat;
			    position:absolute;
			    top:0px; 
			    bottom:0px; 
			    left:0px;
			    right:0px;
			    border:solid 1px red;
			}
			#divDevant{
				text-align:left;
			    position:absolute;
			    top:50%;
			    left:50%;
			    margin-left:-150px;
			    margin-top:-50px;
			    height:100px;
			    width:300px;
			    background-color:black;
			    color:white;
			    border:solid 5px white;
			}
		</style>
	</head>
	<body>
		<div id="divFond" runat="server">
		    <div id="divDevant">
		    Le contenu
		    </div>
	    </div>
	</body>
</html>

Et en plus ce sera fluide et donc s'adaptera en fonction de ta résolution.

zooffy · 24/02/2011, 11h50

Merci pour ton aide.

J'aurais plusieurs détails subsidiaires :
- pourquoi il y a un # devant les classes et pas un . ? ça fait plusieurs fois que je vois cette façon de faire, mais je ne comprends pas.
- si j'ai bien compris, pour DIV intérieur, je précise son height et son width et je fais la moitié du Height en moins sur le margin-top et la moitié du width en moins sur le margin-left et c'est ça qui me le centre au mileu de la page ?
- en réfléchissant, je me rend compte que j'ai peut-être précisé une sotise dans mon exposé. Selon les cas, je pense que je risque de ne pas pouvoir préciser la dimension du DIV intérieur. Est il possible de le centrer sans cela pour qu'il s'adapte à la taille du contenu ?

Il y a une logique dans le CSS qui m'échappe et c'est pour ça que je rame. Tel que tu m'as donné l'exemple, ça devient limpide, mais avant, j'étais paumé.

En tout cas merci pour ton aide.

ornitho13 · 24/02/2011, 11h57

je vais répondre à tes questions dans l'ordre:

- dans ta structure HTML tu utilises id="" donc dans le CSS, le sélecteur est un ID donc commençant par "#". Si dans ta structure html tu avais class="", le sélecteur CSS commencerait par un ".". Il faut noter qu'il peut y avoir les 2. Si tu vas réutiliser le style, il vaut mieux utiliser la class car un ID est unique dans une page html.

- oui c'est exactement cela (mais en précisant tout de même top et left à 50%).

- Je ne penses pas qu'il soit possible de le faire sans utiliser une largeur et une hauteur. A moins de calculer en javascript la hauteur et la largeur générée et l'appliquer dans un style (avec le margin adéquat toujours en javascript). Si tu fais le test en enlevant la hauteur , la largeur ainsi que les margins dans #divDevant, tu verras que ton div n'est plus parfaitement centré.

zooffy · 24/02/2011, 12h07

Merci pour beaucoup pour ce petit cours fort sympatique et trés enrichissant.

Alors, j'ai fais le test et c'est le coin supéreur gauche qui se retrouve centré.

Je vais voir comment je peux bricoler ça, peut-être avec du calcul mais vu que je programme mes site en ASP.NET, le Javascript s'intègre pas trés bien, enfin, je ne sais pas trés bien le faire, pour être plus réaliste.

Merci et bonne continuation.

Candygirl · 25/02/2011, 14h41

Hello,

Citation:

Envoyé par zooffy

Selon les cas, je pense que je risque de ne pas pouvoir préciser la dimension du DIV intérieur. Est il possible de le centrer sans cela pour qu'il s'adapte à la taille du contenu ?

Il y a moyen de le faire en jouant avec des display:table. Un exemple:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>ton titre</title>
		<style type="text/css">
 
        html,body {
                width:100%;
                height:100%;
                margin:0;padding:0;
        }
 
 
        html {
                display:table;
        }
 
        body {
                display:table-cell;
                vertical-align:middle;
        }
 
 
        div {
                display:table;
		margin:0 auto;
                background:red;
	}
	</style>
	</head>
	<body>
		<div>contenu</div>
	</body>
</html>

zooffy · 28/02/2011, 10h00

Merci Candygirl.

Je vais essayer d'intégrer ton idée dans mon système. J'espère juste que ça va pas avoir trop d'effet de bords sur le reste vu que tu propose que des classes qui touchent tous les contrôles d'un coup.

24/02/2011, 11h50	#3
zooffy Membre Expert Erick OZOUF Développeur Web Inscription : août 2004 Messages : 3 378 Détails du profil Informations personnelles : Nom : Erick OZOUF Âge : 42 Localisation : France, Morbihan (Bretagne) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : août 2004 Messages : 3 378 Points : 1 330 Points : 1 330	Merci pour ton aide. J'aurais plusieurs détails subsidiaires : - pourquoi il y a un # devant les classes et pas un . ? ça fait plusieurs fois que je vois cette façon de faire, mais je ne comprends pas. - si j'ai bien compris, pour DIV intérieur, je précise son height et son width et je fais la moitié du Height en moins sur le margin-top et la moitié du width en moins sur le margin-left et c'est ça qui me le centre au mileu de la page ? - en réfléchissant, je me rend compte que j'ai peut-être précisé une sotise dans mon exposé. Selon les cas, je pense que je risque de ne pas pouvoir préciser la dimension du DIV intérieur. Est il possible de le centrer sans cela pour qu'il s'adapte à la taille du contenu ? Il y a une logique dans le CSS qui m'échappe et c'est pour ça que je rame. Tel que tu m'as donné l'exemple, ça devient limpide, mais avant, j'étais paumé. En tout cas merci pour ton aide. __________________ Mon blog de création d'univers : Qualhiryann Mon site qui parle de moi moi.ozouf.com
	00

24/02/2011, 12h07	#5
zooffy Membre Expert Erick OZOUF Développeur Web Inscription : août 2004 Messages : 3 378 Détails du profil Informations personnelles : Nom : Erick OZOUF Âge : 42 Localisation : France, Morbihan (Bretagne) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : août 2004 Messages : 3 378 Points : 1 330 Points : 1 330	Merci pour beaucoup pour ce petit cours fort sympatique et trés enrichissant. Alors, j'ai fais le test et c'est le coin supéreur gauche qui se retrouve centré. Je vais voir comment je peux bricoler ça, peut-être avec du calcul mais vu que je programme mes site en ASP.NET, le Javascript s'intègre pas trés bien, enfin, je ne sais pas trés bien le faire, pour être plus réaliste. Merci et bonne continuation. __________________ Mon blog de création d'univers : Qualhiryann Mon site qui parle de moi moi.ozouf.com
	00

28/02/2011, 10h00	#7
zooffy Membre Expert Erick OZOUF Développeur Web Inscription : août 2004 Messages : 3 378 Détails du profil Informations personnelles : Nom : Erick OZOUF Âge : 42 Localisation : France, Morbihan (Bretagne) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : août 2004 Messages : 3 378 Points : 1 330 Points : 1 330	Merci Candygirl. Je vais essayer d'intégrer ton idée dans mon système. J'espère juste que ça va pas avoir trop d'effet de bords sur le reste vu que tu propose que des classes qui touchent tous les contrôles d'un coup. __________________ Mon blog de création d'univers : Qualhiryann Mon site qui parle de moi moi.ozouf.com
	00

24/02/2011, 11h57	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	je vais répondre à tes questions dans l'ordre: - dans ta structure HTML tu utilises id="" donc dans le CSS, le sélecteur est un ID donc commençant par "#". Si dans ta structure html tu avais class="", le sélecteur CSS commencerait par un ".". Il faut noter qu'il peut y avoir les 2. Si tu vas réutiliser le style, il vaut mieux utiliser la class car un ID est unique dans une page html. - oui c'est exactement cela (mais en précisant tout de même top et left à 50%). - Je ne penses pas qu'il soit possible de le faire sans utiliser une largeur et une hauteur. A moins de calculer en javascript la hauteur et la largeur générée et l'appliquer dans un style (avec le margin adéquat toujours en javascript). Si tu fais le test en enlevant la hauteur , la largeur ainsi que les margins dans #divDevant, tu verras que ton div n'est plus parfaitement centré.
	00

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