18082 sujets

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

Couleurs et formes pour menu déroulant

Bonjour,

J'ai un problème avec les menu déroulants du site. J'ai bidouillé le code pendant 2 petites heures mais je mélange tout...

Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
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>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels css.alsacreations.com */
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;
background-color:#737173
}
#menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index:100;
	width: 895px;
	height: 18px;
	font-weight: bold;
	text-decoration: none
}
#menu dl {
float: left;
width: 14em;
background-color: #737173
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-color: #737173
color:#FFFFFF
}
#menu dd {
display: none;
background-color:#FF0000
color:#FFFFFF
}
#menu li {
text-align: center;
background-color: #FF0000
font: 80% verdana, arial, sans-serif;
font-size: 10px;
}
#menu li a {
color: #000000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
background-color: #737173
}
#menu dt a {
color: #000000;
background-color:#737173
text-decoration: none
}
#menu li a:hover {
background: #737173;
color:#FFFFFF
}
#menu dt a:hover {
list-style-type: none;
background-color:#FFFFFF
color:#FFFFFF

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
background-color: #737173
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #737173
-->
</style>
</head>

<body>

<div id="menu">
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Cotubel</dt>
	     <dd id="smenu1">
		   <ul>
			  <li><a href="#">Informations</a></li>
			  <li><a href="#">Documentation</a></li>
			  <li><a href="#">Certificat</a></li>
			  <li><a href="#">Contact</a></li>
			  <li><a href="#">Offres d&#8217;emploi</a></li>
		   </ul>
		 </dd>
	</dl>
	
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Itinéraire">Itinéraire</a></dt>
	</dl>	
	
		<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Produits</dt>
	  <dd id="smenu3">
		  <ul>
			  <li><a href="#">Tubes soudés</a></li>
			  <li><a href="#">Tubes sans soudure</a></li>
			  <li><a href="#">Ebauches</a></li>
			  <li><a href="#">Tubes carrés et rectangulaires</a></li>
			  <li><a href="#">Raccords soudés et sans soudure</a></li>
			  <li><a href="#">Brides</a></li>
			  <li><a href="#">Raccords filetés BSP</a></li>
			  <li><a href="#">Raccords à bague de sertissage</a></li>
			  <li><a href="#">Raccords haute pression NPT & SW</a></li>
			  <li><a href="#">Tubes alimentaires</a></li>
			  <li><a href="#">Raccords alimentaires</a></li>
			  <li><a href="#">Colliers de fixation</a></li>
			  <li><a href="#">Vannes</a></li>
			  <li><a href="#">Barres</a></li>
			  <li><a href="#">Plats</a></li>
			  <li><a href="#">Profils</a></li>
			  <li><a href="#">Tôles</a></li>
		  </ul>
		  </dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Foires</a></dt>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Conditions de livraison</a></dt>
	</dl>
	
</div>


</body>
</html>


J'ai réussi à modifier plusieurs trucs mais je débute dans le CSS et je ne trouve pas comment modifier le reste. Ce que je voudrais faire c'est que :
- "Itinéraire", "Foires" et "Conditions de livraison" ne soient pas soulignés, pourtant j'ai mis nul part qu'ils devaient l'être Smiley sweatdrop

- Les sous-menus de "Cotubel" et "Produits" soit écrits en blanc sur fond rouge #FF0000 mais là encore je ne trouve pas à quel endroit modifier le code.

Ca c'est une chose, et la deuxième, j'aimerais pouvoir régler la taille de chaque menu car j'ai dû agrandir la case pour pouvoir caser "Conditions de livraison" et évidemment toutes les cases se sont agrandies.
Modifié par Cotubel (20 Jul 2005 - 15:06)
Bonjour et bienvenue Cotubel,

Je déplace ton post dans le salon Tutoriels et exercices Alsacréations : "Service Après Vente"!
moi je te dirais de retirer ceci de ta page, et de l'inclure à une CSS externe que tu lieras à ta page html
a écrit :
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;
background-color:#737173
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 895px;
height: 18px;
font-weight: bold;
text-decoration: none
}
#menu dl {
float: left;
width: 14em;
background-color: #737173
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-color: #737173
color:#FFFFFF
}
#menu dd {
display: none;
background-color:#FF0000
color:#FFFFFF
}
#menu li {
text-align: center;
background-color: #FF0000
font: 80% verdana, arial, sans-serif;
font-size: 10px;
}
#menu li a {
color: #000000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
background-color: #737173
}
#menu dt a {
color: #000000;
background-color:#737173
text-decoration: none
}
#menu li a:hover {
background: #737173;
color:#FFFFFF
}
#menu dt a:hover {
list-style-type: none;
background-color:#FFFFFF
color:#FFFFFF

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
background-color: #737173
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #737173


Si tu utilises dreamweaver, tu pourras alors modifier directement les classes de ta feuille de style tout en designant ta page html, et appliquer les styles.

Ca demande un peu d'application et d'organisation, mais déjà sur un site de 5 pages ça fait gagner un temps diiiingue: en effet, tu crées une CSS principale que tu lies à toutes tes pages: les modifications de cette feuille de style se répercuteront alors sur tout le design de ton site. Gain de temps, et design cohérent Smiley smile

R

PS: "Cotubel", le grossiste à Bruxelles c ça?? Smiley cligne
Tes problèmes viennent d'abord d'erreurs de syntaxe : attention au point-virgule après chaque propriété CSS :

a écrit :
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-color: #737173
color:#FFFFFF
}


Le point virgule manquant fait que le navigateur ne sépare plus cette ligne et la suivante, et qu'il ignore la couleur...

Avant de se creuser le tête en vain (ou de poser la question sur le forum Smiley cligne ) : Toujours vérifier que la feuille de style ne comporte pas d'erreur de syntaxe, à l'aide du validateur CSS du W3C

<edit>Il y aussi un validateur (X)HTML, à utiliser sans modération... pour éviter de mettre une <meta ... /> XHTML dans une page HTML Smiley cligne
Modifié par Laurent Denis (25 Jul 2005 - 09:42)
Broco,
ce validateur est disponible sur DW?

Peut-on l'appliquer à une page/une CSS/ Tout le site?
Doit-on corriger tout élément signalé?

R'
Sujet clos
Aller à