Aide Mouseover

Résolu
Sophie -  
 Sophie -
Bonjour,

J'ai un problème !
Je fais un site internet en html, csss et javascript dont le code est ci-dessous.
Ce site comprend une bannière (une photo) et en dessous une barre d'onglet ( Accueil / Les Marbrès / Découverte / Programmes et Tarifs / Info Pratiques ).
Encore en dessous je voudrais qu'il y ait une barre de "sous-onglet" qui s'affiche :
Lorsque l'on passe la souris (Mouseover) sur l'onglet "Les Marbrés" je voudrais qu'il y ait une barre qui s'affichent avec les sous-onglets "Presse / Histoire / Botanique".

Problème :
1/ Mes onglets se mettent les uns en dessous des autres ... pourquoi ?
2/ Le mouse over ne fonctionne pas : Les sous onglet restent tout le temps affichés.



Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Les marbrés de l'Espiadet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="css.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
event: 'mouseover'
});
});
</script>

</head>

<body>

<div class="MainContainer">

<div class="Clear"></div>


<div id="Header"></div>


<div id="Content">

<div id="tabs">
<div><a href="#tabs-1"><img src="Images/onglet-accueil1.png"></a></div>
<div><a href="#tabs-2"><img src="Images/onglet-marbrés1.png"></a></div>
<div><a href="#tabs-3"><img src="Images/onglet-decouverte1.png"></a></div>
<div><a href="#tabs-4"><img src="Images/onglet-tarifs1.png"></a></div>
<div><a href="#tabs-5"><img src="Images/onglet-info1.png"></a></div>

<div id="tabs-2"><img src="Images/onglet-histoire.png"></div>
<div id="tabs-2"><img src="Images/onglet-botanique.png"></div>
<div id="tabs-2"><img src="Images/onglet-presse.png"></div>
<div id="tabs-2"><img src="Images/onglet-rien.png"></div>
</div>

<div id="Colonne">

<div id="texte">
h,xhgg,vjfgjsfgxnvbnxxfj
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
LoremLipsum...
</div>
</div>


<div class="Clear"></div>

</div>

<div id="footer">

Les Marbrés de l'Espiadet - 05 62 00 00 00
</div>

<div id="fond"></div>

</div>

</body>
</html>




Code CSS :


body {
background-color: #E4E4E4;
margin: 0px;
padding: 0px;
}

.MainContainer {
width: 800;
padding-top: 75px;
}

#Header {
background-image: url(Images/bandeau-header.png);
background-repeat: no-repeat;
height: 174px;
}

#Content {
background-image: url(Images/onglets-footer.png);
background-repeat: repeat-y;
}

#tabs{
float: left;
}

a {
color: #665900;
}

#Colonne {
width: 800px;
padding-bottom: 25px;
text-align: center;
}

#texte {
padding-top: 100px;
padding-bottom: 75px;
float: center;
}

.Clear {
clear: both;
}

#footer {
background-image: url(Images/footer.png);
background-repeat: no-repeat;
text-align: center;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
color: DarkKhaki;

}

#fond {
padding: 40px;
}


Merci de m'aider !

Sophie

2 réponses

Réponse 1 / 2
Azer_Ty Messages postés 104 Date d'inscription   Statut Membre Dernière intervention   60
 
Bonjour,

Je ne connais pas ce code javascript, il vaudrait mieux faire une boucle avec les éléments enfants de #tabs.
Sinon un exemple SANS js : https://marcarea.com/tuto/

Bonne journée,
0
Réponse 2 / 2
Sophie
 
Merci beaucoup pour votre aide, ça marche nickel.
0