css bizarre...
Denis Beauregard
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.beauregard/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
SAM
> 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.beauregard/perso.php
>
> 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
> 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
> {
.menu h3,
.menu h4 {
blabla
}
> ...
>
> .annonces h3, h4
pareil !!!
.annonces h3, .annonces h4 { règles }
> 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.
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
Olivier Miakinen
Le 28/10/2010 21:36, Denis Beauregard a écrit :
>
> 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;
Deux choses :
http://www.yoyodesign.org/doc/w3c/css2/fonts.html#font-family-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;
> color: #09f;
> margin-left: 5px;
> }
>
>
> ...
>
> .menu h3, h4
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
> {
> border-top: 0px solid #0;
> border-bottom: 0px solid #0;
> }
>
>
> ...
>
> .annonces h3, h4
Idem :
.annonces h3, .annonces 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;
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;
> }
>
>
>
> Je n'ai pas beaucoup lu sur le css
C'est l'occasion de commencer par lire le chapitre sur les sélecteurs :
http://www.yoyodesign.org/doc/w3c/css2/selector.html
Tu verras le reste au fur et à mesure des problèmes rencontrés.
Cordialement,
--
Olivier Miakinen
yamo'
Denis Beauregard a tapoté, le 28/10/2010 21:36:
> 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...).
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
B.M.
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.
Denis Beauregard
<denis.b-at-franc...@nospam.com.invalid> écrivait dans
fr.comp.infosystemes.www.auteurs:
>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.beauregard/perso.php
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;"
>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
Olivier Miakinen
>
> 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;"
.menu p a:link {
display: block;
}
.menu p a:visited {
display: block;
}
.annonces p a:link {
display: block;
}
.annonces p a:visited {
display: block;
}
.annonces li a:link {
display: block;
}
.annonces li a:visited
{
display: block;
}
--
Olivier Miakinen
Denis Beauregard
<om+...@miakinen.net> écrivait dans fr.comp.infosystemes.www.auteurs:
>Le 29/10/2010 22:09, Denis Beauregard a écrit :
>>
>> 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;"
>
>.menu p a:link {
> display: block;
> }
Merci ! Je pensais que c'était un effet voulu et non une commande à
cet effet.
Denis