Je débute en HTML et CSS et je dois dire que l'agencement de mon menu et ma banniere (en tete) me pose de gros soucis.
Ce que je voudrais faire :
-1/ avoir 8 menus de 100px de large, parce que la page fait 800px de large ==> il y a une marge a droite
-2/ avoir tout en haut le menu puis au dessous, collé au menu, la banniere ==> la banniere et les menus sont au meme niveau.
-3/ centrer la banniere qui fait aussi 800px de large, par 130 de haut ==> elle est decalée, pire que les menus.
Voici mon CSS :
body
{
width: 800px;
margin: auto;
margin-top: 0px;
margin-bottom: 10px;
background-color: #660000;
}
p
{
width: 800px;
text-indent: 10px;
font-family: georgia, tahoma, arial, verdana, serif;
font-size: 90%;
text-align: justify;
}
#menu
body {
width: 800px;
margin: auto;
padding: 0px;
background: #990000;
font: 50% verdana, arial, serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
margin: auto;
width: 100px;
height: 40px;
}
#menu dt {
cursor: pointer;
text-align: center;
color: #000000;
background: #990000;
border-left: 2px solid black;
border-right: 2px solid black;
margin: 1px;
height: 40px;
}
#menu dd {
display: none;
border: 1px solid black;
}
#menu li {
text-align: center;
font: 65% verdana, arial, sans-serif;
color: #000000;
background: #990000;
height: 25px;
}
#menu li a{
color: #000000;
background: #990000;
text-decoration: none;
display: block;
height: 25px;
border: 0;
}
#menu dt a {
color: #000000;
background: #990000;
text-decoration: none;
display: block;
height: 40px;
border: 0 none;
}
#menu li a:hover, #menu li a:focus{
background: #000000;
color: #990000;
font-style: italic;
}
#menu dt a:hover, #menu dt a:focus {
background: #000000;
color: #990000;
font-style: italic;
}
#banniere
{
margin: 40px;
width: 100%;
height: 130px;
background-image: url("banniere.jpg");
background-repeat: no-repeat;
}
#corps
{
width: 100%;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px;
background-color: #333333;
color: #FFFFFF;
}
#corps h3
{
font-weight: bold;
text-align: right;
font-style: italic;
}
#corps h4
{font-size: 100%;
font-weight: normal;
text-align: left;
font-style: normal;
}
Le résultat :
NB: La banniere est bordée de blanc, mais la n'est pas le probleme, il s'agit d'une erreur de ma part avec le logiciel de dessin.
NB: J'ai "masqué" les textes parce que je suis timide
si une bonne ame pouvait resoudre ce sac de noeud, je lui en serais tres reconnaissante!!
merci a tous!
