Navagation bar help...

[vrufusx65v]

I was making my nav bar using sprites and CSS and when i got to a specific button it repeated the nav bar over again and i cant fix it... the first picture is a photo of what it should look like [just the top row, the other rows are for the sprite action], and the second picture is what it currently is... if you know CSS well then you can probably help out. heres also my css code for the tabs.

/* Tabs */

ul#tabs {
	margin-top: 30px;
	position: absolute;
	right: 0px;
	top: -60px;
}

ul#tabs li {
	background: url('../img/tabs-sprite.png') no-repeat;
	float: left;
	height: 35px;
	margin-right: 1px;
	width: 70px;
}

ul#tabs li a {
	display: block;
	height: 100%;
	text-indent: -9000px;
	width: 100%;
}

ul#tabs li#previous {
	background-position: 0px 0px;
	width:70px;
}

ul#tabs li#previous:hover {
	background-position: 0px -40px;
}

ul#tabs li#previous.current, ul#tabs li#previous:active {
	background-position: 0px -80px;
}

ul#tabs li#home {
	background-position: -70px 0px;
}

ul#tabs li#home:hover {
	background-position: -70px -40px;
}

ul#tabs li#home.current, ul#tabs li#home:active {
	background-position: -70px -80px;
}

ul#tabs li#videos {
	background-position: -140px 0px;
}

ul#tabs li#videos:hover {
	background-position: -140px -40px;
}

ul#tabs li#videos.current, ul#tabs li#videos:active {
	background-position: -140px -80px;
}

ul#tabs li#archives {
	background-position: -210px 0px;
}

ul#tabs li#archives:hover {
	background-position: -210px -40px;
}

ul#tabs li#archives.current, ul#tabs li#archives:active {
	background-position: -210px -80px;
}

ul#tabs li#forums {
	background-position: -280px 0px;
}

ul#tabs li#forums:hover {
	background-position: -280px -40px;
}

ul#tabs li#podcasts {
	background-position: -350px -0px;
}

ul#tabs li#podcasts:hover {
	background-position: -350px -40px;
}

ul#tabs li#podcasts.current, ul#tabs li#podcasts:active {
	background-position: -350px -80px;
}

ul#tabs li#downloads {
	background-position: -420px 0px;
}

ul#tabs li#downloads:hover {
	background-position: -420px -40px;
}

ul#tabs li#downloads.current, ul#tabs li#downloads:active {
	background-position: -420px -80px;
}

ul#tabs li#about {
	background-position: -490px 0px;
}

ul#tabs li#about:hover {
	background-position: -490px -40px;
}

ul#tabs li#about.current, ul#tabs li#about:active {
	background-position: -490px -80px;
}

ul#tabs li#contact {
	background-position: -560px 0px;
}

ul#tabs li#contact:hover {
	background-position: -560px -40px;
}

ul#tabs li#contact.current, ul#tabs li#contact:active {
	background-position: -560px -80px;
}

ul#tabs li#next {
	background-position: -630px 0px;
	width: 65px;
}

ul#tabs li#next:hover {
	background-position: -630px -40px;
}

ul#tabs li#next.current, ul#tabs li#next:active {
	background-position: -630px -80px;
}

much appreciated...

 

[misson]

The problem with the "Podcasts" link is a typo either in the ID attribute for the tab element or in the selector, preventing the "background-position" rule from applying. The posted CSS looks fine, so it's probably a typo in the HTML source.

As for Downloads link, it's wider than 70px in the image. Either change the image or add 8px to the width for li#downloads and 9px the background position for subsequent tabs.

Make sure the tabs contain <a> elements and you include text (either alt text or hidden using CSS) for accessibility purposes. For one thing, you want search engines to be able to handle the tabs, and search engines don't support JS or parse images for text.

 

[vrufusx65v]

Thanks a bunch, it did work, but i'm kinda confused on putting the <a> elements in, how do i get that hidden element in there?

this is what i have for the HTML side of things:

<div id="content">
			<!-- TABS -->
			<ul id="tabs">
				<li id="previous">
					<a href="#previous" title="Previous">&lt;</a>
				</li>
				<li id="home" class="current">
					<a href="http://www.cykstudios.net/index.html" title="Home">Home</a>
				</li>
				<li id="videos">
					<a href="http://www.cykstudios.net/videos.html" title="Videos">Videos</a>
				</li>
				<li id="archives">
					<a href="http://www.cykstudios.net/archives.html" title="Archives">Archives</a>
				</li>
				<li id="forums">
					<a href="http://www.cykstudios.com/forums" title="Forums">Forums</a>
				</li>
				<li id="podcasts">
					<a href="http://www.cykstudios.net/podcasts.html" title="Podcasts">Podcasts</a>
				</li>
				<li id="downloads">
					<a href="http://www.cykstudios.net/downloads.html" title="Downloads">Downloads</a>
				</li>
				<li id="about">
					<a href="http://www.cykstudios.net/aboutus.html" title="About">About</a>
				</li>
				<li id="contact">
					<a href="http://www.cykstudios.net/contactus.html" title="Contact">Contact</a>
				</li>
				<li id="next">
					<a href="#next" title="Next">&gt;</a>
				</li>
			</ul>

 

[misson]

That's basically it on the HTML side of things. Note that you can leave off the "http://www.cykstudios.net" in the URLs, since you're not linking offsite.

Google has info on using hidden text links for search engines. Hiding text with CSS is usually accomplished by moving the text offscreen to the left with a negative text-indent property or positioning and a negative left property.

Your particular graphic design doesn't even need to images for most of the links. You could easily use an image for just the previous and next links and use styling for the other links.

 

[vrufusx65v]

cool, now just one more problem that i ran into.

im making my other pages that will link to my nav bar. Right now im working on my Videos.php page and right now i cant get the sprite to work right. As you know i am using a sprite nav menu and i cant get the tabs to rotate. Like for my home page the home tab will be bold, signifying that this is the tab thats currently being viewed. but now that im on my videos page i cant get the videos tab to go bold via sprite picture rotation. how do i fix it so that my home tab button will not be selected for every page?

This is my tabs CSS code that enables the sprite function to work. I tried changing the position values around and i got my home tab to un-bold, but then it wont work properly and i still couldn't get my videos tab to go bold.

/* Tabs */

ul#tabs {
	margin-top: 30px;
	position: absolute;
	right: 0px;
	top: -60px;
}

ul#tabs li {
	background: url('../img/tabs-sprite.png') no-repeat;
	float: left;
	height: 35px;
	margin-right: 1px;
	width: 70px;
}

ul#tabs li a {
	display: block;
	height: 100%;
	text-indent: -9000px;
	width: 100%;
}

ul#tabs li#previous {
	background-position: 0px 0px;
	width:70px;
}

ul#tabs li#previous:hover {
	background-position: 0px -40px;
}

ul#tabs li#previous.current, ul#tabs li#previous:active {
	background-position: 0px -80px;
}

ul#tabs li#home {
	background-position: -70px 0px;
}

ul#tabs li#home:hover {
	background-position: -70px -40px;
}

ul#tabs li#home.current, ul#tabs li#home:active {
	background-position: -70px -80px;
}

ul#tabs li#videos {
	background-position: -140px 0px;
}

ul#tabs li#videos:hover {
	background-position: -140px -40px;
}

ul#tabs li#videos.current, ul#tabs li#videos:active {
	background-position: -140px -80px;
}

ul#tabs li#archives {
	background-position: -210px 0px;
}

ul#tabs li#archives:hover {
	background-position: -210px -40px;
}

ul#tabs li#archives.current, ul#tabs li#archives:active {
	background-position: -210px -80px;
}

ul#tabs li#forums {
	background-position: -280px 0px;
}

ul#tabs li#forums:hover {
	background-position: -280px -40px;
}

ul#tabs li#podcasts {
	background-position: -350px -0px;
}

ul#tabs li#podcasts:hover {
	background-position: -350px -40px;
}

ul#tabs li#podcasts.current, ul#tabs li#podcasts:active {
	background-position: -350px -80px;
}

ul#tabs li#downloads {
	width:77px;
	background-position: -420px 0px;
}

ul#tabs li#downloads:hover {
	width:77px;
	background-position: -420px -40px;
}

ul#tabs li#downloads.current, ul#tabs li#downloads:active {
	width:77px;
	background-position: -420px -80px;
}

ul#tabs li#about {
	background-position: -498px 0px;
}

ul#tabs li#about:hover {
	background-position: -498px -40px;
}

ul#tabs li#about.current, ul#tabs li#about:active {
	background-position: -498px -80px;
}

ul#tabs li#contact {
	background-position: -568px 0px;
}

ul#tabs li#contact:hover {
	background-position: -568px -40px;
}

ul#tabs li#contact.current, ul#tabs li#contact:active {
	background-position: -568px -80px;
}

ul#tabs li#next {
	background-position: -638px 0px;
	width: 65px;
}

ul#tabs li#next:hover {
	background-position: -638px -40px;
}

ul#tabs li#next.current, ul#tabs li#next:active {
	background-position: -638px -80px;
}

 

[misson]

Are you setting the "current" class on the menu item for the current page? What's the URL for the videos page?

Since all you're doing with the sprites is changing text attributes, again I recommend using text rather than images for the links.

 

[vrufusx65v]

Sorry i wasnt able to get a reply, i got sidetracked helping out others on our content. Turns out it was the current class, i just needed to cut it and paste it to each page.

also, and this is just for clarifying, not showing anger, i just used sprites cause i never learned or used sprites in the past and i just wanted to know how they function and what their abilities are...

 

[misson]

also, and this is just for clarifying, not showing anger, i just used sprites cause i never learned or used sprites in the past and i just wanted to know how they function and what their abilities are...

"Because I wanted to learn" is a perfectly acceptable reason for doing something. It's one of my two favorites (the other being "because I was curious", which amounts to the same thing).