Bonjour,
Je suis en train de créer un site, qui touche à sa fin, si n'il avait pas ce problème: mes éléments de menus, qui apparaissent au survol de leur rubrique sont devenus "indéplaçables".
Je m'explique, j'ai crée un menu en javascript, où au survol des logos, des sous-menus apparaissent, un menu déroulant quoi.
J'ai déplacé souvent ces logos, donc il a fallu repositionner les éléments plusieurs fois. Et dernièrement, alors que je n'ai changé que les photos, les liens et l'image de fond, je n'arrive plus à repositionner ces éléments.
J'ai cherché pendant des heures et je ne comprends pas pourquoi ça ne marche plus. Du coup je suis en panique car je dois rendre le projet ("créer un site en html/css") à mon prof lundi, et si le menu ne marche pas alors là...
Si vous pouviez m'aider sur ce coup ça serait vraiment cool, parce que je me couche pas tant que j'ai pas régler ce problème !! ;)
Le site se trouve provisoirement à l'adresse
https://cv-suspension-dd24.key-systems.net/
Je vous mets le code html puis css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="icon" type="image/gif" href="/people.gif"/>
<!-- Pour IE --><link rel="shortcut icon" type="image/x-icon" href="/people.ico"/> <!-- Ne marche pas en local -->
<title>Solidaires Oise</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<meta name="description" content="Bienvenue sur le site du syndicat Solidaire Oise" />
<meta name="Keywords" content="syndicat militant politique prud'hommes droit travail privé afpa sud" />
<meta name="author" content="Audrey Carpentier"/>
<meta name="owner" content="Audrey Carpentier"/>
<meta name="Reply-to" content="" />
<meta name="expires" content="never"/>
<meta name="robots" content="all"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="refresh" content="60; URL=https://cv-suspension-dd24.key-systems.net/ " />
<link rel="stylesheet" media="screen" type="text/css" title="DesignCSS" href="DesignCSS2.css"/>
<script type="text/javascript">
function f_activer(v_id) {
document.getElementById(v_id).style.visibility = "visible";
}
function f_desactiver(v_id) {
document.getElementById(v_id).style.visibility = "hidden";
}
</script>
</head >
<body >
<div id="global">
<h1>Bienvenue sur le site Solidaires Oise</h1>
<div id="contenu">
<!-- Id vide pour faire un lien sur le logo central -->
<a href="https://solidaires.org/ " id="logo_centre" title="Aller sur le site Solidaires.org"></a>
<div id="rubrique">
<div id="lien1" class="navs" onmouseover="f_activer('menu1')" onmouseout="f_desactiver('menu1');"></div> <!-- SUD PTT-->
<div id="lien2" class="navs" onmouseover="f_activer('menu2')" onmouseout="f_desactiver('menu2');"></div> <!-- SUD EDUC-->
<div id="lien3" class="navs" onmouseover="f_activer('menu3')" onmouseout="f_desactiver('menu3');"></div> <!-- SUD RAIL-->
<div id="lien4" class="navs" onmouseover="f_activer('menu4')" onmouseout="f_desactiver('menu4');"></div> <!-- SNUI-->
<div id="lien5" class="navs" onmouseover="f_activer('menu5')" onmouseout="f_desactiver('menu5');"></div> <!-- SUD CHIMIE-->
<div id="lien6" class="navs" onmouseover="f_activer('menu6')" onmouseout="f_desactiver('menu6');"></div> <!-- SUD CAN-->
<div id="lien7" class="navs" onmouseover="f_activer('menu7')" onmouseout="f_desactiver('menu7');"></div> <!-- SUD TRAVAIL-->
<div id="lien8" class="navs" onmouseover="f_activer('menu8')" onmouseout="f_desactiver('menu8');"></div> <!-- SUD FPA-->
</div>
<div id="menu">
<div id="menu1" class="menus" onmouseover="f_activer('menu1')" onmouseout="f_desactiver('menu1');">
<div class="lienblock"><a href="sud_ptt/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_ptt/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_ptt/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu2" class="menus" onmouseover="f_activer('menu2')" onmouseout="f_desactiver('menu2');">
<div class="lienblock"><a href="sud_educ/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_educ/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_educ/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu3" class="menus" onmouseover="f_activer('menu3')" onmouseout="f_desactiver('menu3');">
<div class="lienblock"><a href="sud_rail/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_rail/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_rail/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu4" class="menus" onmouseover="f_activer('menu4')" onmouseout="f_desactiver('menu4');">
<div class="lienblock"><a href="snui/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="snui/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="snui/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu5" class="menus" onmouseover="f_activer('menu5')" onmouseout="f_desactiver('menu5');">
<div class="lienblock"><a href="sud_chimie/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_chimie/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_chimie/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu6" class="menus" onmouseover="f_activer('menu6')" onmouseout="f_desactiver('menu6');">
<div class="lienblock"><a href="sud_can/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_can/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_can/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu7" class="menus" onmouseover="f_activer('menu7')" onmouseout="f_desactiver('menu7');">
<div class="lienblock"><a href="sud_travail/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_travail/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_travail/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
<div id="menu8" class="menus" onmouseover="f_activer('menu8')" onmouseout="f_desactiver('menu8');">
<div class="lienblock"><a href="sud_fpa/actualites.html" class="lien">Actualités</a><br /></div>
<div class="lienblock"><a href="sud_fpa/contact.html" class="lien">Contact</a><br /></div>
<div class="lienblock"><a href="sud_fpa/qui_sommes_nous.html" class="lien">Qui sommes-nous?</a></div>
</div>
</div>
</div>
<br />
<div class="menu_fixe">
<p><a href="actualites.html">ACTUALITES</a> | <a href="contact.html">CONTACT</a> | <a href="qui_sommes_nous.html">QUI SOMMES-NOUS?</a></p>
</div>
<div class="pied_de_page">
<p><a href="conditions_dutilisation.html" title="lire les termes">Conditions d'utilisation</a> ¤ <a href="plan_du_site.html" title="plan du site">Plan du site</a> ¤
Copyright "SUD AFPA" 2008/2009 ¤ Audrey Carpentier
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;height=31;width=88" src="http://www.w3.org/Icons/valid-xhtml10 "
title="Valid XHTML 1.0 Strict" alt="Valid XHTML 1.0 Strict" /></a>
<a href="http://jigsaw.w3.org/css-validator/ ">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss "
title="CSS Valide !" alt="CSS Valide !" /></a>
</p>
</div>
</div>
</body>
</html>
Et le CSS:
h1 {
color: #262626;
margin-left: 300px;
margin-top: 20px;
margin-bottom:75px;
font-style: italic;
}
/* Couleurs: http://colorblender.com/index.asp?preloadblend=3887D924578CD9C1388C6B24262626D9D9D9*/
/* Liens*/
a:link {color: #8C6B24;} /*couleur du lien */
a:visited {color: #8C6B24;} /*déjà cliqué*/
a:focus {color: #24578C;} /*naviguer sur un site avec le clavier*/
a:active {color: #24578C;} /*couleur si le lien est cliquée*/
a:hover {color: #D9C138;} /*survol */
body {
width: 100%; /* En pourcentage pour que la largeur soit extensible selon la résolution */
margin: auto; /* Pour centrer notre page */
margin-top: 20px;/* Pour éviter de coller avec le haut de la fenêtre du navigateur */
margin-bottom:30px; /* Idem pour le bas du navigateur */
background-color: #E0E4EA;
color:#8C6B24;
font-family: Calibri,Trebuchet MS,Arial,Helvetica,sans-serif;
font-size: 15px;
}
/* Div qui contient le menu+sous-menu + logo central*/
#contenu {
position:relative;
list-style:none;
padding: 0px;
margin: 0px;
color:black;
font-size: 18px;
text-align: justify;
width:600px;/* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond */
height:480px;
margin-left: -300px; /* mettre à la moitié de la largeur*/
margin-top: 80px ;
left: 50%;
background: url("Photos/Logo_centre.png") no-repeat;/* On definit le background de la balise */
}
#contenu a {
position:absolute;
display:block;
font: bold 13px Calibri,Arial,Helvetica,sans-serif;
color:#000000;
}
#logo_centre {
position:absolute;
height: 180px; /* hauteur */
width: 200px; /* largeur */
margin-left: 200px;
margin-top: 150px;
}
/* Div qui contient les logos du menu*/
#rubrique {
position: absolute;
display:block;
}
/* Div des sous-menu qui apparaissent au survol d'un logo*/
#menu {
position:absolute;
}
.menus {
position: absolute;
float:left;
width:100px;
height:100px;
background-color: #D9D9D9;
border-right:2px ridge #24578C;
border-bottom:2px ridge #24578C;
visibility: hidden;
padding: 14px 0px 0px 15px;
}
/*Pour enlever la bordure bleu autour des images-liens*/
a img {
border: 0;
}
.navs {
position: absolute;
width:156px;
height:114px;
}
.lienblock {
border-top:2px solid #3887D9;
width:85px;
}
.lien {
color:#000000;
text-decoration:none;
}
/* Cas par cas*/
#lien1 { /*SUD PTT*/
top: 20px;
left: -60px;
background: url(Photos/wow.jpg) no-repeat;
}
#menu1 { /*SUD PTT*/
top: 50px;
left: 20px;
}
#lien2 { /*SUD EDUC */
top:-20px;
left:220px;
background: url(Photos/wow.jpg) no-repeat;
}
#menu2 { /*SUD EDUC */
top: 100px;
left: 350px;
}
#lien3 { /*SUD RAIL */
top: 20px;
left:500px;
background: url(Photos/sud_rail_copie.jpg) no-repeat;
}
#menu3 { /*SUD RAIL */
top: 150px;
left: 560px;
}
#lien4 { /*SNUI */
top:190px;
left:650px;
background: url(Photos/snui_copie.jpg) no-repeat;
}
#menu4{ /*SNUI */
top: 350px;
left: 510px;
}
#lien5 { /*SUD CHIMIE*/
top:350px;
left:500px;
background: url(Photos/sud_chimie_copie.jpg) no-repeat;
}
#menu5{ /*SUD CHIMIE*/
top:500px;
left:410px;
}
#lien6 { /*SUD CAN */
top:420px;
left:220px;
background: url(Photos/wow.jpg) no-repeat;
}
#menu6 { /*SUD CAN */
top:600px;
left:150px;
}
#lien7 { /*SUD TRAVAIL*/
top:350px;
left: -60px;
background: url(Photos/sud_tas_copie.jpg) no-repeat;
}
#menu7 { /*SUD TRAVAIL*/
top:450px;
left:-30px;
}
#lien8 { /*SUD FPA*/
top:190px;
left:-250px;
background: url(Photos/wow.jpg) no-repeat;
}
#menu8 { /*SUD FPA*/
top:300px;
left:-185px;
}
.menu_fixe
{
position: absolute;
/*margin-left: 430px;*/
left: 40%;
margin-top: -155px;
z-index: 2;
}
.pied_de_page
{
margin-top: 350px;
text-align: center;
font-size: 80%;
border: 1px solid #24578C;
}
Merci d'avance !!
Afficher la suite
