Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1470 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css]Opéra hauteur 100% en absolu

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css]Opéra hauteur 100% en absolu

n°1213020
spiroublar​d
Posté le 02-10-2005 à 18:38:32  profilanswer
 

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:

mood
Publicité
Posté le 02-10-2005 à 18:38:32  profilanswer
 

n°1213025
sibelius
Vous êtes sûr ?
Posté le 02-10-2005 à 18:47:30  profilanswer
 

A quoi te servent tes png transparents ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°1213028
spiroublar​d
Posté le 02-10-2005 à 19:00:24  profilanswer
 

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.

n°1213476
omega2
Posté le 03-10-2005 à 12:11:31  profilanswer
 

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
n°1213480
sibelius
Vous êtes sûr ?
Posté le 03-10-2005 à 12:18:54  profilanswer
 

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
n°1213598
spiroublar​d
Posté le 03-10-2005 à 14:21:02  profilanswer
 

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
n°1213619
omega2
Posté le 03-10-2005 à 14:32:58  profilanswer
 

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
n°1213643
sibelius
Vous êtes sûr ?
Posté le 03-10-2005 à 14:46:03  profilanswer
 

@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
n°1213834
spiroublar​d
Posté le 03-10-2005 à 17:57:23  profilanswer
 

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...
 
:(  
 
 
 
 
 

n°1218061
spiroublar​d
Posté le 07-10-2005 à 20:58:11  profilanswer
 

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

mood
Publicité
Posté le 07-10-2005 à 20:58:11  profilanswer
 

n°1218297
spiroublar​d
Posté le 08-10-2005 à 14:41:39  profilanswer
 

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 ?
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css]Opéra hauteur 100% en absolu

 

Sujets relatifs
Menu contextuel sur OperaMon site s'affiche mal sous Opera
Donner la même hauteur à deux divHauteur de tableau centré
Problème de hauteur de divisionprob acces membres de classes pour fichier inclus en path absolu
Un div extensible à partir d' une certaine hauteur ??Créer une page html de tant de largeur sur tant de hauteur
absolu ou floatProblème Hauteur en %
Plus de sujets relatifs à : [css]Opéra hauteur 100% en absolu

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.057 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR