Center mon site en hauteur ! problème dans mon html ?

**michmuch** · 17/04/2008, 16h16

Bonjour à tous, j'arrive à centrer mon site en Largeur mais pas en Hauteur.
Qu'est ce qui cloche dans mon code SVP ?

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
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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Le Book de Cyril</title>
&lt;script language="javascript">AC_FL_RunContent = 0;</script>
&lt;script src="AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css">
<!--
body {
margin: 0;
text-align: center
}
 
#Le Book de Cyril {
position:absolute;
left: 50%;
top: 50%;
width: 900px;
height: 700px;
margin-top: -350px; /* moitié de la hauteur */
margin-left: -450px; /* moitié de la largeur */
border: 1px solid #000;
}
-->
</style>
</head>
<body bgcolor="#ffffff">
<!--URL utilisées dans l'animation-->
<!--texte utilisé dans l'animation-->
<!-- saved from url=(0013)about:internet -->
<div id="Le Book de Cyril">
&lt;script language="javascript">
if (AC_FL_RunContent == 0) {
alert("Cette page nécessite le fichier AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '910',
'height', '710',
'src', 'Le Book de Cyril',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'Le Book de Cyril',
'bgcolor', '#ffffff',
'name', 'Le Book de Cyril',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'Le Book de Cyril',
'salign', ''
); //end AC code
}
</script>
</div>
<noscript>
 
&lt;script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','910','height ','710','id','Le Book de Cyril','align','middle','src','Le Book de Cyril','quality','high','bgcolor','#ffffff','name' ,'Le Book de Cyril','allowscriptaccess','sameDomain','allowfull screen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','Le Book de Cyril' ); //end AC code
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="910" height="710" id="Le Book de Cyril" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Le Book de Cyril.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="Le Book de Cyril.swf" quality="high" bgcolor="#ffffff" width="910" height="710" name="Le Book de Cyril" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
</div>
</body>
</html>

Merci d'avance

**arno34php** · 17/04/2008, 17h07

Salut,
J'ai remarqué qu'il manque le point virgule après

Code :

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

text-align: center

Peux tu envoyer un lien pour voir de quoi tu parles exactement ?

Code :

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

1
2
3
4
5
6
body {
margin: 0;
text-align: center;
vertical-align:middle;
color:#FFFFFF;
}

**Ani[MAL]** · 17/04/2008, 17h23

Moi j'utilise toujours le même truc, tu crée une div id=contenu juste après ton <body> et que tu fermes juste avant le </body> et tu mets dans ton css:

Code :

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

1
2
3
4
5
6
7
8
div#contenu { 
   width:791px; /*Largeur du design*/ 
   margin:0 auto 0 -420px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/ 
   position:absolute; 
   top:25px; /*25px entre le coin supérieur de l’écran et le design*/ 
   left:50%;/*50% de marge ( cela centrera le design )*/ 
   border:1px solid #000000; /* Bordure encadrant le design */ 
   }

**exterieur** · 17/04/2008, 17h41

En effet le body ne peut être centré verticalement.

Par contre la solution d'Ani[MAL] à l'incovéniant de ne pas être dynamique en fonction de la taille de la fenêtre du navigateur.

Je pense qu'il faut utiliser du javascript pour faire ce genre de chose.
J'avais tenté plein de trucs y'a quelques temps avec le CSS sans jamais avoir réussit à centrer verticalement un élement, uniquement en utilisant CSS.
Du coup j'avais abandonné l'affaire...

**Ani[MAL]** · 17/04/2008, 17h44

Quand tu ouvres une page pour la consulter généralement tu mets pas ta fenête en petit...

Ma solution est dynamique oui car elle s'adapte parfaitement à la résolution de l'utilisateur

Ps: ca centre pas le body mais comme la div que je crée englobe TOUT le contenu, le top:.... permet de centrer le site verticalement

**exterieur** · 17/04/2008, 17h53

Ah ok, et çà marche sur tous les navigateurs ?

Center mon site en hauteur ! problème dans mon html ?

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager