Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[CSS] Problème pour créer un menu.

3 réponses
Avatar
Frederic Bezies
Bonsoir.

Je suis en train de modifier mon site (histoire de le rendre plus
propre), et j'utilise un menu basé sur le code d'Eric Meyer.

Chacune des options du menu est affiché dans une option <li>, car
l'ensemble est affiché comme une liste.

Voici le code xhtml du menu :

<div id="menu">
<ol>
<li>Lien qui va bien</li>
[un petite dizaine d'entrée complémentaires]
</ol>
</div>

Pour mes CSS :

"[...]
ol {
padding-left: 5px;
list-style: none;
}
[...]
#menu {
position: absolute; /* Pour IE :( */
top: 7px;
left: 3px;
width: 195px;
height: auto;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
z-index: 100;
background-color: #D9D9D9;
border: thin outset #B3C7DC;
font-size: small;
}

/* truc pour que IE agisse correctement avec le menu, d'après le site de
Pascal Chevrel */

body > div#menu { /* pour que IE n'ennuie pas mozilla */
position:fixed;
}

/* maintenant, les styles de lien du menu */

#menu a {
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: transparent;
border-width: 0;
color: #691F1F;
margin-right: 15%;
}

#menu a:hover {
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: transparent;
border-width: 0;
color: #CC3300;
}

#menu a:visited {
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: transparent;
border-width: 0;
color: #CC33CC;
}"

En gros, en schémitisant sous IE j'ai un truc du style

| Option 1 |
| |
| Option 2 |

Et sous Gecko :

| Option 1 |
| Option 2 |

Ce qui est franchement moins lisible.

Une idée de dépannage pour que le menu soit lisible sous les deux ?

Merci :)

--
Frédéric Béziès - frederic.bezies@free.fr

Site Perso : http://frederic.bezies.free.fr/
Weblogs : http://frederic.bezies.free.fr/weblog/
http://perso.wanadoo.fr/frederic.bezies/
Fourre-tout : http://frederic.bezies.free.fr/pratique/

3 réponses

Avatar
Le Fou a ecrit :

Christian a écrit
>
> pour résoudre le problème, j'ai choisi de passer par [attribute] :
> #menu[id] {position : fixed } /*invisible à *tous* les IE */

Peux-tu m'expliquer ce que signifie #menu[id] ?
EL[id] signifie tout EL (élément html) qui comporte un attribut "id".
or #menu est déjà un "id".
Je ne comprends donc pas à quoi peut s'appliquer {position : fixed } dans ce
cas, par oposition à #menu {position : fixed }.
(mis-à-part le fait que ce n'est pas reconnu par IE).



Et ben ! c'est bien le but !
Que IE ne sache pas que ce id #menu est fixed.

Ce C.. d'IE ne sait même pas gérer des liens mis dans un fixed !
Tu parles d'un pratique pour un menu, si les liens y sont HS !

En tous cas sur Mac c'est comme ça. Sur PC, je n'ai touj pas réussi à savoir
mais vu le nombre de hacks qui hantent les couloirs du web pour palier
au fixed d'IE ça doit pas être fameux non plus !

--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Le Fou a ecrit :

Christian a écrit
>
> > Peux-tu m'expliquer ce que signifie #menu[id] ?
>
> donc pour faire propre :
> div[class=fixe] {position : fixed} /* dans la css */
> et dans le code :
> <div id="menu" class="fixe">
> c'est ça ?

Effectivement, là c'est logique ;-)
Mais ce que je voulais savoir c'est comment t'es venue cette idée de
#menu[id] et si c'était vraiment correct (valide ?) d'écrire ça.



C'est'y pas le truc "valide" de validator qui permet de tromper IE (Mac)
et d'ainsi le positionner en absolute pendant qu'il reste
en fixed pour les autres browsers qui savent gérer plus correctement
ce style

Rappel : des liens posés dans un fixed ==> avec IE Mac ça marche pô.

Rappel : un seul autre "truc" fonctionne pour IE Mac, mais ce coup-ci plus valide

#menu {
position: fixed; /* pour navigateur normal */
_position: absolute; /* pour IE */

--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Christian
le jeu., 22 janv. 2004 23:00:30 GMT, @SM écrivait sur
fr.comp.infosystemes.www.auteurs

Bon ! Alors ! pour finir ...
ce truc
#menu[id] ça marche ou ça marche pas ? pour absoluter le fixed avec IE



ça fonctionne et c'est validé par
http://jigsaw.w3.org/css-validator/

après,si tu veux une syntaxe nickel, tu peux aussi utiliser :

div[class=fixe] {position : fixed} /* invisible aux IE */

--
Christian (enlever le H de mon e-mail)
http://perso.wanadoo.fr/baluchiterium/