Centrage vertical de ma page d'accueil

**Guillaume Baron** · 10/11/2011, 12h11

Bonjour bonjour. Cela fait maintenant une semaine que j'essaye de centrer verticalement l'ensemble de la page d'accueil de mon site. J'ai lu plein d'articles sur divers forums mais je n'ai pas trouvé de réponses valables étant donné que le centrage doit se faire SANS que l'on définisse la hauteur d'un bloc.

Peut-être est-ce tout simplement impossible ?

Vous pouvez voir la page sur :

http://www.guillaumebaron.com/

PS : Je suis compositeur.

**bob633** · 10/11/2011, 16h23

Montre ton code plutôt car on sait pas comment tu as construis tes pages et ton css.

**franck31** · 10/11/2011, 18h37

avec ça tu devrais t'en sortir.

html:

Code :

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

1
2
3
4
5
6
7
<div class="conteneur">
 
	<div class="bloc">
		<p>Cras mollis [...]</p>
	</div>
 
</div>

css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
div.conteneur { 
text-align:center; /* centrage horizontal */ }
 
div.bloc { 
width:100px;
margin:0 10px; /* espacement horizontal des blocs */
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:left; /* on rétablit l'alignement du texte */ }

css ie:

Code :

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

1
2
div.bloc { 
display:inline; /* correctif inline-block */ }

**Guillaume Baron** · 10/11/2011, 20h07

Bonsoir, oui j'avais testé cette solution ma ça marche pas du tout...

Voilà mon code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<body>
	<div>
		<center>
		<br/>
		<br/>
		<br/>
		<hr align="center" width="100%" color="#666666" size="1"> 	
		<img class="imagepremiere" src="images/premiere/premiere.png" alt="premiere" />
		<br/>
		<img class="imagepremiere" src="images/premiere/guillaumebaron.jpg" alt="premiere" />			
		<br/>
			<table width="270px" border="0">
				<tr>
					<td align="left">					 
						<a href="francais.html"><img src="images/logo/francais.png" alt="Francais" title="Francais"/></a>
					</td>
					<td align="right">
						<a href="english.html"><img src="images/logo/anglais.png" alt="English" title="English"/></a>			
					</td>	
				</tr>
			</table>
		<br/>		
		<hr align="center" width="100%" color="#666666" size="1"> 	
		</center>
 
		<div class="footerpremiere">
			<table border="0" align="center" >
				<tr>
					<td align="right" width="600px" valign="top">
						<a>Ce site respecte le droit d'auteur. Tous les droits des auteurs des œuvres protégées reproduites et communiquées sur ce site sont réservés. 
							Sauf autorisation, toute utilisation des œuvres autres que la consultation individuelle et privée sont interdites.</a>
					</td>
					<td align="center" width="20px">
						<a>|</a>
					</td>
					<td align="left" width="600px" valign="top">
						<a>This website respects copyright rules. All copyrights of protected works reproduced and communicated on this website are 
						reserved. Expect authorization, use of works other than individual and private consultation are prohibited.</a>
					</td>
				</tr>
			</table>	
		<hr align="center" width="600px" color="#666666" size="1"> 
			<table border="0" align="center">
				<tr>
					<td align="right" width="200px" valign="top">
						<a>Copyright © 2011 - Guillaume Baron</a>
					</td>
					<td align="center" width="20px">
						<a>|</a>
					</td>
					<td align="left" width="200px" valign="top">
						<a>Web Design - Guillaume Baron</a>
					</td>
				</tr>
			</table>				
		</div>				
	</div>				
</body>

Et pour le css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.imagepremiere{
	padding-top:30px;
}
.footerpremiere{
	text-align:center;
	position:relative;
	bottom:0px;
	font-size:13px;
	opacity:0.4;
	height:20px;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
}

Voilà voilà. Le problème doit venir des tableaux etc... C'est relou l'informatique !!!! ^^

**franck31** · 11/11/2011, 00h45

en faisant quelque chose comme ça en l'adaptant avec les dimensions de tes blocs ça passe.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<style>
#centre {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60em;
    height: 30em;
    margin: -15em 0 0 -30em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}
#centm{
        vertical-align: middle;
        display: inline-block;
        top: 50%;
        position: absolute;
}
</style>
</head>
 
<body>
	<div id="centre">
		<div id="centm">
 
		<hr color="#666666" size="1"> 	
		<img class="imagepremiere" src="images/premiere/premiere.png" alt="premiere" />
		<br/>
		<img class="imagepremiere" src="images/premiere/guillaumebaron.jpg" alt="premiere" />			
		<br/>
			<table width="270px" border="0">
				<tr>
					<td align="left">					 
						<a href="francais.html"><img src="images/logo/francais.png" alt="Francais" title="Francais"/></a>
					</td>
					<td align="right">
						<a href="english.html"><img src="images/logo/anglais.png" alt="English" title="English"/></a>			
					</td>	
				</tr>
			</table>
		<br/>		
		<hr align="center" width="100%" color="#666666" size="1"> 	
		</center>
 
		<div class="footerpremiere">
			<table border="0" align="center" >
				<tr>
					<td align="right" width="600px" valign="top">
						<a>Ce site respecte le droit d'auteur. Tous les droits des auteurs des œuvres protégées reproduites et communiquées sur ce site sont réservés. 
							Sauf autorisation, toute utilisation des œuvres autres que la consultation individuelle et privée sont interdites.</a>
					</td>
					<td align="center" width="20px">
						<a>|</a>
					</td>
					<td align="left" width="600px" valign="top">
						<a>This website respects copyright rules. All copyrights of protected works reproduced and communicated on this website are 
						reserved. Expect authorization, use of works other than individual and private consultation are prohibited.</a>
					</td>
				</tr>
			</table>	
		<hr align="center" width="600px" color="#666666" size="1"> 
			<table border="0" align="center">
				<tr>
					<td align="right" width="200px" valign="top">
						<a>Copyright © 2011 - Guillaume Baron</a>
					</td>
					<td align="center" width="20px">
						<a>|</a>
					</td>
					<td align="left" width="200px" valign="top">
						<a>Web Design - Guillaume Baron</a>
					</td>
				</tr>
			</table>	
            </div>			
		</div>				
	</div>				
</body>

**Guillaume Baron** · 11/11/2011, 17h49

Alors j'ai testé et bidouillé le code, et ça marche enfin !

Seulement deux nouveaux problèmes sont apparus du coup. Je sais pas si ils sont facilement résolvables.

1 - Le premier c'est que du coup mes lignes "HR" sont délimitées par la zone de 60 em. Avant elles faisaient toute la largeur de la fenêtre.
Lorsque je les mets en dehors de la DIV, elles sont systématiquement affichées en haut de la fenêtre.

2 - Le deuxième problème c'est que avec mes solutions TABLE, le texte s'adaptait en fonction de la largeur de la fenêtre. Même pour une tout petit fenêtre. Maintenant la zone est définie par la taille 60em et lorsque l'on diminue la fenêtre, au lieu d'avoir une adaptation du texte, on a le droit a un petit ascenseur horizontal.

Je chipote j'avoue mais je suis assez perfectionniste. Si tu as les solutions et le courage, je prends !

Edit : Le css que j'ai au final :

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
#centre {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76em;
    height: 30em;
    margin: -15em 0 0 -38em;
}
#centm{
	vertical-align: middle;
	display: inline-block;
	margin: -3em 0 0 0;
	position: absolute;
}

Tu peux voir le résultat ici : http://www.guillaumebaron.com/

**franck31** · 12/11/2011, 13h03

Tu pourrais essayer 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
#centre {
    height: 30em;
    left: 50%;
    margin: -15em 0 0 -50%;
    position: absolute;
    top: 50%;
    width: 100%;
}
 
#centm {
    display: inline-block;
    margin: -3em 0 0;
    position: absolute;
    vertical-align: middle;
    width: 100%;
}

**Guillaume Baron** · 12/11/2011, 13h50

Génial Franck, ça marche enfin, exactement ce que je voulais.
1 - Adaptation horizontalement parfait même pour une toute petite fenêtre.
2 - Adaptation verticalement.
Merci énormément pour ton aide et le temps que tu as passé !

Centrage vertical de ma page d'accueil

HTML

Discussions similaires

Partager

Partager