Unordered list with a custom background

HTML & CSS
1

I would like a custom background on my css element - the Ul is aligned right, and I am not really sure how to get the dots to appear on the right…
Any suggestions?
It may be I’m not thinking straight.

2

As I suspected a good nights sleep and I was able to fix in 30 seconds.
Basically since my button image was complex (both the grey and the blue dots on 1 image) I have to be cautious on how I define the position. So now it’s something like this and works:

#nav ul li a:hover {
	color: #93979b ;
	background: url(imgs/menu.png) no-repeat;	
	background-position: bottom right;
	background-repeat: no-repeat;
}

#nav ul a:active {
	text-decoration: none;
	color: #1631b0;
	background-image: url(imgs/menu.png);
	background-position: top right;
	background-repeat: no-repeat;
}

Will make a active page class too -
with the blue color.

Thanks for your help guys.

As for editor, I really like Textmate and its what I use 99% of the time.

3

I see you are doggedly going for the typos in one day world record! :lol:

I missed this one before (in red–a missing semi-colon):

#nav li a {
	text-decoration: none;
	color: #93979b;
	padding-right: 15px;
	border-right: 5px[COLOR="Red"];[/COLOR]
	background: url(imgs/menu.png) no-repeat right center;	
}
4

An editor like PSPad with syntax highlighting will point out errors like those right away. :wink:
Well, misspelled properties anyway. I did not highlight the BG position error.

5 
      <div id="nav">
        <div id="logo"></div>
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">NON-PROFITS</a></li>
          <li><a href="">CLIENTS</a></li>
          <li><a href="">PROJECTS</a></li>
          <li><a href="">SERVICES</a></li>
          <li><a href="">TECHNOLOGIES</a></li>
          <li><a href="">CONTACT</a></li>
        </ul>
      </div>

Typo day - how very true. Oh well to bed for me soon. But still no go.

6

It’s Typo Day, I see!

#nav {
	background: url('imgs/menu.jpg');
	[COLOR="Red"]widht[/COLOR]: 470px;
	margin: 0;
	position: relative;
}

If that doesn’t help, post also your HTML, as that’s a critical factor here. :slight_smile:

7

Change that last line to

background: url(imgs/menu.png) no-repeat [COLOR="Red"]right center[/COLOR];

There should just be a gap betwixt right and center, not a slash. :wink:

8

Sorry typo - I will copy and past - the whole set
It then also doesn’t show up in the css inspector in Safari.
So It is puzzling to me.

#nav {
	background: url('imgs/menu.jpg');
	widht: 470px;
	margin: 0;
	position: relative;

}

#nav ul {
	margin: 0;
	padding-top: 5px;
	list-style: none;
	text-align: right;
	padding-right: 10px;
	line-height: 1.5;
	font-size: 1.5em;
}

#nav li a {
	text-decoration: none;
	color: #93979b;
	padding-right: 15px;
	border-right: 5px
	background: url(imgs/menu.png) no-repeat right center;	
}
9

Thanks for approving the post -
Basically I was going to put one on the active and one on the hover- But right now I just need to get them to show -
So on the a link I have this - But with right/center they don’t show up :
(The url is correct - i place a imgs dir inside my css folder)

#nav ul li a {
text-decoration: none;
color: #93979b;
padding-right: 15px;
background: url(imgs/menu.png) right/center;
…

10

Hi tspore, welcome to SitePoint! :slight_smile:

Essentially, what you can do here is apply right-padding to the LIs, and then place the image as a right-aligned background image.

I think we need more information on when and where you want these images, though. Is it on hover, or when a link is active, or…?