Putting individual backgrounds in unordered lists

Get Started
1

hi,

I’ve got a navigation bar that I want to use a custom font on. So I figure that replacing text with an image is the best way to do this - but I’m not quite sure how.

I’ve struggled to position the ul as it is - i know that isn’t the way to do it, but i’ve put up with it because its working.

Any help would be massively appreciated!


<div id="coda-nav-1" class="coda-nav">
       	<ul>
           	<li class="tab1"><a href="#1">Panel 1</a></li>
               <li class="tab2"><a href="#2">Panel 2</a></li>
               <li class="tab3"><a href="#3">Panel 3</a></li>
               <li class="tab4"><a href="#4">Panel 4</a></li>
         </ul>
       </div>



.coda-nav ul { 
		clear: both; 
		display: block; 
		margin: auto; 
		overflow: hidden;
		position:absolute;
		top:90px;
		left:255px;
		
		
		}
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { 
		color: #fff; 
		display: block; 
		float: left; 
		margin-right: 50px; 
		padding: 3px 6px; 
		text-decoration: none;
		
	}

Thanks

2

Hi J3ff3,

Here are a few tips to get your nav bar working.

li.tab1 { background:"xyz.jpg" }

should be

li.tab1 { background:url(xyz.jpg) }

Next, you need to float your list items instead of styling them display:inline;

So

.coda-nav ul li { display: inline }

should be

.coda-nav ul li { float:left }

Making these changes will make your navigation bar “work” but there’s still a lot more to do, like removing the list-style’s etc. depending on what you are trying to achieve.

I’m seeing your code out of context but I think you’ll want to change your markup and styles to avoid issues.

Let me know if you need more assistance.

3

writing

li.tab1 { background:“xyz.jpg” }

doesn’t seem to work