Help - Menu CSS sous Joomla - HTML/CSS - Programmation
Marsh Posté le 10-06-2009 à 11:45:39
Bonjour, Étant novice sur Joomla, enfin la en l'occurrence, juste un problème de CSS à priori...je viens vous demander de l'aide. Voila mon souci, suite à une MAJ, mon menu n'est plus aligné verticalement. Voici l'explication en image, qui sera certainement plus compréhensible... Voici ce que je voudrais avoir : Voici ce que j'ai actuellement : J'ai essayé de bidouiller la CSS du menu mais j'ai vraiment pas trouvé d'où cela pouvait venir... Je mets ici la feuille de style du menu si ça peut vous parler...moi qui suis archi novice...ça me parle autant que du chinois...: .nav, .nav * { margin:0; padding:0; } #horiz-menu { position: relative; margin: 0; font-size: 10px; text-transform:uppercase; font-weight: bold; } #horiz-menu ul { list-style: none; margin: 0; padding: 0; } #horiz-menu li { display: block; float: left; margin: 0 4px 0 0; padding: 0; background: none; } #horiz-menu li span { display: block; float: left; } #horiz-menu a { text-decoration: none; display: block; float: left; height: 39px; line-height: 38px; padding: 0px 10px; color: #424242; } #horiz-menu a:hover { text-decoration: none!important; } #horiz-menu li:hover, #horiz-menu li.sfHover { background: none; } #horiz-menu li li { margin: 0; } div#horiz-menu li li span, div#horiz-menu li.active li span, div#horiz-menu li:hover li span { background:none; } .nav { line-height:1.0; float:left; margin-bottom:1.5em; position: relative; } .nav ul { padding: 0; } .nav li { float:left; list-style:none; position:relative; } .nav li li a { display:block; padding: 0; text-decoration:none; background-image: none; float:none; width:159px; } div#horiz-menu li li a { height: 28px; line-height: 28px; } div#horiz-menu li:hover li, div#horiz-menu li.sfHover li, div#horiz-menu li.active:hover li, div#horiz-menu li.active.sfHover li, div#horiz-menu li:hover li span, div#horiz-menu li.sfHover li span { background-image: none; } div#horiz-menu li:hover li a, div#horiz-menu li.sfHover li a, div#horiz-menu li.active:hover li a, div#horiz-menu li.active.sfHover li a { background-image: none; } .nav li ul { float:none; left:-999em; position:absolute; width: 179px; z-index: 100; } .nav li:hover ul, .nav li.sfHover ul { left:0px; top: 39px; } .nav li:hover li ul, .nav li.sfHover li ul, .nav li li:hover li ul, .nav li li.sfHover li ul, .nav li li li:hover li ul, .nav li li li.sfHover li ul { top:-999em; } .nav li li:hover ul, .nav li li.sfHover ul, .nav li li li:hover ul, .nav li li li.sfHover ul, .nav li li li li:hover ul, .nav li li li li.sfHover ul { left: 179px; top:0px; width: 179px; } .nav li li { position: relative; float:none; width: 179px; } D'avance merci pour votre aide...qui serait bien évidemment plus qu'utile pour moi !
Make sure you enter the(*)required information where indicate.HTML code is not allowed
Marsh Posté le 10-06-2009 à 11:45:39
Bonjour,
Étant novice sur Joomla, enfin la en l'occurrence, juste un problème de CSS à priori...je viens vous demander de l'aide.
Voila mon souci, suite à une MAJ, mon menu n'est plus aligné verticalement.
Voici l'explication en image, qui sera certainement plus compréhensible...
Voici ce que je voudrais avoir :
Voici ce que j'ai actuellement :
J'ai essayé de bidouiller la CSS du menu mais j'ai vraiment pas trouvé d'où cela pouvait venir...
Je mets ici la feuille de style du menu si ça peut vous parler...moi qui suis archi novice...ça me parle autant que du chinois...:
.nav,
.nav * {
margin:0;
padding:0;
}
#horiz-menu {
position: relative;
margin: 0;
font-size: 10px;
text-transform:uppercase;
font-weight: bold;
}
#horiz-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#horiz-menu li {
display: block;
float: left;
margin: 0 4px 0 0;
padding: 0;
background: none;
}
#horiz-menu li span {
display: block;
float: left;
}
#horiz-menu a {
text-decoration: none;
display: block;
float: left;
height: 39px;
line-height: 38px;
padding: 0px 10px;
color: #424242;
}
#horiz-menu a:hover {
text-decoration: none!important;
}
#horiz-menu li:hover,
#horiz-menu li.sfHover {
background: none;
}
#horiz-menu li li {
margin: 0;
}
div#horiz-menu li li span,
div#horiz-menu li.active li span,
div#horiz-menu li:hover li span {
background:none;
}
.nav {
line-height:1.0;
float:left;
margin-bottom:1.5em;
position: relative;
}
.nav ul {
padding: 0;
}
.nav li {
float:left;
list-style:none;
position:relative;
}
.nav li li a {
display:block;
padding: 0;
text-decoration:none;
background-image: none;
float:none;
width:159px;
}
div#horiz-menu li li a {
height: 28px;
line-height: 28px;
}
div#horiz-menu li:hover li,
div#horiz-menu li.sfHover li,
div#horiz-menu li.active:hover li,
div#horiz-menu li.active.sfHover li,
div#horiz-menu li:hover li span,
div#horiz-menu li.sfHover li span {
background-image: none;
}
div#horiz-menu li:hover li a,
div#horiz-menu li.sfHover li a,
div#horiz-menu li.active:hover li a,
div#horiz-menu li.active.sfHover li a {
background-image: none;
}
.nav li ul {
float:none;
left:-999em;
position:absolute;
width: 179px;
z-index: 100;
}
.nav li:hover ul,
.nav li.sfHover ul {
left:0px;
top: 39px;
}
.nav li:hover li ul,
.nav li.sfHover li ul,
.nav li li:hover li ul,
.nav li li.sfHover li ul,
.nav li li li:hover li ul,
.nav li li li.sfHover li ul {
top:-999em;
}
.nav li li:hover ul,
.nav li li.sfHover ul,
.nav li li li:hover ul,
.nav li li li.sfHover ul,
.nav li li li li:hover ul,
.nav li li li li.sfHover ul {
left: 179px;
top:0px;
width: 179px;
}
.nav li li {
position: relative;
float:none;
width: 179px;
}
D'avance merci pour votre aide...qui serait bien évidemment plus qu'utile pour moi !