CSS ul help needed!

Hi all,

I’m having trouble formatting the menu on the site i’m building.

I’m trying to get a layout that has a menu like this:
http://samcampsall.chrisfulton.co.uk/JoeSingh/JoeSinghDivsTemplate.html

but I’ve done that using img tags to add the bullets and adding spaces in html. I want to do this in CSS but struggling!

I’ve managed to get a horizontal list but this seems to break the layout and I can’t get the ‘bullet’ image to display either :confused:
It looks like this:
http://samcampsall.chrisfulton.co.uk/JoeSingh/JoeSinghDivsTemplatebroken.html

Here’s the present code after trying all sorts of combinations:

CSS


#menubar{
	height:30px;
	width:775px;
	background-color:#685B3E;
	font-family:TallDarkAndHandsomeCondensed;
	font-size:30px;
	text-align:center;
	letter-spacing:2px;
	color:#FDF7C4;
}
#menubar ul {
  list-style-image:url('Bullet.png'); 
}
#menu li {
	display:inline;
}

HTML


<div id="wrapper">
	<div>
		<img class="banner" src="header.png"/>
	</div>
	<div id="menubar">
		<ul id="menu">
			<li>Portraits</li>
			<li>Weddings</li>
			<li>Portfolio</li>
			<li>Contact</li>
			<li></li>
		</ul>
	</div> 

I’m aware that some of the CSS classes may be a bit wacky - everything for me is trial and error as it’s all new, so that may explain any idiosyncracies.

Any tips on the UL and why the format is breaking would be great :slight_smile:

Don’t use list style image, each browser places it different vertical height and not as pixel perfect as one would hope :slight_smile:

Set background iamge on the <li>
#menu li{background:url(‘imageblahblah.jpg’);}

If the image doesn’t appear make sure you are calling it correctly. From what you have, the image should be in the same folder as the CSS file (dunno whether you are embedding that CSS in the HTML file or from a seperate file). :slight_smile:

Thanks for the tip Ryan, but that syntax just tiled the image all over my list! I’m going to stick with the using just images for the time being, as I can’t get it to work as a UL.

Thanks for the help though :slight_smile:

Add in the bold then to make it not repeat.

#menu li{background:url(‘imageblahblah.jpg’) no-repeat;}