Navigation menu background missing

StackOverflow https://stackoverflow.com/questions/21304315

Domanda

the problem is the following i made my menu-with the logo in the left side,I am almost sure the code works perfectly because when i run the code and click on the place where my navigation menu is supposed to be, it's there i mean everything is on its place and the menu is fixed....but the background images of the menu does not appear so here is my code

HTML:

</head>
<body>
    <div id="header">
        <ul>
            <li><a href="index.html" class="logo"></a></li>
            <li><a href="index.html" class="home"></a></li>
            <li><a href="Sugestology.html" class="sugestology"></a></li>
            <li><a href="TheCreator.html"  class="creator"></a></li>
            <li><a href="InBulgaria.html" class="inbulgaria"></a></li>
            <li><a href="Contacts.html" class="contacts" ></a></li>
        </ul>
    </div>

CSS:

#header {
    position: fixed;
    top: 0;
    height: 80 px;
    width:100%;
    z-index:500;
}
#header ul {
    padding-left: 0;
    height: 80px;
}
#header li {
    list-style: none;
    float: left;
    height: 80px;
    width: 16.6%;
}
#header li a {
    display: inline-block;
    width: 100%;
    height: 80px;
    background-size: cover; 
}
ul#header li a.logo {background: url("C:\Users\N\Desktop\Sugestology\nav_01.jpg") no-repeat 0 0}
ul#header li a.home {background: url("C:\Users\N\Desktop\Sugestology\nav_02.jpg") no-repeat 0 0}
ul#header li a.sugestology       {background:url("C:\Users\N\Desktop\Sugestology\nav_03.jpg") no-repeat 0 0} 
ul#header li a.creator {background: url("C:\Users\N\Desktop\Sugestology\nav_04.jpg") no-repeat 0 0}
ul#header li a.inbulgaria {background: url("C:\Users\N\Desktop\Sugestology\nav_05.jpg") no-repeat 0 0}
ul#header li a.contacts {background: url("C:\Users\N\Desktop\Sugestology\nav_06.jpg") no-repeat 0 0}

I've tried several ways to link the images,though they are in sam folder as the css file and html file ))

È stato utile?

Soluzione

Remove the absolute paths from your images. Instead, do this (assuming that everything is in the same folder, as per your question):

ul#header li a.logo {background: url("nav_01.jpg") no-repeat 0 0}
ul#header li a.home {background: url("nav_02.jpg") no-repeat 0 0}
ul#header li a.sugestology {background:url("nav_03.jpg") no-repeat 0 0} 
ul#header li a.creator {background: url("nav_04.jpg") no-repeat 0 0}
ul#header li a.inbulgaria {background: url("nav_05.jpg") no-repeat 0 0}
ul#header li a.contacts {background: url("nav_06.jpg") no-repeat 0 0}

I would also advise putting the images in a separate folder instead - helps to tidy things up!

Update:

You are also using ul#header in your CSS, but you do not have a UL with an id of "header". You only have "header" on the div, so you need to change your CSS to use a different ID on the UL. Alternatively, change your CSS as follows:

#header ul li a.logo {background: url("nav_01.jpg") no-repeat 0 0}
#header ul li a.home {background: url("nav_02.jpg") no-repeat 0 0}
#header ul li a.sugestology {background:url("nav_03.jpg") no-repeat 0 0} 
#header ul li a.creator {background: url("nav_04.jpg") no-repeat 0 0}
#header ul li a.inbulgaria {background: url("nav_05.jpg") no-repeat 0 0}
#header ul li a.contacts {background: url("nav_06.jpg") no-repeat 0 0}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top