28173 sujets

CSS et mise en forme, CSS3

[Résolu] Prise en compte non désirée 2° feuille de style

Bonjour,

Je travaille sur une maquette d'un site multi webadmin. Je m'explique.
Notre site associatif possède un template qui est appliqué via un import à chaque page web du site. Le site lui même est mis à jour par plusieurs personnes en fonction des sujets.
Je travaille pour changer le template pour moderniser un peu la page.

Le site actuel : http://www.ref-union.org : le template concerne uniquement le badeau du haut avec l'animation flash. Tous les bas de page sont construites par différents auteurs.

J'ai construit un nouveau template :
http://promotion.ref-union.org/index-test.php comprenant un bandeau du haut et de droite.

Si j'applique ce template à une page d'un des auteurs (qui importe sa propore css) j'ai une différence de comportement sur le tag <H1> !
http://promotion.ref-union.org/index-test3.php

Dans ma feuille de style du template j'ai ajouté à toutes les valeurs une classe "entete" j'ai donc pour tous les tags :
h1.entete
et dans le code html 

<h1 class="entete" id="siteName">REF-UNION</h1>

De façon à ne pas interferer avec les pages css des auteurs et inversement.
Manifestement le tag 

<h1 class="entete">

est interprété par la feuille de style de l'auteur et non de la mienne !!
Toute idée sera la bienvenue.
Guil
Modifié par Guitou (22 Aug 2007 - 09:37)
Salut Guitou Smiley cligne ,

je pense qu'avant de t'interroger sur le h1 il faudrait avant tout reprendre la structure de la page générée : en affichant le source de ton dernier lien on peut voir 2 DOCTYPE, 2 <head>, 2 <body>, etc, etc...

Du coup ta page est invalide et toutes les corrections que tu pourrais apporter à tes CSS seraient "bancales" Smiley langue .

Concernant le h1 du header, il est inutile de lui affecter la class="entete" puisqu'il possède déjà un id="siteName". Pour le désigner dans ta css tu pourrais mettre :
h1#siteName {...}

Pour plus d'infos, voir les sélecteurs.

Et pour générer une page valide, tu pourrais (re)lire Comment débuter avec les Standards.

A+ Smiley smile
Bonjour,

Merci pour la réponse. J'ai corrigé le double body et head..
Dans le template j'ai supprime ces références car il est importé dans une page existante...
Ce premier point étant corrigé je vais lire les articles proposés pour mieux comprendre ces CSS car mon problème persiste et ça ne me fera pas de mal Smiley smile
le deuxième lien pointe désormais vers le nouveaux template.

Merci
Guil.
Re-salut,

ça va beaucoup mieux mais il reste encore 2 "étrangetés" dans ton template :
- un charset=windows-1252 alors que iso-8859-1 ou iso-8859-15 seraient bien plus indiqués Smiley cligne ,
- une css 2col_rightNav.css déclarée dans le body au lieu d'être dans le head...

A+
Re,

Merci de ton aide !!
Oui concernant le charset je vais corriger mais le problème c'est que je ne vais pas maitriser cette partie.
En effet, chaque auteur des pages du site crée sa propre page (certes suivant un template mais bon... chacun fait un peu ce qu'il lui plait même si malgrès tout le canevas de page par défaut est relativement suivi) et va donc insérer son propre charset si il le souhaite...

De plus, J'ai demandé à chaque auteur d'ajouter en début de page 

<? include("http://promotion.ref-union.org/commun/test/entete-4.php"); ?>

de façon à inserer mon template... ainsi toutes les pages des différents auteurs ont une certaine "unité" de présentation.
(promotion.ref-union.org c'est un auteur, hamexpo.ref-union.org un autre, www.ref-union.org un troisième ..etc etc)

Pour importer mon css je ne peux donc pas mettre ma css col_rightNav.css dans le head car je n'y ai pas accès.

Concernant mon problème de <H1> grace à la documentation que tu m'as fourni je pense avoir compris ce qu'il se passe.
L'auteur à une feuille de style pour h1:

h1 {
font-size : 12; 
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : grey; 
background-color : #F0F0FB; 
text-align: center;
line-height:2;
}

et moi j'ai aussi des valeurs pour h1 dans mon css

h1#siteName {font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;}

Or mes valeurs écrasent les valeurs de la css de l'auteur mais utilisent celles de l'auteur quand je ne spécifie rien. De ce fait j'utilise les parametres "center" ,"background-color" etc.. que je ne déclarent pas dans ma css.
Existe t'il un moyen de dire que la classe h1.entete ou h1#siteName ne vont prendre QUE les valeurs déclarées dans la css associé et non pas le h1 générique ? (j'espère être clair..)

Guil.
Modifié par Guitou (21 Aug 2007 - 15:07)
Bonjour et bienvenue parmi nous, Guitou Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

J'avais bien entendu pensé bien faire en insérant mon code mais je n'avais pas utilisé les boutons...
Voici chose faite..
Si le texte de mes messages est aéré et j'espère lisible c'était parce que justement j'avais pris connaissance de "Nouveau sur le Forum...".
Quand à la recherche elle m'apporte beaucoup d'informations.
Le plus dur en tant que débutant (en css) n'et pas de chercher dans un forum mais de formuler et d'utiliser les bon mots pour trouver ce que l'on cherche. On manque de vocabulaire et on a du mal à rechercher efficacement sans ces mots clefs... faut appeller un chat un chat mais encore faut il savoir que c'est un chat.

En tout cas merci à tous pour ce forum qui est de très bonne qualité et que je lis depuis un moment ... j'ai fait le pas, je poste maintenant Smiley cligne
Modifié par Guitou (21 Aug 2007 - 15:14)
Guitou a écrit :
Existe t'il un moyen de dire que la classe h1.entete ou h1#siteName ne vont prendre QUE les valeurs déclarées dans la css associé et non pas le h1 générique ?

Et non... C'est le principe même des feuilles de style en "cascade" Smiley murf .

C'est clair que pour harmoniser plus facilement les pages il aurait été plus simple d'avoir une css "globale" (avec des déclarations générales pour body, h1, h2, etc...) et que chaque "admin" essaie de garder ce style, quitte à rajouter quelques touches personnelles par le biais de déclarations plus spécifiques (h1#siteName, etc...)

Cette page d'Openweb sur la priorité des sélecteurs explique très bien comment ça marche (même s'il m'a fallu la relire plusieurs fois avant de comprendre Smiley lol ).

Donc à moins de remettre en question avec tous les auteurs la façon dont chaque "article" est codé (html et css), ce qui, selon moi, serait le mieux à faire Smiley langue , tu es obligé de redéclarer tous les attributs du h1 générique qui entrent en conflit avec ton h1#siteName Smiley ohwell .

A+
Après avoir corrigé les erreurs de body en double et nettoyé le code, l'affichage est meilleur.
Maintenant j'ai un problème de prise en compte des feuilles de style qui se "mordent la queue" car j'ai des déclarations croisées. Mais ça c'est normal car c'est le but du cascading stylesheet.

Mon problème est donc "résolué" car j'ai un comportement normal.
Pour annuler les valeurs de la feuille de style de l'auteur il faut que je re-déclare l'ensemble de mes valeurs dans ma feuille de style pour les écraser.

Merci de votre aide.
Guil
Sujet clos
Aller à