Problèmes avec mon centrage

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problèmes avec mon centrage

GANONEINC

http://ganoninc.info/

Bonjour à tous ,

voici mon problème j'aimerai centrer le contenue de cette page , seulement sous internet explorer ça passe mais pas sous firefox !

or mon site est prévu pour tourner sous firefox

voici le code css :

Code :

/* CSS Document */
body
{
margin:0;
}
#header
{
position:relative;
top:0;
left:0;
width:100%;
height:72px;
overflow:hidden;
background-image:url(http://img505.imageshack.us/img505/6004/livecomhdefaultstrie3.jpg);
color:white;}
#headerVapor
{
position:absolute;
width: 100%;
height:72px;
background-image:url(http://img505.imageshack.us/img505/9763/livecomhdefaultmc2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
#main {
position:relative;
top: 50%;
bottom: 50%;
background-color:white;
height:100%;
}
#footer
{
position:absolute ;
left:0;
width:100%;
height:72px;
overflow:hidden;
background-image:url(http://img505.imageshack.us/img505/5836/inverslivecomhdefaultstrst9.jpg);
color:white;
bottom: 0;
margin:0;}
#footerVapor
{
position:absolute;
width: 100%;
height:72px;
background-image:url(http://img505.imageshack.us/img505/9932/inverslivecomhdefaulttn5.jpg);
background-position: center center;
background-repeat: no-repeat;
}

et ma page index.html

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<script language="JavaScript">
function makevisible(cur,which)
{
if(document.getElementById)
{
if (which==0)
{
if(document.all)
cur.filters.alpha.opacity=100
else
cur.style.setProperty("-moz-opacity", 1, "" );
}
else
{
if(document.all)
cur.filters.alpha.opacity=40
else
cur.style.setProperty("-moz-opacity", .4, "" );
}
}
}
</script>
<title>G@NON INC : Bienvenu(e)</title>
<link rel="stylesheet" media="screen" type="text/css" title="G@NON INC Jour" href="index.css" />
</head>
<body>
<div id="header">
<div id="headerVapor"></div>
</div>
<div id = "main">
<div align="center">
<h3><u> (( Bienvenu(e) sur G@NON INC)) </u></h3>
<p><img src="images/129.png" alt="" width="153" height="152" /></p>
<p>Ré-ouverture dans quelques heures.... Revenez plus tard ;)</p>
<script type="text/javascript"><!--
google_ad_client = "pub-4386668980094441";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "C3D9FF";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_text = "000033";
google_color_url = "808080";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div id="footer">
<div id="footerVapor"></div>
</div>
</body>

Merci d'avance !

PS: petit motivation celui qui m'aide aura son nom dans la news qui annonce le retour du site, par exemple $user m'a aidé à finaliser le site

Publicité

Dj YeLL

$question = $to_be || !$to_be;

Chez moi c'est centré sous FF ...

---------------
Gamertag: CoteBlack YeLL

jbourdellon

Bon pour ma part, ca tourne sur Firefox et IE... et c'est correctement centré ?!?

GANONEINC

pas chez moi.....

http://img376.imageshack.us/my.php [...] 338pt0.png

Message cité 1 fois

Dj YeLL

$question = $to_be || !$to_be;

GANONEINC a écrit :

pas chez moi.....

http://img376.imageshack.us/my.php [...] 338pt0.png

:??:

Parce que c'est pas centré là sur ta photo ?

---------------
Gamertag: CoteBlack YeLL

GANONEINC

voila sous ie 7

la pour moi c'est centré

http://img518.imageshack.us/my.php [...] 803ol2.png

Dj YeLL

$question = $to_be || !$to_be;

arf, je croyais centrer horizontalement

Je crois qu'une des méthodes possible est de faire un DIV conteneur global, avec un line-height à 100% ... de plus il faut mettre un height à 100% sur le BODY aussi.

En même temps c'est un peu porcin ça aussi :

Code :

main {
position:relative;
top: 50%;
bottom: 50%;
background-color:white;
height:100%;
}

Tu dis que le haut de ton calque doit se trouver à 50% (donc en milieu) et que le bas de ton calque doit se trouver à 50% (au milieu aussi) ... ce qui n'a pas beaucoup de sens en fait Et ensutie tu mets un height à 100% ... quel intérêt du coup ? :??:

---------------
Gamertag: CoteBlack YeLL

GANONEINC

voila j'ai fait ce que tu m'a conseillé, ça ne marche toujours pas

index.css

Code :

/* CSS Document */
body
{
margin:0;
height:100%;
}
#divcontenuglobal{
line-height: 100%;}
#header
{
position:relative;
top:0;
left:0;
width:100%;
height:72px;
overflow:hidden;
background-image:url(http://img505.imageshack.us/img505/6004/livecomhdefaultstrie3.jpg);
color:white;}
#headerVapor
{
position:absolute;
width: 100%;
height:72px;
background-image:url(http://img505.imageshack.us/img505/9763/livecomhdefaultmc2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
#main {
position:relative;
background-color:white;
top: 50%;
}
#footer
{
position:absolute ;
left:0;
width:100%;
height:72px;
overflow:hidden;
background-image:url(http://img505.imageshack.us/img505/5836/inverslivecomhdefaultstrst9.jpg);
color:white;
bottom: 0;
margin:0;}
#footerVapor
{
position:absolute;
width: 100%;
height:72px;
background-image:url(http://img505.imageshack.us/img505/9932/inverslivecomhdefaulttn5.jpg);
background-position: center center;
background-repeat: no-repeat;
}

et index.html

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<script language="JavaScript">
function makevisible(cur,which)
{
if(document.getElementById)
{
if (which==0)
{
if(document.all)
cur.filters.alpha.opacity=100
else
cur.style.setProperty("-moz-opacity", 1, "" );
}
else
{
if(document.all)
cur.filters.alpha.opacity=40
else
cur.style.setProperty("-moz-opacity", .4, "" );
}
}
}
</script>
<title>G@NON INC : Bienvenu(e)</title>
<link rel="stylesheet" media="screen" type="text/css" title="G@NON INC Jour" href="index.css" />
</head>
<body>
<div id="divcontenuglobal">
<div id="header">
<div id="headerVapor"></div>
</div>
<div id = "main">
<div align="center">
<h3><u> (( Bienvenu(e) sur G@NON INC)) </u></h3>
<p><img src="images/129.png" alt="" width="153" height="152" /></p>
<p>Ré-ouverture dans quelques heures.... Revenez plus tard ;)</p>
<script type="text/javascript"><!--
google_ad_client = "pub-4386668980094441";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "C3D9FF";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_text = "000033";
google_color_url = "808080";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div id="footer">
<div id="footerVapor"></div>
</div>
</div>
</body>

Dj YeLL

$question = $to_be || !$to_be;

Hmmm dommage, en fait le line-height ne prend pas de % apparement, je viens de tester, si on défini une hauteur en pixel ça marche, en % ça marche pas.
Je vais essayer de trouver une solution.

---------------
Gamertag: CoteBlack YeLL

Dj YeLL

$question = $to_be || !$to_be;

Bon je viens de me renseigner un peu, car je n'ai jamais eu besoin de faire ça, mais c'est une vrai merde, très mal gérée.

Tu devrais éviter, ou faire des recherche sur Google et regarder par là :

http://forum.alsacreations.com/faq/#item3

---------------
Gamertag: CoteBlack YeLL

Publicité

GANONEINC

j'ai beau essayer les différentes techniques d'alsacreations aucunes ne me va..... je crois que je vais laisser tomber le centrage et spécifier une hauteur minimal pour les petites résolutions

Le seul centrage que j'avais , quand j'ai tester de redimensioner FF pour voir ce que ça fesait en autres résoltuion, c'était un centrage qui se centrait en fonctione de la longueur de ma page o_O

et sinon j'ai remarqué quelques problèmes parfois en fonction du contenu le footer ne reste pas bien en bas, en effet défois du blanc assez grand vient se mettre en dessous.

Message édité par GANONEINC le 01-09-2006 à 14:59:48

Cheinz

Si tu connais la hauteur du contenu a centré (ce qui est le cas visiblement) qu'est ce qui t'empeches d'utiliser la technique des marges négatives?

CNeo

Fait un tableau à une seule cellule, tu lui mets :

height: 100%;
width: 100%;
margin: 0;
padding: 0;
vertical-align: center;
text-align: center;

et ca devrais marcher.

FORUM HardWare.fr

Programmation

HTML/CSS

Problèmes avec mon centrage

Sujets relatifs
Problèmes avec PHP	Problemes avec mes inclusions aléatoire
[resolu]creation de dossiers/fichiers a la volee - problemes de droits	[Résolu] Centrage CSS et liste à image de fond
Problémes de portée sur un javascript	[resolu] Deux problèmes d'affichages d'images.
Problèmes d'accent sous MySql	[RÉSOLU] Problèmes divers FOR /F
IE -> gros problèmes de target
Plus de sujets relatifs à : Problèmes avec mon centrage

Page générée en 0.115 secondes