Menu et alignement

**maqfab** · 28/10/2010, 18h27

Bonjour,

Je suis débutant dans les technos web. Je m'occupe d'un site html, et voudrais le redessiner en php, et utiliser les fichiers css.
Je voudrais réaliser une page simple avec un menu (j'ai copié du code qui fonctionne sur un site). J'ai placé mes menus dans des cellules de tableau (table tr td), histoire de les avoir tous sur la même ligne.
Se pose un dernier problème que je n'arrive pas à résoudre : il reste une indentation entre la bordure gauche de la case de mon tableau et la bordure droite de mon menu. Après quelques recherches sur le net, je capitule.
Merci de vos solutions de correction, ou de vos conseils (après tout, il ne faut peut-être pas utiliser un tableau ?????)

Fichier css :

Code css :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* style pour le fond des pages */
html, body {
		font: 12pt Agency FB, Arial, Times, serif;
		height: 100%;
		margin: 0px;
		border: 0px;
		padding: 0px;
		color: #0000FF;
		background-color: #AFEEEE;
	}
	hr {
		width: 50%;
		height: 1px;
		border: 1px #FFFFFF solid;
	}
	.movie {
		width: 100%;
		height: 100%;
	}
	div.movie {
		width: 750px;
		height: 150px;
		text-align: center;
		border: 1px solid #0000FF;
	}
/* style pour le menu */
#monmenu 
{
	FONT-WEIGHT: bold; 
	FONT-SIZE: 90%; 
	FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL 
{
	BORDER-RIGHT: #b0b0b0 1px solid; 
	PADDING-RIGHT: 0px; 
	BORDER-TOP: #b0b0b0 1px solid; 
	DISPLAY: none; 
	PADDING-LEFT: 0px; 
	LEFT: 164px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px;
	BORDER-LEFT: #b0b0b0 1px solid; 
	PADDING-TOP: 0px; 
	BORDER-BOTTOM: #b0b0b0 1px solid; 
	POSITION: absolute; TOP: -1px
}
#monmenu LI 
{
	PADDING-RIGHT: 2px; 
	PADDING-LEFT: 2px; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 0px;
	WIDTH: 160px; 
	PADDING-TOP: 2px; 
	LIST-STYLE-TYPE: none; 
	POSITION: relative; 
	BACKGROUND-COLOR: #00FFDD
}
#monmenu LI:hover 
{
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover 
{
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI A 
{
	TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 
{
	DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 
{
	DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 
{
	DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 
{
	DISPLAY: block
}
 
Fichier HTML :
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
	<TITLE></TITLE>
	<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
	<LINK REL="stylesheet" type="text/css" href= "css/global.css"> 
	<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
</HEAD>
<BODY>
<TABLE align="left" width="320" border=1>
	<TR>
		<TD valign="top" align="center" width="160">
			<DIV id=monmenu>
				<UL class=niveau1>
					<LI>Club 
						<UL class=niveau2 style="LEFT: 0px; TOP: 20px">
							<LI>
								<A href="">
									Présentation
								</A> 
							</LI>
							<LI>
								<A href="">
									Historique
								</A> 
							</LI>
							<LI>
								<A href="">
									Trombinoscope
								</A> 
							</LI>
							<LI>
								<A href="">
									Fiche d'adhésion
								</A> 
							</LI>
							<LI>
								<A href="">
									Contact
								</A> 
							</LI>
						</UL>
					</LI>
				</UL>
			</DIV>
		</TD>
</TR>
</TABLE>
</BODY>
</HTML>

**franculo_caoulene** · 29/10/2010, 15h37

Salut maqfab,

Les table HTML sont à proscrire pour faire de la mise en page. Jette donc un œil à la galerie CSS de DVP, ça devrait t'inspirer.

Menu et alignement

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager