Bonjour à tous,
Voila j'ai suivi le tuto pour créer un menu déroulant, j'ai essayé de l'adapter pour avoir le même résultat que dans l'un des exemples où on voyait un menu horizontale et les éléments du sous menus qui apparaissent sur une seule ligne.
C'est ce que je souhaite avoir également.
J'ai essayé de modifier le valeur de display mais malgré le fait que je n'ai pas placé les éléments du sous menu dans des balises <ul><li></li></ul>, ils apparaissent toujours en colonne.
Quelqu'un pourait-il m'aider ?
mon code CSS:
Voila j'ai suivi le tuto pour créer un menu déroulant, j'ai essayé de l'adapter pour avoir le même résultat que dans l'un des exemples où on voyait un menu horizontale et les éléments du sous menus qui apparaissent sur une seule ligne.
C'est ce que je souhaite avoir également.
J'ai essayé de modifier le valeur de display mais malgré le fait que je n'ai pas placé les éléments du sous menu dans des balises <ul><li></li></ul>, ils apparaissent toujours en colonne.
Quelqu'un pourait-il m'aider ?
mon code CSS:
html {
padding: 20px 0 20px 0;
text-align: center;
color: white;
background-image: url("pictures/background.jpg");
background-repeat: repeat-x;
background-color: black;
}
body {
width: 1000px;
text-align: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
margin: auto;
}
#header {
width: 1000px;
height: 119px;
background-color: transparent;
background-image: url("pictures/header.gif");
background-repeat: no-repeat;
}
#logo {
width: 985px;
height: 119px;
background-color: transparent;
background-image: url("pictures/logo.gif");
background-repeat: no-repeat;
}
#menu {
width: 1000px;
height: 30px;
text-align: center;
font-weight: bold;
line-height: 30px;
letter-spacing: 0.1em;
word-spacing: 0.2em;
background-image: url("pictures/bg.jpg");
background-repeat: repeat-y;
z-index: 100;
}
dl, dt, dd {
margin: 0;
padding: 0;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: none;
margin: 1px;
}
#menu dd {
display: none;
border: none;
}
#menu dd a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: inline;
height: 100%;
border: 0 none;
}
#menu dd a:hover, #menu dd a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#menu dd a:link, #menu dd a:visited, #menu dt a:link, #menu dt a:visited {
color: white;
background-color: black;
text-decoration: none;
/* top right bottom left */
padding: 0 5px 0 5px;
margin: 0 5px 0 5px;
border-bottom: 1px solid #313031;
}
#menu dd a:active, #menu dd a:hover, #menu dt a:active, #menu dt a:hover {
color: white;
background-color: #1A1A1A;
border-top: 1px solid #313031;
border-bottom: 2px solid #0099FF;
}
#corps {
width: 980px;
background-image: url("pictures/bg.jpg");
background-repeat: repeat-y;
/* top right bottom left */
padding: 0 10px 0 10px;
overflow: auto;
}
#footer {
width: 1000px;
height: 33px;
background-image: url("pictures/footer.jpg");
background-repeat: no-repeat;
}
.blocgraph{
width: 970px;
height: 500px;
border: thick blue groove;
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
}
.graph{
width: 470px;
height: 400px;
border: thick blue groove;
text-align:center;
margin: 3px;
}
.graphSus{
width: 470px;
height: 400px;
border: thick blue groove;
float: right;
margin: 3px;
}
.bloc {
width: 200px;
background-image: url("pictures/bloc-bg.jpg");
background-repeat: repeat-y;
font-size: 11px;
/* top right bottom left */
margin: 0 0 0px 10px;
}
.bloc h3 {
width: 200px;
height: 28px;
background-image: url("pictures/bloc-titre.jpg");
background-repeat: no-repeat;
display: block;
margin: 0;
font-size: 14px;
font-weight: bold;
line-height: 28px;
letter-spacing: 0.1em;
}
.bloc .titre {
height: 28px;
background-image: url("pictures/bloc-titre-bg.jpg");
background-repeat: repeat-x;
margin-left: 20px;
/* top right bottom left */
padding: 0 5px 0 5px;
color: #0099FF;
background-color: black;
}
.bloc .foot {
width: 200px;
height: 25px;
background-image: url("pictures/bloc-foot.jpg");
background-repeat: no-repeat;
display: block;
}
.bloc p {
/* top right bottom left */
margin: 0 10px 0 10px;
}
h1 {
font-size: 17px;
font-weight: bold;
text-indent: 5px;
color: #FFED00;
background-color: black;
/* top right bottom left */
margin: 10px 0 0 0;
border-left: 3px solid #0099FF;
}
h2 {
font-size: 15px;
font-weight: bold;
color: white;
background-color: black;
margin: 0;
}
hr {
color: #7E7E7E;
background-color: black;
border-left: 1px solid #010101;
border-right: 1px solid #010101;
border-top: 1px solid #010101;
border-bottom: 1px solid #7E7E7E;
/* top right bottom left */
margin: 10px 0 0 0;
}
.center {
text-align: center;
}
img {
border: none;
}
a:link, a:visited {
color: #0099FF;
background-color: black;
text-decoration: none;
}
a:active, a:hover {
color: white;
background-color: #1A1A1A;
text-decoration: none;
}