Navigation menu background missing

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

Question

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 ))

Was it helpful?

Solution

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}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top