Un menu déroulant en CSS et XHTML (problème)

Question

kokobay

15 May 2008 à 10:54

Bonjour a tous, je suis nouveau sur le forum, et tous d'abord je souhaite vous dire un grand bravo pour le site et les merveilleux Tutoriels présents sur le site.

Ayant voulu remplacer un menu existan sur un script en php, par votre menu en CSS et XHTML, je les parfaitement bien programmer, cependant, j'ai un problème de taille auquel je suis confronter.

Sachant que le code javascript et css, ce trouve dans le fichiers header.php
J'insere bien le code HTML a l'endroit ou il devrait ce situé, cependant au lieu de s'afficher a l'endroit prècis il se retrouve en haut a gauche du site, se qui le fait superposé au logo du site.
Je vous remerçie d'avance de vos réponses

En Images:

Ci joint dessous les codes du menu:

Code javascript:

<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>

Code CSS:

<style type="text/css" media="screen">
<!-- 
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: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #FFDC98;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>

Code HTML:

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="<?=$index_link;?>"><?=MSG_BTN_HOME;?></a></dt>
			
		<dt onclick="javascript:montre('smenu2');"><?=MSG_MM_MESSAGING;?></dt>

			<dd id="smenu2">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'messaging', 'section' => 'received'));?>"><?=MSG_MM_RECEIVED;?></a></li>
					<li><a href="<?=process_link('members_area', array('page' => 'messaging', 'section' => 'sent'));?>"><?=MSG_MM_SENT;?></a></li>
                    				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');"><?=MSG_MM_BIDDING;?></dt>

			<dd id="smenu3">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'bidding', 'section' => 'current_bids'));?>"><?=MSG_MM_CURRENT_BIDS;?></a></li>
					<li><a href="<?=process_link('members_area', array('page' => 'bidding', 'section' => 'won_items'));?>"><?=MSG_MM_WON_ITEMS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'bidding', 'section' => 'invoices_received'));?>"><?=MSG_MM_INVOICES_RECEIVED;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'bidding', 'section' => 'item_watch'));?>"><?=MSG_MM_WATCHED_ITEMS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'bidding', 'section' => 'favorite_stores'));?>"><?=MSG_MM_FAVORITE_STORES;?></a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');"><?=MSG_MM_SELLING;?></dt>

			<dd id="smenu4">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'open'));?>"><?=MSG_MM_OPEN_AUCTIONS;?></a></li>
					<li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'bids_offers'));?>"><?=MSG_MM_ITEMS_WITH_BIDS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'scheduled'));?>"><?=MSG_MM_SCHEDULED_AUCTIONS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'closed'));?>"><?=MSG_MM_CLOSED_AUCTIONS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'drafts'));?>"><?=MSG_MM_DRAFTS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'sold'));?>"><?=MSG_MM_SOLD_ITEMS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'invoices_sent'));?>"><?=MSG_MM_INVOICES_SENT;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'fees_calculator'));?>"><?=MSG_MM_FEES_CALCULATOR;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'prefilled_fields'));?>"><?=MSG_MM_PREFILLED_FIELDS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'block_users'));?>"><?=MSG_MM_BLOCK_USERS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'selling', 'section' => 'suggest_category'));?>"><?=MSG_MM_SUGGEST_CATEGORY;?></a></li>
                    				</ul>
			</dd>
            		<dt onclick="javascript:montre('smenu5');"><?=MSG_MM_REPUTATION;?></dt>

			<dd id="smenu5">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'reputation', 'section' => 'received'));?>"><?=MSG_MM_MY_REPUTATION;?></a></li>
					<li><a href="<?=process_link('members_area', array('page' => 'reputation', 'section' => 'sent'));?>"><?=MSG_MM_LEAVE_COMMENTS;?></a></li>
                    				</ul>
			</dd>	
            <dt onclick="javascript:montre('smenu6');"><?=MSG_MM_BULK;?></dt>

			<dd id="smenu6">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'bulk', 'section' => 'details'));?>"><?=MSG_MM_DETAILS;?></a></li>
					                    				</ul>
			</dd>	
                        <dt onclick="javascript:montre('smenu7');"><?=MSG_MM_ABOUT_ME;?></dt>

			<dd id="smenu7">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'about_me', 'section' => 'view'));?>"><?=MSG_MM_VIEW;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'about_me', 'section' => 'profile'));?>"><?=MSG_PROFILE_PAGE;?></a></li>
					                    				</ul>
			</dd>	
                                    <dt onclick="javascript:montre('smenu8');"><?=MSG_MM_STORE;?></dt>

			<dd id="smenu8">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'store', 'section' => 'subscription'));?>"><?=MSG_MM_SUBSCRIPTION_SETUP;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'store', 'section' => 'setup'));?>"><?=MSG_MM_MAIN_SETTINGS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'store', 'section' => 'store_pages'));?>"><?=MSG_MM_STORE_PAGES;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'store', 'section' => 'categories'));?>"><?=MSG_MM_CUSTOM_CATS;?></a></li>
					                    				</ul>
			</dd>	
                                               <dt onclick="javascript:montre('smenu9');"><?=MSG_MM_WANTED_ADS;?></dt>

			<dd id="smenu9">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'wanted_ads', 'section' => 'new'));?>"><?=MSG_MM_ADD_NEW;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'wanted_ads', 'section' => 'open'));?>"><?=MSG_MM_OPEN;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'wanted_ads', 'section' => 'closed'));?>"><?=MSG_MM_CLOSED;?></a></li>
                   					                    				</ul>
			</dd>	
            <dt onclick="javascript:montre('smenu10');"><?=MSG_MM_MY_ACCOUNT;?></dt>

			<dd id="smenu10">
				<ul>
					<li><a href="<?=process_link('members_area', array('page' => 'account', 'section' => 'editinfo'));?>"><?=MSG_MM_PERSONAL_INFO;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'account', 'section' => 'management'));?>"><?=MSG_MM_MANAGE_ACCOUNT;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'account', 'section' => 'history'));?>"><?=MSG_MM_ACCOUNT_HISTORY;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'account', 'section' => 'mailprefs'));?>"><?=MSG_MM_MAIL_PREFS;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'account', 'section' => 'abuse_report'));?>"><?=MSG_MM_ABUSE_REPORT;?></a></li>
                    <li><a href="<?=process_link('members_area', array('page' => 'account', 'section' => 'invoices'));?>"><?=MSG_MM_INVOICES;?></a></li>
                   					                    				</ul>
			</dd>	
	
</dl>

6l20

15 May 2008 à 11:07

Bonjour kokobay,

Si ton menu n'est pas contenu dans un bloc lui même positionné, il se positionne par rapport au premier ancêtre positionné.
Dans ton cas il semble que ce soit le "viewport" donc suivant tes déclarations :

#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}

En haut à gauche du body...

Difficile d'être plus précis sans l'ensemble de ton code.

Cdt,
Sylvain

kokobay

15 May 2008 à 11:30

Même si cela n'était pas clair, vous avez presque donner la réponse.

J'ai carrément supprimer cette class, ce qui marche impécable.

Merçi beaucoup pour la réponse et surtout la rapidité de réponse

Sujet clos

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

Un menu déroulant en CSS et XHTML (problème)