Rechtsentfernung der Hintergrundposition in CSS

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

  •  20-09-2019
  •  | 
  •  

Frage

Ich habe an einem CMS gearbeitet und möchte unterschiedliche Schaltflächen für besondere Beeitungen haben. Ich habe ein kleines Beispiel dafür erstellt, das so aussieht:

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

Ich habe ein PNG -Hintergrundbild, das so aussiehtHintergrundbilder mit tiffrent rechten Ecken http://img10.imageshack.us/img10/1849/hor.pngDas Ergebnis sieht so aus:Ergebnis http://img21.imageshack.us/img21/774/resultr.pngDas Ziel ist es, eine unterschiedliche rechte Ecke zu bekommen, aber meine Versuche, einen negativen Abstand nicht zu setzen, funktionieren nicht. Kann mir jemand eine Erklärung geben? Und viel interessanter kann mir jemand eine Problemumgehung geben, die den Fehler im Klassen -CUR festlegt?

War es hilfreich?

Lösung

Das liegt daran, dass Sie eine negative Entfernung festlegen, die Ihnen ein Stück in der Mitte des ersten Hintergrunds gibt. Wenn Sie eine Position wie -250px verwenden, kommen Sie näher, aber um genau zu erhalten, müssen Sie entweder eine feste Breite auf dem Link einstellen oder ein Bild verwenden, in dem sich der gewünschte Hintergrund am rechten Rand befindet.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top