zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild im Rahmen eines div

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.05.2005, 23:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2005
Beiträge: 3
grml befindet sich auf einem aufstrebenden Ast
Standard 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
Angehängte Grafiken
Dateityp: jpg css-example.jpg (1,8 KB, 115x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.05.2005, 23:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.05.2005, 01:20
Neuer Benutzer
neuer user
 
Registriert seit: 22.06.2004
Beiträge: 24
vilu befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 18:20
Bild und Text in einem DIV mit unterschiedlichen Abständen? Geht das? haupi CSS 1 16.03.2010 22:54
Bild im Div Kimbolo CSS 4 24.06.2008 17:33
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48
Bild in DIV erzeugt unter sich 2px Abstand Pulli CSS 6 18.09.2004 21:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:26 Uhr.