Reputation: 1
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
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