2 menus l'un en dessous de lautre - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  2 menus l'un en dessous de lautre

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: 2 menus l'un en dessous de lautre (Lu 885 fois)

2 menus l'un en dessous de lautre
« sur: le 14-04-2005 a 13:33:49 »

morpher
Membre récent

Hors-Ligne

Messages: 2

Je suis un lama!

Kikou tout le monde

Alors voilà, j'ai créé grace à ce site un menu que voici :

http://gssik.free.fr/sda/

Le problème, c'est que je souhaite ajouter une image en dessous de ce menu :

Mais pas moyen je n'y arrive pas :s

Comment faire?

Code:
body {
font-size: 11px;
color: #FEE39B;
font-family: Verdana, Arial, helvetica, sans-serif;
text-align: center;
margin: 0px;
}

#conteneur {
background-color: #A0732D;
width: 100%;
padding: 0;
margin: auto;
}

#banner {
background: url(images/ban.jpg);
background-repeat: no-repeat;
background-position: left;
width: 100%;
height: 199px;
}

#menu_haut {
background: url(images/elfique.jpg);
background-position: left;
width: 100%;
border-bottom: 3px solid #8A5707;
border-top: 3px solid #8A5707;
height: 40px;
}

#centre {
float: right;
text-align: justify;
padding: 10px 20px 10px 10px;
margin-top: 20px;
border: 2px solid #8A5707;
text-align: left;
background-color: #A0732D;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 220px;
}

#myblock {
float: left;
margin-top: 40px;
}

#pied_de_page {
clear: both;
background: url(images/elfique3.jpg);
background-repeat: no-repeat;
background-position: right;
width: 100%;
border-bottom: 3px solid #8A5707;
border-top: 3px solid #8A5707;
height: 40px;
}

.logo {
float: right;
}

#pied_de_page a {
font-size: 10px;
font-weight: bold;
color: #186E00;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}

#pied_de_page a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #38FA03;
text-decoration: underline;
}

.center{
text-align:center;
margin-top: 0px;
}

body {
background-color: #A0732D;
}
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionnement pour IE5 et IE5.5 */
background: transparent url(images/menu.jpg) top left no-repeat; /* arrière-plan général du menu */
width: 200px;
padding-top: 57px;
padding-bottom: 45px;
text-align: center;
}
li {display: inline;} /* correction pour IE5 et IE5.5 */

li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 200px;
color: #660000;
font-size: 17px;
font-family: georgia, serif;
text-decoration: none;
line-height: 25px; /* hauteur de ligne pour éviter les paddings */
}
li a:hover {
color: #fff;
background: transparent url(images/menu2.jpg) top left no-repeat;
}
a#menu1:hover { /* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -57px;
}
a#menu2:hover {
background-position: 0% -87px;
}
a#menu3:hover {
background-position: 0% -117px;
}
a#menu4:hover {
background-position: 0% -147px;
}
a#menu5:hover {
background-position: 0% -177px;
}
a#menu6:hover {
background-position: 0% -207px;
}
a#menu7:hover {
background-position: 0% -237px;
}
a#menu8:hover {
background-position: 0% -267px;
}
a#menu9:hover {
background-position: 0% -297px;
}
a#menu10:hover {
background-position: 0% -327px;
}

Code:
<!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" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" href="styles2.css" type='text/css'/>
<title>Zone Libre </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META lang=fr content=création de sites internet,sites,site,manga,mangas,css,,styles,,php,xhtml,gratuit
name=keywords>
<link rel="stylesheet" href="styles.css" type='text/css'/>

</head>
<body>
<div id="conteneur">
<div id="banner"></div>
<div id="menu_haut"></div>
<div id="myblock">
<ul>
<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>
<li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
<li><a id="menu7" title="menu7" accesskey="7" href="#">Menu 7</a></li>
<li><a id="menu8" title="menu8" accesskey="8" href="#">Menu 8</a></li>
<li><a id="menu9" title="menu9" accesskey="9" href="#">Menu 9</a></li>
<li><a id="menu10" title="menu10" accesskey="10" href="#">Menu 10</a></li>
</ul>
</div>
<div id="centre">Ici votre texte...
</div>
<div id="pied_de_page"></div>
</div>
</body>
</html>

Merci d'avance si vous pouvez maider

Rapporter au modérateur

Re:2 menus l'un en dessous de lautre
« Répondre #1 sur: le 14-04-2005 a 14:08:10 »

MFred
Habitué

Hors-Ligne

Sexe: Male

Messages: 340

Gnih ?

Code:
#myblock {
float: left;
margin-top: 40px;
background-image: url(images/tonimage.png);
background-repeat: no-repeat;
background-position: bottom left;
}

Je suis pas sur d'avoir bien compris ta question, ca marche avec ca ?