Couleurs et formes menu CSS

Link · 20 Juillet 2005

Bonjour,

J'ai un problème avec un menu déroulant trouve sur un 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’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 :wacko:

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

Raphael · 20 Juillet 2005

Salut

- "Itinéraire", "Foires" et "Conditions de livraison" ne soient pas soulignés, pourtant j'ai mis nul part qu'ils devaient l'être wacko.gif

Un lien (<a>) est souligné par défaut. Donc si tu veux changer ce comportement, il faut le signaler.

Dans ton cas, puisque tu as rajouté des listes de définition supplémentaires :

dl a {text-decoration: none;}

(bien que je ne comprenne pas ta démarche de rajouter ces listes de déf)

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

Ces éléments sont placés directement dans <dt> de ton #menu, donc :

#menu dt {
color: white;
background: #f00;
}

Ca c'est une chose, et la deuxième, j'aimerais pouvoir régler la taille de chaque menu

Là il faut jouer sur le width du conteneur des menus : #menu

Link · 25 Juillet 2005

J'y arrive pas vraiment.

Pourrais-tu m'indiquer sur quoi ça agit quand on change :

body

dl, dt, dd, ul, li

#menu

#menu dl

#menu dt

#menu dd

#menu li

#menu li a, #menu dt a

#menu li a:hover

#site

Il y a dl, dt, dd, li et parfois avec des variantes comme li a et li a:hover

Si je savais où modifier mes données je crois que je pourrais me débrouiller

Raphael · 25 Juillet 2005

body --> sur l'ensemble du document

dl, dt, dd, ul, li --> sur les éléments <dl> et <dt> et <dd> et <ul> et <li>

#menu --> sur l'élément ayant reçu l'id "menu"

#menu dl --> sur les éléments <dl> contenus dans l'élément ayant reçu l'id "menu"

#menu dt --> sur les éléments <dt> contenus dans l'élément ayant reçu l'id "menu"

#menu dd --> sur les éléments <dd> contenus dans l'élément ayant reçu l'id "menu"

#menu li --> sur les éléments <li> contenus dans l'élément ayant reçu l'id "menu"

#menu li a, #menu dt a --> sur les éléments <a> contenus dans un élément <li> contenu dans l'élément ayant reçu l'id "menu" et sur les éléments <a> contenus dans un élément <dt> contenu dans l'élément ayant reçu l'id "menu"

#menu li a:hover --> sur le survol de l'élément <a> contenus dans un élément <li> contenu dans l'élément ayant reçu l'id "menu"

#site --> sur l'élément ayant reçu l'id "site"

Je crois que tu devrais envisager d'apprendre tranquillement les bases des CSS, sinon tu ne vas pas t'en sortir et patauger à l'aveugle longtemps

http://www.tuteurs.ens.fr/internet/web/html/bases.html

Link · 25 Juillet 2005

Merci Sibelius ça m'a pas mal aidé

Voici mon menu maintenant il est presque bon :

http://www.cotubel.be/testcss.htm

J'aimerais bien régler la taille de chaque menu. Une taille différente pour chaque menu. Est-ce possible ?

Je vais être plus précis :

- Je voudrais redimensionner chaque menu à la taille du titre car par exemple "conditions de livraisons" est bien plus large que "Foires"

- Je voudrais que les sous-menus soient plus larges mais sans que les menus s'élargissent quand on passe au-dessus avec la souris.

C'est pas évident à faire c'est sûr :huh:

Modifié 25 Juillet 2005 par Cotubel

Connexion

Couleurs et formes menu CSS

Sujets conseillés

Link

Raphael

Link

Raphael

Link

Veuillez vous connecter pour commenter

Parcourir

Activité