nicht angemeldet
verlinktes Bild mit Schrift drauf
Hi, beim bauen einer HP bin ich auf folgendes Problem gestoßen.
Ich möchte ein Bild verlinken, welches einen Schriftzug enthält.
Die Schrift soll nicht daneben oder sonst wo stehen.
Normalerweise würde ich das Bild als Hintergrund setzen dann wäre das kein Problem, allerdings ist es dann nicht mehr verlinkbar.
Den Text zu verlinken möchte ich auch nicht.
Hat jmd. eine Lösung dafür?
Grüße,
Vinz
-
Hat jmd. eine Lösung dafür?
- Positioniere den Text über dem Bild.
- Der Link erhält das Bild als Hintergrundbild
- Der Link gruppiert Text und Bild
- Der Text ist verlinkt und über das Bild positioniert
- Das Bild ist verlinkt in der Grafik ist der Text enthalten (als Bildinformation)
- ...
Ich hab' keine Lust mehr :)
-
Ich wollte das schon immer mal ausprobieren:
a-Tag per CSS zum Blockelement machen, dann eine Höhe und Breite angeben (die deines Bilder) und das Bild als Hintergrund setzen.
Den Text kannste da auch irgendwo reinknallen - mit CSS fällt der dann auch nicht weiter auf (also er färbt sich nicht als Link).
Zweite Möglichkeit wäre:
<div>
<img/>
<div>Text</div>
</div>Hier arbeitest du mit CSS: position: und z-index. Da kannste den Text schön über das Bild verschieben... was du magst.
-
Zweite Möglichkeit wäre:
<div>
<img/>
<div>Text</div>
</div>Hier arbeitest du mit CSS: position: und z-index. Da kannste den Text schön über das Bild verschieben... was du magst.
Wozu z-index? als nachfolgendes Element ist das <div />-Element sowieso über seinem vorausgehenden Geschwisterelement.
-
Wozu z-index? als nachfolgendes Element ist das <div />-Element sowieso über seinem vorausgehenden Geschwisterelement.
Weil ich Hellsehen kann und weiß, dass als nächstes die Frage kommt, wieso der Text nicht ganz sichtbar ist, da er noch ein zweites Bild hinter den Text gepackt hat, was ein X sein soll und etwas anderes auslösen kann...
... wäre dem nicht so, hätte ich natürlich den Z-Index weggelassen und darauf gehofft, dass keine weiteren Probleme und Fragen auftreten.
-
Weil ich Hellsehen kann und weiß, dass als nächstes die Frage kommt, wieso der Text nicht ganz sichtbar ist, da er noch ein zweites Bild hinter den Text gepackt hat, was ein X sein soll und etwas anderes auslösen kann...
Mit deiner Aussage suggerierst du aber, der z-index sei zwingend erforderlich :) und birgt die gefahr, dass der Käse unreflektiert übernommen wird.
-
Mit deiner Aussage suggerierst du aber, der z-index sei zwingend erforderlich :) und birgt die gefahr, dass der Käse unreflektiert übernommen wird.
Etwas, was funktioniert und ohne Probleme erweiterbar ist würde ich jetzt nicht als Käse bezeichnen - aber da bist du wohl der Mutige von uns beiden.
Wo ist der Wein?
-
Etwas, was funktioniert und ohne Probleme erweiterbar ist würde ich jetzt nicht als Käse bezeichnen - aber da bist du wohl der Mutige von uns beiden.
Nein - ich hab nur schon genug Lösungen mit 10 Zeilen gesehen, bei denen genau eine für ein Problem relevant war - der Rest hat neue Löcher gegraben oder war einfach nur Redundanter Müll. Ich bin Minimalist :)
Wo ist der Wein?
Welcher Wein?
-
Welcher Wein?
Na der für den Käse!
-
»» Welcher Wein?
Na der für den Käse!
Pff - mir ist ein Bier und eine Brez'n lieber :)
-
-
-
-
-
-
-
-
Danke für eure Ideen, bin nun hier drauf gestoßen, das funktioniert bei mir:
http://forum.de.selfhtml.org/archiv/2003/12/t65391/
-
Danke für eure Ideen, bin nun hier drauf gestoßen, das funktioniert bei mir:
http://forum.de.selfhtml.org/archiv/2003/12/t65391/
Habe es nun so umgesetzt, falls es jmd. interessiert.
<div style='position:relative; width:100px; height:100px; margin:10px 490px 0px 0px;'> <a href='index.php?ac=b_show&det=$bid[$i]' style='text-decoration:none'> <img src='img/8eck.gif' alt='8eck' title='8eck' style='position:absolute; top:0; left:0; width:100px; height:100px;'> <div style='position:absolute; top:30px; left:0px; width:100px;'>$kurz[$i]</div> </a> </div>-
Habe es nun so umgesetzt, falls es jmd. interessiert.
<div style='position:relative; width:100px; height:100px; margin:10px 490px 0px 0px;'>
<a href='index.php?ac=b_show&det=$bid[$i]' style='text-decoration:none'>
<img src='img/8eck.gif' alt='8eck' title='8eck' style='position:absolute; top:0; left:0; width:100px; height:100px;'>
<div style='position:absolute; top:30px; left:0px; width:100px;'>$kurz[$i]</div>
</a>
</div>`<a />`{:.language-html} ist ein Inline-Element und darf per Definition <http://de.selfhtml.org/html/referenz/elemente.htm#a@title=keine Block-Elemente> wie z.B. `<div />`{:.language-html} enthalten. In deinem Link solltest du [das &-Zeichen maskieren](http://www.w3.org/International/questions/qa-escapes)-
Danke für die Hinweise.
Das mit dem maskieren kann man nicht zufällig in 2 Sätzen erklären, also warum und wie?
-
Das mit dem maskieren kann man nicht zufällig in 2 Sätzen erklären, also warum und wie?
Wann Escapes zu verwenden sind (erster Absatz)
Übrigens (letzter Absatz)Es täte dir aber nich schlecht, den Artikel vollständig zu lesen - so lang ist er nicht.
-
Danke, jetzt komm ich mir schon viel schlauer vor.
-
-
Das mit dem maskieren kann man nicht zufällig in 2 Sätzen erklären, also warum und wie?
Mit dem richtigen Hilfsmittel schon.
-
-
-
-