18041 sujets

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

Problème position du Menu déroulant

Bonsoir à tous!

Voilà, je fais avectuellement un blog sous canalblog, et je voudrais intégrer une menu déroulant horizontal juste sous la banière http://annaetolivia.canalblog.com/

J'ai essayé d'intégrer le code donné dans le tuto, mais j'ai un problème.
Le menu s'affiche bien, mais en haut à gauche et je n'arrive pas à le déplacer!
Je voudrais qu'il s'affiche sous la banière et qu'il ne bouge pas.

Je suis débutante donc je vous remercie par avance pour vos réponses Smiley smile
Modifié par Nanami (17 Jul 2007 - 01:30)
Bonjour,

Oui je ne l'ai pas laissé car c'était vraiment trop inesthétique et ça déformé le blog

Je vous ai fais une capture d'écran pour vous montrer http://img519.imageshack.us/img519/6175/sanstitre3tx2.png

et voici le code que j'ai utilisé

<!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>
<link href="http://serv1.upload4you.free.fr/2007/05/1180264553.ico" rel="shortcut icon" />
<title><$BlogPageTitle$></title>
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<meta http-equiv="content-language" content="<$BlogLanguage$>" />
<meta name="Description" content="<$BlogDescription$>" />
<meta name="Keywords" content="<$BlogKeywords$>" />
<meta name="generator" content="CanalBlog -  http://www.canalblog.com"  />

<script type="text/javascript" src="http://storage.canalblog.com/81/89/164066/12864995.js"></script>
<script type="text/javascript" src="http://storage.canalblog.com/32/20/164066/12864991.js"></script>
<script type="text/javascript" src="http://storage.canalblog.com/25/43/164066/12865105.js"></script>

<script type="text/javascript" src="http://serv1.upload4you.free.fr/2007/06/1182426756..js"></script>

<script type="text/javascript">
<!--
window.onload=montre;
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>

<BlogSiteFeed>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" />
</BlogSiteFeed>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$BlogEditURIURL$>" />
<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />
</head>
          
            <body><div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div>
<br>
   <div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 1.1</a></li>
				<li><a href="#">Sous-Menu 1.2</a></li>
				<li><a href="#">Sous-Menu 1.3</a></li>
				<li><a href="#">Sous-Menu 1.4</a></li>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>
        

<div id="content"><div class="blogbody">


        <Blogger> <BlogDateHeader> 
<h2><$BlogDateHeaderDate$></h2> 
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle> 
<h3><$BlogItemTitle$></h3> 
</BlogItemTitle> 
<p><$BlogItemBody$></p> 
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Vos Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div> 
</Blogger> 
          
            <$CBControlNavLinks$></div></div>



<div id="rightbar"><div class="navlinks">
          
        <CBCalendar><$BlogCalendar$></CBCalendar><div class="item"> 
  <script type="text/javascript"> 
<!-- 
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>"><center>(¯`*•.¸Contactez moi¸.•*´¯)</center></a>'); // --> 
</script> 
</div><BloggerFriendLinks><BlogFriendLinkHeader> 
<p><a href="http://touchoflove.canalblog.com/" target="_blank">Merci à Keiko-San pour la bannière !</a></p>
<div class="title">Jukebox</div>
<p><a href="http://www.imeem.com/dialogs/standaloneplaylist/?autoStart=true&resize=true&p=rPTYZTme" target="_blank"><img width="141" height="24" border="0" src="http://storage.canalblog.com/84/97/304968/14400812.png" alt="ecouteranna" /></a></p>
<p><a href="http://www.imeem.com/dialogs/standaloneplaylist/?autoStart=true&resize=true&p=VfQRNQQn" target="_blank"><img width="141" height="24" border="0" src="http://storage.canalblog.com/44/51/304968/14432351.png" alt="ecouterolivia" /></a></p>

<div class="title"><$BlogFriendLinkCategoryName$></div> 
<ul> 
  </BlogFriendLinkHeader> 
  <li><a href="<$BlogFriendLinkURL$>" target="_blank"><$BlogFriendLinkName$></a></li> 
  <BlogFriendLinkFooter> 
</ul> 
</BlogFriendLinkFooter> </BloggerFriendLinks>
<a href="http://www.wasabi-records.fr/" target="_blank"><img width="109" height="50" border="0" src="http://storage.canalblog.com/16/65/164066/13632812.png" alt="wasabilien" /></a><br><br>   
    
<a href="http://www.mimu-net.net/" target="_blank"><img width="88" height="31" border="0" src="http://www.mimu-net.net/mimu.png" alt="mimu-net" /></a><br><br>   
  
<a href="http://www.jpopdb.net/accueil.htm" target="_blank"><img width="88" height="31" border="0" src="http://storage.canalblog.com/81/52/304968/14167683.png" alt="jpopdb_88x31" />
</a><br><br>   

<a href="http://miliyah.forumactif.com" target="_blank"><img width="167" height="100" border="0" src="http://storage.canalblog.com/00/63/304968/14238257.png" alt="bannierevg4mr2" /></a><br><br> 
<a href="http://touchoflove.canalblog.com/" target="_blank"><img width="167" height="28" border="0" src="http://storage.canalblog.com/20/57/304968/14286928.png" alt="bannfo5" /></a><br><br> 
<a href="http://lufkin.rf.lv/" target="_blank"><img width="86" height="31" border="0" src="http://storage.canalblog.com/75/89/304968/15098536.jpg" alt="ban" />
</a><br><br> 

<div class="title">Vos commentaires</div>
<ul> 
  <CBLastComments> 
  <li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li> 
  </CBLastComments> 
</ul>
          
            </div></div><div class="clear"> </div></div></body></html>

Modifié par Nanami (17 Jul 2007 - 11:36)
Bon j'ai résolu mon problème, j'ai réussi à le placer sous la banière!
Mais maintenant mon problème c'est que lorsque le menu ce déroule, tout le site en bas ce décale pour laisser la place au menu déroulant.
Y a-t-il un moyen pour que le menu déroulant passe au dessus du reste?

Mon CSS

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: fixe;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 8;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
Sujet clos
Aller à