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 :


et celui de la CSS, celui-là :


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)

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 :



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 :



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

Bonjour Azon...
Voici le code maintenant




Bien sûr...

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

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

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.

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

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

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


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



et pour la CSS :



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

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.

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 !

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

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. :yoot:

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 !

et sous IE, c'est la moitié de la page qui disparait !
Avec cette m...., remarque, c'est pas étonnant !

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 :


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é.




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 :



et ton div #rechercher :



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é



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

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

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...)

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



Sinon, essaie ça :



Courage On va bien finir par trouver :up:

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)

la voila l'image du bas vue par IE :


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

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 :



et XHTML :



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

Ayé... c'est nettoyé

c'est bien de moi ça



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


Mais pourtant ça devrait être bon non ?

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 :



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.

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

Dans ta CSS, tu as ça :



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

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

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

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 !

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.



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 :



Le . signifie qu'on définit une class

Si tu écris



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 à :



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 :



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) :



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

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 :


Un autre pour la Sidebar :
(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 !

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)



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

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.

Bon j'ai viré le bout de code Javascript pensant que c'était lui qui nous jouait des tours.
Eh bien non : la 1ère page est toujours pareil !

Par contre et c'est extrèmement surprenant : si tu te balades dans certaines catégories du blog tu peux voir que les différents liens de la CSS sont correctement interprétés.
Sauf là : http://nomasis.com/nomablog/index.php/?Humurs, par exemple.
Il y a un bug ! Mais où ? Je cherche...

Je le vois noir. En revanche, le comportement du a:active est effectivement blanc

Remplace ça :



par ça :

Je ne suis pas d'accord. Le seul lien blanc qui existait en savoir plus a disparu ... Maintenant, tous les liens sont affichés correctement



Là encore, je ne suis pas d'accord, tout s'affiche correctement chez moi. Même sur IE (sans parler du menu bien sûr, je regarderai ce soir pour le menu du header)

Alors bon... que chez toi cela s'affiche correctement alors que sur mon poste je vois les liens blancs, je crois savoir pourquoi :

En tatonnant je me suis apperçu que seuls les liens visités se retrouvaient blancs.

J'ai donc viré le a:visited dans le #header a:.
Et je retrouve des liens lisibles.

Mais c'est tout de même curieux.

Bizarre bizarre ... Enfin !

J'ai vu que tu avais modifié la couleur des liens visités ... as-tu essayé de remettre le a:visited dans le #header ?

Sinon, à part le menu pour IE, on est bon là ?

Dans ta feuille de style, il y a plein de XHTML, c'est quoi ?

euh nan... tiens je vais regarder

il y a l'histoire des filets en bord de page aussi; mais c'est pas de la première urgence non plus.

euh... j'ai beau chercher de mon côté : je ne vois pas une goutte de XHTML dedans.
Tu vois quoi toi ? (ça m'inquiète)

AH non pardon .. c'est moi lol j'utilise la barre d'outils Web Developper de FF et j'affiche la css avec. Il me met le code XHTML de la page ... ok, j'ai rien dit

Il faut revoir le footer, il part un peu en cacahuète
Et dans ta CSS



Attention, tu définis plusieurs fois la même chose (a:hover)
Le #footer a du début n'est pas utile puisque par la suite, tu définis les 4 états possible du a (link, hover, active et visited)

Tu as ça en haut de ta CSS



Tu peux donc virer tous les margin:0 que tu as dans les sélecteurs car ils vont hériter des attributs de leurs parents (le bloc conteneur)

Hop, encore un peu de lecture pour comprendre l'héritage

J'ai vaincu la bête ! :yoot:

Voici le XHTML pour le header :



et la CSS :



En conclusion :

le #header ul>li n'était pas interprété par IE ... pour ça que les liens étaient les uns en dessous des autres, IE ne voyait pas le display:inline.
En modifiant en #header li, cela fonctionnait MAIS j'ai choisi d'utiliser le float car IE 5 ne sait pas interprété display:inline et on en aurait été au même problème.

A toi de relever le défi de construire ton footer de la même manière
Bonne chance ! :up:

Yeah !


Ah ! cochonnerie de IE !
Dans une interview récente au sujet de la sécurité de son browser, faite aux Etats Unis, Ben English, responsable sécurité des logiciels du premier éditeur mondial, explique que (je cite) :
"Internet Explorer est victime de la haine contre les américains et contre Microsoft. Le seul reproche qui peut lui être fait est d'être fourni avec Windows, mais il n'y a pas plus de failles dans le navigateur de Microsoft que dans d'autres navigateurs !"
Il faudrait lui sussurer qu'aussi passer son temps à "corriger" IE est contre productif et que ça lasse les webmasters qui du coup, recommande d'abandonner IE.

Ça devrait aller sans trop de soucis. (peut être un peu présomptueux là ; on verra)

J'ai pas mal triché quand même pour arriver à avoir la bordure du bas dans IE ET dans FF : je l'ai suprrimé de l'image du header.jpg et je l'ai mis dans la CSS.
Du coup ça marche.

Dans la journée je vais t'écrire en PM.

encore MERCI. MERCI pour ton aide qui me fut si précieuse.