Position d'un Tableau

Version imprimable

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:

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>

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

Code:

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>

10/08/2010, 09h30
sevian

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 ?

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:

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

11/08/2010, 18h50
sevian
tu as fait exprès de supprimer

Code:

<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:

<body>

:zoubi:

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

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:

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 ?
11/08/2010, 19h27
sachaaa

dsl mais tu parles une autre langue pour moi dsl
11/08/2010, 19h33
sachaaa

merci bcp pour tout !
mais là je n'arrive plus a reflechir alors je lasse passer un peu de temps (1 ou 2heures) ne m'en veux pas
merci !
12/08/2010, 08h08
sevian

Aucun problème :D
à ton rythme ;)
12/08/2010, 10h16
sachaaa

reponse

je t'ai envoyé un MP
12/08/2010, 17h08
sachaaa

tu es la ?

Voici un exemple très simple. pour te montrer la voie.

index.html

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="centre">
		<div id="contenu">
			<p>
				Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi  ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat.
				Ut wisi enin ad minim. Quis nostrud ad nostris pro amat. Sed aliquo ut  nisi alter ego qid propter anno et cetera. Ullam venit cum permissio, alter  ego cum frater et patris et mater inter familias.
			</p>
		</div>
		<ul>
			<li><a href="index.html"><img src="menu/accueil.gif" alt="accueil" width="113" /></a></li>
			<li><a href="index.html"><img src="menu/profil.gif" alt="profil" width="114" /></a></li>
			<li><a href="index.html"><img src="menu/cv.gif" alt="cv" width="115" /></a></li>
			<li><a href="index.html"><img src="menu/presentation.gif" alt="presentation" width="113" /></a></li>
			<li><a href="index.html"><img src="menu/liens.gif" alt="liens" width="103" /></a></li>
			<li><a href="index.html"><img src="menu/contact.gif" alt="contact" width="94" /></a></li>
		</ul>
		<div id="pied">
			<p>Bas de page</p>
		</div>
	</div>
</body>
</html>

style.css

Code:

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
* {
	margin: 0px;
	padding: 0px;
}
 
body {
	text-align: center;
	background-color: #000000;
	color: #FFFFFF;
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
	background-image:url(ecran1.gif);
	background-repeat:no-repeat;
	background-position: center;
}
 
/* GLOBAL */
#centre {
	margin: auto;
	background-color: #458987;
	height: 600px;
	width: 800px;
}
 
/* SITE */
#contenu {
	text-align: left;
	height: 500px;
}
 
/* MENU */
ul {
	list-style-type: none ;
	text-align: center ;
	height: 100px;
}
 
li {
	display: inline ;
}
 
img {
	border: 0;
}
 
/* PIED de page */
#pied {
	background-color: #668912;
}

je te conseil vivement de consulter les très bon tutos que tu trouvera ici.
ce code pourrait te servir de base de départ, il faudra bien sur l'adapter à ton site.
tu remarquera que j'ai placé le menu en fixant des tailles fixes aux éléments plutôt que par un positionnement. c'est une manière très "bête" qui fonctionne, avant de faire plus complexe.

voila, j'espère t'aider un peu.
bon courage.

12/08/2010, 23h42
sachaaa

merci bcp
mais cela veut dire quoi :
display: inline ;
le balise <li>
merci
13/08/2010, 07h12
sevian

enlève le et tu vas vite comprendre ;)
le comportement par défaut des listes, c'est un affichage vertical.
le display permet de modifier ce comportement.