float right sur une image et un texte

Version imprimable

bonjour,
sur :
http://www.marclabro.com/index.php?o...=20&Itemid=214
j'essaye de faire la même chose que sur :
http://www.karya.fr/newsletters/114-newsletter-36.html

mais je ne m'en sors pas avec les float right...

j'ai fait un div float right de largeur 140px pour centrer l'image de 180x254 (vous pouvez la télécharger en cliquant droit sur celle du site karya) ramenée à une largeur de 120px et sous celle-ci centrer un "bouton" "download

j'ai arbitrairement pris un horrible vert sur download et il prend toute la hauteur

de plus mon texte 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 ?

le code doit être dans style en ligne car je ne maitrise pas encore dans joomla le moyen de créer mes classes (ici une classe pour la catégorie agenda)

j'ai lancé firebug sur la page karya et il me semble que mes styles sont assez similaires mais il doit manquer quelque chose comme par exemple je n'ai pas encore de classe readmore pour le bouton... donc dans un premier temps un bouton vert fera l'affaire.

merci d'avance

mon code :

Code:

1
2
3
4
5
6
7
8
<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="li 36-small" src="images/lettres_info/li_36-small.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>

Avec la propriété display table vous avez un résultat correct:
-en enlevant le float sur l'image
-en changeant l'ordre des blocs
Testé avec firebug...;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="content clearfix"> <ul> <li>Moving of a part of the Karnali house to Simikot.</li> <li>Bijae returns to his parents, in Humla.</li> <li>Press review - Actions in France.</li> <li>General assembly of Kar...he plateau des Glières.</li> </ul> <p> <img width="180" height="254" src="images/lettres_info/li_36-small.jpg" alt="li 36-small"> </p> <div class="box-download width50"> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 .content.clearfix { display: table; } { .content.clearfix p img, .content.clearfix > ul { display: table-cell; } .box-download.width50 { display: table-row; }
A vous de renommer pertinemment vos DIV et de donner une largeur plus grande à votre conteneur(content) non?

17/03/2013, 13h54
ml1234

merci pour le code
puis-je te demander de remplacer le code css par du code dans le html car je ne suis pas encore en mesure d'ajouter des classes,... à un thème joomla (ici yootheme micasa)

je ne vois pas le bouton "download" avec son lien dans ton code

note :
tu as compris ce qui n'allait pas dans mon code ???

merci beaucoup
marc
23/03/2013, 00h18
§Gama§

dans le html, tu peux rajouter entre les balises <head> et </head>
une ligne: <link rel="stylesheet" type="text/css" href="nomdefichier.css">

ou tu mets directement le code entre un <style> et un </style>
23/03/2013, 10h10
ml1234

merci mais je sais cela.
j'utilise des classes, des fichiers css dans dreamweaver...

mais ici je démarre en joomla et j'ai un éditeur jce qui a une icone html pour entrer du code html pour le contenu de l'article.
cela m'arrangerait donc d'avoir le code sur les mêmes lignes que les p, les div,...
je peux aussi faire appel à des classes mais je n'ai pas encore bien compris dans quel css aller les écrire et comment préciser que cette classe sera utilisée par les article du type agenda qui auront le texte à gauche et l'image à droite avec le bouton download en dessous

donc commençons par le début :
obtenir le même résultat que sur :
http://www.karya.fr/newsletters/114-newsletter-36.html
avec du "code en ligne"

franchement quand je regarde le code firebug et les classes cela a l'air tout con mais je n'y arrive pas :-(

merci
marc
23/03/2013, 10h34
Candygirl

Hello,

Tout d'abord pour ton bouton, ton problème vient qu'en plus d'avoir fait "flotter" ton div à droite, tu fais aussi "flotter" l'image. Une raison particulière à cela ? Un élément flottant voit son contenu s'écouler en dehors du flux. Ton bouton download commence donc là ou débute le flux normal d'où ton problème de couleur.

Commence pas supprimer ton float:rightde ton image.

Pour ton autre problème, dans le site que tu donnes en exemple, le texte passe pareillement en dessous de l'image s'il est assez long. Si tu veux l'éviter, tu peux, soit:

- jouer avec une propriété qui crèe un nouveau contexte de formatage
Avantage: on s'affranchit de la largeur de la colonne de droite
Point "discutable": on détourne l'utilisation d'une propriété de sa fonction de base pour exploiter l'effet qu'elle induit

- jouer avec un margin-right de la largeur de ta colonne de droite.

Dans ton cas l'idéal serait d'ajouter genre un overflow:auto sur un contenur englobant ta partie de gauche. Si tu ne peux changer l'html tu n'as guère le choix que de passer par l'ajout d'un margin-right de 140px sur chacun des éléments concernés... (à voir selon ta structure quel sélecteur permettrait de les cibler au mieux)
23/03/2013, 11h09
ml1234

merci
j'ai regardé karya sur firebug et il indique float right sur le div qui contient l'image et le bouton puis float right de l'image dans ce div.
l'idée est de pousser l'image et le bouton à l'extrême droite de la place disponible et d'aligner le texte à gauche

si tu le conseilles j'essayerai d'enlever ces float mais il me semble que dans jce si j'insère une image à droite avec texte autour elle est aussi float right ?

où dois-je mettre le margin-right ?
peut-on imaginer des <br> sous l'image pour allonger la hauteur de la partie droite pour forcer le texte de gauche à rester à gauche ?

merci
marc
23/03/2013, 11h43
Candygirl

Sur le site que tu prends en exemple il y a aussi, en plus, un float:right sur le p qui englobe le bouton. C'est un peu lourd... Après, tout dépend des contraintes / applications.

Le margin-right de 140 serait à appliquer sur tous les éléments qui doivent rester à droite. Tes p dans ton exemple.

Citation:

Envoyé par ml1234

peut-on imaginer des <br> sous l'image pour allonger la hauteur de la partie droite pour forcer le texte de gauche à rester à gauche ?

Non. C'est très moche et, de toute manière, tu n'as aucune idée du nombre que tu devrais en mettre puisque cela dépend de la taille des caractères (que tu ne maîtrises pas).