3 Bilder und Text anordnen

[xxlmaxl]

Hallo Leute,

habe in diesem Forum gestöbert, aber leider keine Antwort auf meine Frage gefunden. Vielleicht kann mir jemand von Euch helfen.

Ich möchte mit CSS folgendes erreichen:

Links eine Grafik, eine Hintergrundgrafik, rechts eine Grafik und das alles noch mit einer Schrift in der Mitte des Ganzen. Dies soll in der Breite flexibel sein, je nach Auflösung der Betrachter. Meine bisherigen Arbeiten sehen so aus:

Mit Tabellen habe ich es einwandfrei hinbekommen:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="background-image: url(../e11.gif); background-repeat: repeat-y;" height="25" width="17">&nbsp;</td>
<td class="boxtitle" style="background-image:url(../top.gif);" align="center">TEXT</td>
<td style="background-image: url(../e33.gif); background-repeat: repeat-y;" width="28">&nbsp;</td>
</tr></tbody></table>

1. Versuch mit CSS:

style.css:
.e22back {height:25px; font-size: 15px; font-variant: small-caps; text-align: center; font-weight: bold; color: #FFFFFF; background-color: transparent; background-image: url(../top.gif); background-repeat: repeat-x;}
.e11back {background-image: url(../e11.gif); background-repeat: repeat-y; width:17px; height:25px; float:left;}
.e33back {background-image: url(../e33.gif); background-repeat: repeat-y; width:28px; height:25px; float:right;}

<div class="e22back">
<div class="e11back">&nbsp;</div>
<div style="float:left; text-align:center;">TEXT</div>
<div class="e33back">&nbsp;</div>
</div>

2. Versuch mit CSS

style.css:
.e22back {height:25px; font-size: 15px; font-variant: small-caps; text-align: center; font-weight: bold; color: #FFFFFF; background-color: transparent; background-image: url(../top.gif); background-repeat: repeat-x;}
.e11back1 {background-image: url(../e11.gif); background-repeat: repeat-y; width:17px; height:25px;}
.e33back1 {background-image: url(../e33.gif); background-repeat: repeat-y; width:28px; height:25px;}

<div class="e22back">
<div style="display:inline; text-align:left;" class="e11back1">&nbsp;</div>
<div style="display:inline; margin:2px; text-align:center;">TEXT</div>
<div style="display:inline; text-align:right;" class="e33back1">&nbsp;</div>
</div>

Habe zwischendurch meinen ersten Versuch auch mal mit <span>s versucht, ich bekomme es nicht hin.

Kann mir einer helfen? Wäre über jede hilfreiche Antwort dankbar! Für heute gehe ich erst mal ins Bett!

Danke!

Holger

[xxlmaxl]

Noch ein Anhang dazu:

Unter meiner URL ist meine Arbeit anzusehen. In der Mitte der obere Balken ist CSS Versuch 1, darunter CSS Versuch 2 und unten so wie es aussehen soll, leider als Tabelle.

Danke im voraus!

Holger

[Ingo Turski]

Hi,

.e11back1 {background-image: url(../e11.gif); background-repeat: repeat-y; width:17px; height:25px;}
.e33back1 {background-image: url(../e33.gif); background-repeat: repeat-y; width:28px; height:25px;}

<div class="e22back">
<div style="display:inline; text-align:left;" class="e11back1">&nbsp;</div>

Du kannst keinem inline-Element eine Breite zuweisen.
Was z.B. ginge: beide Randgrafiken als img einzubinden und floaten zu lassen.

freundliche Grüße
Ingo

[xxlmaxl]

Hi,

.e11back1 {background-image: url(../e11.gif); background-repeat: repeat-y; width:17px; height:25px;}
.e33back1 {background-image: url(../e33.gif); background-repeat: repeat-y; width:28px; height:25px;}

<div class="e22back">
<div style="display:inline; text-align:left;" class="e11back1">&nbsp;</div>
Du kannst keinem inline-Element eine Breite zuweisen.
Was z.B. ginge: beide Randgrafiken als img einzubinden und floaten zu lassen.

freundliche Grüße
Ingo

Hallo,

hab ich soeben probiert. Hier der Code:

<div class="e22back">
<div style="display:inline; float:left;">
<img border="0" src="../e11_2.gif" width="17" height="25">
</div>
<div style="display:inline; margin:2px; text-align:center;">TEXT</div>
<div style="display:inline; float:right;">
<img border="0" src="../e33_2.gif" width="28" height="25">
</div>
</div>

Dabei geht das rechte Bild unter den Text. Siehe Link!

Danke trotzdem!

Holger

[xxlmaxl]

Hi,

.e11back1 {background-image: url(../e11.gif); background-repeat: repeat-y; width:17px; height:25px;}
.e33back1 {background-image: url(../e33.gif); background-repeat: repeat-y; width:28px; height:25px;}

<div class="e22back">
<div style="display:inline; text-align:left;" class="e11back1">&nbsp;</div>
Du kannst keinem inline-Element eine Breite zuweisen.
Was z.B. ginge: beide Randgrafiken als img einzubinden und floaten zu lassen.

freundliche Grüße
Ingo

Hallo,

habe einen zweiten Versuch gestartet, Code:

<div class="e22back">
<div style="display:inline; float:left;">
<img border="0" src="../e11_2.gif" width="17" height="25">
</div>
<div style="display:inline; margin:2px; text-align:center; float:left;">TEXT</div>
<div style="display:inline; float:right;">
<img border="0" src="../e33_2.gif" width="28" height="25">
</div>
</div>

Nun bekomme ich alles auf eine Zeile, aber der TEXT sollte noch zentriert werden. Wie kann man das machen?

Vielen Dank im voraus für Eure Antworten!

Holger