Position d'un Tableau

**sachaaa** · 09/08/2010, 16h08

Bonjour
je suis en train de faire un site en HTML
et j'ai un tableau avec mon menu dedans mais j'aimerais qu'il soit toujours centre et en bas de mon image
je pense a une position absolu mais je n'y arrive pas
merci de m'aider.

mon code est :

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
55
56
57
58
59
<!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=utf-8" />
<TITLE>Wéb$@çhàe</TITLE>
<style type="text/css">
.body {
        background-image:url(ecran1.gif);
        background-repeat:no-repeat;
        background-position: center center;
        height: 600px;
        }
        .zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:55px;
height:55px;
}
.zoom img:hover {
width:90px;
height:90px;
}
</style>
</head>
 
<body bgcolor="#000000">
<div class="body" >
<div class="zoom">
  <div align="center">
 
      <table width="795" border="0" align="center">
        <tr>
          <th width="52" scope="col">&nbsp;</th>
          <th width="113" height="94" scope="col"><img src="menu/accueil.gif"
         alt="accueil" /></th>
          <th width="114" scope="col"><img src="menu/profil.gif"
         alt="profil" /></th>
          <th width="115" scope="col"><img src="menu/cv.gif"
         alt="cv" /></th>
          <th width="113" scope="col"><img src="menu/presentation.gif"
         alt="presentation" /></th>
          <th width="90" scope="col"><img src="menu/liens.gif"
         alt="liens" /></th>
          <th width="103" scope="col"><img src="menu/contact.gif"
         alt="contact" /></th>
          <th width="61" scope="col">&nbsp;</th>
        </tr>
      </table>
    </div>
    <p>&nbsp;</p>
</div>
</div>
</body>
</html>

**sachaaa** · 09/08/2010, 17h05

je viens de rajouté ca mais je sais pas si c'est bon

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
55
56
57
<!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=utf-8" />
<TITLE>Wéb$@çhàe</TITLE>
<style type="text/css">
.body {
        background-image:url(ecran1.gif);
        background-repeat:no-repeat;
        background-position: center center;
        height: 600px;
        }
        .zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:55px;
height:55px;
}
.zoom img:hover {
width:90px;
height:90px;
}
</style>
</head>
 
<body bgcolor="#000000">
<div class="body" >
<div class="zoom">
 
  <DIV STYLE="position:absolute; top: 475px; left: 356px; width: 743px; height: 103px;"> 
      <table width="795" border="0" align="center">
        <tr>
          <th width="80" height="94" scope="col">&nbsp;</th>
          <th width="117" scope="col"><img src="menu/accueil.gif"
         alt="accueil" /></th>
          <th width="95" scope="col"><img src="menu/profil.gif"
         alt="profil" /></th>
          <th width="120" scope="col"><img src="menu/cv.gif"
         alt="cv" /></th>
          <th width="127" scope="col"><img src="menu/presentation.gif"
         alt="presentation" /></th>
          <th width="106" scope="col"><img src="menu/liens.gif"
         alt="liens" /></th>
          <th width="120" scope="col"><img src="menu/contact.gif"
         alt="contact" /></th>
        </tr>
      </table>
    </div>
  </DIV>
</div>
</body>
</html>

**sevian** · 10/08/2010, 09h30

Salut,

dans un premier temps, essaye de garder une syntaxe cohérente.
par exemple, si tu déclare un style <style style/>, ne met pas de style dans ton code html <body bgcolor=...>.
ecrit ton html d'un coté et le style de l'autre. je te conseil l'utilisation d'une feuille de style (.css).

beaucoup plus simple à corriger et à débug.

pour ton histoire de centrage, avec ton code, chez moi le tableau est bien en "absolute", mais n'ayant pas les images, je ne vois pas le rendu et donc je ne sais pas si c'est bon. tu n'aurais pas une version en ligne ?

**sachaaa** · 10/08/2010, 13h05

je me suis déjà fait un site en flash :

mais je veux le refaire en html :

si tu veux voir ce que cela fait en html :

ce qui est bizarre c'est que sur mon dreamwever j'ai cette affichage :

J'ai changé le css pour ma couleur de fond
sur mon ordi le site s'affiche bien :

sur un autre ordi j'ai cette affichage :

et mon code :

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
55
56
57
<!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=utf-8" />
<TITLE>Wéb$@çhà</TITLE>
<style type="text/css">
.body {
        background-image:url(ecran1.gif);
        background-repeat:no-repeat;
        background-position: center center;
        height: 600px;
        }
        .zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:55px;
height:55px;
}
.zoom img:hover {
width:90px;
height:90px;
}
body {
        background-color: #000;
}
</style>
</head>
<div class="body" >
<div class="zoom">
  <DIV STYLE="position:absolute; top: 463px; left: 515px; width: 611px; height: 103px;"> 
      <table width="795" border="0" align="center">
        <tr>
          <th width="80" height="94" scope="col"><img src="menu/accueil.gif"
         alt="accueil" /></th>
          <th width="87" scope="col"><img src="menu/profil.gif"
         alt="profil" /></th>
          <th width="80" scope="col"><img src="menu/cv.gif"
         alt="cv" /></th>
          <th width="84" scope="col"><img src="menu/presentation.gif"
         alt="presentation" /></th>
          <th width="83" scope="col"><img src="menu/liens.gif"
         alt="liens" /></th>
          <th width="107" scope="col"><img src="menu/contact.gif"
         alt="contact" /></th>
          <th width="244" scope="col">&nbsp;</th>
        </tr>
      </table>
    </div>
  </DIV>
</div>
</body>
</html>

merci

**sevian** · 11/08/2010, 18h50

tu as fait exprès de supprimer

Code :

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

<body bgcolor="#000000">

de ton code ?

tu as définit un style pour ton body dans la feuille, c'est bien, mais laisse au minimum la balise

Code :

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

<body>

je trouvais ton code un peu brouillon (ce n'est que mon avis), je comprends mieux, tu utilise dream

il y a rarement une seule manière d'écrire une page.
perso j'aurai fait un truc du genre pour la structure.
je me suis basé sur ta version flash.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div id="centre">
  <div id="contenu">
  </div>
  <ul>
    <li>menu1</li>
    <li>menu2</>
  </ul>
  <div id="pied">
  </div>
</div>
</body>

pour le style:
- tu centre la div id="centre"
- tu mets ton contenu dans la 2eme
- tu applique un style "menu" à la balise ul
- tu mets ton pied de page dans la 3eme div

voila en gros. ca reste léger et simple.
besoin que je te développe plus l'explication pour le style ?

**sachaaa** · 11/08/2010, 19h27

dsl mais tu parles une autre langue pour moi dsl

Position d'un Tableau

HTML

Vue hybride

Discussions similaires

Partager

Partager