28216 sujets

CSS et mise en forme, CSS3

[Résolu] Forcer un retour à la ligne sur des images

Bonjour,

J'ai un p'tit souci.
Je souhaite aligner des images à droite dans un div, jusqu'ici pas de problème avec un text-align: right;. Mais ces images sont de largeur variable et ne remplissent pas forcément le div donc j'ai parfois deux images sur la même ligne. J'ai essayé de mettre un hr invisible pour forcer le retour à la ligne mais cela met trop d'espace entre mes images, idem avec un br, et clear: both ne change rien du tout à l'affichage. Quelqu'un aurait une idée ? Smiley decu

Merci d'avance.
Modifié par Dojoji (30 Mar 2005 - 18:38)
euh... Smiley confused <br /> peut-être ? Smiley murf

Sinon faudra être plus explicite...

Dans quel contexte ?

Une liste d'image alignée à droite serait peut-être adaptée...

<ul style="text-align: right;">
 <li><img src="" ... /></li>
 <li><img src="" ... /></li>
 <li><img src="" ... /></li>
 <li><img src="" ... /></li>
</ul>

Faut voir le rendu sans CSS pour faire un choix éclairé !
Arf j'ai fini par trouver, si ça peut servir à quelqu'un :

#mon_div img {
	clear: both;
	float: right;
}


Merci pour vos réponses.
Modifié par Dojoji (30 Mar 2005 - 11:13)
Administrateur
Dojoji a écrit :
Arf j'ai fini par trouver, si ça peut servir à quelqu'un :

#mon_div img {
	clear: both;
	float: right;
}


Merci pour vos réponses.

Tu te compliques la vie pour un résultat qui aurait été le même avec le code de clb56 Smiley cligne

- Float transforme l'élément en bloc
- clear fait passer l'élément sous les autres

Bref, il est bien plus simple de faire un display bloc qui cumulera ces deux effets.
Celà dit, la question étant résolue d'un point de vue css, je t'invite à repenser ton choix à la base, c'est à dire du point de vue du code html.

Pour ce que j'en comprend la situation que tu nous as présentée ressemble à ceci

html

<div>
<img>
<img>
<img>
<img>
</div>


si tel est le cas c'est peu satisfaisant car celà fait "balancé en vrac" (non structuré) et il vaudrait mieux placer chaque image dans une balise block (au passage ça règle ton problème).

A cet égard la remarque de stephan à propos du rendu sans css est extrèmement précieuse.
Raphael a écrit :

Tu te compliques la vie pour un résultat qui aurait été le même avec le code de clb56 Smiley cligne

- Float transforme l'élément en bloc
- clear fait passer l'élément sous les autres

Bref, il est bien plus simple de faire un display bloc qui cumulera ces deux effets.


Ba le problème c'est que :

#mon_div {
	text-align: right;
}

#mon_div img {
	display:block;
}


met bien mes images à la ligne mais ne les aligne pas à droite...

clb56 a écrit :
Celà dit, la question étant résolue d'un point de vue css, je t'invite à repenser ton choix à la base, c'est à dire du point de vue du code html.

Pour ce que j'en comprend la situation que tu nous as présentée ressemble à ceci

html

<div>
<img>
<img>
<img>
<img>
</div>


si tel est le cas c'est peu satisfaisant car celà fait "balancé en vrac" (non structuré) et il vaudrait mieux placer chaque image dans une balise block (au passage ça règle ton problème).

A cet égard la remarque de stephan à propos du rendu sans css est extrèmement précieuse.


Effectivement. Donc...


<div>
<block><img></block>
<block><img></block>
<block><img></block>
</div>


... si je comprends bien ? Mais pour la CSS je ne vois toujours pas. Smiley confus
Modifié par Dojoji (30 Mar 2005 - 13:28)
Dojoji a écrit :


Effectivement. Donc...


<div>
<block><img></block>
<block><img></block>
<block><img></block>
</div>


... si je comprends bien ? Mais pour la CSS je ne vois toujours pas. Smiley confus


Tout simplement 


div {
text-align:right;
}


comme tu l'avais prévu au départ.

++

HTML
-----

<div>
<block><img /></block>
<block><img /></block>
<block><img /></block>
</div>

CSS
----

#div {
	text-align: right;
}

#div block {
	display:block;
}

// ==> Marche sous Firefox pas sous IE (pas de retour à la ligne)


#div img {
	display:block;
}

// ==> Marche sous IE pas sous Firefox (images calées à gauche)


Hum... j'ai raté une marche ? Smiley ohwell
Modifié par Dojoji (30 Mar 2005 - 17:53)
Ah je crois qu'il y a un petit malentendu,

quand je parlais de balise block je parlais de balise type block (comme p ou div). Si cette terminologie ne t'est pas familière le mieu c'est que tu passes par les tutoriels ou la recherche ou la faq ou tout ça ensemble Smiley lol

par exemple 

<div style="text-align:right;">
<p><img></p>
<p><img></p>
<p><img></p>
<p><img></p>
</div>

Modifié par clb56 (30 Mar 2005 - 18:01)
MDR

Smiley rolleyes hum... ba comme ça c'est plus clair, j'ai lu ce tuto sur les balises de type block mais là j'avais pas percuté lol.
Elle était pas belle ma balise block ? J'ai l'air malin maintenant. Smiley biggol Enfin bon après une journée de code, j'avais le cerveau un peu ramollo on va dire...
Bref ça marche, merci.
Modifié par Dojoji (30 Mar 2005 - 18:44)
Pourquoi <p> absolument ??
<div> nan ?
A la limite, je sais même pas si j'en mettrais perso...

<ul> nan ? ça dépend pour quoi c'est faire en fait...
Pas du tout <p> absolument, je suis bien d'accord.

c'est un exemple comme je l'ai précisé

ensuite c'est une question de contexte et de sens de la structuration html.
Sujet clos
Aller à