XHTMLforum - Bild im Rahmen eines div

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Bild im Rahmen eines div (http://xhtmlforum.de/showthread.php?t=35413)

Bild im Rahmen eines div

Hallo!

Ich hätte gerne ein div mit Text drin, einer Hintergrundfarbe, links einem dicken Rahmen, und im Rahmen ein Bild.

background:, border-left: schaff ich ja gerade noch. Doch beim Bild wirds schwierig. Ein Hintergrundbild hab ich nicht in den Border bekommen. Da hab ich herum einen wrapper gemacht, dort ein normales Bild rein, und mit z-index über das innere div gelegt.

Schön, sieht im Firefox auch ordentlich aus. Aber im IE ist es komisch (Ja, Doctype angegeben): Einmal sind beide Bilder da, dann nur eins, plötzlich keines mehr! (Auf mehreren Systemen).

CSS:

Code:

div.wrapper {

  background-color: #FBF8A0;



  padding-left: 0;



  z-index: 1;

}



div.box {

  background-color: #CCDDFF;



  margin: 0;

  margin-top: -30px;

  margin-left: -4px;



  border: 1px solid #000; 

  border-left: 34px solid #000;



  z-index: 1;

}

HTML:

Code:

<div class="wrapper">[img]bild.gif[/img]<div class="box">Das ist eine schöne Beispielbox</div></div>

Ich bin ja nicht auf diese Lösung versteift, wollte aber zeigen das ich es probiert habe.
Wie bekommt man das elegant hin? Mir ist noch nichts besseres eingefallen, das auch funktioniert.

Mit freundlichen Grüßen :)

Re: Bild im Rahmen eines div

Zitat:

Zitat von grml

und im Rahmen ein Bild.

hintergrundbilder über border gehen m.W. nicht.

Zitat:

Da hab ich herum einen wrapper gemacht, dort ein normales Bild rein, und mit z-index über das innere div gelegt.

ich würde dem äußeren div einfach das bild als hintergrundbild geben, entsprechend positioniert, sowie auch die blaue hintergrundfarbe, die du derzeit als rahmenfarbe benutzt.

der innere div wird dann über margin (oder padding des äußeren) auf abstand von links gehalten - um so den optischen effekt eines border-left zu erzeugen.

Hallo,

Du kannst dem Bild selber einen Hintergrund (background-image z.b. über ein Klasse) zuweisen und diesen über das padding (in Deinem Fall: padding-left) sichtbar machen.

Das dürfte, wenn ich richtig verstanden habe, den gewünschten border-effekt ergeben. Dem Border-Attribut selbst kann man meines Wissens kein Hintergrundbild zuweisen.

Gruß,

Vilu