Problèmes avec mon centrage

Problèmes avec mon centrage - HTML/CSS - Programmation

Marsh Posté le 01-09-2006 à 09:50:52    

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 :
  1. /* CSS Document */
  3.   body
  4.   {
  5.   margin:0;
  6. }
  9.   #header
  10.   {
  11.    position:relative;
  12.    top:0;
  13.    left:0;
  14.    width:100%;
  15.    height:72px;
  16.    overflow:hidden;
  17.    background-image:url(http://img505.imageshack.us/img505/6004/livecomhdefaultstrie3.jpg);
  18.    color:white;}
  19.   #headerVapor
  20.   {
  21.    position:absolute;
  22.    width: 100%;
  23.    height:72px;
  24.    background-image:url(http://img505.imageshack.us/img505/9763/livecomhdefaultmc2.jpg);
  25.    background-position: center center;
  26.    background-repeat: no-repeat;
  27.   }
  28. #main {
  29. position:relative;
  30. top: 50%;
  31. bottom: 50%;
  32. background-color:white;
  33. height:100%;
  35. }
  36.      #footer
  37.   {
  38.    position:absolute ;
  39.    left:0;
  40.    width:100%;
  41.    height:72px;
  42.    overflow:hidden;
  43.    background-image:url(http://img505.imageshack.us/img505/5836/inverslivecomhdefaultstrst9.jpg);
  44.    color:white;
  45.    bottom: 0;
  46.    margin:0;}
  49.   #footerVapor
  50.   {
  51.    position:absolute;
  52.    width: 100%;
  53.    height:72px;
  54.    background-image:url(http://img505.imageshack.us/img505/9932/inverslivecomhdefaulttn5.jpg);
  55.    background-position: center center;
  56.    background-repeat: no-repeat;
  58.   }


 
 
 
et ma page index.html
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5. <script language="JavaScript">
  6. function makevisible(cur,which)
  7. {
  8. if(document.getElementById)
  9. {
  10. if (which==0)
  11. {
  12. if(document.all)
  13. cur.filters.alpha.opacity=100
  14. else
  15. cur.style.setProperty("-moz-opacity", 1, "" );
  16. }
  17. else
  18. {
  19. if(document.all)
  20. cur.filters.alpha.opacity=40
  21. else
  22. cur.style.setProperty("-moz-opacity", .4, "" );
  23. }
  24. }
  25. }
  26. </script>
  28. <title>G@NON INC : Bienvenu(e)</title>
  29. <link rel="stylesheet" media="screen" type="text/css" title="G@NON INC Jour" href="index.css" />
  30. </head>
  31. <body>
  32. <div id="header">
  33.  <div id="headerVapor"></div>
  34. </div>
  36.    <div id = "main">
  37.  
  38.  
  39. <div align="center">
  41.   <h3><u> (( Bienvenu(e) sur G@NON INC)) </u></h3>
  42.   <p><img src="images/129.png" alt="" width="153" height="152" /></p>
  43.   <p>Ré-ouverture dans quelques heures.... Revenez plus tard ;)</p>
  44.  
  45.  
  46. <script type="text/javascript"><!--
  47. google_ad_client = "pub-4386668980094441";
  48. google_ad_width = 468;
  49. google_ad_height = 60;
  50. google_ad_format = "468x60_as";
  51. google_ad_type = "text_image";
  52. google_ad_channel ="";
  53. google_color_border = "C3D9FF";
  54. google_color_bg = "FFFFFF";
  55. google_color_link = "0066CC";
  56. google_color_text = "000033";
  57. google_color_url = "808080";
  58. //--></script>
  59. <script type="text/javascript"
  60.   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  61. </script>
  64. </div>
  65. </div>
  69. <div id="footer">
  70.  <div id="footerVapor"></div>
  71. </div>
  72. </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 ;)

Reply

Marsh Posté le 01-09-2006 à 09:50:52   

Reply

Marsh Posté le 01-09-2006 à 10:13:04    

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


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

Marsh Posté le 01-09-2006 à 10:13:35    

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

Reply

Marsh Posté le 01-09-2006 à 10:24:26    

Reply

Marsh Posté le 01-09-2006 à 10:40:56    

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
Reply

Marsh Posté le 01-09-2006 à 11:08:42    

voila sous ie 7
 
 
la pour moi c'est centré
 
 
http://img518.imageshack.us/my.php [...] 803ol2.png

Reply

Marsh Posté le 01-09-2006 à 11:21:25    

arf, je croyais centrer horizontalement :D
 
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 :D :

Code :
  1. main {   
  2.     position:relative;
  3.     top: 50%;
  4.     bottom: 50%;
  5.     background-color:white;
  6.     height:100%;
  7. }


 
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 :D Et ensutie tu mets un height à 100% ... quel intérêt du coup ? :??:


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

Marsh Posté le 01-09-2006 à 11:48:51    

voila j'ai fait ce que tu m'a conseillé, ça ne marche toujours pas :(
 
index.css

Code :
  1. /* CSS Document */
  3.   body
  4.   {
  5.   margin:0;
  6.   height:100%;
  7. }
  8. #divcontenuglobal{
  9. line-height: 100%;}
  12.   #header
  13.   {
  14.    position:relative;
  15.    top:0;
  16.    left:0;
  17.    width:100%;
  18.    height:72px;
  19.    overflow:hidden;
  20.    background-image:url(http://img505.imageshack.us/img505/6004/livecomhdefaultstrie3.jpg);
  21.    color:white;}
  22.   #headerVapor
  23.   {
  24.    position:absolute;
  25.    width: 100%;
  26.    height:72px;
  27.    background-image:url(http://img505.imageshack.us/img505/9763/livecomhdefaultmc2.jpg);
  28.    background-position: center center;
  29.    background-repeat: no-repeat;
  30.   }
  31. #main {
  32. position:relative;
  33. background-color:white;
  34. top: 50%;
  35. }
  36.      #footer
  37.   {
  38.    position:absolute ;
  39.    left:0;
  40.    width:100%;
  41.    height:72px;
  42.    overflow:hidden;
  43.    background-image:url(http://img505.imageshack.us/img505/5836/inverslivecomhdefaultstrst9.jpg);
  44.    color:white;
  45.    bottom: 0;
  46.    margin:0;}
  49.   #footerVapor
  50.   {
  51.    position:absolute;
  52.    width: 100%;
  53.    height:72px;
  54.    background-image:url(http://img505.imageshack.us/img505/9932/inverslivecomhdefaulttn5.jpg);
  55.    background-position: center center;
  56.    background-repeat: no-repeat;
  58.   }


 
 
et index.html
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5. <script language="JavaScript">
  6. function makevisible(cur,which)
  7. {
  8. if(document.getElementById)
  9. {
  10. if (which==0)
  11. {
  12. if(document.all)
  13. cur.filters.alpha.opacity=100
  14. else
  15. cur.style.setProperty("-moz-opacity", 1, "" );
  16. }
  17. else
  18. {
  19. if(document.all)
  20. cur.filters.alpha.opacity=40
  21. else
  22. cur.style.setProperty("-moz-opacity", .4, "" );
  23. }
  24. }
  25. }
  26. </script>
  28. <title>G@NON INC : Bienvenu(e)</title>
  29. <link rel="stylesheet" media="screen" type="text/css" title="G@NON INC Jour" href="index.css" />
  30. </head>
  31. <body>
  32. <div id="divcontenuglobal">
  33. <div id="header">
  34.  <div id="headerVapor"></div>
  35. </div>
  37.    <div id = "main">
  38.  
  39.  
  40. <div align="center">
  42.   <h3><u> (( Bienvenu(e) sur G@NON INC)) </u></h3>
  43.   <p><img src="images/129.png" alt="" width="153" height="152" /></p>
  44.   <p>Ré-ouverture dans quelques heures.... Revenez plus tard ;)</p>
  45.  
  46.  
  47. <script type="text/javascript"><!--
  48. google_ad_client = "pub-4386668980094441";
  49. google_ad_width = 468;
  50. google_ad_height = 60;
  51. google_ad_format = "468x60_as";
  52. google_ad_type = "text_image";
  53. google_ad_channel ="";
  54. google_color_border = "C3D9FF";
  55. google_color_bg = "FFFFFF";
  56. google_color_link = "0066CC";
  57. google_color_text = "000033";
  58. google_color_url = "808080";
  59. //--></script>
  60. <script type="text/javascript"
  61.   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  62. </script>
  65. </div>
  66. </div>
  70. <div id="footer">
  71.  <div id="footerVapor"></div>
  72. </div>
  73. </div>
  74. </body>

Reply

Marsh Posté le 01-09-2006 à 12:04:21    

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
Reply

Marsh Posté le 01-09-2006 à 12:11:37    

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
Reply

Marsh Posté le 01-09-2006 à 12:11:37   

Reply

Marsh Posté le 01-09-2006 à 13:25:59    

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
Reply

Marsh Posté le 03-09-2006 à 23:47:54    

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?

Reply

Marsh Posté le 04-09-2006 à 09:11:15    

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.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed