Menu

CSS-HTL Menu dans un tableau [Fermé]

Messages postés
279
Date d'inscription
dimanche 9 août 2009
Dernière intervention
5 novembre 2014
- - Dernière réponse : Raphaeldu68
Messages postés
279
Date d'inscription
dimanche 9 août 2009
Dernière intervention
5 novembre 2014
- 20 avril 2010 à 22:10
Bonjour à tous,

Je m'adresse à vous parce que , étant un débutant en HTML et CSS, je rencontre une difficulté :

Je désire placer le menu de mon site dans un tableau. Ma difficulté est de stabiliser le menu. J'arrive a fixer la position du menu en position absolue dans la page mais pas par rapport au tableau. Lorsque j'enlève les instructions de positions absolues, le menu "saute" sans le tableau. Cela n'est pas esthétique est surtout pas pratique.

Je remercie d'avance les personnes qui pourront m'aider.
Cordialement,
Raphaël

Voici le code source : (les images sont à part sur le serveur)

<!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="en">

<head>
	<title>Testos</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="robots" content="all" />
		<style> type="text/css" 
		
		body {
 font: 11px verdana, sans-serif;
 background: #AFA99B

}

/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */

/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	background: #6A6458;
	display:inline;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
/* Les instructions de positions absolues sont normalement ici
---------------------------------------------------------------------------------*/
	
	
	
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}

#menuDeroulant li:hover > .sousMenu { display: block; }
		
		</style>
	</head>

<body bgcolor="green">
<table border=1>
<! border=1 pour bien visualiser le tableau>
<TR>
<td width=80% style="height:300px">
	<div align=left> 
	<ul id="menuDeroulant">
		<li>
			<a href="#">Partie 1</a>
			<ul class="sousMenu">
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
				<li><a href="#">sous-menu 4</a></li>
				<li><a href="#">sous-menu 5</a></li>				
				<li><a href="#">sous-menu 6</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 3</a>

			<ul class="sousMenu">			      
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
				<li><a href="#">sous-menu 4</a></li>
				<li><a href="#">sous-menu 5</a></li>				
				<li><a href="#">sous-menu 6</a></li>
				<li><a href="#">sous-menu 7</a></li>
				
			</ul>
		</li>
		<li>

			<a href="#">Partie 4</a>
			<ul class="sousMenu">			      
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
				<li><a href="#">sous-menu 4</a></li>
				<li><a href="#">sous-menu 5</a></li>				
				<li><a href="#">sous-menu 6</a></li>

				<li><a href="#">sous-menu 7</a></li>
				<li><a href="#">sous-menu 8</a></li>
				<li><a href="#">sous-menu 9</a></li>
				<li><a href="#">sous-menu 10</a></li>
			</ul>
		</li>
		
		<li>

			<a href="#">Partie 5</a>
			<ul class="sousMenu">			      
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
				<li><a href="#">sous-menu 4</a></li>
			</ul>
		</li>
		
		<li>

			<a href="#">Partie 6</a>
			<ul class="sousMenu">			      
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
				<li><a href="#">sous-menu 4</a></li>
				<li><a href="#">sous-menu 5</a></li>				
				<li><a href="#">sous-menu 6</a></li>
			</ul>
		</li>
		
		<li>

			<a href="#">Partie 7</a>
			<ul class="sousMenu">			      
				<li><a href="#">sous-menu 1</a></li>
				<li><a href="#">sous-menu 2</a></li>
				<li><a href="#">sous-menu 3</a></li>
				<li><a href="#">sous-menu 4</a></li>
				<li><a href="#">sous-menu 5</a></li>				
				<li><a href="#">sous-menu 6</a></li>
				<li><a href="#">sous-menu 7</a></li>
				<li><a href="#">sous-menu 8</a></li>
				<li><a href="#">sous-menu 9</a></li>
				<li><a href="#">sous-menu 10</a></li>
			</ul>
		</li>
	</ul>
</td>
</div>
<td width=30%>
<font >TEXTE TEXTE TEXTE TEXTE ...</font>
</td>
</body>
</html>


Afficher la suite 

1 réponse

Messages postés
279
Date d'inscription
dimanche 9 août 2009
Dernière intervention
5 novembre 2014
18
0
Merci
J'ai essayé différents réglages, mais je suis toujours perdu, une âme charitable pourrait-elle m'aider svp ?
Merci d'avance !
Cordialement
Raphaël