18041 sujets

Questions générales et questions de débutants

Menu horizontal probleme dans les sous menus !!!

Bonsoir

voila j'ai créer un menu horizontal avec sous menu , mais je n'arrive pas a bien arranger ce menu avec les logos car les sous menus sont mal centrer ? et la je ne sais pas ? pouvez vous m'aider? et il y des points ?

Je n'arrive pas a bien centrer et harmoniser ce menu enlever ces points
voici une capture du menu

upload/8551-Capture1.jpg www.modemradio.com


merci

voici le code :

<!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" lang="fr" xml:lang="fr">
<!-- Date de création: 15/10/2008 -->
<head>
<title>CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/CSS">
#menu {
height:105px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
width:710px;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:710px;
color:white;
text-decoration:none;
padding:0px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}

</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
<meta name="description" content="Exemple de menu horizontal déroulant accessible créé grâce aux CSS" />
</head>
<body>
<div id="menu">
<ul>
  <li><img src="images/stories/267909442718poprock.png" alt="Modem Radio Pop Rock la webradio du meilleur de la pop et du rock" title="modem radio Pop Rock le son le meilleur de la pop er du rock" /></p>
		
  <ul>
      <li><tr>
            <td><span class="highslide">
			<a href="http://www.modemradio.fr/players/listen-pricipal.ram">
			<img src="images/stories/17884-robino-realplayer.png" alt="Ecouter Modem Radio Pop Rock avec le lecteur real player " title="ecouter nous avec le lecteur realplayer" style="border: 0pt none;" border="0" height="37" width="37" /></a></span></td>
            <td><a href="http://www.modemradio.fr/players/listen-pricipal.m3u">
			<img src="images/stories/itunessz.png" alt="Ecouter Modem Radio Pop Rock avec le lecteur Itune" title="Ecouter nous avec le lecteur Itune " style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td><a href="http://www.modemradio.fr/players/listen-pricipal.m3u">
			<img src="images/stories/winampsz.png" alt="Ecouter Modem Radio Pop Rock avec le lecteur Winamp" title="Ecouter nous avec le lecteur Winamp" style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td><a href="http://www.modemradio.fr/players/listen-pricipal.wax">
			<img src="images/stories/windowsmpsz.png" alt="Ecouter Modem Radio Pop Rock avec windows Media player" title="Ecouter nous avec le lecteur windows media player" style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td>
			<a href=".../index.php?option=com_content&view=article&id=68:ecouter-avec-un-iphone-ou-ipod-touch&catid=1:modemradio">
			<img src="images/stories/iphone.png" alt="Ecouter Modem Radio Pop Rock avec téléphone iphone " title="Ecouter nous avec votre téléphone iphone" border="0" height="58" width="51" /></a></td>
        <td><a href="http://www.modemradio.fr/script%20radio/lecteurweb/modemplayerprincipal.html" target="wclose">
<img alt="Ecouter Modem Radio Pop Rock avec le webplayer" border="0" height="70" src="images/stories/casque-playeur-web.png" alt="Ecouter Modem Radio Pop Rock avec le webplayer" title="Ecouter nous avec votre téléphone iphone" border="0" height="70" width="70" /></a></td>
 </tr></div>
		<a href="http://www.modemradio.fr/script%20radio/lecteurweb/lecteurweb.html" onclick="window.open('/script%20radio/lecteurweb//lecteurweb.html','wclose',  'width=375,height=245,toolbar=no,status=no,left=0,top=0')" target="wclose">
		<!-- Fin BLOCK 1--><!-- Fin content --></a>
		</div></li>
</ul>
  <li><img src="images/stories/crystalmodemradio.png" alt="Modem Radio crystal la webradio 100% Italo disco et euro dance" title="Modem Radio crystal la webradio 100% Italo disco et euro dance" />

    <ul>
      <li><div class="auto-style1"><tr>
            <td><span class="highslide">
			<a href="http://modemradio.fr/players/listen.ram">
			<img src="images/stories/17884-robino-realplayer.png" alt="Ecouter Modem Radio Cristal avec le lecteur real player " title="ecouter nous avec le lecteur realplayer" style="border: 0pt none;" border="0" height="37" width="37" /></a></span></td>
            <td><a href="http://modemradio.fr/players/listen.m3u">
			<img src="images/stories/itunessz.png" alt="Ecouter Modem Radio Cristal avec le lecteur Itune" title="Ecouter nous avec le lecteur Itune " style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td><a href="http://modemradio.fr/players/listen.m3u">
			<img src="images/stories/winampsz.png" alt="Ecouter Modem Radio Cristal avec le lecteur Winamp" title="Ecouter nous avec le lecteur Winamp" style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td><a href="http://modemradio.fr/players/listen.wax">
			<img src="images/stories/windowsmpsz.png" alt="Ecouter Modem Radio Cristal avec le lecteur windows media player" title="Ecouter nous avec le lecteur windows media player" style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td>
			<a href=".../index.php?option=com_content&view=article&id=68:ecouter-avec-un-iphone-ou-ipod-touch&catid=1:modemradio">
			<img src="images/stories/iphone.png" alt="Ecouter Modem Radio Cristal avec votre téléphone iphone " title="Ecouter nous avec votre téléphone iphone" border="0" height="58" width="51" /></a></td>
        <td><a href="http://www.modemradio.fr/script%20radio/lecteurweb/modemplayer.html" target="wclose">
<img alt="Ecouter Modem Radio Cristal avec le webplayer" src="images/stories/casque-playeur-web.png" alt="Ecouter Modem Radio Cristal avec le webplayer" title="Ecouter nous avec votre téléphone iphone" border="0" height="70" width="70" /></a></td>
 </tr></div>
</div><!-- Fin BLOCK 2--><!-- Fin content -->

		</div></li>
	 </ul>
  </li>
  <li><img src="images/stories/163916988656france.png" alt="Modem Radio France la webradio 100% chansons française" title="Modem Radio France la webradio 100% chansons française" />

  <ul>
      <li><tr>
				<a href="http://modemradio.fr/players/live.ram">
				<img src="images/stories/17884-robino-realplayer.png" alt="Ecouter Modem Radio France avec le lecteur real player " title="ecouter nous avec le lecteur realplayer" style="border: 0pt none;" border="0" height="37" width="37" /></a></span></td>
            <td><a href="http://modemradio.fr/players/live.m3u">
				<img src="images/stories/itunessz.png" alt="Ecouter Modem Radio France avec le lecteur Itune" title="Ecouter nous avec le lecteur Itune " style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td><a href="http://modemradio.fr/players/live.m3u">
				<img src="images/stories/winampsz.png" alt="Ecouter Modem Radio France avec le lecteur Winamp" title="Ecouter nous avec le lecteur Winamp" style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td><a href="http://modemradio.fr/players/live.m3u">
				<img src="images/stories/windowsmpsz.png" alt="Ecouter Modem Radio France avec le lecteur windows media player" title="Ecouter nous avec le lecteur windows media player" style="border: 0pt none;" border="0" height="35" width="35" /></a></td>
            <td>
				<a href=".../index.php?option=com_content&view=article&id=68:ecouter-avec-un-iphone-ou-ipod-touch&catid=1:modemradio">
				<img src="images/stories/iphone.png" alt="Ecouter Modem Radio France avec votre téléphone iphone " title="Ecouter nous avec votre téléphone iphone" border="0" height="58" width="51" /></a><a href="http://www.modemradio.fr/script%20radio/lecteurweb/lecteurweb.html" onclick="window.open('/script%20radio/lecteurweb//lecteurweb.html','wclose',  'width=375,height=245,toolbar=no,status=no,left=0,top=0')" target="wclose"><img alt="Sur modem radio live retrouver nous pour dialoguer , retrouver toutes nos chroniques et la chanson française ,le pop rock et le rock Dance electro house et Rnb !!!" src="images/stories/casque-playeur-web.png" alt="Ecouter Modem Radio France avec votre téléphone iphone " title="Ecouter nous avec votre téléphone iphone" border="0" height="0" width="70" /></a></div>
				</td>
        &nbsp;<td><a href="http://www.modemradio.fr/script%20radio/lecteurweb/lecteurweb.html" onclick="window.open('/script%20radio/lecteurweb//lecteurweb.html','wclose',  'width=375,height=245,toolbar=no,status=no,left=0,top=0')" target="wclose"></td>
 </tr>
</div>
<!-- Fin BLOCK 3--><!-- Fin content --></li>
</ul>
</div>
<div style="text-align:center; clear:both; margin-top:10px;">

</div>
</body>
</html>

je ne comprend pas ce qu il ce passe pourquoi il est bizard help me

Modifié par jawas (16 Nov 2010 - 22:04)
Salut Jawas,
J'espère que tu vas bien.

Je viens de jeter un coup d'oeil sur ton code.

Déjà il y a beaucoup de choses "incohérentes"... je ne sais pas si tu as mis le bon code, mais par exemple dans ta première balise <li> (juste après la <div id="menu"><ul>) tu as une balise fermante </p> après ton image et je ne sais pas à quoi cette balise fait référence puisque tu n'as pas d'ouverture de balise avant.

De même tu fermes ta div menu avant de fermer ta liste <ul>.
Ou encore tu utilise des balises <tr> et <td> avant même d'avoir créer un tableau (<table>)

Donc je pense qu'il faudrait que tu essaie de mettre ton code au propre avant.
Et je pense que si tu fais ça, de nombreux problèmes vont se résoudre.

Ensuite si après ça ton problème persiste toujours... on va pourra taider Smiley cligne

Voili voilà,
Peace

++
Miister Tii
Sujet clos
Aller à