Element oberhalb von div erzeugen

[AllesMeins]

Hiho,

ich versuche mich gerade (mal wieder) damit mich an CSS ranzutasten und bräuchte nun etwas Hilfe. Folgende Situation:

Ich benutze in meine Homepage für einige Inhalte kleine Kästchen mit schwarzem Rand. Oberhalb von diesen Kästchen ist jeweils zwei Pixel frei und darüber eine Titel-Grafik. Bisher habe ich das immer mühsam per Hand gebaut, nun würde ich das ganze gerne "automatisieren". Sprich mir einen entsprechenden style bauen mit dem ich einfach nur noch die Grafik zu den entsprechenden Inhalten packen muss, den style drauf und die Grafik soll automatisch entsprechend nach oben wandern. Ich bin auch schon so weit das man das mit position:relative;top:-20px ganz gut hinbekommen kann nur sind nun noch zwei Probleme offen:

1.) Der allseits beliebte IE plaziert zwar die Grafik entsprechend, lässt aber dafür in der Inhaltsbox eine halbe Zeile frei (augenscheinlich da wo die Grafik vorher war)

2.)Wie schaffe ich es das sich die Grafik nicht über den anderen Text legt, sondern dann entsprechend alles nach unten verschoben wird?

Hier mal mein bisheriges Werk:

.css:
.bg_2 {background-color:#C0C5BB;}
.box {border-width:1px;border-color:#000000;border-style:solid;}

.html:
<div style="width:160px" class="bg_2 box">
  <div style="position:relative;top:-20px"><img src="grafik.gif" width="105" height="9"></div>INHALT</div>

Kann mir da jemand helfen?

Grüsse

Marc

[Orlando]

Hallo AllesMeins,

.bg_2 {background-color:#C0C5BB;}
.box {border-width:1px;border-color:#000000;border-style:solid;}

<div style="width:160px" class="bg_2 box">
  <div style="position:relative;top:-20px"><img src="grafik.gif" width="105" height="9"></div>INHALT</div>

wozu benötigst du das innere div-Element? Backerbsensuppe schmeckt viel besser. Das alt-Attribut fehlt übrigens.

Grüße
Roland

[AllesMeins]

Hiho,

die Grafik hat eine feste Breite, die Boxen aber nicht unbedingt. Deshalb will ich das div später auf die Breite der Boxen setzen und eine Hintergrundfarbe angeben, damit diese "Titelleiste" genauso breit ist wie die Box und nicht nur so breit wie die Grafik.

Das alt-Attribut fehlt übrigens.

Das ganze ist noch klasifiziert als eine Machbarkeitsstudie und muss deshalb nicht unbedingt komplett valides HTML sein :)

Marc

[MudGuard]

Hi,

Ich benutze in meine Homepage für einige Inhalte kleine Kästchen mit schwarzem Rand. Oberhalb von diesen Kästchen ist jeweils zwei Pixel frei und darüber eine Titel-Grafik. Bisher habe ich das immer mühsam per Hand gebaut, nun würde ich das ganze gerne "automatisieren". Sprich mir einen entsprechenden style bauen mit dem ich einfach nur noch die Grafik zu den entsprechenden Inhalten packen muss, den style drauf und die Grafik soll automatisch entsprechend nach oben wandern. Ich bin auch schon so weit das man das mit position:relative;top:-20px ganz gut hinbekommen kann nur sind nun noch zwei Probleme offen:
1.) Der allseits beliebte IE plaziert zwar die Grafik entsprechend, lässt aber dafür in der Inhaltsbox eine halbe Zeile frei (augenscheinlich da wo die Grafik vorher war)

So ist position:relative eben definiert.
Nutze position:absolute für das Bild und setze die Basis für die Koordinaten auf das div.

<div style="width:160px" class="bg_2 box">
  <div style="position:relative;top:-20px"><img src="grafik.gif" width="105" height="9"></div>INHALT</div>

Wozu das innere div? Warum positionierst Du nicht das Bild direkt?

cu,
Andreas

[AllesMeins]

Hiho,

So ist position:relative eben definiert.
Nutze position:absolute für das Bild und setze die Basis für die Koordinaten auf das div.

Hmm, ich dachte bis heute position gibt lediglich Informationen darüber von wo aus das Element positioniert werden soll und nicht wie und ob es einen Platzhalter gibt. Naja,. die Grafik ist jetzt jedenfalls richtig postiert, dafür schon mal danke.

<div style="width:160px" class="bg_2 box">
  <div style="position:relative;top:-20px"><img src="grafik.gif" width="105" height="9"></div>INHALT</div>

Wozu das innere div? Warum positionierst Du nicht das Bild direkt?

Ich will hinter die Grafik später noch einen Hintergrundfeld legen um das gute Ding auf 100% Breite zu bringen. Wenn ich aber ein width:100% direkt in der Grafik angeben würde, würde die Grafik entsprechend gestreckt. Wobei mich das gerade zum nächsten Problem führt. Eine Breite von 100% bezieht ja den 1px Rahmen der Box nicht mit ein. Kann ich das div irgendwie dazu überreden sich mit seiner Breite am Aussenrand der Box zu orientieren (also quasi 100% plus ein px links und eines rechts).

Und leider steht auch noch mein zweites Problem aus. Wie bringe ich das Werk dazu vorhergehende Inhalte nicht zu überdecken sondern sich brav darunter einzuordnen?

Grüsse

Marc

[wahsaga]

hi,

Und leider steht auch noch mein zweites Problem aus. Wie bringe ich das Werk dazu vorhergehende Inhalte nicht zu überdecken sondern sich brav darunter einzuordnen?

am einfachsten, in dem du alle elemente im normalen elementfluss belässt - sie also nicht mittels float oder absoluter positionierung dort herausreißt.

gruß,
wahsaga