IE6 et CSS height

[zeb]

Bonjour,

Je seiche sur un problème a la con de hauteur d'une div.

J'ai une page, qui comprend (entre autre) deux blocs (div) qui doivent respectivement avoie une hauteur de 50% du total de la surface affichable du navigateur.

Ces deux div sont positionnées par CSS l'une au dessus de l'autre.

En toute logique si elle font 50 % de la hauteur totale et et positionnées l'une au dessus de l'autre, cela doit me donner une occupation totale de l'écran et ces deux blocs doivent coller l'un a l'autre.

exemple en image :



Sous IE, les propriétés height 50% ne semblent pas interprétées voir :



Une idée ?

La page est ici : http://www.sculpture-et-pierre.fr/Ombre.php

le Html pour ces deux blocs est comme ceci :

Code: Tout sélectionner

  <div class="B1">
   <div class="content">
    <!-- contenu textuel de la page -->
    <h1>Ombre</h1>
    <br/>
    L'ombre est un mystère vivant. <br/><br/>
    Vivant parce que seuls les morts n'ont plus d'ombre, <br/>
    mystère parce que cet étrange double de nous-mêmes
    s'attache à nos pas et nous échappe en même temps.<br/><br/>
    Catherine d'Humières
    <!-- fin du contenu textuel de la page -->
   </div>
  </div>
 

  <div class="B3">
   <div class="menu">
    <a href="http://www.sculpture-et-pierre.fr/" title="Sculpture et pierre">accueil</a><br/><br/>
    <a href="http://www.sculpture-et-pierre.fr/Artiste.php" title="">l'artiste</a><br/>
    (...)
    <a href="http://www.sculpture-et-pierre.fr/Lumiere.php" title="lumière">la lumière</a><br/>
    <a href="http://www.sculpture-et-pierre.fr/Contraste.php" title="">le contraste</a><br/>
   </div>
  </div>

et le CSS associé :

Code: Tout sélectionner

/*******************************************************************************
   block de contenu general
*******************************************************************************/
.B1{
   position: absolute;
   top: 0px;
   left: 0px;
   width: 250px;
   height: 50%;
   color: #ffffff;
   background-color: #000000;
   border-right: 1px solid #898a89;
   filter: alpha(opacity=50);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   opacity:0.50;
}
/* sous bloc de contenu (inclus dans le B1) */
.content{
   width: 220px;
   height: 80%;
   position: relative;
   left: 10px;
   top: 10px;
}
/*******************************************************************************
   bloc de menu principal (menu)
*******************************************************************************/
.B3{
   position: absolute;
   top: 50%;
   left: 0px;
   width: 250px;
   height: 50%;
   color: #0000ff;
   background-color: #ffffff;
   border-right: 1px solid #898a89;
   filter: alpha(opacity=50);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   opacity:0.50;
}
/* sous bloc de menu */
.menu{
   width: 220px;
   height: 80%;
   position: relative;
   left: 10px;
   top: 10px;
}

Merci

[zeb]

si quelqu'un peut me dire ce qu'il voie sous IE7 cela m'arangerais aussi car je ne suis pas encore équipé de ce navigateur.

[Vap]

Sur IE7 et Firefox ça s'affiche bien.

Sinon, ton css n'est pas valide. filter n'est pas dans le standard. As tu essayé sans? Si cela marche sans sous IE6, il faut que tu n'active les filtres que pour les naviagteurs plus récents.

Vap

[zeb]

Sur IE7 et Firefox ça s'affiche bien.

merci ça me console un peut car je vais vers du mieux (dans les 5 prochaines années lol)

Sinon, ton css n'est pas valide. filter n'est pas dans le standard. As tu essayé sans? Si cela marche sans sous IE6, il faut que tu n'active les filtres que pour les naviagteurs plus récents.

Filter n'est pas le problème, il passe bien sous tous les navigateur que j'ai sauf Konqueror mais ça gache pas tout pour autant.
sinon, même enlevé, le problème persiste sous IE6.

sinon pour faire le tour, j'ai testé sous safari 1.3, firefox (1 / 2) IE6, Konqueror, tous passe a peut près bien sauf IE6.

[Vap]

Essaie ce qui suit. Chez moi ça à l'air de marcher sans les filtres. Je te laisse voir si ça résoud ton pb.

Code: Tout sélectionner

body{
   background-repeat: no-repeat;
   background-position: top right;
   font-family: Arial,verdana;
   font-size: 12px;

   color: #000000;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}


L'idée est de ne JAMAIS laisser des définitions de valeur implicites.

Vap

[zeb]

Bien vue l'artiste !!! chapeau bas Monsieur et un grand merci.

Ne pas laisser de valeur implicite car IE6 ne sous entend pas qu'on utilise tout l'espace ... (a méditer et a retenir, j'avais jamais rencontré ce problème de façon si flagrante)

Dans la même série et une fois compris le concept que tu m'exposait, j'ai du aussi ajouter les valeurs de margin et padding pour avoir l'effet désiré.

body{
background-repeat: no-repeat;
background-position: top left;
font-family: Arial,verdana;
font-size: 12px;

position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #ffffff;
}

Mille fois merci et si je peut te rendre un service ... n'hésite pas

[zeb]

ça mérite un petit bonus un coup de main -> http://www.sculpture-et-pierre.fr/Toile-de-pierre.php (vers ton www) encore merci.

[Vap]

Ca fait plaisir d'aider quelqu'un comme toi!

L'artiste est ma femme, je ne suis que le webmaster de son site! Merci pour le lien en tout cas!

Je vais lui montrer ton site, car le design est original et franchement, j'aime beaucoup.

Vap

[Vap]

Je pense à une chose: teste ton site sur un petit écran, ou retaille la fenêtre de ton navigateur avant de visiter ton site.

Sur grand écran il rend très bien, mais il se peut que pour des petites tailles d'écran le retaillage automatique tronque tes menus.

Vap

[zeb]

Je pense à une chose: teste ton site sur un petit écran, ou retaille la fenêtre de ton navigateur avant de visiter ton site.

Sur grand écran il rend très bien, mais il se peut que pour des petites tailles d'écran le retaillage automatique tronque tes menus.

Vap

en 1024 x 768, ça passe bien en revanche le 800 x 600 est une vrai cata (plus de menu et images trop courtes) mais bon ... cela m'impose un travail que je ne souhaite pas faire pour l'instant. (j'ai encore pas mal de page a faire et bien que le travail ne soit pas trop important, c'est pas simple pour moi de gérer les images donc on verra plus tard)

En fait je voudrais effectuer une adaptation dynamique (côté client) de la feuille de style, pour pouvoir présenter des fond de pages adaptés à toutes les résolutions.