bonjour à tous

Je suis en train de terminé mon menu, mais j'ai un petit soucis d'alignement avec mes ul et li.

j'ai l'impression que j'ai un margin ou un padding qui c'est inséré mais je ne vois pas où

Ce qui est bizarre, c'est que quand j'appelle le menu seul, il est pas bon, mais par contre accompagné d'autre élément il est correct.

le menu
le site

pourriez vous m'aider?

merci d'avance flo

<style type="text/css">
#conteneur-menu{
    height: 35px; 
    position: relative;}
#menu-site {
    position: absolute; 
    width: 100%;
    background-image:url(http://grafikar.fsfrancesimulateur2.fr/site2/menu/plaque2.jpg); 
    }

#menu-site dl{
    width: 140px; 
    height:35px; 
    margin: 0; 
    padding: 0; 
    display: block; 
    float: left; 
    color:#000000; 
    font-weight: bolder; 
    text-shadow: 1px 1px 0px #ffffff;}

#menu-site dt{ 
    width: 140px; 
    height:35px; 
    display: block; 
    float: left; 
    line-height: 35px; 
    font-size: 14px; 
    font-weight: bolder; 
    text-align: center; 
    color:#000000;
    font-weight: bolder; 
    text-shadow: 2px 2px 0px #ffffff; 
    cursor: pointer;}
#menu-site dd{
    width: 140px; 
    height:35px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    float: left; 
    line-height: 35px; 
    text-align: center; 
    cursor: pointer;}
#menu-site dd ul li{
    display: block; 
    width: 140px; 
    height:35px; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    font-size: 14px; 
    list-style: none; 
    background-image:url(http://grafikar.fsfrancesimulateur2.fr/site2/menu/plaque2.jpg) ;
    font-weight: bolder; 
    color:#000000; 
    text-shadow: 2px 2px 0px #ffffff;}
#menu-site dd ul li a{
    margin: 0; 
    padding: 0; 
    font-weight:bolder; 
    color:#000000; 
    text-shadow: 1px 1px 0px #ffffff; 
    display: block; 
    text-decoration: none;
    width: 140px; 
    height: 35px; 
    line-height: 35px;}
#menu-site dd ul li a:hover {
    background-image:url(http://grafikar.fsfrancesimulateur2.fr/site2/menu/plaque3.jpg) ; 
    margin: 0; 
    padding: 0; 
    color:#000000;
    text-shadow: 2px 2px 0px #ffffff; 
    display: block; 
    text-decoration: none; 
    font-weight: bolder; 
    width: 140px; 
    height: 35px; 
    line-height: 35px; }

#menu-site dl dd{display: none;}

#menu-site dl:hover dd{display: block;}
#menu-site clear {clear: both;}
</style>

<div id="conteneur-menu">
<div id="menu-site">
        <dl>
            <dt>Accueil</dt>
            <dd>
                <ul>
                    <li><a href="./index.php">Accueil</a></li>
                    <li><a href="./contacteznous.php">Laisser un message</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Compagnie</dt>
            <dd>
                <ul>
                    <li><a href="http://tracker.fsfrancesimulateur2.fr/index.php/acars">Vols en Cours</a></li>
                    <li><a href="http://tracker.fsfrancesimulateur2.fr/index.php/pilots">Nos pilotes</a></li>
                    <li><a href="http://tracker.fsfrancesimulateur2.fr/aircraft/aircraft2.php">Nos avions</a></li>
                    <li><a href="http://tracker.fsfrancesimulateur2.fr/index.php/registration">Inscription tracker</a></li>
                    <li><a href="http://tracker.fsfrancesimulateur2.fr/index.php/profile">Centre pilote</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Forums</dt>
            <dd>
                <ul>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/forum/portal.php">Avec portail</a></li>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/forum/index.php">Sans portail</a></li>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/forum/ucp.php?mode=login">Connexion</a></li>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/forum/ucp.php?mode=register">Inscription</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Download</dt>
            <dd>
                <ul>
                    <li>Avions</li>
                    <li>Aéroport</li>
                    <li>Documentation</li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Tutoriels</dt>
            <dd>
                <ul>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/bd_info/tuto/mumble/mumble">Mumble</a></li>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/bd_info/tuto/hamashi/hamashi">Hamachi</a></li>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/bd_info/tuto/hamashi/hamashi">Hamachi2</a></li>
                    <li><a href="http://grafikar.fsfrancesimulateur2.fr/site2/bd_info/tuto/hamashi/hamashi">hamachi3</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Administration</dt>
            <dd>
                <ul>
                    <li>News</li>
                    <li>Calendrier</li>
                    <li>Backdoor</li>
                </ul>
            </dd>
        </dl>
</div>
</div>
<div class="clear"> </div>

3 réponses


Xtr3me
Réponse acceptée

Remplace ton #menu-site dd ul li par ceci:

#menu-site dd ul li{
    display: block; 
    width: 140px; 
    height:35px; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    font-size: 14px; 
    list-style: none; 
    background-image:url(http://grafikar.fsfrancesimulateur2.fr/site2/menu/plaque2.jpg) ;
    font-weight: bolder; 
    color:#000000; 
    text-shadow: 2px 2px 0px #ffffff;
    float:right}

Allége ton code aussi:

Ceci:

#menu-site dd ul li a:hover {
    background-image:url(http://grafikar.fsfrancesimulateur2.fr/site2/menu/plaque3.jpg) ; 
    margin: 0; 
    padding: 0; 
    color:#000000;
    text-shadow: 2px 2px 0px #ffffff; 
    display: block; 
    text-decoration: none; 
    font-weight: bolder; 
    width: 140px; 
    height: 35px; 
    line-height: 35px; }

Est la même chose que ça:

#menu-site dd ul li a:hover {
    background-image:url(http://grafikar.fsfrancesimulateur2.fr/site2/menu/plaque3.jpg) ; 
    text-shadow: 2px 2px 0px #ffffff
 }

En tout cas ton css est assez mal fait, pas besoin de redéfinir une largeur et hauteur sur un élément hover alors qu'elle est déjà définie sur l'élément non-hover par exemple, il y a plein de règles inutiles en soit.
Si tu définis quelque chose sur l'élément non-hover alors la règle s'appliquera d'elle même sur l'élément hover, l'élément hover permet de faire varier les valeurs en soit ou d'ajouter de nouvelles règles donc pas besoin de redéfinir à tout bout de champ ces règles.

En observant le rendu sur mon navigateur je ne vois aucun margin ou de padding en trop à première vu, où se trouve ton problème exactement ?

flo3376
Auteur

pan dans mes dents,
C'est vrai que je ne suis pas à l'aise avec le css, je pioche à droite à gauche pour essayer de m'en sortir mais..

en tout cas je test et je dis quoi.

merci déja