28172 sujets

CSS et mise en forme, CSS3

Parent => enfant [résolu]

Bonjour tous

Je vais essayer de bien expliquer Smiley confus

J'ai une ID=contenu parent qu'on retrouve sur plusieurs pages et qui a quelque fois des tables, dans une je rajoute une ID=codepost pour que cette table soit différente en présentation, ce qui donne :

        <div id="contenu">
          <h2>Liste les codes postaux français.</h2>
            <p>Liste officielle suivant le référencement INSEE.</p>
          <div id="codepost">
            <table summary="" width="100%" cellpadding="2" cellspacing="2">
              <tr>
                <th class="1">xxx</th>
                <th class="2">xxxxxx</th>
                <th class="3">x</th>
              </tr>
            </table>
          </div>
        </div>

Le code CSS :

#contenu table th {
	font-weight: bold;
	background-color: #d8d9da;
	border-bottom:solid 1px #FFFFFF;
}
------------
#codepost {
  padding: 3px;
  text-decoration: none;
  text-align: center;
}
#codepost .1 {
  background-color: #ffffff;
  width: 33%;
}
#codepost .2 {
  background-color: #f4f4f4;
  width: 33%;
}
#codepost .3{
  background-color: #ffffff;
  width: 33%;
}


Je retrouve systématiquement le background-color: #d8d9da; au lieu des autres et pas le bon % pour les colonnes.
En plus les textes sur IE c'est bien centré mais sur FF c'est en left

Ma page de TEST
Modifié par griggione (20 Feb 2011 - 17:42)
bonjour,

tout d'abord l'utilisation d'un chiffre ou majuscule pour une ID ou une CLASS est interdit. Certains navgateur applique la regle a la "lettre" Smiley smile , du coup les regles ne sont pas appliquée.
En passant les class en th1, th2 et th3, ça passera mieux et aura l'avantage d'etre un peu plus clair a l'edition de la feuille de style.

Ensuite, augmenté le "poids" des selecteur (voir par exemple: http://www.zonecss.fr/courscss/cours_feuille_css_34.html ) permet de surchargé une règle existante ou par defaut a une section précise du document.

par exemple

#contenu table .th1 {background:red}


#contenu #codepost table .th1{background:none;}
GC
Modifié par gc-nomade (20 Feb 2011 - 13:49)
Bonjour gc-nomade

gc-nomade a écrit :
tout d'abord l'utilisation d'un chiffre ou majuscule pour une ID ou une CLASS est interdit. Certains navgateur applique la regle a la &quot;lettre&quot; Smiley smile , du coup les regles ne sont pas appliquée.

C'était comme au départ que j'avais écrit, mais j'ai cherché tellement de soluce pour y arriver .....

Merci pour le lien en attendant Smiley cligne

EDIT: j'ai modifié mais en fait non rien ne change, même pas les colonnes.
Modifié par griggione (20 Feb 2011 - 14:23)
RE

Pourtant il est à coté de styles.css et si on regarde le code source, dans le <head> le lien apparait.

Ben là je sais pas du tout, si, que ma question n'est plus la même, pourquoi ma feuille de style n'est pas vue par le serveur ? Smiley decu
RE

Honte à moi, j'avais un espace parasite entre le 'codepost' et le '.css' Smiley confused
Je mérite les orties fraiches !

Maintenant la feuille de style est vue par le serveur, mais toujours pas le style désiré.
re Smiley smile

la feuille de style ne cible pas correctement les elements de ta page:
#contenu #codepost {
  padding: 3px;
  text-decoration: none;
  text-align: center;
}
#contenu #codepost table.th1 {
  background: #ffffff;
  width: 33%;
}
#contenu #codepost table.th2 {
  background: #f4f4f4;
  width: 33%;
}
#contenu #codepost table.th3{
  background: #ffffff;
  width: 33%;
}


#codepost , n'existe pas dans le document ainsi que table.th1 ...

en corrigeant :

#contenu .codepost {
  padding: 3px;
  text-decoration: none;
  text-align: center;
}
#contenu .codepost table .th1 {
  background: #ffffff;
  width: 33%;
}
#contenu .codepost table .th2 {
  background: #f4f4f4;
  width: 33%;
}
#contenu .codepost table .th3{
  background: #ffffff;
  width: 33%;
}


attention au selecteur Smiley smile

Cordialement
RE

Alors j'ai remis un ID pour la div codepost (si tu regardes le premier post c'était comme ça)
Par contre tu as trouvé le problème car effectivement je n'ai pas de table.th1 mais une class .th1, donc à ne pas coller.

Comme tu dis attention à la syntaxe des sélecteurs.
Et des titres, entre un espace en trop et un en moins ........... que de galère.
Du coup j'ai pu alléger mon code :

#codepost {
  padding: 3px;
  text-decoration: none;
  text-align: center;
}
#codepost .th1 {
  background: #ffffff;
  width: 33%;
}
#codepost .th2 {
  background: #f4f4f4;
  width: 33%;
}
#codepost .th3{
  background: #ffffff;
  width: 33%;
}


Ca me va bien, quand on dit qu'il faut lever le nez du code de temps en temps, c'est pas pour rien Smiley rolleyes

Je te remercie pour ton savoir et ton dépannage.
Bonjour tous

Bon ben je me disais aussi, la page est bonne maintenant mais quand on clique sur un lien, la nouvelle page ne prend pas en compte la feuille de style.

Je remets le lien de la page Test
Que le 01 pour l'instant avec lien

EDIT: on dirait que les deux premiers sélecteurs sont pris en compte, % et couleur, et pas les deux derniers ?
Modifié par griggione (21 Feb 2011 - 12:56)
bonjour,

erreur d'inattention ?
#codepost .th6 {
  background: #ffffff;
  width: 40%;
  border: 1px solid #f4f4f4;
}
#codepost .th6 {
  background: #f4f4f4;
  width: 10%;
  border: 1px solid #f4f4f4;
}


.th6 est declaré deux fois et .th7 n'existe pas.
Bonjour gc-nomade

Décidemment je crois que je vais arreter le code pendant une semaine.
Pourtant j'ai vérifié, revérifié, etc.
Quand on dit la aussi qu'il ne faut pas copier/coller bêtement ........

Une dernière question, si je veux donner les mêmes fonds sur mes td, est-ce que je peux, en restant "propre" mettre la classe .th4 ?
                <tr>
                  <td class="th4>#INSEE</td>
                  <td class="th5>#DEPARTEMENT</td>
                  <td class="th6>#COMMUNE</td>
                  <td class="th7>#CODE</td>
                </tr>
RE

gc-nomade a écrit :
attention a refermer les guillements Smiley smile

La coloration syntaxique de Notepad++ m'avait signalé les oublis Smiley cligne

Pour le lien, interessant en effet, pas ce travail mais pour un autre site qui a beaucoup de tables et colonnes.

Hop, le lien en marque-pages.
Je te remercie.
Sujet clos
Aller à