28220 sujets

CSS et mise en forme, CSS3

Aide taille menu déroulant

Bonjour,

Je suis nouveaux sur ce forum et aussi en css etc...

J ai un problème avec mes menus
Un menu déroulant en CSS et XHTML (horizontal et vertical).
Édit par Igor: à propos de taille, il faut veiller à la taille des liens cités sur le forum pour ne pas le déformer. Ce n'est pas compliqué de faire de vrais liens Smiley cligne .

J ai donc 5 menu dont qui a des sous menus.
Je voudrais que les menus 1,2 et 5 est ce background-image:
http://www.loto-star.com/images/bouton-bleu.gif
qui a comme taille width: 127px; et height: 25px;

et que le menu 4 et 5 ( c est lui qui sera déroulant) est ce background-image:
http://www.loto-star.com/images/bouton-bleuxxl.gif qui a comme taille width: 192px; height: 25px;

est ce que les sous menus peuvent avoir backgroud-image ?

je n y connais rien mais voici un morceau de mon code Smiley confus

html
<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Inscriptions</a></dt>
	</dl>
	
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Présentation audio</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Divers</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Questions-réponses</a></li>
				<li><a href="#">Légalité</a></li>
				<li><a href="#">Garantie</a></li>
				<li><a href="#">Sécurité du site</a></li>
				<li><a href="#">A propos</a></li>
				<li><a href="#">Site officiel</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Contact</a></dt>
	</dl>

</div>


css
<style type="text/css">
<!-- 
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
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;
}
#menu {
position: absolute;
top: 0;
left: 0%;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
margin: 0 1px;
width: 127px;
height: 25px;
} 


#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-image: url("/images/bouton-bleu.gif");

}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

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

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>

Modifié par Igor (14 Sep 2005 - 00:59)
Il me semble qu'en définissant les bonnes cotes " Li display block = Xpx Ypx" il ne devrait pas y avoir de problème.
Il te faut placer cette injonction ( créer une règle pour… ) dans la css en référence a la liste <li>. Je vois très bien le truc, ça va être super.
Avec un roll-over en css, c'est la classe.

<edit = Comme de coutume, je te souhaîte une bienvenue sur ce forum />
Modifié par Aureance (14 Sep 2005 - 00:43)
La question que je me pose par rapport à ton chose : c'est en roll-over ou non ?
Si Non

li_a {
display:block;
width, height }
li_b {
display:block;
width, height }

En roll-over :

li_b {
display:none}
li_b:hover {
display: block;
width: ??;
height: ??;
}

Le tout, pour la seconde solution, étant inclu dans un HTML <a> Bien sûr.
Modifié par Aureance (14 Sep 2005 - 01:27)
Non en fait c est juste que le lien qui change de couleur, c est tout ce que je fais.

Bon je vais essayer et je vous tiens au courant.

Merci
Sujet clos
Aller à