Images superposées

(reprise du message précédent)

J'ose pas trop, c'est vraiment un travail d'amateur que j'ai fait.

Mais bon des que je termine ma page je la mettrais en ligne.

Salutations.

a écrit :
J'ose pas trop

C'est pas pour te juger, c'est pour t'aider Mets ça sur une page non accessible depuis ton site web, personne d'autre que nous la verra.

Salut jmde1,

C'est quand même beaucoup plus clair avec la page en ligne

Voyons :

Si tu ne devais retenir qu'une chose, c'est que le code HTML est destiné à abriter uniquement ton contenu (en version simplifiée : texte et images porteuses de sens). Tout ce qui est décoratif appartient à la feuille de styles CSS. Donc jamais de :

<!--Image fond de page-->
<img class="Fond-Page" src="../Outils/Arriere-plan/etoiles.gif" alt="" width="290" height="217" />
<div class="Fond-Page">
</div>  <!-- div Image fond de page -->

<!--Image transparente fond de page--> 
<img class="Fond-Page" src="../Outils/Fond_Ecran/transparence-fond1.gif" alt="" width="10" height="10" />

Tout cela n'a rien à faire ici. Si tu veux un arrière-plan pour ta page, c'est du CSS, et c'est simplement :

body {background:url(monImage);}

Segundo, div.organigramme n'a pas besoin d'être dans une autre div, tu peux donc supprimer div.Fond-Transparent (qui en plus empêche le survol de tes boutons).

Tercio pour passer tes boutons en bleu au survol, tu utilises :

a.bouton-relief:hover {...}

Mais la classe bouton-relief n'existe pas. Donc soit tu ajoutes cette classe à tes boutons, soit tu fais une déclaration css par bouton :

a.bouton-relief-gauche:hover {...}
a.bouton-relief-droite:hover {...}

(La première solution est bien sûr meilleure)

Voilà, il y a encore pas mal de conseils à te donner mais avec ça, ta page devrait déjà fonctionner. Tiens nous au courant
Modifié par marcv (10 May 2009 - 11:16)

Re bonjour Marcv,
J’ai fais les modifications et le survol des boutons fonctionnent correctement.

Peux-tu m’expliquer la solution 1 des boutons qui est meilleure.

Dans le code de la page test j’avais mis ce texte :

<a href="../index.html" class="bouton-relief">Accueil</a>
lorsque j'utilisais ce code, à chaque fois que je fermais la page une page index
s'ouvrait et lorsque je quittais le site, j'avais plusieurs pages index à fermer.
C'est pour cela que j'ai utilisé javascript, mais le message de confirmation de
la fermeture de la page me gêne.

Y a-t-il un moyen de le supprimer?

A+ pour les autres conseils

a écrit :
<a href="../index.html" class="bouton-relief">Accueil</a>
lorsque j'utilisais ce code, à chaque fois que je fermais la page une page index
s'ouvrait et lorsque je quittais le site, j'avais plusieurs pages index à fermer.
C'est pour cela que j'ai utilisé javascript

Le problème se situe plus en amont : c'est le menu de ta page d'accueil dont le comportement n'est pas bon.

Connais-tu beaucoup de sites web dont toutes les pages s'ouvrent dans des nouvelles fenêtres (ou onglets) ? Certainement non, et c'est pas pour rien Comme je le disais hier dans un autre sujet, une des principales conventions de la navigation internet est que les pages s'enchaînent les unes après les autres, et non pas en parallèle.

Tu dois t'efforcer de respecter cette manière de naviguer. Si je vais voir ton organigramme et que je souhaite revenir à la home, cela doit être possible avec le bouton "Page précédente" du navigateur. Sur ton site ça ne marche pas. Certes, tu proposes un bouton Accueil pour pallier cette limitation, mais ce n'est jamais qu'un palliatif, ce n'est pas la solution à laquelle tout le monde pense instinctivement. Malgré ton bouton, beaucoup iront chercher le clic sur "Page Précédente" sans réfléchir.

Donc, première chose à régler, ton menu ne doit pas ouvrir de nouvelles pages. Ton bouton accueil ne sera plus nécessaire, mais si tu souhaites le conserver, il n'aura plus besoin de javascript dans son href, le "../index.html" que tu lui avais mis au début fera l'affaire (ou plus simple encore "/", qui signifie racine du site).
Modifié par marcv (10 May 2009 - 17:44)

Bonsoir Marcv,

Le texte d’un titre <H1> est trop long, il se place sur deux lignes et décale la photo
et le titre < p> vers le bas.

Comment remédier à ce cas de figure ?

Merci pour ton aide.

Salutations.