18073 sujets

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

[resolu] Separation de menu

bonjour

Je me suis servi comme base du tutorial "creation d'un design en 5 etapes".

j'ai utilise pour le menu celui-ci:http://css.alsacreations.com/modelesmenus/vd2.htm.

Ma question est que je ne veux pas que "editorial" et "planing" soient mis en forme comme les menus. J'aimerais en faire des titres dont la mise en forme soit distincte.

J'ai utilise la balise <dt>, mais il me semble que ce n'est pas la bonne solution.

Merci.


voici le code 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>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link href="format.css" rel="stylesheet" type="text/css" />
		<TITLE>les tuniques bleues et la guerre de secession</TITLE>

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

</head>
	
	<body>
	<div id="conteneur">
		
		<div id="header"></a>
</div>

		<dl id="menu">
			
		<dt><h4>planning</h4></dt>
		
		<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Menu 1</a></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>
				</ul>
			</dd>	
			
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">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>
				</ul>
			</dd>	

		<dt><h4>Editorial</h4></dt>

		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">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.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">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.1</a></li>
				</ul>
			</dd>
</dl>
		<div id="centre">
			<h2>Titre de page, d'article...</h2>


et le code CSS:

body 
{
	margin: 10px 0;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #69C ;
}

#header
{
	height: 258px ;
	background: url(header.jpg) no-repeat left top ;
	margin: 0 ;
}

#conteneur 
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 3px solid #036 ;
	background: #fff ;
}

h4 
{
	font-size : large; 
	font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
	color : black; 
	text-align: center;
}

dl, dt, dd, ul, li 
{
margin: 0; 	
padding: 0; 	
list-style-type: none;
}

#menu
{
	position: absolute;
	left: 140px ; 
	width: 150px ;
}

#menu dt 
{
	cursor: pointer; 
	background: #369;
	color: #FFF;
	height: 20px;
	line-height: 20px; 
	border: 1px solid gray; 
	text-align: left; 
	font-weight: bold; 
	margin: 0 0 0 2px;
	padding-left: 10px;
}

#menu dd 
{
	position: absolute; 
	z-index: 100; 
	left: 4em; 
	margin-top: -1.4em; 
	width: 10em; 
	color: #FFF;
	background: #369; 
	border: 1px solid gray; 
}

#menu ul 
{
	padding: 2px;
}

#menu li
{
	text-align: center;
	font-size: 85%;
	height: 18px;
	line-height: 18px;
}

#menu li a, #menu dt a 
{
	color: #fff;
	text-decoration: none;
	display: block;
}

#menu li a:hover 
{
	color:#fff; 
	background-color: #69C;
}

#centre
{
	padding: 0 30px 5px 0px ;
	background: #FFF ;
	margin-left: 200px ; 
}

#centre h2
{
	padding-left: 20px ;
	line-height: 20px ;
	font-size: 1.3em ;
	color: #69C ;
	border-bottom: 1px solid #69C ;
}

#centre p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.4em ;
}

#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #69C ;
	font-style: oblique;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}

* html pre
{
	width: 636px ;
}

Modifié par zetoun (06 Jan 2006 - 08:04)
Quelqu'un pourrait il m'indiquer la facon de proceder?

C'est bon. Il fallait juste que j'incorpore mes titres entre des balises <dl> et non des balises <dt>
Modifié par zetoun (06 Jan 2006 - 08:08)
Sujet clos
Aller à