28220 sujets

CSS et mise en forme, CSS3

2 Menus l'un en dessous de l'autre

Kikou tout le monde Smiley lol

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 :

http://gssik.free.fr/sda/images/anneau.jpg

Mais pas moyen je n'y arrive pas :s

Comment faire?

a écrit :
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;
}


a écrit :
<!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 Smiley lol </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 Smiley lol
Modifié par Gssik (12 Apr 2005 - 15:17)
Peux tu préciser, c'est quoi exactement ta question?

Tu cherche à afficher une image?


<img src="../images/anneau.jpg" alt="L'anneau du pouvoir" />
Oui, je cherche à afficher une image, mais pas moyen :s

Elle s'affiche, mais derrière le menu :s, et je voudrais qu'elle soit en dessous du menu.
Même si je crée un autre DIV, je ne sais pas comment faire :s

Cela marche si j'ajoute l'image juste après le dernier </li> et avant le </ul> et avec des <br />.

Mais cela ne fait pas très propre :s

De plus, je viens de me rendre compte que même avec un clear: both; le pied de page remonte :s
Modifié par Gssik (12 Apr 2005 - 17:09)
Wé et alors ?
On est mal poli sur les forums d'aide maintenant ?
On doit servir une solution toute prête toute cuite dans le bec de ceux qui la demande ?
Prière de ne pas tenir compte de Morpher Smiley lol

C'est moi qui ait posé la question, répondez quand vous le pourrez Smiley cligne

J'ai une grande habitude des forums, et je comprends que vous avez du taf.

@++
Sujet clos
Aller à