Ausrichtung Bild und Text in html

Fragen zu allen Themen rund ums Programmieren außerhalb von phpBB können hier gestellt werden - auch zu anderen Programmiersprachen oder Software wie Webservern und Editoren.
Antworten
Fair2Play
Mitglied
Beiträge: 4
Registriert: 18.03.2010 00:17

Ausrichtung Bild und Text in html

Beitrag 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
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5020
Registriert: 08.06.2009 12:03

Re: Ausrichtung Bild und Text in html

Beitrag 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
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Präteritum, Perfekt, Präsens, Futur & Plusquamperfekt werden nicht fehlerfrei genutzt, gar missverstanden.
Antworten

Zurück zu „Coding & Technik“