un fond pour mon menu

4 août 2006 à 12:54:57

bonjour a tous,

je voudrais savir comment on fait pour mettre un fond au menu,je veut dire j'ai crées le menu mais je veut mettre un fond au menuvoila merci

anpf01fr

4 août 2006 à 12:58:16

ben soit tu peux mettre une image en fond:

#mon_menu
{
background-image: url("monimage.jpg");
}

ou une couleur:

#mon_menu
{
backgorund-color: #ffec00;
}

apres tu peux combiner les deux si par exemple tu veux mettre une petite image dans le coin haut a gauche et puis apres une couleur:

#mon_menu
{
background-image: url("monimage.jpg");
background-position: top left;
backgorund-color: #ffec00;
}

etc, avec le css t as plein de possibilités

vegnagun

4 août 2006 à 13:15:45

Je veut dire j'ai fais un menu mais j'ai mis un fond noir dans le body et moi je voudrais faire un fond pour le menu.

Maykeul

4 août 2006 à 13:18:47

Tu veut quoi comme fond une image ou une couleur ?

vegnagun

4 août 2006 à 13:30:19

une image

anpf01fr

4 août 2006 à 13:46:24

le mieux ca serait que tu nous montres le site pour qu'on trouve un truc adapté

vegnagun

4 août 2006 à 13:48:12

euh mon site n'est pas en ligne désolée

Anonyme

4 août 2006 à 14:02:07

peut-etre peux-tu faire un copier-coller dce ton code ?

la solution donné par anpf01fr est la meilleur

vegnagun

4 août 2006 à 14:42:04

bon je te donne un exemple tu a le design ghost dans le site du zero si oui il a mis un fond derriere le menu sinon prend le et regarde car je voudrais faire un fond commeça voila compris??

Anonyme

4 août 2006 à 15:13:18

je pense que tout le monde avait compris ce que tu voulais :lol:

mais maintenant faut voir comment t'as écrit ton menu (à toi).

si tu l'as écrit dans un div

<div id="menu">
<ul>
<li> <a href="#">Accueil</a> </li>
<li> <a href="#">blabla</a> </li>
<li> <a href="#">blabla</a> </li>
<li> <a href="#">Liens</a> </li>
</ul>
</div>

alors tu dois utiliser la méthode de anpf01fr

#menu
{
background-image: url("monimage.jpg");
background-position: top;
backgorund-color: #ffec00;
}

et sinon, le mieu encore est de regarder les sources (du trheme ghost par exemple) et de voir comment c'est fait

vegnagun

4 août 2006 à 15:29:02

okbon voici mon code

<div id="menu">
<div class="element_menu">
<img src="images/menu.jpg" alt="menu"/>

<ul>
<li><a href="index.php">Accueil</a></li>
<del><li><a href="forum.html">Forum</a></li></del>
<li><a href="listecontact.html">Contact</a></li>
<del><li><a href="reglesinscription.php">Inscriptions</a></li></del>
   <li><a href="livredor.php">Livre D'or</a></li>
</ul>

</div>
<div class="element_menu">
<img src="images/finalfantasy.jpg" alt="finalfantasy"/>
<ul>
<li><a href="ff1.php">Final Fantasy I</a></li>
<li><a href="ff4.php">Final Fantasy IV</a></li>
<li><a href="ff6.php">Final Fantasy VI</a></li>
   <li><a href="ff7.php">Final Fantasy VII</a></li>
   <li><a href="ff8.php">Final Fantasy VIII</a></li>
   <li><a href="ff9.php">Final Fantasy IX</a></li>
   <li><a href="ff10.php">Final Fantasy X</a></li>
   <li><a href="ff10-2.php">Final Fantasy X-2</a></li>
   <li><a href="KH.php">Kingdom Hearts</a></li>
</ul>
</div>
<div class="element_menu">
<img src="images/film.jpg" alt="film"/>
<ul>
<del><li><a href="adventchildren.php">Final Fantasy VII:AC</a></li></del>
<del><li><a href="creature.php">Les creatures de l'esprit</a></li></del>
   </ul>
</div>
<div class="element_menu">
<img src="images/download.jpg" alt="download"/>
<ul>
<li><a href="images.php">Images</a></li>
<li><a href="gifs.php">Gif animés</a></li>

</ul>

   <div class="element_menu">
<img src="images/livred'or.jpg" alt="livre d'or"/>
<ul>


   <?php
mysql_connect("localhost", "root", "");
mysql_select_db("livre d'or");
   $requete = mysql_query("SELECT COUNT(*) AS id FROM livre d'or")or die (mysql_error());
   while($données = mysql_fetch_array($requete))
   {$max = $données['id'];}
   mt_srand((float) microtime()*1000000);
   $aleatoire = mt_rand(1, $maw);
   $requete2 = mysql_query("SELECT * FROM livre d'or WHERE id='".$aleatoire."'") or die(mysql_error());
   ?>
<li><a href="livredor.php">Signez le livre!</a></li>
</ul>
   </div>
</div>
</div>
</div>

et maintenant le CSS

#menu .element_menu {
background-color: #070707;
background-image: url("images/fondmenu.jpg");
width: 150px;
margin-top: 22px;
border: 2px solid black;
}