Position

[lena84]

Hi Community,

muss mich wieder an euch Profis wenden. Ich hoffe ich könnt mir helfen.

Habe ein Div-> <div> im div ist ein Link = <a ..> im Link ist ein <img ..> und nun kommt mein Problem:

>>> auf diesem Image sollte ein weiters <div > drauf und in den div kommt ein Text rein, der Text muss sichtbar sein über dem Link.
Welche CSS Regeln und wo muss der zweite Div positioniert werden?

Hoffe Ihr wisst es?!

Lg Lena

 

[Space Vampire]

Warum so kompliziert? Mach den Link zum Blockelement, gib im das Bild als background-image und schreib deinen Text einfach in den <a>-Block.

 

[lena84]

Kompliziert hm deswegen weil das Bild auch als Link sein sollte (bzw. würde ich es gerne wollen) :(

Bitte

 

[Tronjer]

Das ließe sich mit position:absolute realisieren. Aber wenn du aus dem Bild ein background-image machst, kannst du dir den darüberliegenden Container ersparen.

 

[Space Vampire]

Meine Rede. Völlig unnötig. Ob du nun einen Link um ein IMG machst oder dem Link ein Hintergrundbild gibst, kommt doch visuell aufs selbe raus. Das was du haben willst ist aber mit Hintergrundbild viel unkomplizierter zu realisieren.
Oder gibt es einen zwingenden Grund, weswegen das Bild unbedingt ein <img> sein muss?

// EDIT
Eine alternative zu position:absolute wäre in diesem Fall eine negative Margin (z.B. margin-top: -20px).
Aber bedenke: egal ob position oder minusmargin. In einigen Browsern wird der Link unklickbar, wenn man einen Container darüber legt!
Das Hintergrundbild ist, wie man es auch dreht und wendet, meiner meinung nach die eleganteste Lösung!

 

[lena84]

gut gut. Doch nun lässt sich der Link in dem Background image nicht ausrichten.
z.b : <div id=.. background-img(url...)><a ..> </a> </div>
<div id=.. background-img(url...)><div position="absolute"><a ..> </a> </div> </div> <-- hier lässt es sich ausrichten aber sichtbarkeit ist nicht möglich.


Was ist den falsch daran??

 

[Banana_Jones]

css:

#background-image {
   display: block;
   height: 100px; /* Höhe deines Bildes */
   width: 100px; /* Breite deines Bilder */
   background: url(...) no-repeat;
}

html:

<a href="#" id="background-image">Dein Text</a>

über padding könntest du dann noch einen Text positionieren, aber daran denken, dass padding zur Höhe und Breite des Elements dazugezählt werden