CSS-HTL Menu dans un tableau

Fermé

Raphaeldu68 Messages postés 280 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 5 novembre 2014 - 20 avril 2010 à 15:48
Raphaeldu68 Messages postés 280 Date d'inscription dimanche 9 août 2009 Statut Membre 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>

A voir également:

CSS-HTL Menu dans un tableau
Tableau croisé dynamique - Guide
Menu déroulant excel - Guide
Tableau ascii - Guide
Tableau word - Guide
Menu démarrer windows 11 - Guide

1 réponse

Réponse 1 / 1

Raphaeldu68 Messages postés 280 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 5 novembre 2014 18
20 avril 2010 à 22:10

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

Discussions similaires

ou sont les bananes ?

Tableau croisé dynamique avec plusieurs en-têtes identiques

Bibliothèque

Trouver le nom d'un tableau avec sa photo.

exo pix

Discussions similaires

Newsletters