Problème pour mettre 2 menu sur son site
francis huster
-
francis huster -
francis huster -
Bonjour,
je travaille en se moment sur mon 1er site jais tout fait grasse au siteduzéro mai je suis bloquer car je n'arrive pas a placer mon 2e menu sur mon site alors je viens vous demander de laide si possible.
je voudrais avoir mon menu comme ceci :(c'est un montage)
http://zepload.com/images/1268912353_montagemenu.JPG
quand je mai mon menu après le corps de la page :
http://zepload.com/images/1268912435_menudessou.JPG
et quand je le met avant le corps de ma page :
http://zepload.com/images/1268912499_menudessu.JPG
merci d'avance
je travaille en se moment sur mon 1er site jais tout fait grasse au siteduzéro mai je suis bloquer car je n'arrive pas a placer mon 2e menu sur mon site alors je viens vous demander de laide si possible.
je voudrais avoir mon menu comme ceci :(c'est un montage)
http://zepload.com/images/1268912353_montagemenu.JPG
quand je mai mon menu après le corps de la page :
http://zepload.com/images/1268912435_menudessou.JPG
et quand je le met avant le corps de ma page :
http://zepload.com/images/1268912499_menudessu.JPG
merci d'avance
Configuration: Windows XP / Firefox 3.6
1 réponse
-
désoler j'ai oublier les codes :
HTML :
<!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" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="designmenu.css" />
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:206px;
top:213px;
width:620px;
height:732px;
z-index:1;
}
-->
</style>
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<ul id="menu">
<li>
<a href="index.html">Accueil</a>
</li>
<li>
<a href="#">Membres</a>
<ul>
<li><a href="#">Se connecter</a></li>
<li><a href="#">Inscription</a></li>
</ul>
</li>
<li>
<a href="#">Forum</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Livres D'or</a>
</li>
</ul>
<br />
<br />
<br />
<div class="glossymenu">
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >Logiciel</a>
<div class="submenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">fruity Loops</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Cubase</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Ableton Live</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Reason</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Sonar</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Sound Forge</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Pro Tools</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Adobe Audition</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >Musique</a>
<div class="submenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Hardcor</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Hardstyle</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Jumpstyle</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="http://www.cssdrive.com">Tutoriel</a>
<div class="submenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">fruity Loops</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Cubase</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Ableton Live</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Reason</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Sonar</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Sound Forge</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Pro Tools</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Adobe Audition</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="http://www.cssdrive.com">Telechargement</a>
<div class="submenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Soundpack</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Plugin</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Skins</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Poster un telechargement</a></li>
</ul>
</div>
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>
</div>
<br />
<!-- Le corps -->
</body>
</html>
CSS :
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: black;
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
} h1, h2, p
{
color: #a9a9a9;
}
/* menu horizontal */
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 25px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : "Lucida Grande", "Trebuchet MS" ; /* on utilise Arial, c'est plus beau ^^ */
font-size : 14px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : transparent url("images/glossyback.jpg") repeat ; /* couleur de fond */
color : #ffffff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 152px; /* largeur */
}
#menu li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : none; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: none ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 152px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : none; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : none; /* on met une bordure transparente en haut de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : none ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #ffffff; /* On passe le texte en noir... */
background : transparent url("images/glossyback2.jpg") repeat ; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#menu li ul li a
{
background : transparent url("images/glossyback.jpg") repeat ;
}
/* menu vertical accordeon */
.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: black url(images/glossyback2.1.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background-image: url(images/glossyback2.2.gif);
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}
