Right angle border on list items

HTML & CSS
1

Okay so i want a diagonal border to the right of each item on my list. I created a list style image for this and am wondering if its possible to do this using css. I’ve looked and haven’t found anything for this. So, I’m trying to get this accomplished using a list-style-image.

I know I still need to align it but I can’t even get it to appear.

CSS

#MainNav ul{
list-style-type:none;
display:inline;

}

#MainNav ul li{
color:#999999;
display:inline;
font-size:16px;
font-weight:100;
margin-right:25px;
line-height:100%;
list-style-image:url(IMAGES/slantedLine.png);
list-style-position:outside;

}

#MainNav ul li a{
text-decoration:none;
color:#999999;
display:inline;
padding:15px 15px;

}

HTML

<div id=“MainNav”>

<ul>
<li><a href=“Tools.html” title=“Tools” target=“_self”>Tools</a></li>
<li><a href=“Tools.html” title=“Tools” target=“_self”>About</a></li>
<li><a href=“Tools.html” title=“Tools” target=“_self”>Pricing</a></li>
<li><a href=“Tools.html” title=“Tools” target=“_self”>Contact us</a></li>
</ul>

</div>

2

Could you post a screen shot of what you want? Or post the images you’ve cited there. I can’t picture what you are describing, but it sounds like something that can be done with CSS.

3

Okay so for some reason the site wouldn’t let me upload photos so I posted them on flickr http://www.flickr.com/photos/88648275@N03/

Also, I’m trying a different method now

#MainNav li{
color:#999999;
display:inline;
font-size:16px;
font-weight:100;
margin-right:25px;
background-image: url(IMAGES/slantedLine.png);
background-repeat: no-repeat;
background-position:0 0px;

}

4

Ah, OK, that gives a better idea of what you want. The best way to do that would be to use left padding on the LIs and place the angled line as a background image.

Off Topic:

To upload images, click Go Advanced (bottom right of a post) and then click the Manage Attachments button below the post entry field.)

5

Oh and I just posted another image on flickstr showing m upload issue haha http://www.flickr.com/photos/88648275@N03/

6

That’s not an image of what I advised you try in post #4.

7

You could do it with CSS3 ( which of course means you would need to use ALL appropriate vendor prefixes and not mind lack of support for some browsers)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
				.nav {  padding:0; margin:0; background: #eee; overflow:  hidden}
				.nav li { float:left; margin:0; list-style:none; border-right:  2px groove #fff;-webkit-transform: skew(15deg,0);   position: relative}
				.nav a {display:block; padding:0; text-decoration:none; padding: .5em 1em ;-webkit-transform: skew(-15deg,0); background:}
				.nav li:hover { background: red}
				.nav li:first-child:hover:before { content:""; background: red; top:0; bottom:0; width:50%; position: absolute;-webkit-transform: skew(-15deg,0)}


		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">item</a></li>
			<li><a href="#">item</a></li>
			<li><a href="#">item</a></li>
			<li><a href="#">item longer sample item</a></li>
			<li><a href="#">item</a></li>
		</ul>
		
	 </body>
</html>

The above code, for example, gracefully degrades to vertical lines for non supporting browsers. Hope that helps.

8

Thanks for your answer Dresden but I’m using the image option. I"m having issues with it, but will come back to this a little later and soon can post a link to view the site live.