28219 sujets

CSS et mise en forme, CSS3

Cumul class et id

Bonjour à tous.

J'ai certains div qui ont des propriétés communes (par exemple leur mode de positionnement), et d'autres différentes selon chacun (leur marge à gauche). Je pensais donc faire une class pour ce qui est commun, et plusieurs id pour ce qui est différent.

J'avais fait un essai, comme ça :
HTML :
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<span class="z" id="1">a</span>
<span class="z" id="2">b</span>
</body>
</html>

CSS :
.z{font-size:24pt}
#1{color:red}
#2{color:green}


Et ça marche, j'ai le A rouge et le B vert.

Malheureusement, quand j'applique ça à mes div, ça ne marche plus. Qqn saurait-il pourquoi ?
Deux écueils dans le choix des sélecteurs viennent polluer le test ci-dessus :
- les sélecteurs à un seul caractère lettre sont problématiques pour certains parseurs, pour des raisons non élucidées et hors normes.
- les sélecteurs commençant par un nombre sont problématiques, pour des raisons liés aux implémentations CSS et aux modes de rendus Quirks/strict, entre-autres.

Donc reprendre avec des sélecteurs du type .foo et #foo1, #foo2
Modifié par Laurent Denis (09 Aug 2005 - 13:08)
Il manque aussi un doctype dans ta page.

L'ajouter permet déjà d'écarter les problèmes de quirks mod qui pourraient entrer en jeu dans ton problème.
Coucou. La page que je vous ai envoyé est une page de test, c'est pourquoi elle est sans doctype. C'est pourtant elle qui fonctionne, et non celle avec le doctype, càd celle de mon site que je modifie.

J'avais fait ce que je vous montre uniquement pour voir si les interactions class-id marchaient bien.

Avec des lettres, ça marche presque sous friefox, mais ça bugge complètement avec IE.

Je peux vous fournir le code complet de la page que je teste, mais il est assez long et pas très intéressant, je vais d'abord faire des tests moi-même et je vous tiendrai au courant.
Tu dois faire tes tests dans les mêmes conditions que la page réelle, c'est à dire avec un Doctype.

Ce n'est pas une broutille le doctype !
Ca influence pas mal le comportement des navigateurs !

Ton code complet, non, la partie concernée oui !

Un exemple en ligne serait encore mieux.

Pour récapituler si j'ai bien compris ce que tu veux, tu as plusieurs éléments qui ont des styles communs et des styles particuliers.

Donc :

<element1 class="commons" id="particular1">...</element1>
<element2 class="commons" id="particular2">...</element2>




*.commons { styles pour la class commons ]
element1#particular1 { style pour l'id particular1 }
element2#particular2 { style pour l'id particular2 }
Bonsoir.
Dans cet ordre d'idées, il y a peut-être ceci qui peut t'intéresser : Journal du net : combiner les classes.
C'est très simple à utiliser mais je ne sais pas si ça marche avec tous navigateurs ( ni même si ce genre de code est "éthique" ) Si Oui, c'est plus pratique pour styler qu'avec des ID qui ne doivent apparaître qu'une fois par page, ça donne un truc du genre : 
.important {color: red}
.big { font-size: 2em;}
.cadre { border: black 1px solid;padding: 5px;}
Et plus bas, dans HTML, on appelle une suite de sélecteurs dans la class séparés par des intervalles :
<p class="important big cadre">Ce texte aura les trois particularités</p>
<p class="important big">Celui ci n'aura que deux particularités</p>
Vérifies avant que ce soit valide, car je ne l'ai pas vu dans la traduction française des CSS W3C.
J'ai déjà utilisé ce truc pour m'amuser mais ne l'ai jamais soumis au validateur.
A+
Aureance a écrit :
Vérifies avant que ce soit valide, car je ne l'ai pas vu dans la traduction française des CSS W3C.
J'ai déjà utilisé ce truc pour m'amuser mais ne l'ai jamais soumis au validateur.


HTML4.01 a écrit :

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
a écrit :
traduction française ( www.la-grange.net/w3c )
class = liste-de-valeurs-cdata [CS]
Cet attribut assigne un nom de classe, ou un ensemble de noms de classe, à un élément. Un nombre quelconque d'éléments peut se voir assigner les mêmes nom de classe ou noms. Les noms de classe multiples doivent être séparés par des caractères blancs.
Smiley cligne Tu m'étonnes que je ne risquais pas de trouver; j'avais cherché dans la traduction des recommandations pour les CSS au lieu d'HTML.
Merci, maintenant c'est clair.
Modifié par Aureance (10 Aug 2005 - 04:11)
Voici mon code :
HTML :
<div class="bloc6" id="ca"><a href="sonerezh.html">sonerezh</a></div><div class="bloc6" id="cb"><a href="selaou.html">selaou</a></div><div class="bloc6" id="cc"><a href="forum.html">forum</a></div><div class="bloc6" id="cd"><a href="liammou.html">liammoù</a></div><div class="bloc6" id="ce"><span class="noa">darempred</span></div><div class="bloc6" id="cf"><a href="../fr/index.html">français</a></div>

CSS :
.bloc6{
  background-color:orange;
  border:1px solid darkblue;
  position: fixed;
  behavior: url(js/ie-fixed.htc);
  width:15%;
  }
#ca{margin-left:0%}
#cb{margin-left:16.7%}
#cc{margin-left:33.3%}
#cd{margin-left:50%}
#ce{margin-left:66.7%}
#cf{margin-left:83.3%}


J'ai à peu près réussi le cumul, le problème vient maintenant e l'interpretation par IE, mais ça c'est un autre problème, pas celui du cumul.

En tous cas, merci aussi pour l'histoire du cumul des classes, c'est sur que ça peut beaucoup servir…

Mon nouveau problème (celui de l'interpretation par IE) est que mon premier div commence au milieu de la page, que ça saute une ligne à chaque nouveau div, et qu'ils se retrecissent au fur et à mesure. A mon avis, c'est plutôt un problème de positionnement, et vu qu'il y a plein d'articles sur le positionnement, je vais peut-être pouvoir vous laisser tranquilles et trouver tout seul.
Malo-net a écrit :
Mon nouveau problème (celui de l'interpretation par IE) est que mon premier div commence au milieu de la page, que ça saute une ligne à chaque nouveau div, et qu'ils se retrecissent au fur et à mesure. A mon avis, c'est plutôt un problème de positionnement, et vu qu'il y a plein d'articles sur le positionnement, je vais peut-être pouvoir vous laisser tranquilles et trouver tout seul.


Bah... Tu auras sans doute du mal à trouver la solution du côté du positionnement, car le problème n'est pas là Smiley cligne

En effet, si tes <div> se rétrécissent, c'est que tu bascule IE6.0 dans son mode de rendu propriétaire au lieu de le laisser travailler selon son implémentation du standard CSS :
- soit parce que ta page n'a pas de DTD
- ou bien parce que la syntaxe de sa DTD est incorrecte
- ou bien parce que ta page a un prologue XML à supprimer

Le résultat étant qu'IE bascule en mode quirks dans lequel le calcul de width: 15% n'est plus conforme à CSS2.

(Le problème de la position:fixed non supportée étant bien sûr une toute autre question).
Modifié par Laurent Denis (10 Aug 2005 - 09:05)
Voici ma DTD, elle est sur la page où se situe mon erreur :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
Supprime le prologue XML
<?xml version="1.0" encoding="ISO-8859-1"?>


Qui ne sert strictement à rien du tout lorsque la page est traitée en text/html ce qui semble être le cas et c'est source de passage en mode Quirks sous IE comme n'importe quel ajout avant la DTD
Malo-net, je ne l'ai pas conservé, mais j'avais tout à l'heure ton code sous les yeux, avec le résultat correct dans IE, au prix d'une correction de la DTD. je vais tâcher de te refaire ça, si ça coince vraiment...
Au temps pour moi, le passage d'IE en rendu strict ne corrige qu'un aspect de ton problème : les items du menu ne sont plus de plus en plus étroit, et ont désormais la bonne largeur.

Mais il reste l'autre aspect : tu veux émuler la position fixe dans IE. Pour ma part, c'est typiquement le cas où j'oublierai le .htc, et où j'adopterai :
- une position absolue pour IE
- une position fixe pour ceux qui le peuvent

... grâce à une CSS spéciale IE en commentaires conditionnels (voir la FAQ du forum).
Modifié par Laurent Denis (10 Aug 2005 - 18:11)
C'est ce que je vais finir par faire si je ne trouve pas de solution, merci déja.

Voici quand-même quelques observations que j'ai faites tout à l'heure, avant de lire les deux messages de Laurent Denis :

L'effet "ça commence au milieu, ça tire vers la droite et ça devient de plus en plus petit" ne se déclare que sous IE et que sur la page où j'ai cumulé ma class et mon id.Mon id sert à préciser une marge de plus en plus grande pour que les boites ne se chevauchent pas (marge de la boite n= largeur cumulée des n-1 boîtes précédents + un petit espace entre les boîtes) Sur les autres, j'ai une présentation normale (c'st à dire plusieurs petites boites à coté). Voilà mon interpretation : IE calcule d'abord la marge, puis la taille du div est en fonction de la place qui reste, une fois la marge enlevée…

J'ai fait d'autres petits tests, et tout me renvoie à la conclusion qu'IE calcule la marge que je lui donne à partir de la petite boîte qui le précède, comme si c'était du float, alors que FF la calcule à partir du bord de la page, comme de l'absolute…
ah, je manque de temps. Mais le pourquoi du comment de ce que fait IE est dans ces deux articles :
- http://www.satzansatz.de/cssd/onhavinglayout.html (en anglais)
- http://www.positioniseverything.net/explorer/percentages.html (en anglais)

Le fonctionnement du moteur de rendu d'IE est un tel "bricolage" que l'explication fait penser à un mauvais Agatha Christie tant il est difficile d'exploiter les maigres indices à notre disposition...
Modifié par Laurent Denis (11 Aug 2005 - 06:55)
Sujet clos
Aller à