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

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

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, 16h07

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, 16h23

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, 16h41

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, 16h44

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, 16h53

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

**Ani[MAL]** · 17/04/2008, 16h55

Mozilla et IE ça marche nickel

http://saintmaur-pau.com/gwaddict

C'est mon site de projet pour la fac, teste le avec la résolution que tu veux tu verras

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

Oui oui, j'ai bien testé et ce qui se produit est bien ce que je pensais.

En fait ton div n'est pas centré verticalement et ne sera jamais centré verticalement de manière dynamique compte tenu que ton top: a une valeur fixe alors qu'en fonction de ton navigateur ou de ta résolution d'écran l'espace qui entoure ton div est variable...

Du coup tu n'a pas réussi plus qu'un autre à centrer automatiquement en vertical avec la seule utilisation des CSS

**michmuch** · 17/04/2008, 17h27

Tout d'abord merci pour vos reponses.
j'ai testé la solution de ani[mal] mais ca ne fonctionne pas !
mon site ne se positionne pas au milieu de l'écran !
ami[mal] pourrais tu stp me faire un copier collé du bon code ? je sais c bcp demander mais je suis perduuuuuuu

Merci d'avance

**michmuch** · 17/04/2008, 17h28

Exterieur pourrais tu toi me faire un copié collé du code qui fonctionnerai stp ?

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

Exterieur pourrais tu toi me faire un copié collé du code qui fonctionnerai stp ?

Malheureusement je ne peux pas t'aider.
Je sais juste par expérience que la solution d'Ani[MAL] ne fonctionne pas.

A mon avis, la seule solution est d'utiliser du javascript pour donner en dynamique la valeur du "top:" en fonction de la dimension de la fenêtre du navigateur.
Pour ma part je ne fais pas de javascript donc je ne peux pas t'apporter la solution. DSL.

**arno34php** · 17/04/2008, 18h41

Tu as essayé avec un top en pourcentage ?

Code :

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

1
2
3
4
5
6
7
8
div#contenu { 
   width:791px;
   margin:0 auto 0 -420px; 
   position:absolute; 
   top:XX %;
   left:50%;
   border:1px solid #000000; 
   }

**michmuch** · 17/04/2008, 20h41

J'ai essayé mais ca ne fonctione pas non plus :/

**Ani[MAL]** · 18/04/2008, 12h36

T'as la méthode brute sinon...

Un script qui va faire tant de <br /> en fonction de la résolution de l'utilisateur....un peu brouillon mais efficace

**exterieur** · 21/04/2008, 14h25

La méthode brute avec script qui génère les BR est loin d'être top car ton centrage dépendra de la hauteur des lignes du texte défini soit pour la balise BR soit pour son conteneur.

Sinon, tant qu'à faire un script, il faut lui faire prendre la taille de la partie utile de la fenêtre du navigateur et ensuite tu calcul la valeur qu'il faux donner à ton "top".

Admettons ton div fait 400px en hauteur (h_div), ta fenêtre fait 640px (h_fenetre).
çà donne donc un top à (h_fenetre - h_div)/2 donc 120px pour cet exemple.

Cà a l'avantage d'être propre.

Par contre, il vaut mieux avant de faire le calcul, vérifier si h_fenetre > h_div car sinon tu peut pas centrer donc autant mettre ton top à une valeur par défaut dans ce cas.

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

Dimensionnement en CSS

Discussions similaires

Partager

Partager