right distance of background-position in CSS

StackOverflow https://stackoverflow.com/questions/1550222

  •  20-09-2019
  •  | 
  •  

Question

I worked on a CMS and I want to have diffrent Buttons for special editings. I created a small examplefile wich looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>
<style>
/* --- "breadcrumbs" --- */
ul.path         {margin:0;
                 padding:0;
                 padding-bottom:19px;
                 zoom:1;
                 overflow:hidden;}
ul.path li      {list-style-type:none;
                 list-style-position:outside;
                 height:28px;
                 overflow:hidden;
                 float:left;
                 margin-right:2px;
                 font-size:85%;
                 padding-left:10px;
                 line-height:19px;
                 background:url(hor.png) no-repeat left -90px;}
ul.path li.cur  {padding-left:10px;
                 background:url(hor.png) no-repeat left -60px;}
ul.path a       {padding:0 15px 0 0;
                 overflow:hidden;
                 float:left;
                 font-weight:normal;
                 height:26px;
                 padding-top:2px;
                 color:#fff;
                 text-decoration:none;
                 background:url(hor.png) no-repeat right -90px;}
ul.path li.cur a {color:#FFF;
                 font-weight:bold;
                 background:url(hor.png) no-repeat -180px -60px;}
</style>
</head>
<body>
<ul class="path">
    <li><a href="#">Webdevelopment</a></li>
    <li><a href="#">programming</a></li>
    <li><a href="#">database</a></li>
    <li><a href="#">modeling</a></li>
    <li class="cur"><a href="#">Dezign</a></li>
</ul>
</body>
</html>

I have an png Background image which looks like this Background images with tiffrent right corners http://img10.imageshack.us/img10/1849/hor.png The result looks like this: result http://img21.imageshack.us/img21/774/resultr.png The goal is to get a diffrent right corner, but my tries to set a negative distance dosen't work. Can somone give me an explanation? And much more interesting can somone give me an workaround, that fix the mistake in the class cur?

Was it helpful?

Solution

That's because you are setting a negative distance that gives you a piece in the middle of the first background. If you use a position like -250px you will get closer, but to get it exact you have to either set a fixed width on the link or use an image where the desired background is at the right edge.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top