[css]Opéra hauteur 100% en absolu

Opéra hauteur 100% en absolu [css] - HTML/CSS - Programmation

Marsh Posté le 02-10-2005 à 18:38:32    

Bonjour à tous,
 
Voilà, j'ai déjà posté sur divers forums, mais sans solution...
 
J'ai fait une page avec un 3 containers, entête, centre et pied.
Mon container centre contient trois colonnes, une centrale en position relative, et deux latérales en position absolute.
Tout ce qu'il y a de plus classique :)
 
Mon problème est que sous opéra, malgré le height: 100%, ce navigateur refuse de m'étirer mes colonnes jusqu'en bas de ma page, c'est à dire en fonction de la hauteur de ma colonne centrale, il ajuste toujours en fonction du contenu de chaque colonne latérale.
Je ne peux mettre le background des colonnes dans le body, car j'utilise des images png (transparentes) de 1*1.
Et le body à lui sa propre image.
 
Donc j'aimerais savoir si vous connaissez une solution afin de remédier au bug de ce navigateur ?
 
:jap:

Reply

Marsh Posté le 02-10-2005 à 18:38:32   

Reply

Marsh Posté le 02-10-2005 à 18:47:30    

A quoi te servent tes png transparents ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 02-10-2005 à 19:00:24    

Ils me servent à faire le design de mon site, chaque catégorie aura une image de fond(body) différente, la page principale est de couleur claire et le contour est de couleur foncé, et ensuite ce qui est prévu est de pouvoir faire changer la couleur des images png par l'utilisateur.

Reply

Marsh Posté le 03-10-2005 à 12:11:31    

Ben en fait, la réaction d'opéra est logique.
Par ce que 100% de hauteur pour une "colone", (mise ne page par tableau?) ca veut rien dire vu que le body n'a jamais de hauteur définis.
Alors du coup, il prend la hauteur la plus logique est qui est en fait la seule qu'il conait : celle de son contenu.

Message cité 1 fois
Reply

Marsh Posté le 03-10-2005 à 12:18:54    

Je pense que ce billet va te donner des pistes de solution :
http://blog.alsacreations.com/2004/05/13/3-height ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-10-2005 à 14:21:02    

omega2 a écrit :

Ben en fait, la réaction d'opéra est logique.
Par ce que 100% de hauteur pour une "colone", (mise ne page par tableau?) ca veut rien dire vu que le body n'a jamais de hauteur définis.
Alors du coup, il prend la hauteur la plus logique est qui est en fait la seule qu'il conait : celle de son contenu.


Ben moi, je trouve que sa réaction est illogique, puisque je lui demande d'occuper 100% de son conteneur, et non de  ce qu'il contient.
 
Merci Sibelius, mais j'ai toujours pas trouvé de solution, voici un exemple, je suis contraint d'utiliser ce doctype car sinon IE me fait exactement la même chose :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
  5.     <link rel="stylesheet" type="text/css" href="styleGeneral.css" />
  6.     <title></title>
  7.   </head>
  8.   <body>
  9.  
  10.   <div id="containerGlobal">
  11.  
  12.     <div id="entete">
  13.     </div>
  14.        
  15.     <div id="containerCol">
  16.    
  17.       <div id="colGauche">
  18.       </div>    <!-- fin colGauche -->
  19.      
  20.       <div id="coldroite">
  21.          
  22.       </div>    <!-- fin colDroite --> 
  23.      
  24.       <div id="colCentre">
  25.      
  26.       </div>    <!-- fin colCentre -->
  27.    
  28.     </div>    <!-- fin containerCol -->
  29.    
  30.     <div id="pied">
  31.     </div>
  32.    
  33.   </div>


ET

Code :
  1. /* CSS Document styleGeneral */
  3. body{
  4.     width: 100%;
  5.     height: 100%;
  6.     margin: 0;
  7.     padding: 0;
  8.     font-size: 1em;
  9.     font-family:  Times New Roman, Serif;
  10.     background: #fff url(../images/body1.jpg) no-repeat 50% fixed;
  11. }
  13. /***********************************************************/
  14. /************      Les blocs principaux       **************/
  15. /***********************************************************/
  17. #containerGlobal{
  18.     margin: 0;
  19.     padding: 0;
  20.     top: 0;
  21.     left: 0;
  22.     position: relative;
  23.     width: 100%;
  24. }
  26. #entete{
  27.     margin: 0;
  28.     height: 110px;
  29.     background: gold;
  30.     position: relative;
  31. }
  33. #containerCol{
  34.     width: 100%;
  35.     position: relative;
  36.     margin: 0;
  37.     padding: 0;
  38. }
  40. /*\*/
  41. * html #containerCol{
  42.     height: 100%;  /* hack IE */
  43. }
  44. /**/
  47. #colGauche{
  48.     top: 0;
  49.     left: 0;
  50.     position: absolute;
  51.     width: 10em;
  52.     height: 100%;
  53.     margin: 0;
  54.     padding: 0;
  55.     background: green;
  56. }
  58. #coldroite{
  59.     top: 0;
  60.     right: 0;
  61.     position: absolute;
  62.     width: 10em;
  63.     height: 100%;
  64.     margin: 0;
  65.     padding: 0;
  66.     background: green;
  67. }
  69. #colCentre{
  70.     margin: 0 10em;   
  71.     padding: 2em 0;
  72.     background: lightblue;
  73.     min-height: 600px;
  74.     position: relative;
  75. }
  77. /*\*/
  78. * html #colCentre{
  79.     height: 600px;  /* hack IE ce crétin ne comprends pas le min-height */
  80. }
  81. /**/
  83. #pied{
  84.     margin: 0;
  85.     padding: 0;
  86.     height: 60px;
  87.     background: gold;
  88.    
  89. }
  91. /***********************************************************/
  92. /**********      fin des blocs principaux       ************/
  93. /***********************************************************/


Ca fonctionne correctement avec FF et IE, mais avec opéra, impossible, j'étais presque parvenu à une solution, mais le 100% ne s'appliquait pas au conteneur parent, mais au body initial (hauteur de l'écran).
 
J'ai essayé tout un tas de combinaisons possible, absolute, float, doctype, un autre div à l'intérieur, etc... toujours ce bug  :(  
Si quelqu'un a une soluce, je suis preneur  :pt1cable:

Message cité 1 fois
Reply

Marsh Posté le 03-10-2005 à 14:32:58    

spiroublard a écrit :

Ben moi, je trouve que sa réaction est illogique, puisque je lui demande d'occuper 100% de son conteneur, et non de  ce qu'il contient.

Mais si le conteneur n'a pas de taille, il ne peut pas prendre la taille du conteneur. C'est logique.

Message cité 1 fois
Reply

Marsh Posté le 03-10-2005 à 14:46:03    

@spiroublar > tu n'as défini de taille que pour l'élément <body>. Qu'en est-il si tu donnes une taille à <html> (comme l'indique le billet d'ailleurs) ?

Message cité 1 fois

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-10-2005 à 17:57:23    

omega2 a écrit :

Mais si le conteneur n'a pas de taille, il ne peut pas prendre la taille du conteneur. C'est logique.


Pour moi le navigateur doit savoir que le container a une taille, puisque il agrandi la hauteur de mon conteneur des colonnes en fonction de la hauteur de la colonne centrale, donc chaque colonne latérale devrait prendre cette hauteur pour base, ce que fait très bien firefox.
Non ?
 

sibelius a écrit :

@spiroublar > tu n'as défini de taille que pour l'élément <body>. Qu'en est-il si tu donnes une taille à <html> (comme l'indique le billet d'ailleurs) ?


Oui, j'ai déjà essayé, mais c'est pareil, obstination totale, je vais me penché plus sur le positionnement en flottant(ça m'arrange pas du tout), parce qu'avec des positions absolues, je crois que c'est pas possible...
 
:(  
 
 
 
 
 

Reply

Marsh Posté le 07-10-2005 à 20:58:11    

Bonsoir,
 
Je me permets de faire remonter mon post, car vraiment je désespère :cry:
 
J'ai mis un semblant de page en ligne pour que puissiez visualiser le problème.
 
Auriez vous une idée de comment faire pour que opéra me remplisse mes colonnes latérales de mon image .png ?
 
Ps: ne regardez pas avec cette saleté d'IE, c'est affreux :lol: je lui ferais quelquechose de spécifique à lui en attendant impatiemment la prochaine version qui je l'espère gèrera les .png, mais avec Netscape ou Mozilla, et comparez à Opéra.
 
Merci :p

Reply

Marsh Posté le 07-10-2005 à 20:58:11   

Reply

Marsh Posté le 08-10-2005 à 14:41:39    

Bonjour !!
 
J'ai presque réussi avec opéra, j'ai viré le conteneur principal qui ne servait en fait pas à grand chose, et changé quelques trucs.
 
Mais maintenant les colonnes descendent trop bas :??: , et ce qui est bizarre, c'est que lorsque l'on passe en mode plein écran (F11), il n'y a plus de défaut.
 
Y'a des fois....  :(
 
Une petite idée d'où viendrait ce énième problème ?
 

Reply

Sujets relatifs:

Leave a Replay

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