Mise en page image

Bonjour,

J'ai créé une page internet et j'ai quelques soucis de mise en page :
J'ai découpé ma page en 6 cellules à l'aide d'un tableau, dans l'une d'entre elles je fais afficher une image cependant celle-ci est trop grande, j'aimerais donc utiliser des barres de défilement horizontale et verticale (grâce à l'option overflow) afin de ne pas modifier les dimensions de la page. Le code que j'ai rédigé marche très bien sous internet explorer cependant avec firefox l'image s'affiche en entier (sans barre de défilement) et déforme donc la page....
J'aimerais que mon code fonctionne avec les deux navigateurs, si quelqu'un a une solution à me proposer je suis preneur :-)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <HTML> <body link=white vlink=white> <table border=0> <colgroup> <col width="10%"> <col width="80%"> <col width="10%"> </colgroup> <thead> <tr> <th> </th> ... </tr> <tr> <td> <div style="width:950px; height:460px; overflow:scroll " id ="implan"> <img style="position:absolute; z-index:2; overflow:scroll" width=6693'; border=0 src="Fichiers_images/plans4.png" id="ancre0" usemap="#plan_bord"> </div> </td> </tr>

Bonjour,

du devrais commencer par afficher un doctype afin que les navigateurs interprètent ta page en mode (presque) standard.

Rajoute cette ligne tout en haut de ton code, avant le <html>:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tu verras que Internet explorer se comporte alors comme Firefox.
Tu devrais aussi ajouter la section <head>, avec l'élément <title> obligatoire, avant ton body, si pas déjà fait, dans ton code original:
Code:

1 2 3 <head> <title>titre de la page</title> </head>
Tu as une erreur de syntaxe à corriger:

Citation:

<img style="position:absolute; z-index:2; overflow:scroll" width=6693'; border=0

Pourquoi positionner ton image en absolute ? Si tu retires tous les styles affectés à ton image, je suppose que le résultat devrait correspondre à peu près à ce que tu décrivais.

Citation:

<img ~~style="position:absolute; z-index:2; overflow:scroll"~~ width=6693 border=0 src="Fichiers_images/plans4.png" id="ancre0" usemap="#plan_bord" alt="texte qui décrit l'image">

A noter que l'attribut "alt" est obligatoire pour l'élément img.

C'est le minimum pour avoir quelque chose d'à peu près correct et fonctionnel. Après, je ne sais pas quelles sont tes ambitions au niveau codage mais tu devrais lire un peu de théorie sur différents sujets si tu souhaites produire un code plus "propre" ;)

Merci pour ta réponse,

J'avais déjà dans mon code original le doctype et le paragraphe "head" mais effectivement je ne l'ai pas précisé dans mon message précédent.
En enlevant le "position aboslute" ça marche très bien dans les deux navigateurs, merci aussi pour la correction de syntaxe.

Je vais aussi me plonger dans la lecture des différents didacticiels pour rendre mon code un peu plus lisible. :)

Mise en page image

La présentation en tableau est obsolète et mal référencée par les moteurs.
Il convient plutôt d'utiliser des div .
Il faudrait aussi utiliser du css pour donner la même dimension aux 6 images, ce qui donnerait une même taille à toutes donc une meilleure impression d'harmonie.

Citation:

Envoyé par Albanov

Merci pour ta réponse,

J'avais déjà dans mon code original le doctype

Si, avec ton doctype présent, tu constatais que sur IE (7-8-9) ton code "fonctionnait" et pas sur FF cela voudrait dire qu'IE interprétait ta page en mode Quirks ce qui pourrait bien te poser d'autres problèmes dans le futur et qui n'est pas normal avec un doctype correctement renseigné.

Tu peux vérifier, sur ta page, sur IE9, en appuyant sur la touche F11, puis, au haut de la fenêtre qui apparaît au bas, tu devrais avoir "mode de document IE9" si tu as "mode de document: quirks" , c'est qu'il y a un problème dans ta déclaration de doctype.