Héritage [Résolu] / min-width IE d'une div [Résolu]

Bonjour

Je cherche à simplifier le code suivant en utilisant les notions d'héritage :

Infos :
- les 3 blocs dans un <li> servent à placer 3 images côte à côte.
- le "_selected" permet de déterminer si l'onglet est actif.

HTML

<div id="menu_pere">
     <ul>
          <li>
 	       <div class="DebOnglet_selected">
	       </div>
		
	       <div class="FinOnglet_selected">	
	       </div>
	
	       <div class="Onglet_selected">
	            <a class="Longlet_selected" href="">Titre 1</a>
	       </div>	
          </li>

          <li>
 	       <div class="DebOnglet">
	       </div>
		
	       <div class="FinOnglet">	
	       </div>
	
	       <div class="Onglet">
	            <a class="Longlet" href="">Titre 2</a>
	       </div>	
          </li>

          ...

     </ul>
</div>

CSS

#menu_pere .Onglet{
line-height:25px;
min-width:90px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_inactif_centre_41.gif) repeat-x;}

#menu_pere .Onglet_selected {
line-height:25px;
min-width:105px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_actif_centre_41.gif) repeat-x;}

#menu_pere .DebOnglet{
width:12px;
height:25px;
background:url(../images/onglet_inactif_gauche_41.gif) no-repeat;
position:absolute;
left:0;
top:0; }

#menu_pere .DebOnglet_selected{
width:12px;
height:25px;
background:url(../images/onglet_actif_gauche_41.gif) no-repeat;
position:absolute;
left:0;
top:0; }

#menu_pere .FinOnglet{
width:12px;
height:25px;
background:url(../images/onglet_inactif_droite_41.gif) no-repeat;
position:absolute;
right:0;
top:0; }

#menu_pere .FinOnglet_selected{
width:12px;
height:25px;
background:url(../images/onglet_actif_droite_41.gif) no-repeat;
position:absolute;
right:0;
top:0; }

Voilà... Si j'arrivais à créer une classe "_selected" le tour serait joué, mais comment faire vu que mes div utilisent déjà une class ?

Merci
Modifié par BeliG (04 May 2007 - 09:14)

EDIT : Arf posté en même temps, merci Benjamin D.C. je teste ça

J'ai trouvé ça comme solution :

<div id="menu_pere">
     <ul>
          <li [b]class="_selected"[/b]>
 	       <div class="DebOnglet">
	       </div>

	       <div class="FinOnglet">	
	       </div>

	       <div class="Onglet">
	            <a class="Longlet" href="">Titre 1</a>
	       </div>	
          </li>

          <li class="">
 	       <div class="DebOnglet">
	       </div>

	       <div class="FinOnglet">	
	       </div>

	       <div class="Onglet">
	            <a class="Longlet" href="">Titre 2</a>
	       </div>	
          </li>

          ...

     </ul>
</div>

CSS

#menu_pere li .Onglet {
line-height:25px;
min-width:90px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_inactif_centre_41.gif) repeat-x;}

#menu_pere li._selected .Onglet {
min-width:105px;
background:url(../images/onglet_actif_centre_41.gif) repeat-x;}

#menu_pere li .DebOnglet {
width:12px;
height:25px;
background:url(../images/onglet_inactif_gauche_41.gif) no-repeat;
position:absolute;
left:0;
top:0; }

#menu_pere li._selected .DebOnglet {
background:url(../images/onglet_actif_gauche_41.gif) no-repeat; }

#menu_pere li .FinOnglet {
width:12px;
height:25px;
background:url(../images/onglet_inactif_droite_41.gif) no-repeat;
position:absolute;
right:0;
top:0; }

#menu_pere li._selected .FinOnglet {
background:url(../images/onglet_actif_droite_41.gif) no-repeat; }

Mais cette solution ne me semble pas très... académique, je me trompe ? De plus, elle ne fonctionne pas sous IE... donc à mettre de côté...
Modifié par BeliG (24 Apr 2007 - 16:39)

Benjamin D.C. a écrit :
Oui mais non Là tu cibles ton "_selected" dans ta feuille de style comme si c'était un enfant de ".DebOnglet" (ou ".FinOnglet"), alors que ce n'en est pas un

Mais je veux justement que ça soit un enfant !

Le but étant de trouver un moyen pour éviter ça :

#menu_pere .Onglet{
line-height:25px;
min-width:90px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_inactif_centre_41.gif) repeat-x;}

#menu_pere .Onglet_selected {
line-height:25px;
min-width:105px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_actif_centre_41.gif) repeat-x; }

Seul le background et le min-width changent, c'est quand même dommage d'avoir 3 lignes similaires d'un état à l'autre...

Toujours buggé avec IE même si je remplace "_selected" par "Selected", avec ou sans espace dans la feuille de style... J'suis à cours d'idées.
Modifié par BeliG (24 Apr 2007 - 16:36)

BeliG a écrit :

Mais cette solution ne me semble pas très... académique, je me trompe ? De plus, elle ne fonctionne pas sous IE... donc à mettre de côté...

Pourtant cette solution (le selected sur le li) semble tout à fait correcte et logique. Pourquoi trouves-tu cela pas très académique?

A mon avis c'est plutôt le _ qui pose problème à IE.
Modifié par <nicolas> (24 Apr 2007 - 21:31)

Deux choses me semblent potentiellement problématiques pour IE :
- le underscore en début de nom de classe (j'ai pas de référence en tête mais c'est le genre de chose dont je me méfie... mais bon, c'est peut-être tout à fait valide et ça passe peut-être sans problème) ;
- le sélecteur de classe double, de type élément.classe1.classe2, qui est tout à fait valide mais il me semble pas supporté par IE6/7.

Pour information :
<élément classe="classe1 classe2"> est tout à fait valide, et bien supporté par IE.
élément.classe1.classe2 est également valide, mais mal supporté (me semble-t-il) par IE.

BeliG a écrit :
Le but étant de trouver un moyen pour éviter ça :

#menu_pere .Onglet{
line-height:25px;
min-width:90px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_inactif_centre_41.gif) repeat-x;}

#menu_pere .Onglet_selected {
line-height:25px;
min-width:105px;
margin-left:12px;
margin-right:12px;
background:url(../images/onglet_actif_centre_41.gif) repeat-x; }

Quelque chose du genre :

[b]HTML :[/b]
<li class="selected">
...bla bla pas de classe "selected" pour les enfants du li...
<div class="onglet">
...
</li>

[b]CSS :[/b]
#menu_pere li div.onglet {
	line-height: 25px;
	min-width: 90px;
	margin-left: 12px;
	margin-right: 12px;
	background: url(../images/onglet_inactif_centre_41.gif) repeat-x;
}

#menu_pere li.selected div.onglet {
	min-width:105px;
	background-image: url(../images/onglet_actif_centre_41.gif);
}

?
Modifié par Florent V. (24 Apr 2007 - 22:14)

Un très grand merci à toi Florent V.

a écrit :
- le underscore en début de nom de classe (j'ai pas de référence en tête mais c'est le genre de chose dont je me méfie... mais bon, c'est peut-être tout à fait valide et ça passe peut-être sans problème) ;

En effet, IE le digère moyennement... à éviter.

a écrit :
- le sélecteur de classe double, de type élément.classe1.classe2, qui est tout à fait valide mais il me semble pas supporté par IE6/7.

Vrai également.

Voilà, me reste qq bugs à corriger, et notamment le correctif min-width sous IE qui fonctionne de manière étrange :

<!--[if lte IE 6]>
<style type="text/css">

#menu_pere li div.Onglet {
width: expression(document.body.clientWidth < 88? "90px" : "auto"); }

ça => marche pas

#menu_pere li div.Onglet {
width: expression(document.body.clientWidth < 200? "300px" : "auto"); }

ça => marche pas non plus

#menu_pere li div.Onglet {
width: expression(document.body.clientWidth > 88? "200px" : "auto"); }

ça => marche

#menu_pere li div.Onglet {
width: expression(document.body.clientWidth > 200? "300px" : "auto"); }

ça => marche aussi [eek] Quand on teste en > la taille indiquée 
sera toujours considérée comme "vraie"... 

</style>	
<![endif]-->

Modifié par BeliG (25 Apr 2007 - 10:07)