28172 sujets

CSS et mise en forme, CSS3

Background Menu Horizontal (résolu)

Bonjour à tous,

J'essais de créer un menu à onglet en suivant les explications du site pompage ici.
J'ai compris le principe de la porte coulissante mais je n'arrive tout simplement pas à afficher mes images d'arrières plans.

Code HTML:

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <title>Accueil</title>
    </head>
    <body>
        <div id="global">

           <!-- Debut header -->
            <div id="header">
                <div id="header_left">
                </div>
                <div id="header_center">
                </div>
                <div id="header_right">
                </div>
            </div>
            <!-- Fin header -->
            <!-- Debut menu horiz -->
            <div id="menu_horiz">
                <ul>
                    <li><a href="">Accueil</a></li>
                    <li><a href="">Professionnels</a></li>
                    <li><a href="">Particuliers</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            <!-- Fin menu horiz -->

       </div>
    </body>
</html>


Code CSS

body {
    color:#000000;
    font-family: verdana, sans-serif;
    font-size: 69%;
}

div#global {
    width: 750px;
    height: 768px;
    margin: 0 auto ;
    background-color: #f0f0f0;
    border: 1px solid black;
}

div#header_left {
    width: 30%;
    height: 80px;
    background-color: #6699FF;
    float: left;
 }

 div#header_center {
    width: 40%;
    height: 80px;
    background-color: #6699FF;
    float: left;
 }

 div#header_right {
    width: 30%;
    height: 80px;
    background-color: #6699FF;
    /*background-image: url("img/norm_blue_right.gif");*/
    float: right;
 }

 /* Menu Horizontal */
div#menu_horiz {
   clear: both;
   width:100%;
   background: #a8a8a8;
   font-size:93%;
   line-height:normal;
   float: left;
   /*overflow: hidden;*/
    }

   div#menu_horiz ul {
       margin: 0px;
       padding: 0px;
       list-style: none;
   }

   div#menu_horiz ul li {
       float: left;
       background: url("img/norm_right.gif") no-repeat right top;
       margin: 0px;
       padding: 0px;
   }

   div#menu_horiz ul li a {
       display: block;
       background: url("img/norm_left.gif") no-repeat left top;
       padding: 5px 15px;
   }


Je travail sous linux et j'ai cru à un moment à un problème de droit sur les fichiers images mais ce n'est pas le cas, je peux les afficher avec la balise img.
J'espère qu'un oeil plus averti que moi trouvera une erreur ou une explication ...

Merci .
@ bientôt.

(réponse) Avec l'url absolue 
http://localhost/monsite/mon_image.gif
, ça passe ! (réponse)
Modifié par heretiix (12 Jun 2009 - 22:42)
Sujet clos
Aller à