Sujet Précédent Sujet Suivant

Menu déroulant vertical css (espace en trop)

Résolu/Fermé
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 - 28 mars 2009 à 23:20
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 12 avril 2009 à 23:38
Bonjour à tous,
Je rencontre un problème avec un code css.
J'essaie de créer un menu déroulant vertical, mais pour le moment mon menu présente un espace(comme ci dessous) quand je survole les menus <dt>

>-----------------------------------<
Menu 1 >>
...............Lien 1
...............Lien 2
...............Lien 3
Menu 2
Menu 3
>-----------------------------------<

Et donc je souhaite que ce drôle d'espace disparaisse, et que les sous menu (qui se sont déroulés) soit porté bien sur le droite du menu, pas en dessous, comme ça :

>-----------------------------------<
Menu 1 >> Lien 1
Menu 2......Lien 2
Menu 3......Lien 3
>-----------------------------------<


Je comprendrais que cela ne vous parle pas trop, est-ce qu'un screen de mon problème vous aiderait plus à comprend ?

>> état actuel en image (survol du menu 1) :
https://i82.servimg.com/u/f82/12/22/58/47/sans_t10.jpg

voici mon code css de mon menu déroulant:
<------------------------------------------------------------>
div#wrapper div#sidebar ul {
display:block;
padding: 0;
width: 147px;
margin:0px;
}

div#wrapper div#sidebar dl dd {
display:none;
}

div#wrapper div#sidebar ul li {
position:relative;
list-style: none;
}

div#wrapper div#sidebar ul ul{
position: absolute;
top: 0;
left: 100px;
}


div#wrapper div#sidebar dl:hover dd {
display:block;
}

div#wrapper div#sidebar a:hover {
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
color: #7baded;

}

<------------------------------------------------------------>

ne faites pas attention à "div#wrapper div#sidebar"... ce sont des divisions précédentes de mes pages
A voir également:

17 réponses

Réponse 1 / 17
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 mars 2009 à 14:57
il faut bien placer la balise de fermeture du h1 dans le code !

et donner des valeur en css a h1

voila le code avec les titre des menus en <h1> 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css" >
/*<![CDATA[*/

    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
    }
    .menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
    }
    .menu li {
        background-color: #cccc99;
        float: left;
    }
    .menu li.sub {
        background-color: #cccc99;
    }
    .menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
    }
    .menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
    }
    .menu b {
        float: right;
        margin-right: 5px;
    }
    * html .menu a, * html .menu a:visited {
        width: 11em;
    }
    * html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover {
        position: relative;
    }
    .menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
    }
    .menu li:hover > ul {
        visibility: visible;
    }
    .menu ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    h1{ 
    font-size: 10pt; 
    float: left;
    margin: 0px; 
    }
    /*]]>*/
    </style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <h1><a href="#"><b>»</b>Menu 1           
          <!--[if IE 7]>
                    <!--></a>  </h1>         
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 1a</a></li><li>          
          <a href="#">Sub Menu 1b</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
       <h1> <a href="#"><b>»</b>Menu 2           
          <!--[if IE 7]>
                    <!--></a>  </h1>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 2a</a></li><li>          
          <a href="#"><b>»</b>Sub Menu 2b             
            <!--[if IE 7]>
                        <!--></a>    
          <!--<![endif]-->           
          <!--[if lte IE 6]>
                    <table>
                    <tr>
                    <td>
                    <![endif]-->           
          <ul><li>            
            <a href="#"><b>»</b>Sub sub Menu 2b               
              <!--[if IE 7]>
                            <!--></a>             
            <!--<![endif]-->             
            <!--[if lte IE 6]>
                        <table>
                        <tr>
                        <td>
                        <![endif]-->             
            <ul><li>              
              <a href="#">Sub Menu 2ba</a></li>            
            </ul>            
            <!--[if lte IE 6]>
                        </td>
                        </tr>
                        </table>
                        </a>
                        <![endif]--></li>          
          </ul>          
          <!--[if lte IE 6]>
                    </td>
                    </tr>
                    </table>
                    </a>
                    <![endif]--></li><li>          
          <a href="#">Sub Menu 2Bb</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <h1><a href="#">Menu 3</a></h1>  </li><li>        
        <h1><a href="#">Menu 4</a></h1>  </li>      
      </ul>    
    </div>  
  </body>
</html>
1
Réponse 2 / 17
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 mars 2009 à 23:30
de retour de bbq :-))

le probleme vient juste de ce que tu as modifier dans la CSS du menu ! 
.menu {
	height: 21px;
	line-height: 21px;
	list-style-type: none;
}


met ca a la place ! 

.menu {
	height: 100px;
	list-style-type: none;
}



et pour le swf header met ce code a la place du tient c est beaucoup mieux pour inserer des swf ! 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="935" height="450" id="flash">
            <param name="movie" value="images/header/header.swf" />
            <param name="quality" value="high" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="images/header/header.swf" width="935" height="450">
              <param name="quality" value="high" />
              <!--<![endif]--> 
              <a href="https://get.adobe.com/flashplayer/">
                <img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a> 
              <!--[if !IE]>-->
            </object> 
            <!--<![endif]-->
          </object>


A+
1
Réponse 3 / 17
chupa23 Messages postés 149 Date d'inscription samedi 13 décembre 2008 Statut Membre Dernière intervention 20 juillet 2009 28
28 mars 2009 à 23:28 
div#wrapper div#sidebar ul ul{
position: absolute;
top: 0;
left: 100px;
}

Sans code Html c est tres dur d et t'aider mais apparement c est ça qui foire : left: 100px; passe le a 1px (ou supprime le) pour voir si les liens se replace bien.
0
Réponse 4 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
28 mars 2009 à 23:42
j'ai essaiyé ce que tu me conseil à l'instant : je n'est pas de changement.


Si cela peux t'aider voici le html qui correspond au menu :

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

<dt><a href="#">Menu 1</a></dt>

<dd>
<ul>

<li><a href="#">Lien 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

</ul>

</dd>

</dl>

<dl>

<dt><a href="#">Menu 2</a></dt>

<dd>
<ul>

<li><a href="#">Lien 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

</ul>

</dd>

</dl>

<dl>

<dt><a href="#">Menu 3</a></dt>

<dd>
<ul>

<li><a href="#">Lien 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

</ul>

</dd>

</dl>

</div>
-------------------------------
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 00:15
J'ai trouvé une piste sur ce site :
http://www.css-faciles.com/menu-deroulant.php

passage => "Éviter les décalages verticaux"

Et pourtant le code ne marche pas : voilà le nouveau css complété encore une fois :



--------------------------
div#wrapper div#sidebar div#menu ul {
display:block;
padding: 0;
width: 147px;
margin:0px;
}

div#wrapper div#sidebar div#menu dl dd {
display:none;
}

div#wrapper div#sidebar div#menu ul li {
position:relative;
list-style: none;
display:block;
width:147px
}

div#wrapper div#sidebar div#menu ul li:hover {
display:block;
}


div#wrapper div#sidebar div#menu ul ul{
display:none;
left:147px;
position: absolute;
top: 0px;
left: 147px;
margin:0px; padding: 0px;
}


div#wrapper div#sidebar div#menu dl:hover dd {
display:block;
}
---------------------------
0
Réponse 6 / 17
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 mars 2009 à 03:21
Salut

en voila un adapte le 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/

    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
    }
    .menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
    }
    .menu li {
        background-color: #cccc99;
        float: left;
    }
    .menu li.sub {
        background-color: #cccc99;
    }
    .menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
    }
    .menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
    }
    .menu b {
        float: right;
        margin-right: 5px;
    }
    * html .menu a, * html .menu a:visited {
        width: 11em;
    }
    * html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover {
        position: relative;
    }
    .menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
    }
    .menu li:hover > ul {
        visibility: visible;
    }
    .menu ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }

    /*]]>*/
    </style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <a href="#"><b>»</b>Menu 1           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 1a</a></li><li>          
          <a href="#">Sub Menu 1b</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu 2           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 2a</a></li><li>          
          <a href="#"><b>»</b>Sub Menu 2b             
            <!--[if IE 7]>
                        <!--></a>            
          <!--<![endif]-->           
          <!--[if lte IE 6]>
                    <table>
                    <tr>
                    <td>
                    <![endif]-->           
          <ul><li>            
            <a href="#"><b>»</b>Sub sub Menu 2b               
              <!--[if IE 7]>
                            <!--></a>              
            <!--<![endif]-->             
            <!--[if lte IE 6]>
                        <table>
                        <tr>
                        <td>
                        <![endif]-->             
            <ul><li>              
              <a href="#">Sub Menu 2ba</a></li>            
            </ul>            
            <!--[if lte IE 6]>
                        </td>
                        </tr>
                        </table>
                        </a>
                        <![endif]--></li>          
          </ul>          
          <!--[if lte IE 6]>
                    </td>
                    </tr>
                    </table>
                    </a>
                    <![endif]--></li><li>          
          <a href="#">Sub Menu 2Bb</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#">Menu 3</a></li><li>        
        <a href="#">Menu 4</a></li>      
      </ul>    
    </div>  
  </body>
</html>
0
Réponse 7 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 11:19
ok merci je testerai ça rapidement dès que j'ai un créneau..
;)
0
Réponse 8 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 12:35
oups. ya un nouveau problème :S

J'ai adapté le code que tu m'a donné : le menu fonctionne bien en lui même.
Le problème c'est quand je le met dans ma page.
En effet j'utilisais des <h1> pour donner un titre à mes menus avant.
Or maintenant que ce menu déroulant est en place, les titre en H1 n'apparaissent pas (enfin si, mais il sont masqué s SOUS les menus déroulants.

Donc je suis confronté à un nouveau pépin :
Voici le screen avant insertion du menu -----> https://i82.servimg.com/u/f82/12/22/58/47/sans_t13.jpg

Voici celui après insertion du menu déroulant ----> https://i82.servimg.com/u/f82/12/22/58/47/sans_t12.jpg

Comme toujours je vous donne les portions de code:
¤ HTML (Donc là c'est les menus déroulant avec les titres)
>----------------------------------------<
div id="sidebar">
<h1>titre 1</h1>
<div class="menu">
<ul><li>
<a href="#"><b>»</b>Menu 1
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 1a</a></li><li>
<a href="#">Sub Menu 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#"><b>»</b>Menu 2
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2a</a></li><li>
<a href="#"><b>»</b>Sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2ba</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Sub Menu 2Bb</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li>
<a href="#">Menu 4</a></li>
</ul>
</div>

<h1>titre 2</h1>

<div class="menu">
<ul><li>
<a href="#"><b>»</b>Menu 1
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 1a</a></li><li>
<a href="#">Sub Menu 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#"><b>»</b>Menu 2
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2a</a></li><li>
<a href="#"><b>»</b>Sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2ba</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Sub Menu 2Bb</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li>
<a href="#">Menu 4</a></li>
</ul>
</div>

<h1>titre 3</h1>

<div class="menu">
<ul><li>
<a href="#"><b>»</b>Menu 1
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 1a</a></li><li>
<a href="#">Sub Menu 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#"><b>»</b>Menu 2
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2a</a></li><li>
<a href="#"><b>»</b>Sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2ba</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Sub Menu 2Bb</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li>
<a href="#">Menu 4</a></li>
</ul>
</div>
</div>
>----------------------------------------<

¤ CSS
Et ici le css de tout ce qui peux concerner le problème...

<---------------------------------------->

.menu {
height: 21px;
line-height:21px;
}
.menu ul {
margin: 0px;
padding: 0px;
position: relative;
list-style-type: none;
width: 147px;
height:21px
}
.menu li {
background: transparent url(images/design/sidebar_link.gif) no-repeat left top;
float: left;
}
.menu li.sub {
background: transparent url(images/design/sidebar_link.gif) no-repeat left top;
}
.menu table {
position: absolute;
top: 0pt;
left: 0pt;
}
.menu a, .menu a:visited {
display: block;
text-decoration: none;
height: 21px;
line-height: 21px;
width: 11em;
color: #FFFFFF;
padding-left: 1em;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.menu b {
float: right;
margin-right: 5px;
}
* html .menu a, * html .menu a:visited {
width: 11em;
}
* html .menu a:hover {
color: #FFFFFF;
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
position: relative;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover {
position: relative;
}
.menu a:active, .menu a:focus {
color: #FFFFFF;
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover > a {
color: #FFFFFF;
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li ul {
padding: 2em;
visibility: hidden;
position: absolute;
top: -2em;
left: 7em;
background-color: transparent;
}
.menu li:hover > ul {
visibility: visible;
}
.menu ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}

....................................................................................................................

div#wrapper div#sidebar {
float: left;
width: 147px;
margin-right: 2px;
}

div#wrapper div#sidebar a {
display: block;
height: 21px;
width: 134px;
line-height: 21px;
background: transparent url(images/design/sidebar_link.gif) no-repeat left top;
color: #FFFFFF;
font-weight: bold;
padding-left: 13px;
}

div#wrapper div#sidebar a:hover {
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
color: #7baded;

}

div#wrapper div#sidebar h1 {
color: #f7db16;
font-size: 11px;
margin: 0px;
padding: 0px;
height: 32px;
line-height: 32px;
padding-left: 11px;
padding-bottom: 3px;
background: transparent url(images/design/sidebar_header.gif) no-repeat left;
margin-bottom: -3px;

}

<-------------------------------------->

Si vous comprenez mon problème je veux bien un petit tuyau, je me gratte la tête depuis un moment déjà.
0
Réponse 9 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 15:13
Bingo ! c'était le float:left; qui me manquait sur les .h1 du css !
Avec un width:147px; le tout est parfait ^^

merci encore à vous, vous êtes géniales ;)
Mon problème est résolu.

A bientôt pour de nouvelle aventures chocolatée !
0
Réponse 10 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 16:10
Désolé de vous embêter ^^'
Franchement désolé...

Mais j'ai un ultime et dernier soucis en fait :
Le premier menu de la liste ne se déroule pas, mais tout les autres si.
Pour quelles raison ?

J'ai vérifier le code, il est comme les autres (tout semble correct), et pourtant j'ai beau survoler du curseur, rien en ce passe (uniquement sur le premier de la liste)
0
Réponse 11 / 17
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 mars 2009 à 17:24
??????

reverifis parce que je viens de faire un copie colle du code que j ai ^poste ! et aucun probleme !
0
Réponse 12 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 18:04
et pourtant non le premier menu ne se déroule pas :S

je vais mettre la page en ligne pour voir...
Peut-être un problème de compatibilité avec le reste du code de ma page ?
je reposterai quand elle sera en ligne.
0
Réponse 13 / 17
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 mars 2009 à 18:10
REGARDE C EST LE COPIE COLLE
0
Réponse 14 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
29 mars 2009 à 18:22
oui oui, tout seul ça fonctionne bien :
mais dans la page ya ce problème dont je te parle. Regarde je l'ai mis en ligne temporairement:
http://360playground.free.fr/b%C3%A9ta/index.html
Le menu est sur la gauche (le premier ne se déroule pas)

pourtant j'ai suivi tout ton code, revivifier le css... et tout et tout.

Le problème doit être ailleurs (compatibilité avec des lignes déjà écrites précédemment.

Tu peux télécharger le fichier css entier de la page ici => http://360playground.free.fr/b%C3%A9ta/style.css
0
Réponse 15 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
31 mars 2009 à 00:18
oh que je suis bête mon dieu !
merci énormément : problème résolut ! et pour de bon ;)

Je n'aurais pas du modifier ces valeurs effectivement. Et ça semble évident une fois que ça marche...

je vous doit énormément sur ce coup là ! j'espère pouvoir vous aider un jour en retour. ^^ A bientôt !

PS : Franchement sympa le code SWF en bonus ;)
0
Réponse 16 / 17
captainfalcon92 Messages postés 128 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 11 février 2011 22
12 avril 2009 à 23:33
Nouveau problème ^^'
Je cherche à changer le background des sous-menus. Mais en conservant celui des menus principaux.
Je ne trouve pas la ligne qui correspond aux fond des sous menus : je crains qu'ils soient tous communs.

Comment les dissocier svp ?
0
Réponse 17 / 17
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
12 avril 2009 à 23:38
dans le CSS tu rajoute un 
.sub a{
background-color: #d56419;}
tu mettra ta couleur !


Et tu donne la class="sub" au <ul> des sub ;-)) 
 <ul class="sub"><li>
          <a href="#">Sub Menu 1a</a></li><li>
          <a href="#">Sub Menu 1b</a></li>
        </ul>


A+
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses