CODEWITHSUNDEEP
cssimageresizerollover
user2212573
user2212573

Reputation: 1

Trying to make a horizontal navigation bar, but it's being tricky

I am trying to create a horizontal navbar for my site, right under the banner. I want my navbar made from of an image I made in photoshop. No matter what I do, I can't get it to work. I'm tried to make it with rollover links as well.

Can somebody tell me what I am doing wrong? This code is part of my master.dwt file. It's located in a folder called "templates" in my root directory.

Thanks!

Here is the CSS:

#navigation {
    width: 800px;
    height: 36px;
    background-color: transparent;
    margin-left:auto;
    margin-right:auto;
}
#navbar {
    list-style: none;
    height: 36px;
}
#navbar li {
    float: left; }
#navbar a {
display:block;
background:url(../nav bar2.png);
width:200px;
text-indent:-9000px;
}
#navbar a.link1:hover {background-position:0px -36px;}
#navbar a.link2 {background-position:-200px 0px;}
#navbar a.link2:hover {background-position:-200px -36px;}
#navbar a.link3 {background-position:-400px 0px;}
#navbar a.link3:hover{background-position:-400px -36px;}
#navbar a.link4 {background-position:-600px 0px;}
#navber a.link4:hover {background-position:-600px -36px;}

Here is the HTML:

<div id="navigation">
<ul id="navbar">
<li><a href="default.html" class="link1">home</a></li>
<li><a href="about.html" class="link2">about</a></li>
<li><a href="portfolio.html" class="link3">portfolio</a></li>
<li><a href="contact.html" class="link4">contact</a></li>
</ul>
</div>

Heres the photo: https://i.sstatic.net/uEdO8.png

Upvotes: 0

Views: 435

Answers (1)

Matt Coughlin
Matt Coughlin

Reputation: 18906

Main issues

(1) If the url() path for an image contains a blank space, you'll need to put the entire path in quotes:

background:url("../nav bar2.png");

With that being said, it's not a good idea for website files to have blank spaces in the file names. Replacing the blank space with a hyphen, or an underscore, or simply getting rid of the blank space would be safer.

(2) There's a typo in one of the CSS selectors:

#navber a.link4:hover    /* Wrong */
#navbar a.link4:hover    /* Right */

Minor issues

(1) If you're not doing so already (perhaps with a reset.css), remove the default spacing in the ul tag; otherwise, the 4 menu items (200px each) won't fit within the 800px container.

#navbar {
    padding-left: 0;
    margin-left: 0;
}

Upvotes: 1

Related Questions