18041 sujets

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

[Résolu] Menu horizontale + tableau

Tout d'abord "bien le bonjour" !

J'ai "zieuté" ce tutorial principalement :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
Et sa suite
http://perso.orange.fr/michel.deboom/menualsa/hrz-nojs/menu-hrz.htm

Bien fait, et répondant à mon attente sur le principe de compatibilité IE, FF (je suis peu au courant des autres naviguateur...ne me frappez pas ...).

J'ai éffectué ma recherche sur les "sujets existants", aucun ne répondant à ma réponse (ou alors je n'ai vraiment pas les yeux en face des trous !).

Je possède déjà un menu très bon...mais uniquement sous FF .. IE étant incapable de le gérer ...

D'ou mon problème :

Mon menu est à intégrer dans un tableau de 1024px de large. Ce tableau a mon image de "header" en fond, et sera apellé par des <?php include "header.php" ?> dans toutes mes pages de site.
Seul hic, je n'arrive pas à faire tenir mon menu (de 7 parties) sur cette largeur et encore moins le centrer dans la page.

Pour le moment je cherche simplement à aligner au centre, et faire tenir ce menu sur 1024px ...

Un peu de code (non fini je n'ai pas exactement mon code car je suis au boulot ...)

CSS
.body_index 
{
	background-image: url(../IMG/fond2-repetable.gif);
	background-position:center;
	background-repeat:repeat-y;
	background-color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#FFFFFF;
	margin:0;
	margin-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	scrollbar-3d-light-color: #000000;
	scrollbar-arrow-color: #ffcc33;
	scrollbar-base-color: #1E2A63;
	scrollbar-dark-shadow-color: #001122;
	scrollbar-face-color: #1E2A63;
	scrollbar-highlight-color: #667788;
	scrollbar-shadow-color: #223344; 
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 1024px;
}
#menu dl {
float: left;
width: 150px;
margin: 0 1px;
}
#menu dt {
witdh: 150px;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
witdh: 150px;
text-align: left;
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 dt a:hover {
background: #eee;
}

a {text-decoration: none;
color: black;
color: #222;
}


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';}
}


html
<!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" xml:lang="fr" lang="fr">
<head>
<title>Bloodylake [menu]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="mon_script.js"></script>
<link rel="stylesheet" type="text/css" href="ma_css.css" />

</head>

<body class="body_index">
<div id="menu" align="center">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">menu                                                                                                                                                                                                                                                </dt>
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_blank">Site officiel</a></li>
	            <li><a href="#" target="_blank">smenu</a></li>
				<li><a href="# target="_blank">smenu</a></li>
			</ul>
		</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">menu</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
			</ul>
			</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">menu</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
			</ul>

			</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">menu</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
			</ul>
			</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">menu</dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#p" target="_self">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="#" target="_self">smenu</a></li>
			</ul>
			</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	<dl>	
		<dt onmouseover="javascript:montre('smenu6');">menu</dt>
			<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_self">smenu</a></li>
			</ul>
			</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	<dl>	
		<dt onmouseover="javascript:montre('smenu7');">menu</dt>
			<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="h#" target="_blank">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
				<li><a href="#" target="_blank">smenu</a></li>
			</ul>
			</dd>
	</dl>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	<dl>	
		<dt onmouseover="javascript:montre('smenu8');">menu</dt>
			<dd id="smenu8" onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" target="_self">smenu</a></li>
			</ul>
			</dd>
	</dl>
</body>
</html>

Modifié par Beurk (19 Nov 2006 - 21:16)
J'ai déjà répondu à l'une de mes questions cocnernant sa taille sur une seule ligne, j'avais mal tapé une ligne de ma CSS .... (baka)
L'erreur portait sur le width
a écrit :

#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 1024px;
}
#menu dl {
float: left;
width: 100px;
margin: 0 1px;
}

Modifié par Beurk (09 Nov 2006 - 15:59)
Donc, ayant avancé dans mon coin Smiley smile j'ai enfin pu tester le menu dans un tableau ..

donc mon tableau ayant deux lignes chacun ne possédant qu'une cellule.

Structure tableau

<table align="center" width="1024" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="links"><a href="#" class="links"><img src="#" width="1024" height="218" border="0" /></a></td>
  </tr>
  <tr>
<!-- URL de l'image de fond -->
    <td background="#">
	<div id="menu">

	<dl>			

		<dt onmouseover="javascript:montre('smenu1');">menu                                                                                                                                                                                                                                                </dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_blank">Site officiel</a></li>

	            <li><a href="#" target="_blank">smenu</a></li>

				<li><a href="# target="_blank">smenu</a></li>

			</ul>

		</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

	<dl>	

		<dt onmouseover="javascript:montre('smenu2');">menu</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

			</ul>

			</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	

	<dl>	

		<dt onmouseover="javascript:montre('smenu3');">menu</dt>

			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

			</ul>



			</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	

	<dl>	

		<dt onmouseover="javascript:montre('smenu4');">menu</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

			</ul>

			</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	

	<dl>	

		<dt onmouseover="javascript:montre('smenu5');">menu</dt>

			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#p" target="_self">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="#" target="_self">smenu</a></li>

			</ul>

			</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	

	<dl>	

		<dt onmouseover="javascript:montre('smenu6');">menu</dt>

			<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_self">smenu</a></li>

			</ul>

			</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	

	<dl>	

		<dt onmouseover="javascript:montre('smenu7');">menu</dt>

			<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="h#" target="_blank">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

				<li><a href="#" target="_blank">smenu</a></li>

			</ul>

			</dd>

	</dl>

<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	

	<dl>	

		<dt onmouseover="javascript:montre('smenu8');">menu</dt>

			<dd id="smenu8" onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#" target="_self">smenu</a></li>

			</ul>

			</dd>

	</dl>
	</div>
	</td>
  </tr>
</table>


Mais désormais mon problème a évolué ^^

Mon menu reste en haut à gauche, il ne s'applique donc pas là ou je veux le voir apapraitre, soit en bas de mon image qui elle est centrée grâve au tableau ...

Je ne sais pas si je suis claire :'(

Je pense qu'il y a quelque chose à faire sur cette portion de CSS


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 1024px;
}

Modifié par Beurk (09 Nov 2006 - 16:48)
Sujet clos
Aller à