image à droite avec bouton download en dessous et texte à gauche

[grosloulou]

bonjour,
je souhaite avoir une image portrait de 120x180px à droite avec un bouton (texte+css) Download de 120px en dessous de l'image et le texte lorem ipsum à gauche qui n'entoure pas l'image.
je n'en sors pas !

j'ai fait un div float right de largeur 140px pour contenir l'image portrait de 120x180px et le bouton

j'ai arbitrairement pris un horrible vert sur le texte download et le vert prend toute la hauteur du div

de plus mon texte Lorem ipsum sur la gauche entoure l'image et je souhaiterais qu'il reste à gauche.
j'ai essayé un div float left pour le texte mais il est passé sous l'image :-(

pouvez-vous m'aider ?

les styles doivent être "en ligne" (div style et p style) comme ci-dessous car je ne maitrise pas encore dans joomla le moyen de créer mes classes (ici une classe pour la catégorie agenda)

<div style="float: right; width: 140px; background: #FFFFFF; margin: 20px 0px 50px 50px;"><img style="border: 1px solid #a9a9a9; margin: 10px 10px 20px 0px; float: right; box-shadow: 4px 4px 8px #AAAAAA;" alt="mon-image" src="images/lettres_info/mon-image.jpg" width="120" />
	<p style="background-color: green; width: 120px; font-family: arial; color: #000000; font-size: 14px; text-align: center; margin: 0px; padding: 0px;"><a href="images/mes_documents/pdf/wima_capacitors.pdf">Download</a>
	</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum posuere odio porttitor porta. Aliquam non mauris non massa consequat vehicula in ac turpis. Aliquam euismod vulputate magna, in dapibus odio sollicitudin non. Maecenas porta mauris augue. Quisque volutpat risus ut elit bibendum eget sodales dui semper. Proin vel enim ligula. Suspendisse vitae erat vestibulum nisi pulvinar tempus eget nec mi. Aliquam cursus, arcu a varius elementum, turpis nibh pretium sapien, vitae vehicula nisl lectus imperdiet diam. Morbi orci sapien, elementum vitae egestas et, mollis facilisis ipsum. Sed lacinia aliquet libero, ut vulputate est adipiscing quis. Aliquam auctor nisl vel lectus consequat adipiscing. Nullam nec arcu lorem.</p>
<p>Nunc a risus eget risus interdum mattis ac in ligula. Quisque arcu odio, tempus in consequat eu, varius et dui. Ut ut nisi quam. Aliquam dignissim tortor sit amet magna scelerisque sed rhoncus nunc viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec cursus dolor vitae magna sagittis a facilisis lorem auctor. Curabitur vitae quam ipsum, vel dignissim sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum posuere odio porttitor porta. Aliquam non mauris non massa consequat vehicula in ac turpis. Aliquam euismod vulputate magna, in dapibus odio sollicitudin non. Maecenas porta mauris augue. Quisque volutpat risus ut elit bibendum eget sodales dui semper. Proin vel enim ligula. Suspendisse vitae erat vestibulum nisi pulvinar tempus eget nec mi. Aliquam cursus, arcu a varius elementum, turpis nibh pretium sapien, vitae vehicula nisl lectus imperdiet diam. Morbi orci sapien, elementum vitae egestas et, mollis facilisis ipsum. Sed lacinia aliquet libero, ut vulputate est adipiscing quis. Aliquam auctor nisl vel lectus consequat adipiscing. Nullam nec arcu lorem.</p>
<p>Nunc a risus eget risus interdum mattis ac in ligula. Quisque arcu odio, tempus in consequat eu, varius et dui. Ut ut nisi quam. Aliquam dignissim tortor sit amet magna scelerisque sed rhoncus nunc viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec cursus dolor vitae magna sagittis a facilisis lorem auctor. Curabitur vitae quam ipsum, vel dignissim sapien.</p>

merci
marc

[lesoutier]

Re : image à droite avec bouton download en dessous et texte à gauche

Bonjour,
En l'état, seule Mme Irma pourrait quelque chose pour toi, et elle a déserté ce forum.
Sinon, merci de lire ce post, il manque beaucoup d'infos pour pouvoir t'aider.

[grosloulou]

Re : image à droite avec bouton download en dessous et texte à gauche

salut lesoutier
je ne suis pas sûr que j'ai besoin de Mme Irma, c'est une question de css et je ne suis pas assez calé en css pour trouver le problème !
je mets un div float right de largeur 140px à droite et je veux que mon texte lorem ipsum reste à gauche (comme s'il était float left) et je demande ce qui est mauvais dans mon code

la cerise sur le gateau est le contenu du div de droite.
Dans mon div de 140px je mets une image de 120px et un texte "download" en dessous d'elle.

merci
marc

[lesoutier]

Re : image à droite avec bouton download en dessous et texte à gauche

je ne suis pas sûr que j'ai besoin de Mme Irma

Bah un peu quand même, tu nous décris des couleurs, des emplacements, etc. mais sans voir vraiment de quoi il retourne, difficile de te dire quoi que ce soit. Tu n'indiques même pas le template utilisé.

les styles doivent être "en ligne" (div style et p style) comme ci-dessous car je ne maitrise pas encore dans joomla le moyen de créer mes classes

Ne crois-tu pas que tu prends un peu le problême à l'envers : ne serait-il pas souhaitable que tu commences par créer/modifier le css ?
Les styles inline ça doit rester l'exception, ça revient plus ou moins à mélanger le fond et la forme.

[abmag]

Re : image à droite avec bouton download en dessous et texte à gauche

Ne crois-tu pas que tu prends un peu le problême à l'envers : ne serait-il pas souhaitable que tu commences par créer/modifier le css ?

C'est évident

[grosloulou]

Re : image à droite avec bouton download en dessous et texte à gauche

svp peux-tu juste regarder le code du float right pour contenir image 120x180px+texte "download" (il pointera vers mon phoca download) avec fond vert seulement sur le texte download (pour faire un effet de bouton;après ce sera un style de bouton du thème) et le texte lorem ipsum à gauche de ce div sans jamais entourer l'image comme si c'était un float left

si tu fais copier coller de mon code dans un de tes articles tu vois l'horreur de mon code

le résultat final serait comme sur le site de papounet :

http://www.karya.fr/newsletters/114-newsletter-36.html

merci
marc