bonjour ,
je suis en train de refaire le site de mon asso , je veu avoir un menu horizontal ..qui s'adapte a la taille de l'écran .
voici mon code html :
et mon css:
mon probleme est le suivant :
quand je change les "12em" en "20%" , mon menu prend bien toute la largeur et mes images se redimessionnent automatiquement .
Mais du coup , mes sous menu se chevauchent ...
je cherche depuis quelques jours sans grand succes (je debute avec le css)
mon probleme est visible ici http://bout40.free.fr/test/index.html
voila , si quelqu'un pouvait me dire ou je fait mon erreur ...[/i][/i]
edit : désolé pour les italiques , c'est a cause du sript java ..
Modifié par garouf (30 Nov 2006 - 17:23)
je suis en train de refaire le site de mon asso , je veu avoir un menu horizontal ..qui s'adapte a la taille de l'écran .
voici mon 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Le site du Collectif Bout’40 " />
<meta name="Keywords" content="Reafis, Bout’40, bout40, collectif, artiste, Damien.c, damien, bout40 sound system, yellow stone, bout40, crackoss, bout'40" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<link rel="stylesheet" type="text/css" href="style1.css"/>
<title>Collectif Bout'40 -- accueil</title>
</head>
<body>
<div id="banniere">
<img src="Banniere1.jpg" height= "20%" width= "100%" />
</div>
<div id="menu">
<ul id="nav">
<li><img onmouseover="this.src='gifs/Artistes2.gif'" onmouseout="this.src='gifs/Artistes1.gif'" src="gifs/Artistes1.gif" width="100%" height="100%" />
<ul>
<li><a href="/sound_system/index.html">Bout'40 Sound System<br></a></li>
<li><a href="/damienc/index.html">Damien.C</a></li>
<li><a href="/zerozoiid_arkestra/index.html">Zerozoïd Arkestra</a></li>
<li><a href="/reafis/index.html">Reafis</a></li>
<li><a href="/yellowstone/index.html">Yellow Stone</a></li>
<li><a href="http://www.crackoss.tk">Crackoss</a></li>
</ul>
</li>
<li><img onmouseover="this.src='gifs/Myspace2.gif'" onmouseout="this.src='gifs/Myspace1.gif'" src="gifs/Myspace1.gif" width="100%" height="100%" />
<ul>
<li><a href="http://www.myspace.com/bout40">Bout'40</a></li>
<li><a href="http://www.myspace.com/dami1c">Damien.C</a></li>
<li><a href="http://profile.myspace.com/88782533">Tyed La Shoet</a></li>
<li><a href="http://www.myspace.com/6rme">6rme</a></li>
<li><a href="http://www.myspace.com/crackoss">Crackoss</a></li>
</ul>
</li>
<li><img onmouseover="this.src='gifs/Forum2.gif'" onmouseout="this.src='gifs/Forum1.gif'" src="gifs/Forum1.gif" width="100%" height="100%" />
<ul>
<li><a href="/forum/index.php?bn=forum_bonjour">Salut ...</a></li>
<li><a href="/forum/index.php?bn=forum_agenda">Agenda</a></li>
<li><a href="/forum/index.php?bn=forum_festival2006">Festival</a></li>
<li><a href="/forum/index.php?bn=forum_technique">Technique</a></li>
</ul>
</li>
<li><img onmouseover="this.src='gifs/Archives2.gif'" onmouseout="this.src='gifs/Archives1.gif'" src="gifs/Archives1.gif" width="100%" height="100%"/>
<ul>
<li><a href="/arcives/photos.html">Photos</a></li>
<li><a href="/archives/festival_2006.html">Festival 2006</a></li>
<li><a href="/archives/verruckter.html">Verrückter Lärm</a></li>
<li><a href="/archives/festival_2005.html">Festival 2005</a></li>
<li><a href="/archives/divers.html">Divers</a></li>
</ul>
</li>
<li><img onmouseover="this.src='gifs/Liens2.gif'" onmouseout="this.src='gifs/Liens1.gif'" src="gifs/Liens1.gif" width="100%" height="100%" />
<ul>
<li><a href="/liens/assos.html">Assos</a></li>
<li><a href="/liens/radios.html">Radios</a></li>
<li><a href="/labels.html">Labels</a></li>
<li><a href="#">Divers</a></li>
</ul>
</li>
</ul>
</div>
<div id="contenu">
<p>Bout40 est une association loi 1901 basée a Rennes
qui a pour but de developper la musique alternative ,organiser des
concerts ... faire vivre la culture dans la région. </p>
<p>Vous pouvez ici ecouter des extraits de la plupart des
artistes du collectif ,prendre contact avec eux ,connaitre leurs
prochaines dates ...</p>
</div>
</body>
</html>
et mon css:
body {
font-family: arial, helvetica, serif;
}
body,td,th {
color: #FFFFFF;
background-color: #000000;
}
body {
background-image: url();
background-repeat: no-repeat;
background-color: #000000;
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
}
#nav, #nav ul { /* toutes les listes */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
background-color: black;
font-style: italic;
font-weight: bold ;
}
#nav a {
display: block;
width: 20%;
}
#nav ul { /* tous les items de liste */
float: left;
width: 20%; /* largeur obligatoire, sinon opera devient fou */
}
#nav li { /* tous les items de liste */
float: left;
width: 20%; /* largeur obligatoire, sinon opera devient fou */
}
#nav li ul { /* listes de deuxième niveau */
position: absolute;
background-color: black;
width: 20%;
left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}
#nav li ul ul { /* listes de troisième niveau et plus */
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
left: auto;
}
#contenu {
padding-top: 20px; /* placement du calque contenu */
float: left;
}
mon probleme est le suivant :
quand je change les "12em" en "20%" , mon menu prend bien toute la largeur et mes images se redimessionnent automatiquement .
Mais du coup , mes sous menu se chevauchent ...
je cherche depuis quelques jours sans grand succes (je debute avec le css)
mon probleme est visible ici http://bout40.free.fr/test/index.html
voila , si quelqu'un pouvait me dire ou je fait mon erreur ...[/i][/i]
edit : désolé pour les italiques , c'est a cause du sript java ..
Modifié par garouf (30 Nov 2006 - 17:23)