Forum d'aide création graphique / [Résolu]mise en place menu deroulant

pierrek · 25-09-2009 16:51:20

bonjour a tous

j aimerai et j arrive pas a crée des sous menu déroulant
aller voir mon site et vous allez comprendre : www.photo-pierre.fr
sur l onglet photo sportive j ai un premier menu qui se deroule, et s est a partir de la le soucie
sur l onglet equitation j aimerai crée un autre menu pour année 2008 et un pour année 2009 et recrée un autre menu pour chaque année.

--------------------------------------------------------------------------------
voici en code HTML de ma page, qu est ce que je dois modifier pour avoir mes menus comme je l explique dans mon précédent message:::::::

Code:

<!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>www.photo-pierre.fr</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>

<style type="text/css">
<!--
.Style1 {font-family: Georgia, "Times New Roman", Times, serif}
.Style2 {color: #996699}
.Style3 {color: #FF0000}
-->
</style>
</head>
<body>
<div id="conteneur">
<div id="header"></div>

<div id="contenu">
<div id="centrer_menu">
<table width="611" height="31" cellpadding="0" cellspacing="0" class="centre" summary="">
<tr>
<td width="639" class="centre"> 

<ul id="menu">
<li> <a href="#">Acceuil</a>
<li><a href="#">Photo Sportive </a>
<ul>
<li><a href="#">Equitation</a>
<dl>
<dd id="smenu1">
<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>
</dl>
<dl> 
<li><a href="photo paysage et animaux/index.html" target="_blank">Photo Paysage </a>
<li><a href="Ski Semaine du 29.12.08 au 04.01.09/index.html" target="_blank">Ecole de Ski Noel 2008</a></li>
<li><a href="#">Photo Club</a></li>
</ul>
</li>
<li><a href="#">Photo Evenement </a>
<ul>
<li><a href="Mariage Laurent et Cynthia 22 aout 2009/index.html" target="_blank">Mariage 22/08/09</a></li>
<li><a href="#">Lien</a></li>
</ul>
</li>
<li><a href="#">Commande</a>
<ul>
<li><a href="Commande/photo Mariage.html" target="_parent">Photo mariage</a></li>
<li><a href="Commande/autre Photo.html" target="_parent">Autre Photo</a></li>
</ul>
</li>
<li><a href="Contact/contact.html" target="_parent">Contact</a></li>
<li>Livre d Or</li>
</ul>
</td>
</tr>
</table>

</div>
<div class="texte">
<p align="center" class="sfhover Style1 Style2"> </p>
<p align="center" class="sfhover Style1 Style2">Bienvenue sur le site dedie a la photographie d Equitation - Paysage ainsi qu Animaux Hautes Savoie et de mariage </p>
<p align="center" class="sfhover Style1 Style3"> </p>
<p align="center" class="sfhover Style1 Style3"> </p>
<p align="center" class="sfhover Style1 Style3">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="292" height="193">
<param name="movie" value="images/myalbum1.swf" />
<param name="quality" value="high" />
<embed src="images/myalbum1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="292" height="193"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="278" height="193" align="absmiddle">
<param name="movie" value="images/myalbum.swf" />
<param name="quality" value="high" />
<embed src="images/myalbum.swf" width="278" height="193" align="absmiddle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</p>
<p> </p> 
<br />
<a href="#">Curabitur tortor. </a>
<div style="text-align: right"> <a href="#header"><img src="images/haut.jpg" alt=""/></a> </div>
</div>
</div>
<center>
<a href="http://www.imingo.net" target=_top>
<img src="http://www.imingo.com/services/compteur/icptgr.php?id=jeromek"
name="imingo.com" border="0" alt="un compteur pour votre site"></a>
</center>



<div id="pied">
<!-- Ne pas retirer sans autorisation écrite comme indiqué dans nos conditions d'utilisation! -->
<a class="copyright" href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="Kit Graphique et template gratuit" ></a></div></div>
<!-- Ne pas retirer sans autorisation écrite comme indiqué dans nos conditions d'utilisation! -->

</body>
</html>

est ce que je peux vraiment rajouter ou pas

merci de votre aide

wervol · 25-09-2009 17:41:42

Bonjour
peut être une adresse qui vas t'aider j'ai trouver sa

http://www.tuto-fr.com/tutoriaux/tutori … nt-css.php

cordialement

pierrek · 25-09-2009 18:22:29

je vais essaye, merci de votre aide, je comprend mieux le principe, sinon autre petite question je cherche un livre d or a incéré, simplement
conaissez vous une adresse???
merci en tout de cas de votre aide

pierrek · 25-09-2009 18:34:07

je viend d essayer en modifiant mes codes, donc oui sa marche mais le sous menu n est pas coller au menu, et quand je bouge la sourie pour aller dans le sous menu et bien il disparait, j ai un ecart de 1 cm entre le menu et le sous menu,
j ai simplement modifier les codes HTML, est ce que je dois aussi modifier au niveau CSS,
merci de votre aide

wervol · 25-09-2009 19:49:40

pour le livre d'or tu a le choix je prends souvent la
http://www.i-services.net
mais tu a le choix il y a plusieurs adresses qui propose sa
maintenant concernant le css je ne suis pas très caler la dessus j'ai moi meme demander de l'aide mais certainement que tu dois changer sur le css mais je ne veux pas te faire une mauvaise manip

pierrek · 25-09-2009 23:55:28

j arrive toujours pas galère,
besoin d aide

pierrek · 26-09-2009 00:04:52

voici le code CSS pour ceux qui peuvent me trouver la solution, toujour le problème de mon sous menu non collé au menu et qui s efface dès que je quitte mon menu avec la souri

Code:

/*copyright by kitgraphiquegratuit.org*/
body             {background:#000 url(images/fond.jpg);margin:0;padding:0;background-attachment: fixed;text-align : center;}        
#conteneur       { margin:0 auto 0 auto;width: 800px;position:relative;;height:1%;text-align : left}    
#header          {height:184px; background:url(images/header.png) no-repeat top center;width:800px}     
#pub              {position:absolute;margin:0;padding:4.9% 5.7% 0 0 ;width:468px;height:60px;right:0}    

/*Contenu*/
#contenu       {width: 800px;padding: 0;margin:0 0 0 0;background:url(images/fond_contenu.jpg);color:#fff}
.texte            {width: 750px;padding: 0 25px 0 25px ;margin:0 0 0 0;font-family: verdana ; font-size: 10pt ;outline:none}
p              {color: #ffff88;padding: 15px 0 0 0 ;margin:0 0 0 0;font-family: verdana ; font-size: 15pt ;}    
a              {color: #ffff88;text-decoration: none;margin:0;outline:none}    
a:hover        {color: #f0f035;text-decoration: none;margin:0 }    

         
/*Pied et copyright*/
#pied               {clear: both;height:197px;width:800px;margin: 0;padding: 0;background:url(images/pied.png)}
a.copyright         {position:absolute;bottom:150px;width:155px;height:20px;outline:none;left:10px;} 
img                 {border:0}
#centrer_menu        {margin: 0 auto;padding: 0;text-align:center;width:800px;    background:url(images/fond_menu.jpg); height:30px}                        
table.centre {margin:0 auto;padding:0; height:30px;border:0;text-align:center}      
table, td, tr, img {  margin:0 0 0 0;  padding:0 ; border :0  ;}
a.copyright{position: absolute;z-index: 1;}


/* Menu */    
#menu, #menu ul        {padding : 0;margin : 0; list-style : none; line-height : 21px;text-align : center;}
#menu                  {font-weight : bold;font-family : Arial;font-size : 12px;}
#menu a                {display : block;height:30px;color: #FFF;text-decoration : none;line-height: 30px;width: 100px;font-weight: bold;    background: url(images/menu.jpg); outline:none}
#menu li /* Elements des listes */ {
    float : left;}/* pour ie qui ne reconnait pas "transparent" *//*border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
html>body #menu li     {border-right: 1px solid transparent;}
#menu li ul            {position: absolute; width: 100px; left: -999em; text-align:left;}
#menu li ul li         {text-align:left;border-left:#000106 solid 1px;border-right:#000106 solid 1px;}
#menu li ul li a       {text-align:center;outline:none;font-weight:normal;background-color:#2f2f2f;}
#menu li ul li a:hover {background-color:#757575;outline:none}
html>body #menu li ul li {border-bottom:#000106 solid 1px;}
#menu li ul ul         {margin : -22px 0 0 111px; border-left : 10px solid #fff; }
html>body #menu li ul ul {border-left : 1px solid transparent;}
#menu a:hover {background: url(images/menu_hover.jpg)}
#menu li:hover ul ul, #menu li.sfhover ul ul  {left: -999em;text-align:left;padding:1px 2px;font-weight:normal;}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul{left: auto;min-height: 0;}

wervol · 26-09-2009 00:29:11

bonsoir
tu a bien regarder la ?
http://www.tuto-fr.com/tutoriaux/tutori … ace-classe

et la

http://www.tuto-fr.com/tutoriaux/tutori … -deroulant

je ne peux malheureusement pas t'aider plus

#1 25-09-2009 16:51:20

[Résolu]mise en place menu deroulant

Code:

#2 25-09-2009 17:41:42

Re: [Résolu]mise en place menu deroulant

#3 25-09-2009 18:22:29

Re: [Résolu]mise en place menu deroulant

#4 25-09-2009 18:34:07

Re: [Résolu]mise en place menu deroulant

#5 25-09-2009 19:49:40

Re: [Résolu]mise en place menu deroulant

#6 25-09-2009 23:55:28

Re: [Résolu]mise en place menu deroulant

#7 26-09-2009 00:04:52

Re: [Résolu]mise en place menu deroulant

Code:

#8 26-09-2009 00:29:11

Re: [Résolu]mise en place menu deroulant

Pied de page des forums