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.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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22731881
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
Olivier Miakinen
Le #22731911
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
yamo'
Le #22732931
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
B.M.
Le #22733391
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.
Denis Beauregard
Le #22735751
Le Thu, 28 Oct 2010 15:36:46 -0400, Denis Beauregard
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
Le #22735921
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
Denis Beauregard
Le #22736291
Le Fri, 29 Oct 2010 22:58:34 +0200, 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;
}



Merci ! Je pensais que c'était un effet voulu et non une commande à
cet effet.


Denis
Publicité
Poster une réponse
Anonyme