Border-Image, Navigation

[marci]

Guten Morgen :)

Ich habe eine "normale" Navigation und möchte nun unter den aktiven Menüpunkt ein bild anzeigen. Dies soll mittig unter dem Menüpunkt passieren. Mit Border-Image habe ich nun folgendes:

border-width: 0px 11px 6px;  
	-moz-border-image: url(../images/active_border.png) 0 11 6 round;  
	-webkit-border-image: url(../images/active_border.png) 0 11 6 round;  
	-o-border-image: url(../images/active_border.png) 0 11 6 round;  
	border-image: url(../images/active_border.png) 0 11 6 round;

Jetzt ist das Bild aber einmal unten links am rand und einmal unten rechts. Ich möchte es zentriert unter das Bild haben. Wie kriege ich das hin? Danke schonmal :))

[Der Osterhase]

border-width: 0px 11px 6px;

-moz-border-image: url(../images/active_border.png) 0 11 6 round;
-webkit-border-image: url(../images/active_border.png) 0 11 6 round;
-o-border-image: url(../images/active_border.png) 0 11 6 round;
border-image: url(../images/active_border.png) 0 11 6 round;

>   
> Jetzt ist das Bild aber einmal unten links am rand und einmal unten rechts. Ich möchte es zentriert unter das Bild haben. Wie kriege ich das hin?  
  
Ganz grundsätzlich: Das Rahmenbild wird in neun Kästchen aufgeteilt.  
  
 +    +    +    +  
      C    D  
      |    |  
 +-A--+----+----+  
      |    |  
      |    |  
 +-B--+----+----+  
      |    |  
      |    |  
 +    +    +    +  
  
Die bei border-image bzw. border-image-width angebenen Werte bestimmen die Position der Trennlinien. Bei drei Werten, in deinem Fall 0, 11 und 6, befindet sich Linie A, oben horizontal, bei 0 Pixeln von oben. Die beiden vertikalen Linien C und D jeweils 11 Pixel von links bzw. rechts. Die Linie B, unten horizontal, bei 6 Pixeln von unten.  
  
Diese neun Kästchen enthalten die Grafiken für den jeweiligen Bereich des Rahmens. Das Kästchen oben links ist also die obere linke Ecke, das Kästchen rechts mittig ist der rechte Rahmenabschnitt.  
  
Enthält deine Grafik nur den Rahmenabschnitt unten mittig, musst du die Trennlinien entsprechend positionieren. A und B müssen am oberen Rand sein, C am linken, D am rechten Rand. Dementsprechend: 0% 0% 100%. A 0% von oben. C 0% von links, D 0% von rechts. B 100% von unten gemessen.  
  
Auf diese Weise wird nur der untere, mittlere Rahmenabschnitt mit der Grafik gefüllt, denn alle anderen Kästchen sind ja 0% bzw. 0 Pixel groß.  
  
  
An diesem Punkt hast du jetzt allerdings möglicherweise das nächste Problem.  
  

> Ich möchte es zentriert unter das Bild haben.  
  
Zentriert gibt es für Rahmengrafiken nicht. Die Grafik kann gestreckt (stretch) und sie kann auf drei Arten wiederholt werden (repeat, round, space).  
Du kannst jedoch nicht beispielsweise einen einzelnen Punkt genau in die Mitte setzen. Der Punkt wird entweder zur Ellipse gestreckt (stretch) oder auf die ein oder andere Art endlos wiederholt.  
  
Die einzige Möglichkeit für ein tatsächlich zentriertes Element ist meiner Meinung nach [background-position](https://developer.mozilla.org/en/CSS/background-position):center bottom zusammen mit background-repeat:none.  
Die Browserunterstützung ist hier praktischerweise auch deutlich besser.