28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

Voici une question épineuse à laquelle je n'ai su trouvé une réponse consensuelle.

J'aimerais pouvoir placer du texte au bas d'une image, plus précisément une légende qui aurait pour attribut un lien (<a>).

J'ai en tout et pour tout 3 blocs (les uns au dessous des autres) sur ce principe:
[un bloc image + un bloc texte de quelques lignes]
[un bloc texte de quelques lignes + un bloc image]
[un bloc image + un bloc texte de quelques lignes]

Voici le bout de code pour le premier bloc:


<div>

<div class="gauche">
<a href="/">Lorem ipsum dolor sit amet</a>
<img src="lorem.jpg" alt="/">
</div>

<div class="droite">
<h3>Lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum semper iaculis. Sed arcu magna, laoreet in posuere id, luctus sit amet diam. Nunc sollicitudin, lectus sed tempus viverra, justo neque luctus elit, non tincidunt turpis neque a metus. Phasellus id egestas justo. Praesent et lacinia velit. Pellentesque lobortis mauris nunc, ornare aliquam orci interdum nec. Quisque ac mauris sem.</p>
</div>

</div>


Et le CSS:


.gauche{
width:35%;
display:table-cell;
vertical-align:top;
}
.droite{
width:45%;
display:table-cell;
vertical-align:top;
}


J'ai tenté d'attibuer à <a> une classe avec l'attribut bottom mais le texte de <a> bien évidemment sort du cadre pour se retrouver en bas du site. Comment puis-je faire donc pour le lien se positionne sur la photo et strictement en bas du cadre?

Cela fait plusieurs que j'y planche et... Smiley fache Smiley lol

Si quelques lumières peuvent être apportées, je vous en serais très reconnaissant!
Modifié par cssgrr (22 Jan 2014 - 18:09)
Je saisi pas trop le lien entre ce que tu dis et le code que tu donnes mais bon.
En mettant la balise <a> sous la balise <img , ça ne marche pas mieux Smiley sweatdrop ?