18041 sujets

Questions générales et questions de débutants

Problème affichage sous menus

Bonjour,

Je n'ai pas beaucoup le temps là, mais je peux déjà te dire que sous Firefox (j'ai la version 3.6.16), il n'y a pas ce problème. De plus, toujours sous FF, ce qui suit le menu est centré sur la page, tandis qu'il reste à gauche sous IE8.
Une des raisons est sans doute l'absence de doctype à la page web. Cela devrait corriger le problème du centrage sous IE8.
Pour le menu, c'est sans doute peu de chose, mais je suis pressé ...

Cordialement
Bonjour,

En apportant les modifications suivantes dans la feuille de style SpryMenuBarHorizontal.css , le menu s'affiche correctement sous IE8 et FF 3.6.16 (autres versions/navigateurs non testé(e)s) :

ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.3em;
	position: absolute;
	left: -1000em;
	background-color: #999;
	/*top: 26px;*/
}

et
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	/*left: auto;*/
	left: 0;
	top: 0;
	background-color: #000;
}

P.S.: ton code source n'est pas très "propre" Smiley cligne

Cordialement
Bonjour et merci pour ton aide,
Mais çà ne marche toujours pas !
Je vais aussi de mon côté continuer à regarder;
Mais si tu peux jeter un coup d'oeil, ce serait sympa !
RF
Cela fonctionne pourtant parfaitement sous les 2 configurations que j'ai citées.
J'ai même fait un essai en ligne depuis mon site : (supprimé) Smiley smile
Avec quel(s) navigateur(s) (+ versions) travailles-tu?
Modifié par lddsoft (26 Jul 2011 - 10:43)
Bonsoir,
effectivement par to site çà marche.
Je travaille avec IE version 7.0.6000.16809;
Je vais continuer à chercher mais si tu as une idée,
je suis preneur !
Merci d'avance
Voici le dernier code introduit :
ul.MenuBarHorizontal ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.3em;
position: absolute;
background-color: #999;
top: 26px;
left: -1000em;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
ul.MenuBarSubmenuVisible
{
left: auto;
background-color: #999;
clip: rect(auto,auto,auto,auto);
margin-top: -5%;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 95%;
}
Merci,
RF
salut
chez moi le menu a bien un souci, tu dois enlever la marge gauche ici :
ul.MenuBarHorizontal ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.3em;
position: absolute;
background-color: #999;
top: 26px;
left: -1000em;
margin-top: -5;
margin-right: 0;
margin-bottom: 0;
/*margin-left: 95%;*/
}

ça devrait marcher Smiley smile
@ced1870 : quand tu dis
ced1870 a écrit :
chez moi le menu a bien un souci,...

ça veut dire quoi ? Quelle configuration ?
Modifié par lddsoft (31 Mar 2011 - 14:47)
lddsoft a écrit :
@ced1870 : quand tu dis

ça veut dire quoi ? Quelle configuration ?

ça veut dire que quand j'ai regardé le site http://www.amis-st-jacques-tours.org/brouillon/ les sous menus étaient décalés vers la droite.
Maintenant la propriété de marge que j'ai citée a été enlevée des css et le menu fonctionne correctement Smiley smile
@ced1870 : nous sommes bien d'accord, mais ma question portait sur ta configuration (OS, navigateur, version etc.) Smiley rolleyes
Bonjour,
J'ai "pompé" une structure de CSS dans l'aide d'Adobe que j'ai ensuite modifiée et çà va mieux :

http://www.amis-st-jacques-tours.org/brouillon/

Mais j'ai encore un souci sur un sous-menu de sous-menu qui ne s'affiche pas bien : sur l'onglet MEDIATHEQUE, un sous-menu BIBLIOGRAPHIE qui possède lui-même un sous-menu qui s'affiche tout à droite.
Je me demande où est l'anomalie. Je vais continuer à chercher à moins que tu saches où est l'erreur
Voici le code :
========================
@charset "UTF-8";
/*Menu Bar styling classes*/
ul.MenuBarHorizontal{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
height: auto;
background-color: #999;
}
ul.MenuBarActive{
z-index: 1000;
background-color: #666;
}
ul.MenuBarHorizontal li{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
background-color: #999;
}
ul.MenuBarHorizontal ul{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.3em;
position: absolute;
background-color: #999;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
left: auto;
background-color: #999;
clip: rect(auto,auto,auto,auto);
}
ul.MenuBarHorizontal ul li{
width: 8.2em;
background-color: #999;
}
ul.MenuBarHorizontal ul ul{
position: absolute;
margin: -5% 0 0 95%;
background-color: #999;
left: 95%;
top: -5%;
right: 0px;
bottom: 0px;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
left: auto;
top: 0;
background-color: #000;
}
ul.MenuBarHorizontal ul{
border: 1px solid #CCC;
background-color: #CCC;
}
ul.MenuBarHorizontal a{
display: block;
cursor: pointer;
background-color: #E8DF88;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe{
position: absolute;
z-index: 1010;
}
@media screen, projection{
ul.MenuBarHorizontal li.MenuBarItemIE{
display: inline;
f\loat: left;
background: #FFF;
}
}
==========================================================
MERCI POUR L'AIDE
Sujet clos
Aller à