Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

css bizarre...

7 réponses
Avatar
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.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

7 réponses

Avatar
SAM
Le 28/10/10 21:36, Denis Beauregard a écrit :
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

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
{



.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
Avatar
Olivier Miakinen
Bonjour,

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
Avatar
yamo'
Salut,

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
Avatar
B.M.
Le 29/10/2010 00:21, Olivier Miakinen a écrit :
Bonjour,

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,



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.
Avatar
Denis Beauregard
Le Thu, 28 Oct 2010 15:36:46 -0400, Denis Beauregard
é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
Avatar
Olivier Miakinen
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;
}

.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
Avatar
Denis Beauregard
Le Fri, 29 Oct 2010 22:58:34 +0200, Olivier Miakinen
<om+ é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