28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous.

J'ai besoin d'un petit coup de pouce quand à la creation d'un menu et son interpretation suivant les navigateurs.

Pour avoir un aperçus de la bête: http://edenor.fr

Maintenant un aperçu de mon problème:
Sous Firefox et Opera, mon lien colle au haut de mon li
Sous les autres navigateurs il est au centre vertical, ce qui me décale tout
Il me semble que le problème vienne de là, maintenant rien n'est moins sur

L'architecture du menu avec sous menu par javascript ressemble à ça

<dl>

#Menu

    <dt>
        <li></li>
    </dt>  

#Les sous menu

    <dd>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </dd>  

</dl>


pour le CSS mon fichier: http://beta.edenor.fr/ecran.css

Sinon Histoire de simplifier un peu:


ul#menu dl dt{
	margin: 0px;
	padding: 0px;
	list-style-type: none ;
	}

ul#menu {
	margin: 0px ;
	padding: 0px ;
	list-style-type: none ;
}

ul#menu li {
	margin: 0px;
	padding: 0px;
	float:left;
	height: 35px;
}

ul#menu dl {
float: left;
}

ul#menu li {
display: inline;
}


Merci de votre aide =)

PS: le vertical align ne change rien...
PPS: Si quelqu'un trouve un système pour avoir ce genre de sous menu en plus simple et sans javacript je suis preneur. Smiley smile

Cordialement, Thibaut
Modifié par epheo (11 Feb 2010 - 10:58)
Bonjour,

Respecter la grammaire d'HTML serait peut-être une bonne idée. <li> ne peut être enfant direct de <dt>. <li> ne peut être enfant que de <ul>.

Accessoirement utiliser <dl> pour un menu c'est pas des plus logiques (ce n'est pas une liste de définition).
La gramaire n'a jamais était mon fort en effet, que ce soit en français, html ou autre.
Je n'avai pas relevé =)

sinon je m'explique sur l'utilisation d'une liste de définition: j'ai récupéré un script tout fait pour les sous menu, il utilisait les listes de définition et en tant que bon gros flemard j'ai laissé ça tel quel. Smiley smile
bon, je part refaire tout bien
Modifié par epheo (11 Feb 2010 - 09:40)