border-bottom image

[BertaBiene]

Hallo und Guten Abend,

ich mach mir gerade eine (einfache) Navigation mit schwarzem Hintergrund.

Im Aktiven zustand habe ich border-bottom mit weissen HG,
nun will ich im normalen zustand ein leicht tranzparenten HG im gleichen borderbereich.

Das will ich mit einem 1x1 png machen...

wie kann ich border-bottom ein img zuweissen oder hat jemand eine idee auf die ich nicht komme?

Code: Alles auswählen

#navigation ul li {
   float:left;
      }

#navigation ul {
   background: #000;
      }

#navigation li a {
   color: #fff;
   font-size: 73.01%;
   text-transform:uppercase;
   letter-spacing: 0.1em;
   
   padding: 4px 10px 4px 10px;
   background: #000;
   
      }
      
#navigation ul li a:hover {
   border-bottom: solid 5px #fff;
      }

Code: Alles auswählen

<div id="navigation">
<ul>
<li><a href="#">navi 1</a></li>
<li><a href="#">navi 2</a></li>
</ul>
</div>

Danke...

[sejuma]

Einem border kannst du m.W. kein Hintergrundbild zuweisen.
Versuche es, indem du es #navigation a:link zuweist und entsprechend positionierst.

[Azra]

Vielleicht hilft es ja:
http://css-tricks.com/understanding-border-image/

[BertaBiene]

Danke euch beiden...

Ich habe es jetzt mit ein bisschen padding und backgound hinbekommen.