28173 sujets

CSS et mise en forme, CSS3

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 :
<!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&rsquo;40 " />

  <meta name="Keywords" content="Reafis, Bout&rsquo;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&iuml;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&uuml;ckter L&auml;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&eacute;e a Rennes
qui a pour but de developper la musique alternative ,organiser des
concerts ... faire vivre la culture dans la r&eacute;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)