11550 sujets

JavaScript, DOM et API Web HTML5

Probleme menu déroulant Jquery/images

yop yop, salut à tous, voici mon soucis, j'ai un petit soucis avec un menu déroulant, quand j'insère un lien ou une image dans mon menu il les colles les un au dessus des autres hors ça m'ennuies grandement, les liens ou images sont automatiquement pilotés par les css des menus voici le code :

a écrit :


<ul class="navigation">
<li class="toggleSubMenu"><span>PICS</span>

<ul class="subMenu">
<div class="contenumenu" id="contenumenu"><a href="../imgs/docs/02.jpg"rel="lightbox-votrecat"><img src="../imgs/aperçus/02a.jpg""/>
</a><a href="../imgs/docs/55dc7c46.jpg" rel="lightbox-votrecat"><img src="../imgs/aperçus/03a.jpg"floating: left/></a></div>

</ul>



quelqu'un pour m'aider ? T_T
Voici les CSS ainsi que les JS, j'ai un slimbox en plus du menu accordéon mais j'avais dèja le soucis avant que j'intègre slimbox

:

a écrit :



<script type="text/javascript" src="jquery-1.6.1.js"></script>

<script type="text/javascript" src="../slimbox-2.04/js/slimbox2.js"></script>
<link rel="stylesheet" href="../slimbox-2.04/css/slimbox2.css" type="text/css" media="screen" />

<script type="text/javascript">
<!--
$(document).ready( function () {

$(".navigation ul.subMenu").hide();

$(".navigation li.toggleSubMenu span").each( function () {

var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;


$(".navigation li.toggleSubMenu > a").click( function () {

if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal");
}

else {
$(".navigation ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideDown("normal");
}

return false;
});


} ) ;
// -->
</script>


<style type="text/css">
<!--

body {
background: url(../bg_body6.jpg);
background-position: center top;
background-repeat: repeat-y;
background-color: e0e0e0;
}
.banniere {
height: 240px;
width: 980px;
margin: 0 auto;
margin-top: 0px;
background-repeat: no-repeat;
background-image: url(banniere_monkeyBIZ2.png);
background-color: #FFF
}

.container {
width: 940px;
margin: 0 auto;
margin-top: 5px;
padding: 10px;
}
#maincontent {
width: 990px;
margin: 0 auto;
background-image: url(imgs/pix.png);
line-height: 14pt;
color: #0E0F38;
font-family: Arial, Helvetica, sans-serif;
height: auto;
min-height: 600px;
}
.navigation {
margin: 0;
padding: 0;
list-style: none;
background: #FFF;
color:#FFF;
width: 780px;
font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
display: block;
padding: 4px 10px;
color:#FFF;
text-decoration: none;
background: #F60 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
text-decoration: underline;
}
.navigation .subMenu {
background: #FFF url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #FFF;
}
.navigation ul.subMenu a {
width: 100px;
background-color: #FFF;
padding-top: 0px;
color: #000;
}
.menus {
width: 780px;
margin: 0px 80px;
}
.text {
margin: 0;
padding: richt 20px left 20px;
}

#container #menus .navigation .toggleSubMenu .subMenu p {
color: #000;
}
#footer {
width: 940px;
padding: 0px 10px;
height: 70px;
margin: 0 auto;
margin-top: 15px;
color:#F60
font-size: 12px;
color: #DEDEDE;
}
#verticale {
width: 950px;
background-color:#000;
margin: 0 auto;
height: 100px;
position: absolute;
left: 39px;
top: 1104px;
}
#contenumenu {
padding: 0px;
}
</style>

Bonjour,

Pourrais-tu ajouter le css correspondant stp? (et si possible un lien vers un exemple en ligne)

En attendant, une première remarque sur ton sous menu: si tu fais une liste, les éléments devraient être des <li>, et pas des <div> (çà corrigera pas le problème à priori, mais ce sera plus cohérent), et ferme aussi les balises <li>.

edit: merci pour le css ^^ 

<a href="../imgs/docs/02.jpg"rel="lightbox-votrecat"><img src="../imgs/aperçus/02a.jpg""/>


il y a un " en trop à la fin.

<img src="../imgs/aperçus/03a.jpg"floating: left/>


que fait le floating:left en plein milieu d'une balise html? si tu veux l'appliquer à cette élément, ajoute le au css, ou mets le dans un attribut style:

<img src="../imgs/aperçus/03a.jpg" style="floating: left"/>

Modifié par tilsitt (12 Sep 2011 - 14:06)
<script type="text/javascript" src="jquery-1.6.1.js"></script>


est-ce que tu as bien mis le fichier jquery correspondant dans ton arborescence? en l'ajoutant, çà marche chez moi.
ouuuups je suis passé à coté d'un de tes comms désolé Smiley ohwell

a écrit :

En attendant, une première remarque sur ton sous menu: si tu fais une liste, les éléments devraient être des <li>, et pas des <div> (çà corrigera pas le problème à priori, mais ce sera plus cohérent), et ferme aussi les balises <li>.


Justement avant elles étaient dans des listes, c'est après que j'ai tenter de le mettre dans des balise div pour voir si je pouvais les gérer indépendamment des autres css mais rien n'y fait.
voilà le code que j'ai écrit à l'arrache pour tester (j'ai laissé les div dans la liste pour le test, mais c'est à changer Smiley cligne ).

index.html:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>

<script type="text/javascript" src="../slimbox-2.04/js/slimbox2.js"></script>
<link rel="stylesheet" href="../slimbox-2.04/css/slimbox2.css" type="text/css" media="screen" />

<script type="text/javascript">
<!--
$(document).ready( function () {

$(".navigation ul.subMenu").hide();

$(".navigation li.toggleSubMenu span").each( function () {

var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;


$(".navigation li.toggleSubMenu > a").click( function () {

if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal");
}

else {
$(".navigation ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideDown("normal");
}

return false;
});


} ) ;
// -->
</script>


<style type="text/css">
body {
background: url(../bg_body6.jpg);
background-position: center top;
background-repeat: repeat-y;
background-color: e0e0e0;
}
.banniere {
height: 240px;
width: 980px;
margin: 0 auto;
margin-top: 0px;
background-repeat: no-repeat;
background-image: url(banniere_monkeyBIZ2.png);
background-color: #FFF
}

.container {
width: 940px;
margin: 0 auto;
margin-top: 5px;
padding: 10px;
}
#maincontent {
width: 990px;
margin: 0 auto;
background-image: url(imgs/pix.png);
line-height: 14pt;
color: #0E0F38;
font-family: Arial, Helvetica, sans-serif;
height: auto;
min-height: 600px;
}
.navigation {
margin: 0;
padding: 0;
list-style: none;
background: #FFF;
color:#FFF;
width: 780px;
font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
display: block;
padding: 4px 10px;
color:#FFF;
text-decoration: none;
background: #F60 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
text-decoration: underline;
}
.navigation .subMenu {
background: #FFF url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #FFF;
}
.navigation ul.subMenu a {
width: 100px;
background-color: #FFF;
padding-top: 0px;
color: #000;
}
.menus {
width: 780px;
margin: 0px 80px;
}
.text {
margin: 0;
padding: richt 20px left 20px;
}

#container #menus .navigation .toggleSubMenu .subMenu p {
color: #000;
}
#footer {
width: 940px;
padding: 0px 10px;
height: 70px;
margin: 0 auto;
margin-top: 15px;
color:#F60
font-size: 12px;
color: #DEDEDE;
}
#verticale {
width: 950px;
background-color:#000;
margin: 0 auto;
height: 100px;
position: absolute;
left: 39px;
top: 1104px;
}
#contenumenu {
padding: 0px;
}
</style>
</head>
<body>
<ul class="navigation">
	<li class="toggleSubMenu"><span>PICS</span>
	<ul class="subMenu">
		<div class="contenumenu" id="contenumenu">
			<a href="../imgs/docs/02.jpg"rel="lightbox-votrecat"><img src="../imgs/aperçus/02a.jpg"/></a>
			<a href="../imgs/docs/55dc7c46.jpg" rel="lightbox-votrecat"><img src="../imgs/aperçus/03a.jpg"/></a>
		</div>
	</ul>
</body>
</html>


mis dans un répertoire qui contient les fichiers suivants:

index.html
jquery-1.6.1.js

cela fonctionne bien. dsl d'insister là dessus, mais tu es sûr que jquery est au bon emplacement, et que le javascript est activé sur ton navigateur?
ouais il est placé au bon endroits et le java est activé sur mon navigateur

Merci pour l'aide ceci dit ( je ne t'avais pas remercié encore )
Modifié par Djizz (12 Sep 2011 - 15:26)
Sujet clos
Aller à