3 navigateurs : 3 comportements différents

[nomasis]

Bijor bijor à tous les happy webmasters

Je suis en train de refondre mon blog (à niveau maintenant avec la 1.2 de Dotclear).

Et j'ai un problème pour créer un menu en CCS.

Mais une image valant mieux qu'un voyage sur le site de nomaBlog, en voici 3 :

Sous Firefox tout d'abord :

Sous IE :

Et sous Opera maintenant :

le code HTML est celui-ci :

<ul id="nav">
	<li id="t-nomasis"><a href="#">nomasis</a></li>
	<li id="t-menu"><a href="#">menu</a></li>
	<li id="t-contenu"><a href="#">contenu</a></li>
	<li id="t-accueil"><a href="#">accueil</a></li>
</ul>

et celui de la CSS, celui-là :

#nav {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #FFFFFF;
	top: 112px;
	height: 22px;
	position: relative;
	z-index: 4;
	text-align: left;
	left: 410px;
	width: 340px;
	float: right;
}

#nav li {
	margin: 0;
	padding: 0;
	list-style: none;
  float: right;
	}
#nav a {
	text-decoration: none;
	color: #FFFFFF;
	padding-top: 6px;
	padding-right: 20px;
	padding-bottom: 6px;
	padding-left: 20px;
	text-align: left;
	}
#nav a:hover, #nav a.active {
	color: #000;
	}
#nav a.active {
	font-weight: bold;
	}

Il y a sans doute plein d'erreurs dans la feuille de style mais je ne vois pas lesquelles

Et c'est très très pénible.

Auriez vous une petite idée ? (une grosse c'est bien aussi)

[Perrine]

Bonjour Nomasis

Dans #nav, tu ne peux pas avoir 2 positionnements différents : position:relative et float:right ... C'est l'un où l'autre

Je te renvoie aux articles de Laurent Denis sur le positionnement des blocs :

Initiation au positionnement CSS : 1.flux et position relative

Initiation au positionnement CSS : 2.position float

Initiation au positionnement CSS : 3. position absolue et fixe

Tu peux enlever le float:right je pense et garder la position en relative avec les propriétés top et left. En fait, si je me trompe pas, le navigateur garde le dernier positionnement indiqué dans l'id et dans ton cas, c'est le float:right (si tu l'avais mis au début de l'id, tu n'aurais probablement pas eu de problème)

C'est grâce au float:right que les li s'alignent sur une unique ligne ? Je voudrai pas dire de bétises, mais je crois qu'il est préférable de faire un display:inline dans ce cas là.

-------------------

Pour optimiser ta CSS, je te conseille de regrouper toutes les propriétés génériques de la sorte :

*{
 margin: 0;
padding: 0;
}

Si tu ne fais pas de lien sur le header, tu peux le mettre en background. Ainsi, si tu veux le changer par la suite, tu as juste à éditer la CSS ... et puis, ça te permettra aussi de proposer plusieurs CSS, on sait jamais

Dans le #nav a, tu peux regrouper les padding et les écrire comme ceci :

padding: 6px 20px 6px 20px;

Le premier chiffre = top

Le deuxième = right

le troisième = bottom

le quatrième = left

--------------

J'espère que tout ça va t'aider ... je garantis pas que tous mes conseils soient pertinents, suis une noob donc si besoin de corriger, vous gênez pas

[nomasis]

Bonjour Azon...

Voici le code maintenant

#nav {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #FFFFFF;
	top: 112px;
	height: 22px;
	z-index: 4;
	text-align: left;
	left: 410px;
	width: 340px;
	visibility: visible;
	display:inline;
}

#nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	display:inline;
	}
#nav a {
	text-decoration: none;
	color: #FFFFFF;
	padding: 6px 20px 6px 20px;
	text-align: left;
	}
#nav a:hover, #nav a.active {
	color: #000;
	}
#nav a.active {
	font-weight: bold;
	}

Bonjour Nomasis

Dans #nav, tu ne peux pas avoir 2 positionnements différents : position:relative et  float:right ... C'est l'un où l'autre

Bien sûr...

Tu peux enlever le float:right je pense et garder la position en relative avec les propriétés top et left. En fait, si je me trompe pas, le navigateur garde le dernier positionnement indiqué dans l'id et dans ton cas, c'est le float:right (si tu l'avais mis au début de l'id, tu n'aurais probablement pas eu de problème)

C'est grâce au float:right que les li s'alignent sur une unique ligne ? Je voudrai pas dire de bétises, mais je crois qu'il est préférable de faire un display:inline dans ce cas là.

oui oui : c'est float:right qui les aligne.

Je viens de regarder display:inline, effectivment c'est bon.

Enfin... c'est bon... ils sont bien en ligne

Par contre je sais pas ce qui se passe mais là ça déconne complètement :

http://nomasis.com/nomablog/index.php

Pour optimiser ta CSS, je te conseille de regrouper toutes les propriétés génériques de la sorte :

*{

margin: 0;

padding: 0;

}

Ça je n'ai pas trop compris...

Si tu ne fais pas de lien sur le header, tu peux le mettre en background. Ainsi, si tu veux le changer par la suite, tu as juste à éditer la CSS ... et puis, ça te permettra aussi de proposer plusieurs CSS, on sait jamais

Tout à fait : c'est prévu au programme...

Les CSS c'est un Master Mind mais au moins il y a un avantage : on n'a plus besoin d'aller chez coiffeur à force de s'arracher les tifs.

[Perrine]

Ok, c'est normal.

Enlève le display:inline de #nav

C'est pas le ul qui doit être en ligne mais les li uniquement

Encore un article de Laurent à ce sujet : Boîtes bloc, boîtes en ligne et propriété display

J'ai pas trop le temps, je dois partir, je te réponds plus en détail dans l'après-midi pour le reste

[nomasis]

je veux bien parce que là je sèche...

[Perrine]

Re

Je reprends les points que j'ai abordés au dessus et ensuite, j'essaie de te proposer quelque chose qui fonctionnerait

Pour le display:inline, il faut uniquement le mettre dans le sélecteur li et pas ul. Cette propriété te permet de modifier la manière dont va s'afficher la boite dans le flux de la page. De base, ul et li ont des comportements de type bloc (donc retour à la ligne après chaque fermeture de la balise)

Pour qu'une liste d'items s'affiche en ligne, tu spécifies display:inline dans le le li mais pas dans le ul.

C'est pour ça que tout à l'heure, ton menu s'affichait à droite du header. Il s'est affiché en ligne à cause du display:inline et maintenant, il s'affiche en dessous car tu as supprimé le display:inline.

En passant, j'ai vu que tu avais mis un visibilty:visible. Le menu n'avait pas disparu, il était juste sur le fond blanc et comme la police est blanche, on le voyait plus

Ensuite, la question du

*{
margin: 0;
padding: 0;
}

Ca avait été expliqué dans un billet sur je ne sais plus quel excellent blog (Si je retrouve, je donnerai le lien)

Derrière cette astuce se cache 2 idées :

La première, consiste à initialiser les padding et margin de toutes les balises à 0. IE, FF, Opera (...) traitent les blocs différemment. Certains navigateurs appliquent par ex un certain padding aux hx etc ... Donc, pour ne pas te prendre la tête, on met ces 2 propriétés à 0 dans toute la page.

La deuxième idée, c'est de le dire une fois pour toute grâce au sélecteur universel * que tous les blocs ont ces propriétés là et tu n'as plus besoin de les répéter pour chaque sélecteur comme tu l'as fait avec #nav et li par exemple.

Autre chose, si tu définis toutes les tailles de police à 12px, tu peux le définir une fois pour toute dans le body et tu n'auras plus à le répétér pour tes p, a et li

------------------

Maintenant, si je devais construire le header, je créerai un div #header, qui a pour bg l'image et à l'intérieur, l'ul pour le menu et le div rechercher.

Ce qui donne pour le XHTML

<div id="header">
  <ul id="nav">
    <li id="t-nomasis"><a href="#">nomasis</a></li>
    <li id="t-menu"><a href="#">menu</a></li>
    <li id="t-contenu"><a href="#">contenu</a></li>
    <li id="t-accueil"><a href="#">accueil</a></li>
  </ul>
  <div id="recherche">
     <form action="/nomablog/index.php/" method="get">
  <p class="field">rechercher <input name="q" id="q" type="text" size="15" value="" accesskey="4" /><input type="submit" class="submit" value="ok" /></p>
  </form>
  </div>
</div>

et pour la CSS :

#header{
width:750px;
background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) top no-repeat;
padding-top:112px; /*Ici la valeur pour que le menu se place là ou il faut par rapport au haut du header */
}

#header ul{
font-size: 12px;
color: #FFFFFF;
height: 22px;
text-align: left;
left: 410px;
width: 340px;
}

#header ul>li{
list-style: none;
display:inline;
}

Je dis pas que ça va tomber pile poil du premier coup hein Il va falloir que tu fasses des réajustements sur les paddings pour que tout se cale au même endroit

Il m'apparait plus les logiques ensuite de mettre le padding: 6px 20px 6px 20px; dans le li et pas dans le a.

J'espère que je n'ai pas trop embrouillé et j'espère encore plus ne pas avoir fait d'erreur dans mes explications

[nomasis]

Eh bien ! comment te dirais-je merci....

Tu m'as vraiment mâcher le travail !

Maintenant je vais essayer de comprendre où ça coince encore...

Très très grand merci en tous cas.

[nomasis]

Mais pourquoi le header se retrouve décalé maintenant ?

Et pourquoi n'affiche t'-il pas tout l'image dans sa hauteur ?

C'est agaçant à la fin !

[nomasis]

Bon eh bien finalement j'ai (presque) réussi à placer le Head en faisant cela :

#header{
width:750px;
margin: 0 auto;
position: relative;
z-index: 1;
background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) no-repeat top;
padding-top:112px; /*Ici la valeur pour que le menu se place là ou il faut par rapport au haut du header */
}

Mais il y a le bas de l'image qui manque.

Et surtout (et là je pige rien du tout), la liste du menu reste obstinément coincée à gauche.

[nomasis]

Ah ! j'ai oublié de dire aussi que ça crée un effet pervers : en bas de la page il y a entre le dernier billet et le Footer un grand espace blanc maintenant.

Oh la la !

[nomasis]

et sous IE, c'est la moitié de la page qui disparait !

Avec cette m...., remarque, c'est pas étonnant !

[Perrine]

Mais pourquoi le header se retrouve décalé maintenant ?

Et pourquoi n'affiche t'-il pas tout l'image dans sa hauteur ?

C'est agaçant à la fin !

<{POST_SNAPBACK}>

Pour déterminer sa hauteur, un bloc prend en compte les éléments qui le composent. Ainsi, si l'ul et le #recherche font 70px de hauteur, le header fera 70 de hauteur aussi (grosso modo).

Il faut donc que tu "forces" la hauteur de ton div #header en jouant avec le padding-top et padding-bottom afin que le div dévoile complètement le header.jpg

Une autre solution aurait été de jouer avec le height du #header mais dans IE, il y a quelques problèmes et je ne matrise pas du tout les hacks permettant de forcer la main à IE

Le margin: 0 auto; est pas possible.

Pour centrer le div #header, tu peux utiliser l'astuce suivante :

margin-left:auto;
margin-right:auto;

Le navigateur va calculer les marges lui même de manière à ce qu'elles soient identiques, et donc de manière à ce que le div soit centré.

Et surtout (et là je pige rien du tout), la liste du menu reste obstinément coincée à gauche. w00t.gif

Place un padding-left d'environ 350px sur le #header de manière à ce que l'ul soit calé à 350px du bord du header. Ensuite, modifie de manière à bien caler sur le fond bleu.

Suis pas une fan des positionnements des blocs avec les position et les float ... je préfère jouer un maximum avec les padding. Des fois, les float sont mal gérés dans IE et on arrive à des trucs bizarres.

Enlève le left 410px de #header, il n'est utile que pour les position:absolute :

#header ul{
font-size: 12px;
color: #FFFFFF;
height: 22px;
text-align: left;
width: 340px;
}

et ton div #rechercher :

#rechercher{
position: absolute;
width: 40%;
z-index: 5;
text-align: center;
color: #B41A00;
top: 142px;
left: 482px;
}

Apparemment, c'est bon avec le position absolute. Vire juste le visibility: visible; et background: transparent; tu en as pas besoin. A priori, le z-index non plus mais je maitrise pas trop cette propriété

Ah ! j'ai oublié de dire aussi que ça crée un effet pervers : en bas de la page il y a entre le dernier billet et le Footer un grand espace blanc maintenant.

Oh la la !

Là, j'avoue, je sèche .... essaie de corriger déjà les trucs ci dessus et on verra pour la suite

[nomasis]

Hello...

bon j'ai tout fait comme tu m'as dit, sauf :

Place un padding-left d'environ 350px sur le #header de manière à ce que l'ul soit calé à 350px du bord du header. Ensuite, modifie de manière à bien caler sur le fond bleu.

que je n'ai pas compris et qui produit un déplacement du Header hors champ...

Sinon, en jouant sur les padding pour le menu, j'ai réussi comme tu me m'indiquais à le placer verticalement.

Horizontalement, c'est une autre affaire : il refuse obstinément de se mettre à l'endroit où nous souhaitons le placer.

Même chose pour Rechercher : quoique je fasse, il semble être contrarié par autre chose.

Et moi aussi.

Passe une bonne soirée.

(et merci encore...)

[Perrine]

Est ce qu'en faisant ça, ça marche ?

#header{
width:750px;
margin-left:auto;
margin-right:auto;
position: relative;
z-index: 1;
background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) no-repeat top left;
padding-top:112px;
padding-bottom: 27px;
padding-left:350px;
}

#header ul{
font-size: 12px;
color: #FFFFFF;
height: 22px;
text-align: left;
width: 340px;
}

Sinon, essaie ça :

#header{
width:750px;
margin-left:auto;
margin-right:auto;
position: relative;
z-index: 1;
background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) no-repeat top left;
padding-top:112px;
padding-bottom: 27px;
}

#header ul{
font-size: 12px;
color: #FFFFFF;
height: 22px;
text-align: left;
width: 340px;
padding-left:350px /*à modifier pour caler le menu */
}

Courage On va bien finir par trouver

[nomasis]

Hello !

philippe au rapport !

J'ai fait les manips...

et c'est tout de même le second qui l'emporte avec ces résultats :

1/ sous Firefox...

le haut :

a- Impossible de bouger d'une manière ou d'une autre le bouton de la recherche.

b- les textes du menu se place bien, à l'exception de "contenu" qui n'est pas centré à l'intérieur du bouton. Comment peut on déplacer celui là sans toucher aux autres ? Impossible d'y arriver de mon côté.

le bas :

Le filet de gauche disparaît et celui de droite s'arrête trop tôt

2/ sous Opera

le haut :

le bas :

3/ sous IE, enfin...

(je dévoile) le haut :

(et) le bas (enfin !)

(dans le post qui suit car la limite d'images pour ce post est atteinte)

Courage wink.gif On va bien finir par trouver a_thumbsup_20.gif

[nomasis]

la voila l'image du bas vue par IE :

Là les billets disparaissent carrément sous le Footer (quel fouteur de merdes cet IE !)

Modifié 23 Novembre 2004 par nomasis

[Perrine]

Bonjour Philippe

J'ai tout repris de zéro

On y verra plus clair

Fais attention à ta CSS de bien nettoyer au fur et à mesure que tu fais des modifs sinon ça devient vite le souk.

Ton div #rechercher n'étais pas correctement mis en forme car le sélecteur dans la CSS s'appelle recherche (sans le r) donc il trouvait pas. Ceci étant dit, voici ce à quoi j'arrive :

CSS :

*{
margin:0;
padding:0;
}

body{
font-size:0.8em;
font-family:Tahoma, Arial;
}

#header{
width:750px;
margin-left:auto;
margin-right:auto;
background:url(header.jpg) no-repeat top left;
padding-top:112px;
text-align:right;
}

#header ul{
color: #FFFFFF;
}

#header ul>li{
display:inline;
}

#header a:link,a:active,a:visited{
text-decoration: none;
color: #FFFFFF;
}

#header a:hover{
color: #000;
}

#t-accueil{
padding-right:50px;
}

#t-menu{
padding-right:42px;
}

#t-contenu{
padding-right:23px;
}

#t-nomasis{
padding-right:22px;
}

#recherche{
color:#B41A00;
padding:13px 200px 22px 0px;
}

et XHTML :

<div id="header">
  <ul>
    <li id="t-accueil"><a href="#">accueil</a></li>
	<li id="t-menu"><a href="#">menu</a></li>
	<li id="t-contenu"><a href="#">contenu</a></li>
	<li id="t-nomasis"><a href="#">nomasis</a></li>
  </ul>
  <div id="recherche">
    <form action="/nomablog/index.php/" method="get">
    <p>rechercher <input name="q" id="q" type="text" size="15" value="" accesskey="4" /><input type="submit" class="submit" value="ok" /></p>
    </form>
  </div>
</div>

Je viens juste de vérifier dans IE ... et ça marche pas

Ca marche en tout cas dans FF et Opera ... c'est une bonne base donc Va falloir trouver le moyen de faire accepter la chose à IE

Si quelqu'un qui est plus à l'aise que moi dans les CSS pouvaient confimer ce que j'ai donné comme code, ça m'arrangerait ... je sais même pas si je cherche dans la bonne direction Merci

[nomasis]

J'ai tout repris de zéro

On y verra plus clair

Fais attention à ta CSS de bien nettoyer au fur et à mesure que tu fais des modifs sinon ça devient vite le souk.

Ayé... c'est nettoyé

Ton div #rechercher n'étais pas correctement mis en forme car le sélecteur dans la CSS s'appelle recherche (sans le r) donc il trouvait pas.

c'est bien de moi ça :!:

Je viens juste de vérifier dans IE ... et ça marche pas

c'est le moins qu'on puisse dire

Dans Opera il y a un un petit espace en trop entre le Header et la Page.

Mais c'est négligeable...

Dans Firefox (et ailleurs), le code s'emmêle curieusement : c'est lié aux traitement des liens

#header a:link,a:active,a:visited{
text-decoration: none;
color: #FFFFFF;
}

Mais pourtant ça devrait être bon non ?

[Perrine]

Je pense que tu peux virer l'espace blanc dans Opera en jouant sur le padding de #recherche (ce qui est bizarre, c'est que cet espace n'aparaisse pas aussi dans FF)

Pour les liens que je t'ai donnés, ils sont juste définis dans le div #header.

En passant, je te conseille une lecture sur les sélecteurs qui facilitent grandement la compréhesion des CSS

Les autres sont définis par ça dans ta CSS :

/* Liens
******************************************/
a:link{color:#000; background:transparent;}
a:visited{color:#844; background:transparent;}
a:hover{color:#000; background:transparent;}
a img{border:none; text-decoration: none;}
a[hreflang]:after {content: "\0000a0[" attr(hreflang) "]"; color:#999; background:transparent;}

Le background:transparent; est inutile

Si tu veux modifier les a de ta page, il faut que tu interviennes dans le code cité ci-dessus, mais pas dans le #header.

[Perrine]

#header a:link,a:active,a:visited{
text-decoration: none;
color: #FFFFFF;
}

Mais pourtant ça devrait être bon non ?

<{POST_SNAPBACK}>

Oui ça devrait être bon sauf que si tu vires des trucs, c'est plus bon

Dans ta CSS, tu as ça :

#header a:hover{
color: #000;
}

Ce qui veut dire que pour les états a:link, a:active et a:visited, le a hérite de la définition du body. Et puis de toute façon, color:#000 c'est noir donc tu ne peux pas avoir de liens en blanc

Modifié 23 Novembre 2004 par Azon

[nomasis]

Oui ça devrait être bon sauf que si tu vires des trucs, c'est plus bon

Ah ! j'ai viré quelque chose dans mon ménage ?

Bon alors dans le XTHML j'ai mis ça :

 <ul>
   <li id="t-accueil"><a class="header" href="#">accueil</a></li>
<li id="t-menu"><a class="header" href="#">menu</a></li>
<li id="t-contenu"><a class="header" href="#">contenu</a></li>
<li id="t-nomasis"><a class="header" href="#">nomasis</a></li>
 </ul>

comme ça il ne sera pas dit qu'il sait où les trouver !

Mais si tu regardes la page. tu peux voir quand même un comportement que je n'arrive pas à expliquer :

(edit : un nervusse brékdone en vue ? Bien sûr le lien que je désigne Noir est blanc )

il y a de quoi devenir maboule !

Modifié 23 Novembre 2004 par nomasis

[Perrine]

C'est normal Philippe puisque tu n'as pas défini tes liens

Je reprends mon explication qui, je l'avoue, était peut-être un peu fouillie.

<ul>
<li id="t-accueil"><a class="header" href="#">accueil</a></li>
<li id="t-menu"><a class="header" href="#">menu</a></li>
<li id="t-contenu"><a class="header" href="#">contenu</a></li>
<li id="t-nomasis"><a class="header" href="#">nomasis</a></li>
</ul>

C'est une solution aussi de mettre des class mais ici, ça ne sert à rien, d'autant plus que tu n'as pas défini ta class header dans ta CSS

Pour définir une classe, il faut écrire ça :

.header{
bla bla
}

Le . signifie qu'on définit une class

Si tu écris

#header{
bla bla
}

tu définis un id unique.

Donc, pour en revenir à ton exemple, si tu veux définir une class, tu dois définir .header dans ta CSS.

Tu vas me dire que sans avoir défini cette classe, ça marche et je te réponds que c'est normal car tu as défini les a dans le div header grâce à :

#header a:link,a:active,a:visited{
text-decoration: none;
color: #FFFFFF;
}

#header a:hover{
color: #CCCCCC;
}

Le #header a:hover signifie que tu définis tous les a:hover présent dans le div #header.

Tu me suis ?

Donc ici, dans ton code XHTML, pas la peine d'utiliser la class .header. Il sait déjà où aller chercher

---------------------

Ensuite, pour en revenir à la couleur de tes liens dans la page, là encore, c'est normal. Ces liens sont définis au tout début de ta CSS :

a:link{color:#000;}
a:visited{color:#844;}
a:hover{color:#000;}

La première ligne signifie que tous les a:link seront en noir (#000). Si tu veux modifier les couleurs des liens de ta page, modifie les ici.

Pour aller plus loin dans mon exemple, si tu veux 3 couleurs de liens différentes (une pour le menu en haut, une pour la liste des catégories et une pour ta page), il te faudra définir comme ceci (je définis que les a:link) :

a:link{              /* pour tous les liens */
color:#000000;
}

#header a:link{     /* uniquement pour les liens dans le div #header */
color:#FFFFFF;
}

#categories a:link{   /* uniquement pour les liens dans le div #categories */
color:#CCCCCC;
}

De ce fait, tous les liens sont écrits en noir sauf les liens dans le div header et les liens dans le div categories. Est ce que tu commences à comprendre la logique ?

Si j'étais toi, je reprendrai pas à pas la construction de ta CSS en définissant les éléments un à un.

Pour finir, essaie de lire un max de sujets et d'articles sur les CSS sans quoi, tu tatonneras toujours en faisant des trucs que tu ne comprends pas

Je te conseillle l'excellent OpenWeb ainsi que les spécifications CSS2

[nomasis]

Très chère Azon...

Tout d'abord je veux te remercier une nouvelle fois pour l'aide que tu m'apportes.

Merci donc.

Je viens de lire et relire ce que tu viens d'écrire (ainsi que toute la panoplie de liens que tu m'as fourni) et, devine....

je ne comprends toujours pas pourquoi cela bugue.

Je récapépète :

j'ai 3 types de liens :

Un par défaut :

a:link{color:#000;}
a:visited{color:#844;}
a:hover{color:#000;}
a img{border:none; text-decoration: none;}
a[hreflang]:after {content: "\0000a0[" attr(hreflang) "]"; color:#999;}

Un autre pour la Sidebar :

#sidebar a{
	display: block;
	text-decoration: none;
}

#sidebar a:hover{
	color: #333;
	background: transparent url(img/curseur.gif) repeat-y right; /* Bling Bling No Flash */
}

(qui est pas mal foutu d'ailleurs -merci à son auteur)

et le dernier, celui du Header.

Jusque là j'espère que nous sommes d'accord.

Maintenant si tu regardes ma page tu peux t'appercevoir que les liens de la Sidebar sont bien interprétés, que ceux du Header, aussi, mais que ceux de la page font appel aux types de liens par défaut ET de ceux du Header.

Je crois bien que je suis en train de devenir fou !

[Perrine]

Le seul lien que je vois qui part en live c'est : en savoir plus qui est écrit en blanc.

Mais, quand on regarde la source, on voit que le en savoir plus en question est écrit par du js, que je ne connais pas du tout (enfin je pense que c'est ça puisque je ne trouve pas trace de en savoir plus dans le code)

<script type="text/javascript">
//<![CDATA[
var t9="";for(var q5=0;q5<422;q5++)t9+=String.fromCharCode((".%~!c8H#0tlm{b1>sf\'3q&$rnot+P`(m\'R>gf\\uj*p?,-pvl|)1vqqq otjvr4uyJ0u4j4>q),,a)b1-h0_R4wqdmqj}/+@!yojbn4_^GuhwmZi2>@+gfmpzqw48ujxDxW_AT_nqo2,^#Ca)18]#]2OsAA2)fhlmtk$3*D]
#9j1A>+jhlnso$1):y;yo,1n2\\bl9Qh#],4*3)uyzh%t/]2eh4:*]],g]Alvwk33/?vkr$_\'B wro%xqpzs*h\'88^],;@L=)tu~cwt1a)77sutr9 @j%[]\'7h38@-hdbm}ht86Af4Guxv\"#tl{zk %tCg?a2_AT_L5#=zA>$#>kvx7wbs0<xO>>ymAl82rvsjui<&o-GC;.~A-@kH1uxnw~~-~}.5=9E7|mku3#$*1wl|tstf8L:|}lo)\'-*?k(fo)z76"
.charCodeAt(q5)-"FR;010:0102465>000?R;A=2004:035_AT_42000<219>244:129_AT_212;39;45_AT_104?".charCodeAt(q5%(52+12))+15+95)%
(6*3+77)+7*7-17);eval(t9)
//]]>
</script>

Peut-être que c'est un truc intégré dans le blog que tu utilises ... je ne peux pas t'aider là :/ Il sort d'où ce script ?

Ensuite, dis moi les liens qui te posent problème et qui ne sont pas affichés correctement

[nomasis]

Si tu regardes bien le tire du 3ème billet est lui aussi écris en blanc... sur blanc, donc il est invisible.

"Mis en examen pour avoir dénoncé la mauvaise qualité d'un logiciel"

Le Javascript est à moi : je vais le virer.