Discussion :

[pat734]

Bonjour.
Je suis en train de mettre en place un menu et je n'arrive pas à agrandir les cases des menus.
Voici la photo ou l'on voit "Historiques du mobilier" collé à "Contacts".

[img=http://img293.imageshack.us/img293/3840/image2wk2.th.jpg]

Pourriez vous me dire quel ligne de code rajouter ou bien celle à modifier ?

Merci par avance pour votre aide.

Voici mon code css :

body {
background-color: #000000;
margin: 0;
text-align: center;
}
#site {
margin-right: auto;
margin-left: auto;
width: 760px;
text-align: left;
}
#header {
position: relative;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 175px;
width: 820px;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #000000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width: 240px;
}
#menu {
position: absolute;
top: 173px;
left: 2px;
margin-left: auto;
margin-right: auto;
z-index:100;
width: 1231px;
height: auto;
background-image: url(images/bg-menu.JPG);
background-repeat: no-repeat;
background-position: left top;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#menu dl {
float: left;
width: 150px;
line-height: 25px;
vertical-align: middle;
}
#menu dt {
color: #FFFFFF;
cursor: pointer;
text-align: left;
font-weight: normal;
margin-left:0px;
}
#menu dd {
display: none;
background-color: #44596A;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #740808;
border-bottom-color: #740808;
border-left-color: #740808;
}
#menu li {
text-align: left;
text-indent:5px;
background: black;
}
#menu li a, #menu dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:focus {
background-color:#384B59;
}
#menu dt a:hover {
text-decoration: underline;
}

[E.Fahd]

Salam,

- Il aurait peut-être fallu rajouter le code XHTML, ou au moins indiquer à quoi correspondent les identifiants dans ton CSS

- De prime à bord je dirai que tu devrais mettre les options de ton menu (LI) en inline-block (display), mais ce serait sûrement mieux avec l'XHTML sous les yeux pour connaître la structure de ta page. Là je vois des listes de définition (DL) avec des listes non-ordonnées (UL), alors que sur la capture il n'y a qu'un seul menu. Enfin c'est un peu ambigü.