High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Menu déroulant vertical css (espace en trop)

Dernière réponse le 12 avr 2009 à 23:38:01 captainfalcon92, le 28 mar 2009 à 23:20:37 
 Signaler ce message aux modérateurs

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) :
http://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

Configuration: Windows Vista
Firefox 3.0.7

Posez votre question Répondre

1

chupa23, le 28 mar 2009 à 23:28:36

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.

   
Répondre à chupa23

2

captainfalcon92, le 28 mar 2009 à 23:42:24

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>
-------------------------------

   
Répondre à captainfalcon92

3

captainfalcon92, le 29 mar 2009 à 00:15:56

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;
}
---------------------------

   
Répondre à captainfalcon92

4

RAD ZONE, le 29 mar 2009 à 03:21:22

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>

♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

5

captainfalcon92, le 29 mar 2009 à 11:19:57

Ok merci je testerai ça rapidement dès que j'ai un créneau..
;)

   
Répondre à captainfalcon92

6

captainfalcon92, le 29 mar 2009 à 12:35:17

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 -----> http://i82.servimg.com/u/f82/12/22/58/47/sans_t13.jpg

Voici celui après insertion du menu déroulant ----> http://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à.

   
Répondre à captainfalcon92

7

RAD ZONE, le 29 mar 2009 à 14:57:31
  • +1

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>

♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

8

captainfalcon92, le 29 mar 2009 à 15:13:09

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 !

   
Répondre à captainfalcon92

9

captainfalcon92, le 29 mar 2009 à 16:10:12

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)

   
Répondre à captainfalcon92

10

RAD ZONE, le 29 mar 2009 à 17:24:58

??????

reverifis parce que je viens de faire un copie colle du code que j ai ^poste ! et aucun probleme !
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

11

captainfalcon92, le 29 mar 2009 à 18:04:48

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.

   
Répondre à captainfalcon92

12

RAD ZONE, le 29 mar 2009 à 18:10:36

REGARDE C EST LE COPIE COLLE
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

13

captainfalcon92, le 29 mar 2009 à 18:22:43

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

   
Répondre à captainfalcon92

14

RAD ZONE, le 29 mar 2009 à 23:30:25
  • +1

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="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a> 
              <!--[if !IE]>-->
            </object> 
            <!--<![endif]-->
          </object>


A+
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

15

captainfalcon92, le 31 mar 2009 à 00:18:57

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 ;)

   
Répondre à captainfalcon92

16

captainfalcon92, le 12 avr 2009 à 23:33:38

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 ?

   
Répondre à captainfalcon92

17

 RAD ZONE, le 12 avr 2009 à 23:38:01

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+
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE
Posez votre question Répondre
Ils ont besoin de votre aide