SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    right angle border on list items

    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-positionutside;

    }





    #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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and I just posted another image on flickstr showing m upload issue haha http://www.flickr.com/photos/88648275@N03/

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Oh and I just posted another image on flickstr showing m upload issue haha http://www.flickr.com/photos/88648275@N03/
    That's not an image of what I advised you try in post #4.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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)

    Code:
    <!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. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •