Bonjour !
J'aurai besoin d'aide sur la mise en forme de mon site.
J'ai un menu graphique que j'essaye desespéremment de mettre à gauche de mon conteneur centré......tout en centrant le tout bien evidemment...
J'essaye de mettre mon menu dans la partie gauche de mon conteneur mais sans succes....
Aussi, mon menu fonctionne trés bien lorsqu'il est seul sur une page, mais des que je l'insere quelque part d'autre, les images de survol ne fonctionne pas correctement...
Merci de votre aide !!
J'aurai besoin d'aide sur la mise en forme de mon site.
J'ai un menu graphique que j'essaye desespéremment de mettre à gauche de mon conteneur centré......tout en centrant le tout bien evidemment...
J'essaye de mettre mon menu dans la partie gauche de mon conteneur mais sans succes....
Aussi, mon menu fonctionne trés bien lorsqu'il est seul sur une page, mais des que je l'insere quelque part d'autre, les images de survol ne fonctionne pas correctement...
<!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>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 10px 0;
padding: 0;
text-align: center;
background: #AFA99B;
font: 70% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
margin-left: 5%;
margin-right: 5%;
top: 0px;
left: 0;
z-index:100;
width: 90%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 20%;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #082da3;
border: 0.5px solid white;
color: white;
}
#menu dd {
display: none;
border: 1px solid #082da3;
}
#menu li {
text-align: left;
color: #fff;
}
#menu li a{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background-color: #082da3;
color: #eee;
}
#menuimage ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
#menuimage ul {
position: relative; /* positionnement pour IE5 et IE5.5 */
left: 20%;
top: 50px;
background: transparent url(image.gif) top left no-repeat; /* arrière-plan général du menu */
height: 249px;
width: 319px;
padding-top: 70px;
text-align: center;
}
#menuimage {
position: absolute;
width: 320px;
margin-left: 0;
margin-right: 0;
}
#menuimage li {
display: inline; /* correction pour IE5 et IE5.5 */
}
#menuimage li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 319px;
line-height: 30px; /* hauteur de ligne pour éviter les paddings */
color: #fff;
font-size: 20px;
font-family: Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
}
#menuimage li a:hover {
color: #43271B;
background: transparent url(image.gif) top left no-repeat;
}
a#menuimage1:hover {
background-position: 0% -390px;
}
a#menuimage2:hover {
background-position: 0% -420px;
}
a#menuimage3:hover {
background-position: 0% -450px;
}
a#menuimage4:hover {
background-position: 0% -480px; /* décalage de l'arrière-plan pour chaque bouton */
}
a#menuimage5:hover {
background-position: 0% -510px;
}
a#menuimage6:hover {
background-position: 0% -540px
}
#conteneur
{
position: relative; /* on positionne le conteneur */
width: 650px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#gauche {
float:left;
width: 320px;
margin-left: 0;
margin-right: 0;
}
#site {
position: relative;
z-index: 1;
top : 10px;
left : 10px;
color: #000;
width:100%;
margin-left: auto;
margin-right: auto;
margin: 10px;
padding: 10px;
text-align: left;
background-color:#AFA99B;
border: 2px solid #7b8d9e;
}
#footer
{
margin: 0;
padding-right: 10px;
line-height: 30px;
text-align: center;
}
-->
</style>
</head>
<body>
<div id="gauche">
<ul>
<li><a id="menuimage1" title="menuimage1" accesskey="1" href="#">Menu 1</a></li>
<li><a id="menuimage2" title="menuimage2" accesskey="2" href="#">Menu 2</a></li>
<li><a id="menuimage3" title="menuimage3" accesskey="3" href="#">Menu 3</a></li>
<li><a id="menuimage4" title="menuimage4" accesskey="4" href="#">Menu 4</a></li>
<li><a id="menuimage5" title="menuimage5" accesskey="5" href="#">Menu 5</a></li>
<li><a id="menuimage6" title="menuimage6" accesskey="6" href="#">Menu 6</a></li>
</ul>
</div>
<div id="conteneur">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();">
<a href="" title="Retour à l'accueil">Accueil</a>
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Acteurs</dt>
<dd id="smenu1">
<ul>
<li><a href="équipe.html">L'Equipe pédagogique</a></li>
<li><a href="élèves.html">Les Elèves</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Espace reservé</dt>
<dd id="smenu3">
<ul>
<li><a href="équipe.html">Professeurs</a></li>
<li><a href="élèves.html">Parents d'élèves</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Nous joindre</dt>
<dd id="smenu4">
<ul>
<li><a href="accès.html">Plan d'accès</a></li>
<li><a href="contact.html">Contacts</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();">
<a href="">Liens</a>
</dt>
</dl>
</div>
<div id="site">
<h1>Le mot de la principale</h1>
<p align="right"><b><font face="Palatino Linotype" color="#000000">XXXXXXX</font></b></div>
</div>
<p id="footer">Réalisation des codes xhtml & css, .....</p>
</div>
</body>
</html>
Merci de votre aide !!