Text über Bild

Fragen oder Probleme mit HTML, PHP oder CSS?

Text über Bild

Beitragvon pollux am 30.04.2007, 12:37

Hallo Forum,
wer kann mir sagen, wie ich einen Text über ein Bild lege?

Ich biete auf meiner Homepage waren an und möchte bei Bedarf den Text "ausverkauft" über das Bild der Ware schreiben. Der Text müsste also in der Ebene vor dem Bild sein.

Danke für Eure Hilfe.
pollux
 
Beiträge: 131
Registriert: 03.10.2005, 13:23
Wohnort: Frankfurt


Beitragvon automatix am 30.04.2007, 12:56

Das geht mit einem Grafikprogramm. Microsoft hat in diese Richtung kräftig nachgelegt. Das ursprüngliche paint, was in jedem Betriebssystem enthalten ist, wurde verbessert und das schöne, es ist kostenlos.

Paint.NET, kostenlose, verbesserte MS Paint-Version, als Alternative zu teuren Bildbearbeitungs-Programmen.
http://www.chip.de/downloads/c1_downloads_13015268.html
automatix
Administrator
 
Beiträge: 14413
Registriert: 12.09.2004, 13:58
Wohnort: 95138 Bad Steben

Beitragvon dragonl am 30.04.2007, 13:36

Alternativ dazu wiederrum, kann man auch bei HTML und CSS bleiben.
Schau dir mal die möglichkeiten an die dir ein "z-index" dietet - http://www.css4you.de/z-index.html
In Verbindung mit ein paar "div's" und einer transparenten Grafik auf der "Ausverkauft" steht liese sich da schon was machen. Zusätzlich sparst du webspace, weil du die Artikel bilder nicht alle doppelt haben musst und die Seite wird später auch etwas schneller gelade weill für die z.B. fünf ausverkauften Artikel nur EIN Bild nachgeladen werden muss (das tranzparente mit Text) und nicht die fünf Artikelbilder auf denen nun "Ausverkauft" steht. Das wiederum spart auch Trafik !
Code: Alles auswählen
<div style="position:relative;">
    <div style="position;absolute; top:0px; left:0px; z-index:1;">
        <img src="artikel.jpeg" alt="Kugelschreiber">
    </div>
    <div style="position;absolute; top:0px; left:0px; z-index:2;">
        <img src="na.jpeg" alt="Ausverkauft">
    </div>
</div>

So ungefähr ! Keine Ahnung ob obiger Code funktioniert, aber dessen Aufgabe soll seien:
Die beiden Container mit den Bildern werden in dem Eltern-Div an der selben Stelle positioniert (oben-links)(top:0px; left:0px;) und durch den z-index wird die überlappung bestimmt. In unserem fall, Artikelbild nach unten und Ausverkauftbild nach oben bzw. da drüber.

MfG
Dragonl
dragonl
 
Beiträge: 372
Registriert: 14.09.2004, 14:10
Wohnort: Bremen

Beitragvon BlueScreen-Bertrand am 30.05.2007, 01:59

Hallo,

ich hab eine andere Idee, es ist so vielleicht verwaltungstechnisch einfache zu verwirklichen.

Erstelle eine Tabelle. Als Hintergrund gibst du das gewünschte Bild an.
Wenn das Bild ausverkauft ist, lässt du innerhalb der Tabelle den Text "Ausverkauft" einblenden. Der Text wird das Bild nicht vollständig verdecken und du hast nicht den Aufwand, jede Grafik bearbeiten zu müssen.

Und jetzt die Bastelanleitung:

Bild ist verfügbar:
Code: Alles auswählen
<table style="background-image:url(grafik.jpg); background-repeat:no-repeat">
<tr><td>
<p><!-- --></p>
</td></tr>
</table>


Bild wurde bereits verkauft:
Code: Alles auswählen
<table style="background-image:url(grafik.jpg); background-repeat:no-repeat">
<tr><td>
<p><i>Ausverkauft</i></p>
</td></tr>
</table>
BlueScreen-Bertrand
Moderator
 
Beiträge: 10741
Registriert: 28.11.2005, 19:01
Wohnort: Waldshut-Tiengen



Ähnliche Themen


Zurück zu HTML, PHP & Co.

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste