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"> </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"> </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"> </div>
<div style="float:left; text-align:center;">TEXT</div>
<div class="e33back"> </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"> </div>
<div style="display:inline; margin:2px; text-align:center;">TEXT</div>
<div style="display:inline; text-align:right;" class="e33back1"> </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