depassement de bloc

**npolbos** · 12/11/2008, 13h38

bonjour a tous,

voila j ai un petit souci avec une feuille de style tres simple.
voila le html

Code html :

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
 
<!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">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="./styles/default.css" type="text/css" media=" screen" />
</head>
<body>
<div id="page">
	<div id="header">
	HEADER
	</div>
 
 
	<div id="menu">
	<ul><li><a href="#">lien1_menu</a></li><li><a href="#">lien2_menu</a></li></ul>
	</div>
 
	<div id="content">
	CONTENU
	</div>
 
	<div id="footer">
	FOOTER
	</div>
</div>
</body>
</html>

et la feuille de style :

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
 
/* *************************** */
/* structure d une page defaut */
/* *************************** */
#page {
	width: 800px;
	background: #fff;
	margin: 10px auto;
	border: 2px solid #fff;
}
 
#header {
	height:150px;
	background-color:#6d6;
}
 
 
#menu {
	background:#6d6;
        border: 1px solid black;
}
 
#content {
	margin-top:2px;
}
 
/* *************************** */
/*      style du menu          */
/* *************************** */
 
#menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
 
#menu ul li {
	display: inline ;
	margin-right: 1px ;
}
 
#menu ul li a {
	background: #555 ;
	color: #FFF ;
	padding: 4px 20px ;
	text-align: center ;
	text-decoration: none ;
	font-weight: bold;
 
}

pour résumer j ai un bloc qui contient mon menu qui s'affiche "inline"
les liens de ce menu ont une marge haute et basse de 4px

le problème c'est que ce ce fait le cadre généré dépasse du bloc conteneur

y a t il un style pour dire a mon bloc menu qu'il s adapte a son contenu ??

sinon je pense retourner a mes bon vieux tableaux pour structurer mon site parce que les blocs ... bonjour !

sur ceux bonne journée

**GihefBey** · 12/11/2008, 14h35

Bonjour,

Essaye en appliquant les mêmes padding haut et bas que ceux des <a> à la liste

Code :

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

1
2
3
4
5
6
 
#menu ul {
  list-style: none;
  margin: 0px;
padding: 4px 0px;
  }

Sur ce, bons tests.

-

**devyan** · 12/11/2008, 14h53

Salut,

En fixant "line-height" sur "#menu ul li a" ça devrait aller...

A+

**npolbos** · 12/11/2008, 17h24

j ai essayer ta proposition GihefBey et ca fonctionne, il ne faudra pas que j'oubli ce genre de chose à l'avenir.

merci.

depassement de bloc

CSS

Discussions similaires

Partager

Partager