28220 sujets

CSS et mise en forme, CSS3

Menu déroulant CSS

J'ai quelques petits problèmes avec mon menu CSS Smiley decu
Pour commencer, voici le site sur lequel je travail : http://moulins-cherisy.com/

Je me pose différentes questions :

• Je souhaite faire afficher mes sous-menus vers le haut.
Est ce possible ?

• Je souhaite également remplacer mes menus, par des images, pour que le rendu graphique soit un peu plus sympa, en jouant avec les polices.
Pouvez-vous m'aider pour le code ?

• Et enfin, je souhaite afficher mes sous-menus avec une couleur de fond transparente > blanc à 50% par exemple.

Merci beaucoup de votre aide.
Voici mon code CSS, et celui de ma page : 


body {
margin: 30px;
padding: 0;
background: #330000;
font: 75% verdana, arial, sans-serif;
}
#page {
width: 815px;
     }
#imagemenu1 {
	background-image: url(images/index1.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:120px;
}
#imagemenu2 {
	background-image: url(images/index2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:237px;
}
.imagemenu3 {
	background-image: url(images/index3.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:28px;
}
.imagemenu4 {
	background-image: url(images/index4.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:125px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
margin-left: auto;
margin-right: auto;
width: 815px;
}
#menu dl {
float: left;
width: 135px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
}
#menu dd {
display: none;
border: 0px 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: 1px transparent;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Moulins de Ch&eacute;risy</title>
<link href="indexcherisy.css" rel="stylesheet" type="text/css">

<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=page">
    <div id="imagemenu1"></div>
    <div id="imagemenu2"></div>
	<div id="menu">
		<dl>
		<dt onmouseover="javascript:montre('smenu1');">Présentation</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Le mot du meunier</a></li>
					<li><a href="#">Historique</a></li>
					<li><a href="#">L'équipe</a></li>
					<li><a href="#">Le moulin en marche</a></li>
					<li><a href="#">Chiffres clés</a></li>
				</ul>
			</dd>		
		</dl>
		<dl>
		<dt onmouseover="javascript:montre('smenu2');">Nos produits</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">La tradi</a></li>
					<li><a href="#">Les classiques</a></li>
					<li><a href="#">Gamme rusti</a></li>
					<li><a href="#">Banette</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
		<dt onmouseover="javascript:montre('smenu3');">Nos services</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">L'installation</a></li>
					<li><a href="#">L'animation</a></li>
					<li><a href="#">La PLV</a></li>
					<li><a href="#">La formation</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
		<dt onmouseover="javascript:montre();"><a href="#">Actualités</a></dt>
		</dl>
		<dl>
		<dt onmouseover="javascript:montre('smenu4');">Contact</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Courriel</a></li>
					<li><a href="#">Achat - Vente fonds</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt onmouseover="javascript:montre();"><a href="#">Nous trouver</a></dt>
		</dl>
	</div>
	<div class="imagemenu3"></div>
	<div class="imagemenu4"></div>
</div>
</body>
</html>

Modifié par Gwlad (01 Feb 2007 - 12:52)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Désolée... je n'avais pas pris de temps de tout lire, mais c'est désormais chose faite !
Encore pardon !
Merci d'avance à l'aide que vous allez pouvoir m'apporter, et de votre accueil de bienvenue.
Modifié par Gwlad (01 Feb 2007 - 13:01)
Je suis désespérée par IE…

Voici une image de ce que je veux réussir à faire, qui fonctionne très bien sur Firefox, malheureusement ce n’est pas du tout le cas de IE.. Greee…

upload/10684-Image1.jpg

Je me suis débrouillée comme je pouvais avec mes histoire de transparence.
Par contre, ne sachant pas comment faire pour intégrer des images dans mon menu, j’ai mis mes images en fond, et mon menu transparent. Mais IE ne gère pas du tout cela Smiley decu

Quelqu’un peut-il m’aider à m’orienter vers le bon chemin ?
Ca serait vraiment gentil de votre part…

Voici mon nouveau CSS :


body {
margin: 30px;
padding: 0;
background: #330000;
font: 75% verdana, arial, sans-serif;
}
#page {
width: 815px;
     }
#imagemenu1 {
	background-image: url(images/index1.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:120px;
}
#imagemenu2 {
	background-image: url(images/index2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:237px;
}
.imagemenu3 {
	background-image: url(images/index3.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:28px;
}
.imagemenu4 {
	background-image: url(images/index4.jpg);
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
	height:125px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
margin-left: auto;
margin-right: auto;
width: 813px;
}
#menu dl {
float: left;
width: 135px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #FEEECA;
height: 28px;
opacity: 0;
}
#menu dd {
display: none;
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #FEEECA;
opacity: 0.95;
height: 20px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { 
background: #FF9F1E;
vertical-align: middle;
}
Sujet clos
Aller à