✔ Text in Div Box über Bildlink legen

[Cibson]

Hi, ich hab mich soeben hier registriert, und hoffe, dass ihr mir bei meinem Problem (mit dem ich mich jetzt schon einige Tage herumschlage) helfen könnt.

Ich möchte Div Boxen mit normalem Text über einen Bild-Link (Button) legen, ohne das der Button seine Funktion verliert.

Ich füg hier mal ein Bild ein, damit man sich das besser vorstellen kann was ich meine:


Das ganze Bild ist ein Link.
Es sind mindestens 2 zusätzliche Divs die ich über den Button lege möchte:

<div>2 Artikel</div>
<div>Gesamt: 99,90€</div>

sollen über
<a href="#">ausgeblendeter Linktext oder <img> </a>

gelegt werden.

Vielen Dank im Voraus

 

[tombe]

Vielleicht gibt es noch eine bessere Lösung, aber warum gibst du bei den DIVs nicht einfach auch den Link an?

NACHTRAG:
Wobei eigentlich ist das viel zu kompliziert gedacht. Wenn du die DIVs innerhalb des <a></a> positionierst, dann müsste das doch gehen!?

 

[Cibson]

Genial! Vielen vielen Dank!
Ich habs schon mit transparenten Ebenen versucht .
Das ist die Lösung die ich gesucht habe.

Hier die wichtigen Teile des Codes den ich jetzt verwende:

HTML:

<a href="warenkorb" class="link"><div class="text_1">1 Artikel</div><div class="text_2">99,90€</div></a>

CSS:

.link {
	position: relative;
	display: block;
	width: 220px;
	height: 70px;
	background: url(img/button_warenkorb.png); 
}

.text_1 {
	position: absolute;
	top: 10px;
	right: 30px;
}

.text_2 {
	position: absolute;
	top: 40px;
	right: 30px;
}

 

[Jan-Frederik Stieler]

Hi,
aber bitte nicht vergessen dass ein Div in enem Anchor-Element erst mit HTML 5 erlaubt ist.

Viele Grüße

 

[Cibson]

Danke für den Hinweis. Gibt es vielleicht eine Lösung die auch mit HTML 4 erlaubt ist?

Mir ist gerade aufgefallen, dass die Texte in alten IEs und auf mobilen Endgeräten (iPhone, iPad und Galaxy S2) unterstrichen sind. "text-decoration: none;" hat leider nicht geholfen.

 

[threadi]

Verwende statt <div> das <span>-Element und mach sie, falls nötig, per CSS zu Block-Elementen.