PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

[CSS]<col> id et filiation

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.



Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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 !


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : [CSS]<col> id et filiation

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 wink

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : [CSS]<col> id et filiation

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)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : [CSS]<col> id et filiation

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)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : [CSS]<col> id et filiation

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...

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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, lol
mais il y a encore mieux ICI


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : [CSS]<col> id et filiation

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)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

ManicoW
Cowrespondant
Lieu : Tours
Inscription : 08-05-2009
Messages : 190
Site Web

Re : [CSS]<col> id et filiation

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 smile

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é smile

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

@+


la v2, c'est tabou, on en viendra tous a bout

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : [CSS]<col> id et filiation

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

Pied de page des forums