css bizarre...
Le
Denis Beauregard
Bonjour,
J'ai décidé de me lancer dans une révision complète de mon site
web avec une approche plus moderne.
J'ai fait un premier prototype dont je voudrais m'inspirer pour la
suite (donc, ne pas s'occuper du contenu ou des liens).
Voici la version initiale.
http://www.francogene.com/denis.bea.../perso.php
Dans cette page, le contenu est divisé en 3 colonnes. La 1re est
appelée "menu", la 2e "contenu", et la 3e "annonces".
J'ai défini dans un css.css une partie de la mise en page (mais
je dois dire que je suis un vieux de la vieille et que j'ai des
habitudes indéracinables). Dans ce css, il y a en particulier
ces redéfinitions des h3 et h4 :
h1, h2, h3, h4
{
font-family: times, times new roman;
color: #09f;
margin-left: 5px;
}
.menu h3, h4
{
border-top: 0px solid #0;
border-bottom: 0px solid #0;
}
.annonces h3, h4
{
margin-left: 5px;
margin-right: 5px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
Je n'ai pas beaucoup lu sur le css (et j'ai recyclé du css fait par
un autre), mais par instinct, je m'attends à ce que les h4 de la
colonne 1 (avec un class="menu") n'aient pas de bordure alors que
ceux de la colonne 3 (avec un class="annonces") aient une bordure.
Or, ceux de la colonne 1 semblent utiliser la définition réservée à
la colonne 3, comme si c'était la dernière classe qui était utilisée
et non celle que j'ai défini.
J'ai fait une erreur de codage ou bien c'est un bug de mon vieux
Seamonkey 1.1.7 ? J'ai le même rendu avec Firefox 2.0.0.20 (et j'ai
Windows 98, donc pas possible d'avoir plus récent).
Par ailleurs, je suis preneur si vous avez des idées pour améliorer
l'apparence de cette page (avant que je refasse tout le site, quoique
je dois dire que c'est très modulaire).
Denis
J'ai décidé de me lancer dans une révision complète de mon site
web avec une approche plus moderne.
J'ai fait un premier prototype dont je voudrais m'inspirer pour la
suite (donc, ne pas s'occuper du contenu ou des liens).
Voici la version initiale.
http://www.francogene.com/denis.bea.../perso.php
Dans cette page, le contenu est divisé en 3 colonnes. La 1re est
appelée "menu", la 2e "contenu", et la 3e "annonces".
J'ai défini dans un css.css une partie de la mise en page (mais
je dois dire que je suis un vieux de la vieille et que j'ai des
habitudes indéracinables). Dans ce css, il y a en particulier
ces redéfinitions des h3 et h4 :
h1, h2, h3, h4
{
font-family: times, times new roman;
color: #09f;
margin-left: 5px;
}
.menu h3, h4
{
border-top: 0px solid #0;
border-bottom: 0px solid #0;
}
.annonces h3, h4
{
margin-left: 5px;
margin-right: 5px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
Je n'ai pas beaucoup lu sur le css (et j'ai recyclé du css fait par
un autre), mais par instinct, je m'attends à ce que les h4 de la
colonne 1 (avec un class="menu") n'aient pas de bordure alors que
ceux de la colonne 3 (avec un class="annonces") aient une bordure.
Or, ceux de la colonne 1 semblent utiliser la définition réservée à
la colonne 3, comme si c'était la dernière classe qui était utilisée
et non celle que j'ai défini.
J'ai fait une erreur de codage ou bien c'est un bug de mon vieux
Seamonkey 1.1.7 ? J'ai le même rendu avec Firefox 2.0.0.20 (et j'ai
Windows 98, donc pas possible d'avoir plus récent).
Par ailleurs, je suis preneur si vous avez des idées pour améliorer
l'apparence de cette page (avant que je refasse tout le site, quoique
je dois dire que c'est très modulaire).
Denis
Poser une question
.menu h3,
.menu h4 {
blabla
}
pareil !!!
.annonces h3, .annonces h4 { règles }
Non tu n'as rien re-défini pour tes h4 des colonnes de classe 'menu' ou
'annonces'
tu as juste modifié le h4 de base ... !
--
Stéphane Moriaux avec/with iMac-intel
Le 28/10/2010 21:36, Denis Beauregard a écrit :
Deux choses :
http://www.yoyodesign.org/doc/w3c/c...amily-prop
1) Tu devrais mettre des guillemets autour des noms de police (surtout
celles qui contiennent des espaces).
2) Il est recommandé de terminer par une famille de polices générique en
ultime option (mais sans guillemets).
Par exemple :
font-family: "Times", "Times New Roman", serif;
Attention ! Ce sélecteur est équivalent à :
h4, .menu h3
or je crains que ce ne soit pas ce que tu souhaites.
Peut-être voulais-tu plutôt :
.menu h3, .menu h4
Idem :
.annonces h3, .annonces h4
Puisque tu définis les quatre directions, qui plus est aux mêmes
valeurs, tu peux utiliser la propriété border, qui est encore plus
raccourcie que les quatre ci-dessus :
border: 1px solid #999;
C'est l'occasion de commencer par lire le chapitre sur les sélecteurs :
http://www.yoyodesign.org/doc/w3c/c...ector.html
Tu verras le reste au fur et à mesure des problèmes rencontrés.
Cordialement,
--
Olivier Miakinen
Denis Beauregard a tapoté, le 28/10/2010 21:36:
Sur le css en lui même, je n'ai pas regardé je laisse parler les
experts, question couleur, le jaune pétant sur bleu me choque sur mon
eeepc, en passant de #FF0 à #FFFFA0 avec FireBug ça va déjà mieux.
--
Stéphane
http://pasdenom.info
Je confirme le diagnostique d'Olivier. J'ajouterais que tant qu'à
reprendre à zéro, autant faire du html 4.01 strict, il y aura moins
d'écarts de comportement d'un navigateur à un autre.
--
B. M.
fr.comp.infosystemes.www.auteurs:
Merci à tous pour les informations. C'est maintenant corrigé, et
j'ai changé la couleur jaune du titre principal.
J'avais aussi constaté une autre anomalie dans ce paragraphe :
La version 2010B de la
_Généalogie_des_Français_en_Amérique_du_Nord_
est disponible depuis le début d'octobre
2010. Elle contient 71413 fiches familiales.
Le lien est sur une ligne séparée mais je suppose que c'est
normal vu qu'en CSS, je déclare les liens comme ayant une couleur
de fond "background: #eee;"
Denis