[CSS]<col> id et filiation

Maljuna Kris · 06-12-2011 15:48:43

Saluton,
Je me pose des questions quant à la filiation d'un élément <col> d'un <colgroup> car les tests que je réalise ne sont pas convaincants.
Je souhaite, par exemple, avoir le colgroup suivant:

            <colgroup>

                <col id="tdfr">

                <col class="indekso">

                <col id="tdeo">

            </colgroup>

auquel j'applique les styles suivants:

#tdeo {color : green;}

#tdfr{ color: blue;}

J'a donc le HTML suivant

<html>

    <head>

        <meta name="author" lang="fr" content="Maljuna Kris">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Test sur des identifiants de <colgroup></title>

        <link rel="StyleSheet" type="text/css" href="style.css"/>

    </head>

    <body>

        <h1>Test sur des identifiants de <colgroup></h1>

        <table>

            <colgroup>

                <col id="tdfr">

                <col class="indekso">

                <col id="tdeo">

            </colgroup>

            <tr>

                <td>En Bleu</td>

                <td>

                    <h3>Châpitres</h3>

                </td>

                <td>En vert</td>

            </tr>

    </table>

    </body>

</html>

Mais la feuille de style ne semble pas capable d'associer les couleurs aux <td> de chaque <col> via les règles associées à son id.
Du coup, ces <colgroup> me semblent de peu d'intérêt.

Maljuna Kris · 06-12-2011 16:25:44

La réponse est là : http://www.search-this.com/2007/04/11/s … -with-css/

Unfortunately we are limited in the properties we can style for this element. The only properties that the specs say are available for styling are:
border
background
width
visibility

Comme il dit "Unfortunately".
Fait c###r !

Jc · 06-12-2011 20:25:18

Bonjour

C'est tout à fait normal car en faisant ainsi tu associes rien du tout enfin pas un style en tout cas.
Remplace id= par class= et tu verras cela fonctionnera beaucoup mieux

++

Maljuna Kris · 07-12-2011 08:58:59

Je ne comprends pas en quoi cela devrait changer quelque chose au problème.
Ainsi j'ai repris le code du lien de mon second post lequel utilise les règles associées à des class et non à des id que je retranscris ci-dessous

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Untitled Document</title>

        <style type="text/css">

        table{border-collapse:collapse}

        .col1,.col5,.col9{background:red;color:white}

        .col2,.col6,.col10{background:blue;color:pink}

        .col3,.col7{background:green;color:blue}

        .col4,.col8{background:orange}

        td,th{border:1px solid #000;padding:5px}

        </style>

    </head>

    <body>

        <table cellspacing="0" cellpadding="0">

            <caption>

            Example Colgroup

            </caption>

            <colgroup>

            <col class="col1" />

            <col class="col2" />

            <col class="col3" />

            <col class="col4" />

            <col class="col5" />

            <col class="col6" />

            <col class="col7" />

            <col class="col8" />

            <col class="col9" />

            <col class="col10" />

            </colgroup>

            <tr>

                <th>red</th>

                <th>blue</th>

                <th>green</th>

                <th>orange</th>

                <th>red</th>

                <th>blue</th>

                <th>green</th>

                <th>orange</th>

                <th>red</th>

                <th>blue</th>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

                <td>7</td>

                <td>8</td>

                <td>9</td>

                <td>10</td>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

                <td>7</td>

                <td>8</td>

                <td>9</td>

                <td>10</td>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

                <td>7</td>

                <td>8</td>

                <td>9</td>

                <td>10</td>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

                <td>7</td>

                <td>8</td>

                <td>9</td>

                <td>10</td>

            </tr>

        </table>

    </body>

</html>

Et bien les règles color que j'ai ajoutées ne sont pas plus prise en compte.
Ça semble logique puisqu'apparemment, pour les éléments <col> je re-cite

The only properties that the specs say are available for styling are:
border
background
width
visibility

et donc pas color.
Ceci dit j'ai aussi essayé en décrivant les règles comme ceci :

.col1 td,.col5 td,.col9 td{background:red;color:white}

ce qui n'a surement aucun sens et ne fonctionne pas.

Maljuna Kris · 07-12-2011 10:13:31

En fait, ce qui me manque, c'est une représentation claire des <colgroup> et des <col> dans le DOM, pour voir de qui ils héritent et qui héritent d'eux.
Je vais chercher.

Maljuna Kris · 07-12-2011 13:43:29

Bon, j'ai craqué, je suis allé chez Alsacréations et on m'y a résolu le problème :
http://forum.alsacreations.com/topic-4- … colgt.html

Jc · 07-12-2011 16:49:04

Bonjour,

Je me suis amusé à faire un petit test et je ne vois pas où se trouve le problème^^

<!DOCTYPE html>

<html>

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>

</title>

<style type="text/css">.bgcol {

background-color: #0000FF;

}

</style>

</head>

<body>

<table><colgroup class="bgcol"><col style="width:50px"/><col style="width:50px"/></colgroup><tr><td></td><td></td></tr></table>

</body>

</html>

Parcequ'il me semble qu'au niveau sémantique, je ne vois pas l'intérêt de définir une classe css dans chaque colonne quand on défini un colgroup non? où alors à la rigueur pour surcharger la colonne

<!DOCTYPE html>

<html>

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>

</title>

<style type="text/css">.bgcol {

background-color: #0000FF;

}

.bgcol2 {

background-color: #FF00FF;

}

</style>

</head>

<body>

<table><colgroup class="bgcol"><col style="width:50px" class="bgcol2"/><col style="width:50px"/></colgroup><tr><td></td><td></td></tr></table>

</body>

</html>

++

Dernière modification par Jc (07-12-2011 16:53:08)

Maljuna Kris · 07-12-2011 17:06:00

Mon problème était de transformer des pages en colonage par des <div>s en tableau HTML.
Pourquoi ?
Parce que la colonne de gauche contient le texte en français et la colonne de droite sa traduction en espéranto.
Or l'espéranto étant plus concis, je finissais par avoir un décalage des textes censés être en regard l'un de l'autre.
J'ai donc transformé chaque § en <tr><td>Français</td><td>Espéranto</td></tr>.
Comme cela je rétablis le vis à vis pour chaque §.
Mais comme j'avais une feuille de style qui gérait les attributs color et background des anciennes <div>s, je voulais transposer ces règles CSS vers des <col>.
Mais pour l'attribut color ce n'est pas possible.
Voici le résultat provisoire je suis en train de faire la traduction du chapitre 2.

Jc · 07-12-2011 22:01:58

Bonsoir,

Je n'avais même pas fait attention que c'était toi qui avait posté à l'origine... ca devient grave.:/
Comme tu disais que les color au niveau colonne c'est pas possible, j'ai voulu vérifier.

Alors cela fonctionne, mais avec la restriction suivante: Tu ne peux définir qu'un seul color au niveau colgroup contrairement au backcolor. Pour surcharger, tu seras obligé de le faire au niveau <td>
Voici

<!DOCTYPE html>

<html>

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>

</title>

<style type="text/css">.bgcol {

background-color: #0000FF;color:aqua;

}

.btcol {

background-color: #FF00FF;

}

</style>

</head>

<body>

<table><colgroup class="bgcol"><col style="width:50px" class="btcol"/><col style="width:50px"/></colgroup><tr><td>Bonjour</td><td style="color:black">Salut</td></tr></table>

</body>

</html>

Attention aussi à la DTD, tu l'as négligé et je suis ici en HTML5.

Dernière modification par Jc (07-12-2011 22:02:18)

Maljuna Kris · 08-12-2011 00:45:27

Oui, mais définir la couleur au niveau du <colgroup> ne présente guère d'intérêt, autant la définir au niveau de la <table> à ce moment-là.

Par contre j'ai découvert qqe chose avec les sélecteurs dits adjacents.
td+td applique les règles à partir de la deuxième colonne, on trouve ça dans toutes les docs, par contre td+td+td applique les règles à partir de la troisième colonne et ainsi de suite. Ça je ne l'avais jamais lu nulle part.

Jc · 08-12-2011 09:02:39

maljuna kris a écrit :

Oui, mais définir la couleur au niveau du <colgroup> ne présente guère d'intérêt, autant la définir au niveau de la <table> à ce moment-là.

Je ne suis pas du même avis que toi. Tu peux très bien définir plusieurs colgroup au niveau d'une même table. De plus l'écriture de code en est réduite.
Par contre je dois bien avouer que je n'ai pas très bien compris ton système de td+td etc...

++

Maljuna Kris · 08-12-2011 10:53:37

Jc a écrit :

Par contre je dois bien avouer que je n'ai pas très bien compris ton système de td+td etc...

Moi non plus,
mais il y a encore mieux ICI

Jc · 08-12-2011 13:06:20

Merci pour ce lien qui me permets en effet de comprendre la chose.

Mais sincèrement, cela corresponds plus à un style de programmation qu'autre chose, et dans ce contexte celui d'un environnement 100% JQuery coté js qui utilise pas mal les next et les prev et qui évite d'avoir à nommer les balises ciblées.
Entre nous je trouve le typage de classe CSS beaucoup plus puissant, mais son utilité reste incontestable même si je ne suis pas trop pratiquant de ce genre de technique. Il y a une raison à cela qui me parait très simple. En effet si cela permet d'augmenter la concision du code en revanche on perd en souplesse d'utilisation dans le sens où si le template change et donc la précédence des balises les unes par rapport aux autres change, il faut réecrire le code js et dans ce cas les définitions CSS associées, pas trop standard comme technique à mon goût.

++

Dernière modification par Jc (08-12-2011 13:10:33)

ManicoW · 14-12-2011 12:13:19

Maljuna Kris a écrit :

Mon problème était de transformer des pages en colonage par des <div>s en tableau HTML.
Pourquoi ?
Parce que la colonne de gauche contient le texte en français et la colonne de droite sa traduction en espéranto.
Or l'espéranto étant plus concis, je finissais par avoir un décalage des textes censés être en regard l'un de l'autre.
J'ai donc transformé chaque § en <tr><td>Français</td><td>Espéranto</td></tr>.

Yop Maljuna,

Je suis un peu à la bourre et hors sujet, mais je pense que de toute façon ta représentation a base de div était une erreur dès le départ

En effet, les données que tu présente sont typiquement des données qui se présente en tableau, même d'un point de vue sémantique, c'est bien tabulaire.

Je sais que la mode est à la chasse aux tableaux, mais il ne faut pas en abuser, si ces éléments existent, c'est qu'ils ont une utilité

Donc non aux tableaux pour la présentation pure, oui aux tableaux pour la présentation de données... tabulaires

@+

Maljuna Kris · 21-12-2011 16:00:45

Hé bien, en fait, j'en suis venu à remplacer chaque groupe <tr><td><p>français</p></td><td><p>esperanto</p></td> par <div><p class="fr">français</p>><p class="eo">esperanto</p></div> et supprimer le tableau et les colgroup.
J'y ai adjoint ces trois règles

p .fr  {float: left;

     width: 50%;}

p .eo{margin-left: 50%;}

.page div{clear:both}

et ça le fait très bien, en beaucoup moins lourd.
Résultat provisoire.

PHP|Débutant :: Forums

Advertisement

#1 06-12-2011 15:48:43

[CSS]<col> id et filiation

#2 06-12-2011 16:25:44

Re : [CSS]<col> id et filiation

#3 06-12-2011 20:25:18

Re : [CSS]<col> id et filiation

#4 07-12-2011 08:58:59

Re : [CSS]<col> id et filiation

#5 07-12-2011 10:13:31

Re : [CSS]<col> id et filiation

#6 07-12-2011 13:43:29

Re : [CSS]<col> id et filiation

#7 07-12-2011 16:49:04

Re : [CSS]<col> id et filiation

#8 07-12-2011 17:06:00

Re : [CSS]<col> id et filiation

#9 07-12-2011 22:01:58

Re : [CSS]<col> id et filiation

#10 08-12-2011 00:45:27

Re : [CSS]<col> id et filiation

#11 08-12-2011 09:02:39

Re : [CSS]<col> id et filiation

#12 08-12-2011 10:53:37

Re : [CSS]<col> id et filiation

#13 08-12-2011 13:06:20

Re : [CSS]<col> id et filiation

#14 14-12-2011 12:13:19

Re : [CSS]<col> id et filiation

#15 21-12-2011 16:00:45

Re : [CSS]<col> id et filiation

Pied de page des forums