CSS position fixe compatible IE-->OK

[manly]

Bonjour,

Pour rendre le site de mon mari plus joli, et combler l'espace de gauche, je me suis dit que mettre mon bloc en fixe serait une bonne idée.

Cela fonctionne,..........sur FF. IE, lui n'en fait qu'à se tête, comme d'habitude.

Auriez-vous une astuce pour le "forcer " ?

Voici un bout de code concernant mon corps et le menu concerné

#corps/* Le corps de la page */
{
  margin-left: 20px; /* Une marge à gauche pour pousser le corps, afin qu'il ne colle pas à la fenêtre */
  margin-right: 20px;
  margin-top: 5px;
  padding: 20px;
  padding-right: 200px;
  color: #334264;
  background-color: #B0C4DE;
  border: outset #778899;
  text-align: justify; /* Pour centrer le titre */
  font-family: Verdana, Arial, "Comic sans MS","sans serif";
  font-size: 14px;
  background-repeat: repeat;
}
#bloc
{
background-color: #8394b2;
background-attachment : fixed;
background-repeat : no-repeat;
border:outset #778899;
float: right; /* Le menu flottera à droite */
position: fixed;
margin-left: 85%; /*pour positionner le menu à droite*/
margin-right: 40px; /* Une marge à droite pour pousser le menu */
width: 129px;
height: 250px;
margin-top: 40px; /* Pour éviter que les éléments du menu ne soient trop collés */
font-family: Verdana, Arial, "Comic sans MS", "sans serif";
color: black;
}

 

Deux petites images parlantes

1. Firefox:

 

2. Internet explorer :

 

Bonne journée.

Modifié le 1 décembre 2008 par manly

[Dylav]

Salut Manly,

 

Pour ton bloc menu, il est inutile de lui donner un margin-left, puisque tu lui as déjà demandé de se positionner à droite par float:right. Essaie plutôt d'indiquer que ce bloc vient se poser par-dessus le corps de l'écran (présentation en couches, §9.9), en utilisant l'attribut z-index:1. Comme tu ne nous as donné ni l'URL de ta page, ni le code complet, je n'ai pas pu tester...

 

En tout cas, ton problème s'apparente tout à fait à celui que subit Sew-Oszka dans son topic tout récent Besoin de conseil CSS/HTML, malheureusement pas encore résolu (mais j'avoue que je n'ai pas évoqué le z-index avec lui)

[manly]

Bonsoir Dylav,

Merci pour ta réponse.

Si je retire le margin-left: 85%;en laissant juste le float: right, mon bloc défile à l'extrême droite de ma page.

Par contre, il est bien positionné dans IE, sans rester fixe par rapport à mon écran.

J'ai ajouté, comme tu le verras l'attribut z index.Cela ne change rien à mon problème, peut-être devrais-je ajouter encore qq chose.

ma page se trouve à http://www.patrickhubert.be/entreprises.html

mon code css complet:

#chmenu {
margin: auto;
margin-left: 20px;
margin-right: 20px;
   margin-top: 0px;
   padding: 0px;
   height: 31px;
   background-color: #8394b2;
border:outset #778899;
list-style: none;
}
ul#menu1 li ul
{
   display:none;
   height: 24px;
}
ul#menu1 li:hover>ul
{
   display:block;
}
ul#menu1
{
color: marine;
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   height: 24px;
   background-color: #8394b2;
   margin: 0;
   padding: 0;
   margin-top: 0px;
   float: left;
   display:block;
}
ul#menu1 li
{
   float:left;
   display:block;
}
ul#menu1 li a.menuprincipal
{
   display:block;
   color: marine;
   padding-left: 7px;
   padding-right: 7px;
   padding-top: 5px;
   padding-bottom: 4px;
   text-decoration: none;
}
ul#menu1 li a.menuprincipal_fin
{
   display:block;
   color: marine;
   padding-left: 7px;
   padding-right: 7px;
   padding-top: 5px;
   padding-bottom: 4px;
   text-decoration: none;
}
ul#menu1 li a.ssmenu
{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   z-index:100;
   background-color: #e6e6fa;
   color: marine; /* couleur texte sous menu */
   padding: 5px 10px 5px 5px;
   text-decoration: none;
}
ul#menu1 li a.ssmenu-i
{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: italic;
   z-index:100;
   background-color: #e6e6fa;
   color: marine;
   padding: 5px 10px 5px 5px;
   text-decoration: none;
}
ul#menu1  li a.menuprincipal:hover{color: black; }
ul#menu1  li a.menuprincipal_fin:hover{color: black; }
ul#menu1 li a.ssmenu:hover{color: black;background: #A0ABCF;}
ul#menu1 li a.ssmenu-i:hover{color: black;background: #A0ABCF;}
ul#menu1 ul
{
color: marine;
   position:absolute;
   float: left;
   list-style:none;
   margin:0px;
   padding:0px;
   width:150px;
   z-index:1;
}
ul#menu1 ul li a
{
   display:block;
   border-top: 1px solid #48709A; /*Theme Change here*/
   border-bottom: 1px solid #0B325B;
   border-left: 1px solid #0B325B;
   border-right: 1px solid #0B325B;
   font:normal 11px Verdana;
   z-index:100;
   background-color: white;
   width: 150px;
color: marine;
}
body { 
margin: auto; /* Pour centrer notre page */
margin-top: 5px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
margin-bottom: 10px;    /* Idem pour le bas du navigateur */
background-color:#E6E6FA; 
background-repeat: repeat;
}
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}
#en_tete/* L'en-tête */{text-align: center; }

.rien/* Toutes les listes à puces se trouvant dans un menu */
{
  list-style-type: none;
  padding: 7px; /* Tous les côtés ont une marge intérieure de 7 pixels */
  margin: 5px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
}
a /* Tous les liens se trouvant dans un menu */{color: #334264;}
a:hover /* Quand on pointe sur un lien du menu */{background-color:#e6e6fa;color: #8394b2;}
.logo{

    text-align: center;
 margin-left: 200px;

    } 
.centre/*Pour centrer */
{
text-align: center;
font-family:Verdana, Arial, "Comic sans MS","sans serif";
font-size: 14px;
background-repeat: repeat;
}
.mini/*Pour ecrire petit*/
{font-size: x-small}
#corps/* Le corps de la page */
{
  margin-left: 20px; /* Une marge à gauche pour pousser le corps, afin qu'il ne colle pas à la fenêtre */
  margin-right: 20px;
  margin-top: 5px;
  padding: 20px;
  padding-right: 200px;
  color: #334264;
  background-color: #B0C4DE;
  border: outset #778899;
  text-align: justify; /* Pour centrer le titre */
  font-family: Verdana, Arial, "Comic sans MS","sans serif";
  font-size: 14px;
  background-repeat: repeat;
}
#bloc
{
z-index: 1;
background-color: #8394b2;
background-attachment : fixed;
background-repeat : no-repeat;
border:outset #778899;
position: fixed;
margin-left: 85%; /*pour positionner le menu à droite*/
margin-right: 40px; /* Une marge à droite pour pousser le menu */
width: 129px;
height: 250px;
margin-top: 40px; /* Pour éviter que les éléments du menu ne soient trop collés */
font-family: Verdana, Arial, "Comic sans MS", "sans serif";
color: black;
}
#souligne{text-decoration: underline;}
.souligne{text-decoration: underline;}
#pied_de_page
{
height: 65px;
margin-left: 20px; /* Une marge à gauche pour pousser le corps, afin qu'il ne colle pas à la fenêtre */
margin-right: 20px;
margin-top: 10px;
padding: 5px;
padding-right: 10px;
color: #334264;
background-color: #8394b2;
border:outset #778899;
text-align: center; /* Pour centrer le titre */
font-family: Verdana, Arial, "Comic sans MS","sans serif";
font-size: small;
}
h1{font-size:xx-large;
font-family:  Arial, Verdana, serif;
color:#334264;
text-align:center;
}
h2{font-size:large;
font-family:  Arial, Verdana, serif;
color:#334264;
text-decoration: underline;
}
h3{
font-family:  Arial, Verdana, serif;
color:#334264;
text-align:center;
}
h4{
font-size:small;
font-family: Arial, Verdana, serif;
color: #334264;
font-style: italic;

}
h5{
font-size: 1.1em;
font-family: Arial, Verdana, serif;
color: #334264;
font-style:italic,bold;
text-decoration: underline;
}


table /* Le tableau en lui-même */
{
margin: auto; /* Centre le tableau */
border: 4px outset #e6e6fa; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
font-size: 1em;
}
th /* Les cellules d'en-tête */
{
border: 1px solid #e6e6fa;
text-decoration: underline;
  font-size: 16px;
  font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td /* Les cellules normales */
{
border: 1px solid #e6e6fa;
  font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
  padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
  font-size: 14px; 
}
.agenda
{	text-align: center;
color: #CC0000;
font-family: Verdana, Arial, "Comic sans MS","sans serif";
font-size: 18px;
background-repeat: repeat;
}
.amen{text-align: center; font-size: small;}
#style
{
color:#000000;
padding:1px;
width:145px;
background-color:#FFFF99;
font-size:11px;
font-family:arial, sans-serif;
text-align:center;
border:1px solid #03BFFB;
}

Donc en résumé, toujours valable sur FF, invalide en IE

 

edit: ce z-index me dit qq chose; en fait en regardant bien, je l'ai déjà utilisé dans ma barre de navigation.(qui ne fonctionne pas comme je voudrais en IE non plus)

 

edit2: je me doute que mon code css pourrait être plus épuré.

Modifié le 26 novembre 2008 par Florent
correction du lien

[Greywolf]

la directive z-index ne fonctionne-t-elle pas de pair avec la directive position:absolute ou position:relative ?

[Dylav]

Il est clair que l'attribut z-index ne résoud rien et semble, dans notre cas, totalement inutile.

 

Nota : l'URL que tu as indiquée pointe sur une ressource protégée (“Forbidden - You don't have permission to access /patrickhubert.be/entreprises on this server”). Mais point n'est besoin du code complet pour faire des tests, et je n'ai abouti à rien.

 

J'ai le souvenir de scripts JavaScript (sans doute sur ToutJavaScript.com) permettant de forcer un bloc à garder une position fixe dans la fenêtre lorsque l'on actionne l'ascenseur. Ils étaient probablement faits pour contourner l'inaptitude d'Internet Explorer à respecter ça en natif. Mais, outre que ces scripts ne sont pas forcément limpides, le bloc en question tressaute lorsque la page défile. Et il ne faut pas oublier que, pour des raisons de sécurité, certains internautes interdisent à leur navigateur l'exécution des scripts JavaScript...

 

Désolé, Manly, mais là je sèche un brin

[manly]

Merci Florent d'avoir corrigé le lien.

 

Dylav, comme je te l'ai déjà dit, javascript et moi............ ça fait deux.

Alors je ne vais pas chercher à configurer ça en java.

 

Greywolf, j'ai fait des essais avec les positions. Absolutes ou relatives. Je ne suis arrivée à rien non plus.

 

Tant pis, c'est dommage, je vais donc laisser mon site tel qu'il est.

J'aurais juste voulu corriger une impression de vide laissée dans mes longues pages à gauche de celles-ci.

Peut-être en croisant cette infrastructure là en surfant, le code source pourra m'aider.

 

Merci de votre aide en tout cas.

 

edit: ben je n'arrive pas à abandonner l'idée

J'ai trouvé ceci sur le web http://www.ab-d.fr/date/2008-02-11/, mais je ne sais pas où mettre quoi

Modifié le 27 novembre 2008 par manly

[Dylav]

Bonsoir Manly,

 

Belle trouvaille, que tu as faite là ! Ça fonctionne très bien, mais il faut effectivement parfaitement respecter la formulation.

 

Dans ta feuille de style externe, tu mets le code standard du bloc fixe #bloc pour tous les bons navigateurs :

 

#bloc {
 position: fixed;
 margin-top: 85px;
 top:0;
 right: 30px;
 width: 129px;
 height: 250px;
 padding: 10px;
 background-color: #8394b2;
 border:outset #778899;
 font-family: Verdana, Arial, "Comic sans MS", "sans serif";
 color: black;
}

Et, pour Internet Explorer, tu ajoutes une clause de style dans le header de la page HTML, juste en-dessous de l'appel à la feuille de style externe :

 

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style1.css"/>
<!-- Code CSS pour Internet Explorer 6 -->
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bloc {
 position: absolute;
 top: expression((document.documentElement.scrollTop || document.body.scrollTop) + 
			   this.offsetHeight - this.offsetHeight);
}
</style>
<![endif]-->

Remarques sur la position de ton bloc fixe :

• pour le positionnement vertical, tu joues avec top:0 et le margin-top. C'est le plus simple, car l'expression pour Internet Explorer renvoie l'équivalent du top:0,
  
• pour le positionnement horizontal, tu joues juste avec right, qui va positionner le bord droit de ton bloc par rapport au bord droit de la fenêtre, d'où un ajustement automatique quelle que soit la résolution de l'écran (tu remarqueras que ça fonctionne sans donner de margin-left),
  
• comme je te le disais, le constant recalcul de la position fixe lorsque tu actionnes l'ascenseur, crée un léger effet de tressautement du bloc (ce qui n'est bien sûr pas le cas sous les autres navigateurs, où le bloc est effectivement fixe).
  

Pour conclure, tu triches un peu en écrivant « JavaScript et moi... ça fait deux » : les menus déroulants de ton bandeau haut fonctionnent grâce à un script JavaScript !

[manly]

Pour conclure, tu triches un peu en écrivant « JavaScript et moi... ça fait deux » : les menus déroulants de ton bandeau haut fonctionnent grâce à un script JavaScript !

Merci Dylav, j'essaye ça dès que possible.

Pour mon menu déroulant, c'est un membre du forum qui me l'a gentiment écrit.

J'ai juste recopié, en ne comprenant pas tout

Bonne soirée.

ps: si tu veux d'autres liens du genre, j'en ai trouvé quelques uns; mais faut fouiller.

[Dylav]

Alors, dis-nous, Manly…

 

As-tu réussi à le mettre en œuvre, ton bloc fixe

[manly]

Salut Dylav.

Cela fonctionne sur ff, Ie mais pas encore Opera.

Sur IE 6; me bloc n'est pas fixe, mais +/- bien placé

avec ce code ci:

#bloc
{
 position: fixed;
 margin-top: 200px;
 top: 0;
 right: 30px;
 width: 129px;
 height: 250px;
 padding: 10px;
 background-color: #8394b2;
 border:outset #778899;
 font-family: Verdana, Arial, "Comic sans MS", "sans serif";
 color: black;
}

 

Sur Opera, j'ai un souci de texte dans le bloc.

 

Je n'ai pas eu beaucoup le temps d'y travailler ce week-end.

Aujourd'hui, ce sera court.

J'essayerai mieux demain.

C'est gentil de t'inquiéter de moi.

Ici aussi, il y avait une solution.

http://openweb.eu.org/articles/initiation_absolue/

Ce n'est pas facile à trouver, car beaucoup d'exemples sur la toile sont encore en HTML.