Seite 1 von 1

Ausrichtung Bild und Text in html

Verfasst: 26.05.2010 17:09
von Fair2Play
Hallo zusammen,

ich habe mal ne Frage.
Und zwar, ich habe ein Bild mit einem Text darüber (NICHT Hintergrundbild), jetzt will ich den Code so schreiben, das das Bild mittig sitzt und der Text dann trotzdem in den richtigen Bereich auf der Grafik angezeigt wird, also mittig +50px (z.B.)

Das ist der Code den ich bis jetzt habe und die Ausrichtung ist immer Links

Code: Alles auswählen

<div id="s5">
<div style="position:absolute; top:150px" > <a name="medic"><img src="IMG URL" width="729" height="353" alt=""> </div> </a>

<div style="position:absolute; top:170px; left:579px; width:357px; border:0px solid #fbfefe; padding:13px"><b>"TEXT"
</b></div>
Danke für eure Hilfe

MfG F2P

Re: Ausrichtung Bild und Text in html

Verfasst: 28.05.2010 21:27
von Talk19zehn
Hallo Fair2Play, ein Beispiel ----

line-height = Höhe der Grafik
width = Breite der Grafik


Ggf. ein wenig mit der Schriftgröße experimentieren....... :wink:

Theme:

Code: Alles auswählen

.hintergrundundtextab {
background: #919191 url(http://www._LinkzumBild.321x63.jpg);
color: #FFFFFF;
line-height: 63px;
width: 321px;
font-size: 14px;
font-weight: bold;
text-align: center;
}

Ausgabe:

Code: Alles auswählen

<p class="hintergrundundtextab">Text mit Hintergrundbild</p>

Lege die Ausgabe in einen DIV, den Du zentrierst. Es sollte klappen. Mein IE8-Test, Ausgabe im Footerbereich von Prosilver, OK!


Beste Grüße



Edit:
====
Die beispielhafte Hintergrundfarbe #919191 habe ich hereingenommen, für den Fall, dass der Server auf dem das Bild liegt, ausfällt. --> Weiße Schrift #FFFFFF auf weißem Hintergrund
wäre nämlich eher ungünstig. :lol:

Für abstrakte Grafiken, die sich 100% in der Breite wiederholend darstellen sollen:
Die Angabe "width" für die Breite der Grafik einfach weglassen (Zeile herauslöschen)!

Grüße