28220 sujets

CSS et mise en forme, CSS3

Probleme avec IE & hover

Bonjour,

Problème 1

Feuilles de style :


#menu {
color: #FFFFFF;
font-size: 12px;
font-family: Arial;
height: 28px;
background-color: #75a2ce;
}

#menu li:first-letter {
font-size: 16px;
}

#menu li {
float: left;
display: block;
padding: 5px 25px 5px 25px;
border-left: 1px solid #C0C0C0;
height: 18px;
font-weight: bold;
color: #FFFFFF;
}

#menu li:hover {
background-color: #C0C0C0;
color: #000000;
}


Comme vous pouvez voir je dis que le <li> au survole doit être avec un arrier plan #C0C0C0 (cela ne fonctionne pas avec IE mais FX si)

Code XHTML

<div id="menu">
		<ul>
		<a href="#"><li>ORDINATEUR</li></a>
		<a href="#"><li>PC PORTABLE</li></a>
		<a href="#"><li>LOGICIEL</li></a>
		<a href="#"><li>CONSOLE</li></a>
		<a href="#"><li>JEUX</li></a>
		<a href="#"><li>LIVRE</li></a>
		</ul>
	</div>



Problème 2

Feuille de style

a:link {font-family: arial; text-decoration: none; color: #000000;}
a:visited {font-family: arial; text-decoration: none; color: #000000;}
a:active {font-family: arial; text-decoration: none; color: #000000;}
a:hover {font-family: arial; text-decoration: underline; color: #b15636; }

.....

#submenu a:link {color: #707070;}
#submenu a:visited {color: #707070;}
#submenu a:active {color: #707070;}
#submenu a:hover {color: #C0C0C0; }


Code XHTML

<div id="submenu">
		<a href="#">&gt;&gt; Accueil</a>
		<a href="#">&gt;&gt; Top Affaires</a>
		<a href="#">&gt;&gt; Paiement</a>
		<a href="#">&gt;&gt; Garanties</a>
	</div>


Il utilise les couleurs du "a:hover" et non du "#submenu a:hover" (avec IE mais FX ca marche)

Merci d'avance Smiley cligne
Modifié par Raynox (03 Dec 2005 - 12:50)
Salut,
Pour le problème numéro un, il me semble que c'est parce qu'Internet Explorer ne comprend pas l'attribut hover autre part que sur des <a> (putain, je parle mal).
Il faut donc créer une classe pour tes liens à l'intérieur des menus et non une classe pour ton menu.

De plus, (toujours pb numéro 1), je crois (je suis toujours très prudent) que ce n'est pas très juste d'imbriquer tes <li> dans tes <a>.

Bonne journée
Donc en fait je vois faire pour chaque <li> cela <li class="...">...</li>

Pour info mes <li> se transforme comme des cellules et comme je veux que toute la "cellule" soit clibable donc le <a> entre le <li>

Je vais essayer ce que tu m'as dit,

merci
J'ai essaye en mettant :

li:hover {
background-color: #C0C0C0;
color: #000000;
}

Normalement il devrait faire tout les <li> de la page ben non IE veut rien savoir et ca me saoule ce navigateur de m...
Probleme 1 resolu

j'ai mis des <a> (les <li> servaient a rien) et j'ai modifie le code comme cela :

CSS

#menu {
color: #FFFFFF;
font-size: 12px;
font-family: Arial;
height: 28px;
background-color: #75a2ce;
}

a.menu {
float: left;
padding: 5px 25px 5px 25px;
border-left: 1px solid #C0C0C0;
height: 18px;
font-weight: bold;
color: #FFFFFF;
}

a.menu:hover {
background-color: #C0C0C0;
color: #000000;
}


XHTML

<div id="menu">
		<a href="#" class="menu">ORDINATEUR</a>
		<a href="#" class="menu">PC PORTABLE</a>
		<a href="#" class="menu">LOGICIEL</a>
		<a href="#" class="menu">CONSOLE</a>
		<a href="#" class="menu">JEUX</a>
		<a href="#" class="menu">LIVRE</a>
	</div>


Merci Smiley cligne
Modifié par Raynox (03 Dec 2005 - 14:20)
Coucou,

Tout dépend ce que tu souhaites faire, mais sinon effectivement, strictement parlant le résultat sera le même pour toi avec ou sans les Listes, mais :

Petite discussion à ce sujet

Et si jamais tu souhaites conserver tes listes, le plus simple c'est de faire comme ça donc : 

li a {
display:block;
	text-decoration:none;
	color:#000;
}

li a:hover {
        padding-left:2px;
	color:#A0152B;
	text-decoration:underline overline;
        background-color:#F4F4F4;
}


Regarde d'abord si c'est bien ce que tu voulais faire :

Ici ou là
Ouais j'ai lu la discution, comme precise si y a pas de CSS les li ca peut etre bien pratique et surtout si on lance le site dans lynx (navigateur dans une console shell)

Mais a mon avis je vais laisser sans les li d'abord c'est pour un projet d'ecole ^^

Merci pour ton aide Thinkedou Smiley ravi


PS :
J'ai teste avec IE, FF, Opera mais pour netscape ton script exemple ne fonctionne pas Smiley eek
Modifié par Raynox (03 Dec 2005 - 14:37)
Ok,
Mais j'avais mis des exemples sympa quand même, c'est dommage Smiley cligne

Edit: ah euh, merde alors, désolé. Jenutilisejamaisnetscapeilestmoche.
Modifié par Thinkedou (03 Dec 2005 - 14:38)
Ah mais dis donc je m'insurge ! (je met les mains sur les hanches et je bouge la tête) :

ça marche très bien sur Netscape hey ho.

alors oui, si c'est netscape 5 ou ce genre de cochonneries... Smiley langue
ça fonctionne very well sur le 8.

Si un code aussi bateau que ça ne fonctionne pas sur le 7, et bien euh, je ne sais pas mais c'est problématique.
Ah y a le 8 Smiley eek , j'installe comme un malheureu le 7 mais bon ca c'est Netscape qui sait pas faire un site web Smiley lol


....

Mouah, c'est en anglais Smiley confus
Modifié par Raynox (03 Dec 2005 - 15:25)
Bonjour,

Les différentes versions de NS7.x sont basées la suite Mozilla version 1.0 à 1.7 dont elles reproduisent le moteur et le comportement.

NS8.x est basé sur Firefox 1.0 dont il reproduit le moteur et le comportement.

Cela fait une petite différence, surtout entre entre un NS7.0 et NS8 Smiley cligne
Sujet clos
Aller à