Distancia correcta de la posición de fondo en CSS

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

  •  20-09-2019
  •  | 
  •  

Pregunta

Trabajé en un CMS y quiero tener diferentes botones para ediciones especiales. Creé un pequeño ejemplo de ejemplo que se ve así:

<!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>

Tengo una imagen de fondo PNG que se ve asíImágenes de fondo con esquinas derechas de Tiffrent http://img10.imageshack.us/img10/1849/hor.pngEl resultado se ve así:Resultado http://img21.imageshack.us/img21/774/resultr.pngEl objetivo es obtener una esquina derecha diferente, pero mis intentos para establecer una distancia negativa no funcionan. ¿Puede alguien darme una explicación? ¿Y mucho más interesante puede darme una solución alternativa, que corone el error en la clase CUR?

¿Fue útil?

Solución

Esto se debe a que está estableciendo una distancia negativa que le brinda una pieza en el medio del primer fondo. Si usa una posición como -250px, se acercará, pero para obtener exacto, debe establecer un ancho fijo en el enlace o usar una imagen donde el fondo deseado esté en el borde derecho.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top