Version complète: sur le forum Webmaster Hub : Style H1 du CSS non pris en compte
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
katmars
vendredi 10 juin 2005 à 14:11
Bonjour,

J'ai beau tourner le problème dans tous les sens, je n'y comprend rien. Je créé un style H1 dans le CSS, je l'applique dans le code php, le code source html généré semble ok et pourtant le style du H1 n'est pas celui definit dans le css mais le style par défaut du navigateur.

Dans le CSS :
H1.recherche {FONT-SIZE: 11px;color: #FFFFFF; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: none; font-weight:bold; line-height:100%;}

Dans le code php :
{ $lgd="<h1 class=\"recherche\">".substr($str_src,0,30)."</h1> - résultat de la recherche";}

Code source du html généré :
<td width=368 class=barre_top valign=bottom align=center>
<h1 class="recherche">test</h1> - résultat de la recherche<br>
</td>

Notre variable $lgd est bien imprimée (avec la valeur test pour $str_src), on a bien les balises H1, mais "test" s'imprime en énorme au lieu d'utiliser la propriété de 11px.

Quelqu'un a t-il déjà fait face à ce cas de figure et a t-il réussi à le résoudre ?

D'avance merci.

Sylvain
Portekoi
vendredi 10 juin 2005 à 14:43
Ton code fonctionne chez moi sad.gif

Y a rien au dessus qui pourrais poser problème?

Met des guillements autour de tes arguments...

Là je vois po sad.gif
sarc
vendredi 10 juin 2005 à 15:04
Salut wink.gif

Il nous faut voir la feuille de style entière pour trouver le problème... Tu dois avoir un autre truc qui agit sur ton style wink.gif

Par contre, dans ta feuille de style, mets tout en minuscules, ça sera déjà ça de fait... tongue.gif
katmars
vendredi 10 juin 2005 à 16:08
CITATION(sarc @ vendredi 10 juin 2005, 16h04)
Salut wink.gif

Il nous faut voir la feuille de style entière pour trouver le problème... Tu dois avoir un autre truc qui agit sur ton style wink.gif

Par contre, dans ta feuille de style, mets tout en minuscules, ça sera déjà ça de fait... tongue.gif
*



Voici le css dans son ensemble... désolé il est un peu long :

CODE
@charset "iso-8859-1";

body {margin-top:0;margin-bottom:0; margin-left:0; margin-right:0; background:#FFCCFF}

h1.recherche {font-size: 11pt; color: #FFFFFF; font-family: Arial, sans-serif; text-decoration: none; font-weight:bold; text-align:left;}
P {font-family: Arial, Verdana, sans-serif ; font-size:11px; line-height: 140%; color:#003366;}
td {font-family: Arial, Verdana, sans-serif ; font-size:11px; line-height: 120%; color:#003366; }

A {font-family: Arial, Verdana, sans-serif ; font-size:11px; line-height: 120%; }
A:hover {text-decoration:none;}

.menu_cat {font-family: Verdana, Arial, sans-serif;text-decoration:none;font-size:11px; line-height: 140%; font-weight:bold; text-align:left; color:#003366;}
.menu_cat_adu {font-family: Verdana, Arial, sans-serif;text-decoration:none;font-size:11px; line-height: 140%; font-weight:bold; text-align:left; color:#CC0033;}
.menu_cat:hover {font-family: Verdana, Arial, sans-serif;text-decoration:none; font-size:11px; line-height: 140%; font-weight:bold; text-align:left; color:#FFFFFF;}
.menu_cat_on {font-family: Verdana, Arial, sans-serif;text-decoration:none; font-size:11px; line-height: 140%; font-weight:bold; text-align:left; color:#FFFFFF;}

.menu_adu {font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size:11px; line-height: 130%; font-weight:bold; text-align:left; color:#CC0033;}
.menu_adu:hover {font-family: Verdana, Arial, sans-serif;text-decoration:none; font-size:11px; line-height: 130%; font-weight:bold; text-align:left; color:#FFFFFF;}
.menu_adu_on {font-family: Verdana, Arial, sans-serif;text-decoration:none; font-size:11px; line-height: 130%; font-weight:bold; text-align:left; color:#FFFFFF;}


select { font-size:11px; line-height: 140%;}
input { font-size:11px; line-height: 140%;}
textarea {font-family: Arial, Verdana, sans-serif ; font-size:11px; line-height: 140%;}

.small {font-family: Arial, Verdana, sans-serif ; font-size:8pt; line-height: 12pt; color:#003366; }
.s7 {font-family: Arial, Verdana, sans-serif ; font-size:7pt; line-height: 10pt; color:#003366; }

.cen {text-align:center; }
.lft {text-align:left; }
.rgt {text-align:rgt; }

ul {font-family: Arial, Verdana, sans-serif ; list-style-position:outside; font-size:11px; line-height: 140%;}
ul.square {list-style-type: square;}
ul.circle {list-style-type: circle;}
ul.disc {list-style-type: disc;}
ul.none {list-style-type: none;}
ol {font-family: Arial, Verdana, sans-serif ; list-style-type: lower-alpha; list-style-position:outside; font-size:11px; line-height: 140%;}
ol.dec {list-style-type: decimal;}
ol.urom {list-style-type: upper-roman;}
ol.ualp {list-style-type: upper-alpha;}

.titre {color:#000000; font-size:11px ; font-weight:bold; letter-spacing:0.5px;line-height: 120%; }
.titre_big_list {font-family: Verdana, Arial, sans-serif ;color:#000000; font-size:12px ; font-weight:bold; letter-spacing:0px; line-height: 140%; }
.titre_big {font-family: Verdana, Arial, sans-serif ;color:#000000; font-size:16px ; font-weight:bold; letter-spacing:1px; line-height: 140%; }
.soustitre {color:#999999; font-size:11px ; font-weight:normal; letter-spacing:0px;line-height: 120%; }
.noir {font-family: Verdana, Arial, sans-serif ; color:#000000; font-size:10px ; font-weight:normal; letter-spacing:0px;line-height: 140%; }
.noirsmall {color:#000000 ; font-family:Verdana ; text-decoration : none; font-size:10px ; font-weight:bold; letter-spacing:0px;line-height: 100%; }

.prix_big_whitebg {font-family: Verdana, Arial, sans-serif ;color:#009900; font-weight:bold; font-size:18px ; letter-spacing:0px;line-height: 160%; }
.prix_big {font-family: Verdana, Arial, sans-serif ;color:#009900; font-weight:bold; font-size:20px ; letter-spacing:1px;line-height: 140%; }
.prix {font-family: Verdana, Arial, sans-serif ; color:#009900; font-weight:bold; font-size:12px ; letter-spacing:0px; line-height: 100%; }
.prix_bs { color:#FF6600;font-weight: bold; font-size:14px; line-height:24pt;text-align:center;}
.prixsmall {font-family: Verdana, Arial, sans-serif ; color:#009900; font-weight:bold; font-size:10px ; letter-spacing:0px; line-height: 100%; }

.categorie {color:#999999; font-size:9px ; letter-spacing:0px; line-height: 120%; }
.description {color:#666666; font-size:9px ; letter-spacing:0px; line-height: 120%; }
.description_big {font-family: Verdana, Arial, sans-serif ;color:#000000; font-size:10px ; letter-spacing:0px; line-height: 120%; }
.description_big2 {font-family: Verdana, Arial, sans-serif ;color:#666666; font-size:10px ; letter-spacing:0px; line-height: 120%; }

.cen {text-align:center;}
.rgt {text-align:right;}
.em {font-weight: bold; font-size:12px; line-height:140%; color:#77A8DF;}
.em2 {FONT-FAMILY: Arial, sans-serif;font-weight: bold; font-size:16px; line-height:140%; color:#FF8040;}
.black18b {FONT-WEIGHT: bold;FONT-SIZE: 18px;COLOR: black;FONT-FAMILY: Arial, sans-serif ;}
.black14{FONT-SIZE: 14px;COLOR: black; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: none}
.white14{FONT-SIZE: 14px; COLOR: #FFFFFF; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: none}
.white14b{FONT-SIZE: 14px; font-weight: bold; COLOR: #FFFFFF; FONT-FAMILY: Verdana, sans-serif; TEXT-DECORATION: none}

.barre_bot {FONT-SIZE: 12px;color: #FFFFFF; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: underline; font-weight:bold; text-align:center; line-height:100%;}
.barre_bot_on {FONT-SIZE: 12px;color: #FFFF66; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: none; font-weight:bold; text-align:center; line-height:100%;}
.barre_bot:hover {FONT-SIZE: 12px;color: #FFFF66; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: none; font-weight:bold; text-align:center; line-height:100%;}
.barre_top {FONT-SIZE: 11px;color: #FFFFFF; FONT-FAMILY: Arial, sans-serif; TEXT-DECORATION: none; font-weight:bold; text-align:left; line-height:100%;}

.wem {color:#FFFFFF;font-weight: bold; font-size:12px;}
.w {color:#FFFFFF;}

.popup
{
color:#000000;
font-size:7pt;
text-decoration : none;
font-family:verdana;
}

.popup:hover
{
color:#000000;
font-size: 7pt;
font-weight:bold;
text-decoration : underline;
font-family: verdana;
}


Info supplémentaire (mais à mon avis non pertinente), le site est seul sur un serveur dédié OVH.

Sylvain
Dudu
vendredi 10 juin 2005 à 21:07
Quel est le navigateur utilisé ?
Safari ne style aucun <h*> lorsqu'il est en quirks mode, il me semble.
sarc
samedi 11 juin 2005 à 12:16
Dans ta feuille de style je vois 11pt et non 11px... Les points sont plus gros que les pixels non ? Mets déjà en px lol wink.gif
Ta feuille de style demande à être un peu optimisée, là il est possible que des styles se marchent dessus... Regroupe un peu le tout wink.gif

As tu une URL en fait ?
Dudu
dimanche 12 juin 2005 à 02:45
Çà m'étonnerait que 2 styles se chevauchent entre eux: il n'y a aucun autre h1 dans la CSS. Tu peux quand même vérifier en mettant une déclaration générique aux <h1> (en haut du code CSS).

Sinon essaie peut-être .recherche h1

Si çà ne marche toujours pas, c'est peut-être dans ton code html que çà foire. Et sans vouloir te vexer, çà ne m'étonnerait pas: les 2 lignes HTML que tu as cité sont par exemple quasi absentes de guillemets:
CODE
<td width=368 class=barre_top valign=bottom align=center>
<h1 class="recherche">test</h1> - résultat de la recherche<br>
</td>
[right][snapback]104543[/snapback][/right]


En tous cas, sarc a raison sur une optimisation de la feuille. Par exemple, ne répète pas le "font-family: verdana" toutes les 2 lignes, il alourdit le code pour rien wink.gif

PS: m'étonnerait aussi que ce soit les pt et les px qui se tapent dessus.. bien que le pt soit déconseillé pour une visualisation écran, il n'en reste pas moins que cette unité est tout à fait reconnue par les navigateurs.
Xavier
dimanche 12 juin 2005 à 08:19
CITATION(Dudu @ dimanche 12 juin 2005, 03h45)
Sinon essaie peut-être .recherche h1
Non, ça ça va sélectionner les h1 contenu dans un bloc de class="recherche" (<* class="recherche">...<h1>...</h1>...</*>).

Pour les pt normalement ce sont des unités à réserver à l'impression il me semble (Ça vaut 1/72è de pouce, et la taille sera très très différente en fonction de l'écran).

Pour moi il y a clairement un problème ailleurs dans la page. Si tu pouvais l'enregistrer et la mettre en ligne quelque part je suis sur que ça simplifierait la recherche des erreurs possibles wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.