Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Petite info


Sew-Oszka

Messages recommandés

Je crois qu'on s'est mal compris! C'est de ma faute! Je voulais que le "calque" (la zone où se trouverons les boutons) soit à l'interieur de l'image d'arrière plan...... et non l'inverse! :P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

En fait, tu dois décrire l'image de fond d'abord (c'est la seule différence avec ta dernière version), puis le menu (en position absolue) qui viendra se superposer à elle. L'attribut z-index ne s'avère pas nécessaire.

 

J'ai repris ton image de fond et fabriqué six petites images transparentes en 125x35 pour les choix du menu. Et voici une page qui fonctionne,

- l'image de fond change effectivement de dimensions,

- le menu bouge également, d'une façon qui devrait te satisfaire !

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Annie Lebaillif</title>
<style type="text/css">
<!--
#Layer1 {
   position:absolute;
   top:42%;
   left:5%;
   width:125px;
}
#Layer1 img {
   border:0;
   width:125px;
   height:35px;
}
-->
</style>
</head>
<body>
<img src="AFarriereplan.jpg" width="100%" />
<div id="Layer1">
<a href="AFaccueil.html"><img src="AFaccueil.gif" alt="accueil" /></a>
<a href="AFformation.html"><img src="AFformation.gif" alt="formation" /></a>
<a href="AFactualites.html"><img src="AFactualites.gif" alt="actualités" /></a>
<a href="AFcours.html"><img src="AFcours.gif" alt="cours" /></a>
<a href="AFbook.html"><img src="AFbook.gif" alt="book" /></a>
<a href="AFcontacts.html"><img src="AFcontacts.gif" alt="contacts" /></a>
</div>
</body>
</html>

Il te restera à effacer, sur ton image de fond, le menu imprimé en dur. :P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

Il est vrai que tu fixes formellement les coordonnées du coin haut gauche du menu par rapport au coin haut gauche de l'écran.

 

Mais ces coordonnées, tu les donnes en pourcentage des dimensions de l'écran (top 42%, left 5%, dans mon exemple). De sorte que la position du coin dépend des dimensions de l'écran ! :P

Lien vers le commentaire
Partager sur d’autres sites

en pourcentage des dimensions de l'écran
Qu'on soit bien clairs là-dessus : les tailles sont exprimées en pourcentage du bloc conteneur qui est, pour le bloc de plus haut niveau, la fenêtre du navigateur !

(je précise parce que certains se laissent piéger...)

 

Par conséquent, si l'on réduit la fenêtre du navigateur on peut arriver à "simuler" les conditions d'affichage sur un écran plus petit... (là où la résolution de l'écran intervient, c'est si l'on utilise des tailles en pt ou cm ou si l'on fait sa mise en page en prenant en compte la taille réelle d'affichage des éléments sur l'écran (en cm, donc). En réalité ce sont surtout les dpi qui interviennent, mais je vais arrêter de vous tanner ;-) )

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

Tu as tout à fait raison, KewlCat, c'était de ma part un abus de langage. Partout où je parle de dimensions de l'écran, il faut entendre dimensions de la fenêtre du navigateur... ce qui est effectivement très différent, compte tenu de l'encombrement non négligeable du bandeau de navigation, de la barre de tâche de Windows, de la barre d'état du navigateur, et des divers ascenseurs !

 

A tel point que, pour une résolution d'écran 1024x768, la fenêtre "efficace" ne mesure guère que 990x600. Ce que j'avais d'ailleurs fait remarquer à Sew-Oszka à propos de l'image de fond de son site du DAF (voir plus haut dans le présent topic).

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...