Problème avec header fixe

Bonjour à tous !

Voila je suis actuellement en stage et je dois aider la société à réaliser un petit site.

Le problème c'est que même si j'ai de bonnes bases en HTML et CSS, ce n'est pas non plus énorme...

La je galère depuis une semaine pour laisser mon header (animation flash + boutons effet rollover) fixe, pour qu'il ne descende pas avec la page

Voici le résultat actuel : http://kirjava83.free.fr/rca/site/test
Je met à la fin de ce post un annexe contenant un extrait de mon code (pour l'effet rollover) si ça peut aider pour ma 2e question

Voici mes problèmes :

le menu fixe fonctionne sous Firefox mais pas sur IE, j'ai cherché dans des dizaines de sites, tous donne une solution mais à chaque fois chez moi il y a quelque chose qui plante (soit ça ne marche pas, soit l'affichage est complètement explosé....)

Mon script actuel est le suivant (il ne marche pas sur IE mais permet un affichage normal du header) :

<style type="text/css">

#header {display:block; width:1024px; height:131px; position:fixed; background:#000000;}
* html #header {position:center;}
</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->

Est-ce que quelqu'un aurait une solution pour que IE accepte mon menu fixe ?


Sinon dans le même genre je galère depuis des jours pour trouver comment centrer mes boutons du header !!! Depuis que j'ai mis le script de rollover (qui va sûrement vous paraitre énorme) les boutons restent sur la gauche...

Même problème pour le bouton valider de mon formulaire !


Voila merci d'avance si quelqu'un peut m'aider,

ci dessous un extrait de ma source, c'est l'effet rollover de mes boutons (si ça peut aider à comprendre...)

/////// HTML /////

<div id="boutons">

<p><ul id="bouton1">
       <li><a href="#nogo"></a></li>
        
   </ul>

 <ul id="bouton3">
       <li><a href="#nogo"></a></li>
        
   </ul>
   
    <ul id="bouton2">
       <li><a href="#nogo"></a></li>

        
   </ul>
   <ul id="bouton4">
       <li><a href="#nogo"></a></li>
        
   </ul></p>
   
   </div>

////// CSS /////

#boutons {
          width : 717px;
          height : 27px;
          float : center;
          text-align : center;

}



#boutons ul {
          padding : 0;
          margin : 0;
          align : center;
}

#boutons li {
    margin: 0;
    padding: 0;
    display : inline;
}

#bouton1 li a:link, #bouton1 li a:visited {
    display: block;
    float: left;
    height: 27px;
    width: 179px;
    line-height: 27px;
    background:#fff url(images/bouton1.gif);
    padding: 0;
}

#bouton1 li a:hover, #bouton1 li a:active {
    background:#000 url(images/bouton1.gif) 0 -27px;
    padding: 0;
}


#bouton2 li {
    margin: 0;
    padding: 0;
    display: inline;
}

#bouton2 li a:link, #bouton2 li a:visited {
    display: block;
    float: left;
    height: 27px;
    width: 178px;
    line-height: 27px;
    background:#fff url(images/bouton2.gif);
    padding: 0;
}

#bouton2 li a:hover, #bouton2 li a:active {
    background:#000 url(images/bouton2.gif) 0 -27px;
    padding: 0;
}


#bouton3 li {
    margin: 0;
    padding: 0;
    display: inline;
}

#bouton3 li a:link, #bouton3 li a:visited {
    display: block;
    float: left;
    height: 27px;
    width: 181px;
    line-height: 27px;
    background:#fff url(images/bouton3.gif);
    padding: 0;
}

#bouton3 li a:hover, #bouton3 li a:active {
    background:#000 url(images/bouton3.gif) 0 -27px;
    padding: 0;
}



#bouton4 li {
    margin: 0;
    padding: 0;
    display: inline;
}

#bouton4 li a:link, #bouton4 li a:visited {
    display: block;
    float: left;
    height: 27px;
    width: 179px;
    line-height: 27px;
    background:#fff url(images/bouton4.gif);
    padding: 0;
}

#bouton4 li a:hover, #bouton4 li a:active {
    background:#000 url(images/bouton4.gif) 0 -27px;
    padding: 0;
}

Modifié par kirjava (25 May 2008 - 18:34)

Bonjour,

kirjava a écrit :
le menu fixe fonctionne sous Firefox mais pas sur IE, j'ai cherché dans des dizaines de sites, tous donne une solution mais à chaque fois chez moi il y a quelque chose qui plante (soit ça ne marche pas, soit l'affichage est complètement explosé....)

Internet Explorer 7 implémente position: fixed, donc rien à faire de particulier de ce côté là.
Internet Explorer 6 ne l'implémente pas, et les bidouilles imaginées pour contourner ce problème ne sont pas terribles. Selon moi, il est préférable de les oublier, si le positionnement fixe n'est pas absolument indispensable. On pourra dégrader en position: static ou si besoin en position: absolute pour IE6.
(Je ne parle pas d'IE 5 qui est désormais mort de sa belle mort. )

Si le positionnement fixe de ce menu est absolument indispensable, les pistes à suivre sont:
1. utilisation de frames;
2. utilisation de Javascript (avec peut-être une librairie type JQuery ou Mootools...).
Mais pas de bidouillage CSS à coup de overflow: hidden; ou autre dispositif casse-gueule qui aura pour principal effet de fournir un ersatz médiocre de positionnement fixe dans tous les navigateurs (à la place d'un positionnement fixe natif et efficace dans tous les navigateurs récents, et une solution de substitution pour IE6).

(En passant, l'utilisation du positionnement fixe pour ce header me semble être une erreur de design. Tout simplement car ça n'apporte pas grand chose et que ça réduit d'autant l'espace d'affichage du contenu.)

Pour le reste:
1. faire une recherche sur ce qu'est un Doctype, le mode de rendu Standard par opposition au mode Quirks, etc.
2. valider le code HTML (ce qui demandera pas mal de modifications);
3. vu que le nombre d'items du menu est fixe, que leur largeur est fixe, et que la largeur du site est fixe... il suffira d'une marge à gauche pour centrer les items du menu.

Bonne continuation (et bon apprentissage du HTML valide ).

lol merci beaucoup pour tout ces détails

alors oui y'a des fautes partout mais c'est fait "exprès" disons qu'en fait j'ai eu trop la flemme de le faire maintenant, j'ai pris du code un peu partout sans chercher à le mettre au norme, mais je sais le faire et je le ferais (promis)

c'est l'entreprise qui a trouvé sympa de faire un header fixe... je veux bien croire que c'est discutable, mais bon je fais ce qu'on me demande ^^

des sites comme http://limpid.nl/lab/css/fixed/header ou encore http://css.alsacreations.com/modeles/modele13.htm arrivent à faire fonctionner ce principe sous IE, mais moi dès que j'essaye de reprendre leur script avec mes flashs et mes boutons tout par en... travers

donc voila non c'est pas indispensable, mais bon tant qu'à faire autant faire plaisirs aux chefs

merci !!!