petit soucis de position de tableau

**Holic** · 29/10/2009, 20h33

Bonjours à tous, je suis débutant dans le domaine du développement web, je me suis lancé dans la création d'un petit portfolio pour un amis graphiste et j'aurai besoin d'un peu d'aide concernant le positionnement des tableau dans la page

Je m'explique : Le site est basée sur une image de fond mapée avec un menu hyper graphique avec des balises <AREA>, jusqu'ici tout va bien, mon souci vient du faite que je veu insérer un tableau a un endroit précis de mon image mapée, j'ai tout d'abord utiliser le code ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="Layer1" style="position:absolute; left:387px; top:280px; visibility: visible;">
<TABLE border="0" width="730" height="47" valign="top">
 
contenu du tableau
 
</TD>
</TABLE>
</div>

je me suis rendu compte quand fait je positionner mon tableau par rapport au bord de l'écran ... et donc quand on passer d'un écran 17"" à un 22"" par exemple, tout été décalé (ce qui est normal me direz vous ^^) je souhaiterai donc savoir comment pourrai-je faire pour placé mon tableau par rapport a mon image mappée et ce avec des coordonnés ci possible, pour que le tableau ne bouge pas de position suivant la taille de l'écran.

voila ce que je souhaiterai obtenir :

j'attends vos conseils

merci par avance.

**12monkeys** · 29/10/2009, 20h52

Bonsoir

Un élément positionné en absolu se positionnera en fonction de son premier élément parent positionné de manière relative, à défaut il sera positionné par rapport à la zone de visualisation... Donc englobe ta structure dans un div conteneur positionné de manière relative.

Mais faut il vraiment ce positionnement absolu, n'y a t'il pas moyen de faire plus simple, en faisant un positionnement dans le flux ?

**Holic** · 29/10/2009, 21h04

Bonsoir 12monkeys, merci pour ta réponse ,je t'avouerai que je n'ai pas compris grand chose a ce que tu vien de dire, je débute , j'ai réaliser mon début de site via quelque bout de code par ci par la trouver sur divers tuto

pourrai tu m'en dire un peu plus sur la fonction div et la manière de faire un div global ? merci

**12monkeys** · 29/10/2009, 21h30

Bon je recommence.

Tu as vu que l'élément positionné en absolu se place en fonction de la zone de visualisation du navigateur. Si cet élément a un élément parent positionné de manière relative, l'élément en absolu se positionne par rapport à l'élément parent positionné en relative.

Essaye ce code pour comprendre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="position : relative;top:400px;left:400px:background:red;">
Elément parent positionné en relative...
  <div style="position:absolute;top:25px;left:25px;background:blue;">
élément positionné en absolu
  </div>
</div>

Ensuite enlève la position:relative, et regarde de nouveau le code...

Quand je parle de div global c'est simplement un div situé juste après la balise <body> et qui va englober tout le reste du code de ta page... Si tu le positionne en relative, et que tu lui attribue une largeur fixe, l'élément enfant positionné en absolu ne devrait plus bouger en fonction de la résolution de l'écran...

**Holic** · 29/10/2009, 22h05

merci j'ai déja mieu compris

apres test cela marche sous firefox par contre quand je test avec ie8 mon "enfant" ce place au dessus du fond dit "parent", une idée d'ou cela peu venir ?

**12monkeys** · 29/10/2009, 22h27

Tu parles de ton code ?

On peut voir le code ou mieux, une page en ligne ?

**Holic** · 29/10/2009, 22h38

voila

si tu voi ou sa cloche pour positionner le tableau la ou il devrai être ...

et pour le lien => http://my.digitalworld.free.fr/zao/test.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<html xmlns="http://www.w3.org/1999/xhtmlxml:lang="fr" lang="fr"> 
<head> 
<title>
AYROS Pictures
</title> 
</head> 
<body> 
<div ALIGN=CENTER style="position:relative;"
<div style="position:absolute;top:210px;left:58px;">
<TABLE border="1" width="600" height="400" >
<TD bgcolor="">
 
 
</TD>
</TABLE>
</div>
 
 
<MAP NAME="map1">
 
<AREA
   HREF="index-2.php" ALT="Acceuil" TITLE="Acceuil"
   SHAPE=RECT COORDS="229,106,340,130">
 
<AREA
   HREF="montage.php" ALT="Montage" TITLE="Montage"
   SHAPE=RECT COORDS="355,106,450,130">
 
<AREA
   HREF="creation.php" ALT="Creation 3D" TITLE="Creation 3D"
   SHAPE=RECT COORDS="472,106,594,130">
 
<AREA
   HREF="book.php" ALT="Book Photo" TITLE="Book Photo"
   SHAPE=RECT COORDS="614,106,737,130">
 
<AREA
   HREF="contact.php" ALT="Contact" TITLE="Contact"
   SHAPE=RECT COORDS="750,106,854,130">
 
 
</MAP>
 
<IMG SRC="site.jpg"
   ALT="map of GH site" BORDER=0 WIDTH=900 HEIGHT=700 
   USEMAP="#map1"><BR>
 
 
</DIV>
</body> 
</html>

**12monkeys** · 29/10/2009, 22h58

Alors commence par utiliser un doctype : lequel et pourquoi.

Ensuite dans ton head il y a quelques problèmes : l'attribut xmlns ne se termine pas avec un guillemets ce qui fait qu'il se mélange avec l'attribut suivant... Dans l'attribut xml:lang il y a une différence entre les 2 guillemets.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Ensuite l'attribut xmlns s'impose lorsque tu fait du XHTML, or tu n'en fait pas parce qu'il est beaucoup plus strict au niveau syntaxe.

Tu peut lire ce tutoriel sur le HTML : http://j-willette.developpez.com/tut...bases-du-html/

Niveau contenu : ton premier div n'est pas fermé, il manque le > fermant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="position:relative; valign=top;"

Tu indiques une propriété css valign=top dans l'attribut style, ceci n'existe pas en css tu mélange là css et html...

Enfin sur l'utilisation d'une image unique pour la page, c'est... elle est lourde et prends beaucoup de temps à se charger...

Finalement ton problème avec internet explorer 8 viens du fait que tu as oublié le > fermant dans le 1er div...

**Holic** · 29/10/2009, 23h14

merci

voila déjà le problème des différents navigateurs est réglé sa a l'air de fonctionner, par contre comment pourrai-je faire pour aligner le tout au center ? rajouter un <center></center> après le body ?
quand à l'image, c'est vrai que mon amis graphiste a u la main lourde ... presque 1mo ... je lui demanderai de la refaire en plus "light"
et merci pour les liens

je regarderai sa demain matin

voila mon nouveau code et le lien est mis a jour :

http://my.digitalworld.free.fr/zao/test.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<html xml:lang="fr" lang="fr"> 
<head> 
<title>
AYROS Pictures
</title> 
</head> 
<body> 
 
<div style="position:relative;">
<div style="position:absolute;top:210px;left:255px;">
<TABLE border="1" width="600" height="400" >
<TD bgcolor="">
 
 
 
</TD>
</TABLE>
</div>
 
 
<MAP NAME="map1">
 
<AREA
   HREF="index-2.php" ALT="Acceuil" TITLE="Acceuil"
   SHAPE=RECT COORDS="229,106,340,130">
 
<AREA
   HREF="montage.php" ALT="Montage" TITLE="Montage"
   SHAPE=RECT COORDS="355,106,450,130">
 
<AREA
   HREF="creation.php" ALT="Creation 3D" TITLE="Creation 3D"
   SHAPE=RECT COORDS="472,106,594,130">
 
<AREA
   HREF="book.php" ALT="Book Photo" TITLE="Book Photo"
   SHAPE=RECT COORDS="614,106,737,130">
 
<AREA
   HREF="contact.php" ALT="Contact" TITLE="Contact"
   SHAPE=RECT COORDS="750,106,854,130">
 
 
</MAP>
 
<IMG SRC="site.jpg"
   ALT="map of GH site" BORDER=0 WIDTH=900 HEIGHT=700 
   USEMAP="#map1"><BR>
 
 
</DIV>
</body> 
</html>

**12monkeys** · 29/10/2009, 23h27

Centrer un élément positionné de manière absolue ne fonctionne pas avec les marges auto, comme la solution dans la FAQ. Il faut utiliser cette autre méthode : http://css.developpez.com/faq/index....calement_block. Même si c'est écrit centrer verticalement, ça fonctionne aussi horizontalement, il faut juste en comprendre le principe et adapter...

**Holic** · 29/10/2009, 23h31

bien

je vais voir sa, sur ce je te remercie pour ta patience et tes explications et je te dit a bientôt.

petit soucis de position de tableau

Positionnement en CSS

Discussions similaires

Partager

Partager