BG-Image außerhalb der Grenzen des DIVs verschieben

[andi]

Hallo,
ich will eine Box in CSS folgendermaßen layouten:

__/\_________  
|           |  
|           |  
|           |  
|___________|

Breite und Höhe sind variabel. Ich dachte mir, ich nehm die obere linke Ecke ink. Spize (__/\_) als Hintergrundbild und geb dem eigentl. DIV eine BG-color und eine outline mit.

Soweit so gut, nur sitzt das BG-bild natürlich jetzt IM Div und nciht darüber. Mit background-position:0 -20 kann ich es zwar hoch verschieben, alelrdings sehe ich es dann nicht mehr.

Liegt die Lösung auf der Hand und ich bin blind oder geht es gar nicht so einfach?
Oder gibt es eine ganz andere und bessere Herangehensweise?

danke, andi

[ChrisB]

Hi,

Liegt die Lösung auf der Hand und ich bin blind oder geht es gar nicht so einfach?

Per :before/:after ein Pseudoelement erzeugen, dieses positionieren, und dem den Zipfel geben.

MfG ChrisB

[Andi]

Hi, das ging ja schnell :)

Per :before/:after ein Pseudoelement erzeugen, dieses positionieren, und dem den Zipfel geben.

Hab folgendes probiert:

  
.sub_navigation:before{  
	width:50px;  
	height:12px;  
	/*display:block;*/  
	background: url(/images/layout/submenuarrow.png) no-repeat;  
}  

Wird aber leider komplett ignoriert. Im markup hab ich stehen:
<ul class="sub_navigation">

(Ist doch kein DIV sondern ein Teil der Navi-Liste)

Wenn ich das BG-Bild durch eine BG-Farbe ersetze sehe ich immer noch nix. Liegt also nciht am Bild, nur an was sonst?

[ChrisB]

Hi,

Hab folgendes probiert:

.sub_navigation:before{
width:50px;
height:12px;
/display:block;/
background: url(/images/layout/submenuarrow.png) no-repeat;
}

>   
> Wird aber leider komplett ignoriert.  
  
Hat ja auch keinerlei Inhalt.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[andi]

Danke :)

Hat ja auch keinerlei Inhalt.

  
	width:50px;  
	height:12px;  
	display:block;  
	content:'';  
	background: url(/images/layout/submenuarrow.png) no-repeat;  

Dachte schon zuerst jetzt gehts (Bild wird zumindest angezeigt) aber es hängt immer noch nicht über dem Kasten, sondern wieder innen drin :-/ (Das bild ist komplett von der Outline von .sub_navigation umschlossen).

Spielereien mit margin oder padding brachten auch nciht den gewünschten Erfolg.

Hast Du noch einen Schubser für mich? Danke für Deine Geduld :)

andi

[andi]

Hab noch was ergänzt:

  
.sub_navigation:before{  
	width:50px;  
	height:12px;  
	display:block;  
	content:'';  
	background: url(/images/layout/submenuarrow.png) no-repeat;  
	top:-120px; // testwert  
	position:absolute;  
}  

Jetzt wandert der Pfeil zwar wie gewünscht nach oben, die outline zieht er aber mit hoch.

[Andi]

Jetzt wandert der Pfeil zwar wie gewünscht nach oben, die outline zieht er aber mit hoch.

Ersetze ich "outline" durch "border" funktionierts plötzlich. Muss ich mir wohl nochmal anschauen, was da genau der Unterschied ist. Ist das logisch für euch?

Danke und gute Nacht :)