28173 sujets

CSS et mise en forme, CSS3

Eternel pb de positionnement IE/FF (menu déroulant avec image)

Bonjour,

je viens de mettre en place un menu déroulant CSS sur un site en développement (merci Suckerfish !), avec apparition d'une image au survole (au lieu d'un menu).
Tout est OK, sauf le positionnement de ces images sous IE.

Pour être très clair, je mets à disposition le site sur lequel je travail (j'ai juste remplacé les img par des couleurs unies, sinon tout est identique). Je vous propose de le voir avec Firefox, puis avec IE :

http://roger.breskovic.free.fr/faux_site/

et la feuille de style :

http://roger.breskovic.free.fr/faux_site/css/style_all.css

le pb étant les rectangles noirs décallés sur la droite avec IE...

Quelqu'un aurait-il une idée de la source du pb ?

merci d'avance !

PS : je suis pas très fier de mon code HTML... je tenterais de supprimer tout ou partie des tables par la suite - là je suis dans l'urgence.
Ce code est cependant "quasi-valide" HTML 4.0.1 transitionnal, sous reserve d'ajouter quelques atributs "ALT"...
Modifié par Breskovic (05 Jan 2007 - 18:45)
Merci masseuro

c'est parfait, ça marche!

Pour être précis (pour d'eventuelles personnes rencontrant le même pb) :
il faut bien ajouter 

#nav li{margin:0;padding:0;}


mais également supprimer l'information "with" dans cette class...

Dernière chose : si tu as le temps, il serait intéressant que tu m'expliques brièvement ta correction - c'est toujours mieux de comprendre ...

merci encore
Breskovic a écrit :
Merci masseuro

c'est parfait, ça marche!

Pour être précis (pour d'eventuelles personnes rencontrant le même pb) :
il faut bien ajouter 

#nav li{margin:0;padding:0;}


mais également supprimer l'information "with" dans cette class...

Dernière chose : si tu as le temps, il serait intéressant que tu m'expliques brièvement ta correction - c'est toujours mieux de comprendre ...

merci encore

- margin permet de gérer l'écart (extérieur) entre les bords des différentes balises de type 'bloc'
Exemples : margin: 5px; donnera un écart de 5 px tout autour de ta balise
margin: 5px 2px 3px 1px; donnera un écart en haut de 5px, à droite de 2px, en bas de 3px et à gauche de 1px (lecture dans le sens des aiguilles d'une montre en partant par le haut)
Tu peux utiliser également margin-top, margin-right,...

- padding permet de gérer l'écart (intérieur) entre le bord de ta balise et son contenu.
Exemples : padding: 5px; donnera un écart de 5 px entre le bord de la balise et son contenu
padding: 5px 2px 3px 1px; donnera un écart en haut de 5px, à droite de 2px, en bas de 3px et à gauche de 1px (lecture dans le sens des aiguilles d'une montre en partant par le haut) entre le contenu et le bord.
Tu peux utiliser également padding-top, padding-right,...

Ces deux propriétés n'ont pas la même valeur par défaut entre les navigateur.
Pour FF, la valeur par défaut est 0
Pour IE, elle est égal à la largeur d'un caractère : 1em

Si tu omets d'indiquer ces propriétés tu risque d'avoir des affichages différents d'un navigateur à un autre.
Bonjour à tous, et bonne année !

je reviens un peu sur le sujet... le menu fonctionne bien, et je voudrais pouvoir l'utiliser differement, pour une autre application : une gallerie d'image qui permet l'affichage de l'image entière au survol de son icône, en positionnant ces images toujours au même endroit.

Je reprends donc cette partie de ma CSS :

#nav li ul { 
	position: absolute;
	width: 74px;
	left: -999em; 
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}


et je passe l'affichage ":hover" en position absolue, comme ceci :




#nav li ul { 
	position: absolute;
	width: 74px;
	left: -999em; 
}

#nav li:hover ul, #nav li.sfhover ul { 
	position: absolute;
	width: 74px;
	left: 100px; /* par ex */


cela fonctionne bien avec Firefox, mais les images n'apparaissent carrément pas du tout avec IE ... et une fois de plus je vois vraiment pas quoi faire.

Merci d'avance à ceux qui voudrons bien se pencher sur mon pb.
Administrateur
Hello, puisqu'il s'agit d'une question de mise en page (CSS) et non de structure XHTML, je déplace dans le bon salon...
Sujet clos
Aller à