28173 sujets

CSS et mise en forme, CSS3

[résolu] Menu avec class ou id different sous IE7 - Ok avec FF

Bonjour,

Url site actuel utilisant des frame http://www.biometrie-online.net
Url de mon site en test sans frame http://www.biometrieonline.org

J'ai commencé par faire des groupes de menus en utilisant des id qui marchent très bien, mais comme j'ai plusieurs listes différentes pour les menus et que l'on ne doit pas utiliser plusieurs fois les mêmes id sur une même page, je veux remplacer les id par des class.

Sur FF cela ne change rien, mais sous IE7 il y a un mélange entre la définition faite pour les menus et la définition des liens pour le reste de la page

Sur le site en test - Le menu de droite utilise des id et le menu de gauche des class

Le CSS avec ID (menu de droite)
ul#menu-droite {
list-style-type: none;
margin: 5px 0px 5px 5px;
padding: 0;
}
ul#menu-droite a {
	display: block;
	width: 11em;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
	text-decoration: none;
	margin: 2px 0;
	vertical-align: middle;
	line-height: 1.5em;
}
ul#menu-droite a:link {
}
ul#menu-droite a:visited {
}
ul#menu-droite a:hover {
	background-color: #CC0000;
	text-align: right;
	font-style: italic;
}


Le html menu de droite

<td class="menu-td-menu">
	  <ul id="menu-droite">
          <li><a href="http://www.biometrieonline.org/liens/liens_fournisseurs-produits.php" title="Les distributeurs de produits biométriques">Produits</a></li>
          <li><a href="http://www.biometrieonline.org/liens/liens_fournisseurs-conseil.php" title="Les sociétés de conseil indépendantes des fournisseurs">Conseil</a></li>
          <li><a href="http://www.biometrieonline.org/liens/liens_fournisseurs-vente-internet.php" title="Sites internet de vente en ligne de produits biométriques">Vente 
            internet</a></li>
        </ul></td>


Le CSS avec CLASS (menu de gauche)

.menu-ul {
	list-style-type: none;
    margin: 5px 0px 5px 5px;
    padding: 0;
}
.menu-ul a {
	display: block;
	width: 11em;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
	text-decoration: none;
	margin: 2px 0;
	vertical-align: middle;
	line-height: 1.5em;
}
.menu-ul a:hover {
	background-color: #CC0000;
	text-align: right;
	font-style: italic;
}
.menu-ul a:link {
}
.mmenu-ul a:visited {
}


Le html menu de gauche
<td class="menu-td-menu">
	<ul class="menu-ul">
        <li><a href="http://www.biometrieonline.org/dossiers.php" title="Des documents divers, technique, juridique, marché, articles... à télécharger">Sommaire</a></li>
        <li><a href="http://www.biometrieonline.org/dossiers.php#generalites">Généralités</a></li>
        <li><a href="http://www.biometrieonline.org/dossiers.php#droit">Juridique</a></li>
        <li><a href="http://www.biometrieonline.org/dossiers.php#technique">Technique</a></li>
      </ul></td>


Il doit y avoir une erreur tellement énorme que je ne la vois pas ...
Modifié par BiometrieOnline (22 Apr 2007 - 16:40)
Salut,
sans savoir ce que tu as comme style pour tes td menu-td-menu, je dirais que c'est normal, tes liens (a) doivent hériter de propriétés que tu as attribuées d'une manière générale sur les hover des liens qui sont dans la partie du flux où se trouve ton menu de gauche, probablement un font-size 12 et un text-decoration overlined underlined.

Si tu veux qu'ils n'en héritent pas il faut les overwriter (désolé, je ne sais pas comment dire ça en français alors c'est le néologisme du jour...) en les redéfinissant dans les hover des liens de ton menus ou ne les attribuer qu'à des liens porteurs d'une class donnée ou appartenant à un cadre plus étroit. Ouah, what a phrase, j'espère avoir été clair Smiley smile

have swing
Bonjour,

Heu! pas facile à comprendre la réponse ... un peu de vacances et cela ira mieux pour la rédaction peut être (sourire)

En tout cas moi la réponse m'a réveillé et donnée quand même la solution

Merci

Je résume ci-dessous mon analyse avant de fermer le sujet


Solution 1 avec des ID pour chaque liste de menu
Ca fonctionne mais pas correct d'utiliser plusieurs fois le même ID dans une page
<table>
     <tr><td>
        <ul id="menu">
        <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        </ul></td></tr>
etc...

 <tr><td>
        <ul id="menu">
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>
        </ul></td></tr>
</table>


Solution 2 avec des CLASS pour chaque liste de menu
Il faut penser à tout définir ul, li, a, a:hover, a:link, a:visited ... pour éviter les conflits avec d'autres définitions dans une même page et il manque toujours quelque chose qui n'a pas été définit

<table>
     <tr><td>
        <ul class="menu">
        <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        </ul></td></tr>
etc...

 <tr><td>
        <ul class="menu">
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>
        </ul></td></tr>
</table>


Solution 3 avec une seule ID avant le tableau (contenant l'ensemble des listes de menu)
Ca fonctionne, cela est plus correct (une seule ID du même nom)
pas besoin de tout définir complétement a:hover, a:link, a:visited ... car il n'y a pas de conflit avec d'autres définitions dans une même page

Pourquoi faire simple quand on peut faire compliqué ... c'est tellement évident qu'il faut le faire de cette façon

<div id="menu">
<table>
     <tr><td><ul>
        <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        </ul></td></tr>
etc...

     <tr><td><ul>
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>
        </ul></td></tr>
</table>
</div>


Solution 4 - Ne pas utiliser de tableau, mais peut être quelque du genre ? (ci-dessous)
Mais là je ne suis pas encore assez expérimenté
Cela ne fait que quelques jours que j'ai commencé à refaire mon site en frame par un site en DIV/CSS, alors les tableaux sont encore bien pratique pour moi

<dl id="menu">
<dt>Titre de la liste de menu 1</dt>
       <dd>
               <ul>
                     <li><a href="#">menu 1</a></li>
                     <li><a href="#">menu 2</a></li>
                     </ul></dd>
etc...

 <dt>Titre de la liste de menu 2</dt>
       <dd>
               <ul>
                     <li><a href="#">menu 3</a></li>
                     <li><a href="#">menu 4</a></li>
                     </ul></dd>
</dl>



Je vais donc utiliser la solution 3 et je passerais à la 4 ensuite ... sauf si en quelques minutes j'arrive à faire la 4
Sujet clos
Aller à