28220 sujets

CSS et mise en forme, CSS3

[Résolu]Images flottantes qui (ne) débordent (plus)

Salut,

J'ai dans des div (plus précisément des "dl") du texte et des images flottantes. Mais lorsque l'image est plus haute que le texte, elle déborde du cadre du div (voir l'image jointe).

Comment peut-on faire pour que le div enveloppant soit dimensionné en fonction de l'image flottante qu'il contient ?

Voici mon code :


<dl id='actu2' class='Actu'>
<dt class='dates' onClick="AfficheMasque('actu2');">Saturday 28 January 2006</dt>
<dd>
<img class='ImageDroite' src='../fichiers/agenda_2.gif'>
blablabla
</dd>
</dl>


et mes styles :


dl.Actu {
	background-color: #3B6FC8;
	border: 2px outset #0066FF;
	margin: 5px;
	clear: both;
}

.ImageDroite {
	float: right;
	margin-left: 10px;
	padding-left: 10px;
	text-align: center;
}


Merci d'avance

Tonio upload/805-exemple.jpg
Modifié par Tonio (04 Jan 2006 - 10:38)
alan
pourquoi tu réponds à une question par une question ?????????
Si tu as le meme probleme, attends qu'on réponde au 1er post Smiley smile
Du calme jeunes gens, c'étais juste un lien franzen, comme beaucoup de monde malheureusement, Tonio n'a pas regardé dans la FAQ, cette FAQ réponds à plus de 30 % des questions. Dommages...
Merci pour l'info.

J'ai peu l'habitude de venir chez vous, j'ignorais que la FAQ était aussi riche.

Cela dit, maintenant que vous en parlez, je me souviens avoir vu la page d'openweb.eu.org qui en parle.

Juste un détail, j'ai utilisé la techniqe du <hr> qui me rajoute un espace avant la fermeture du bloc (même avec une hauteur à 0px). En mettant une marge négative, ça va bien sous FF, mais ça laisse IE complètement froid. Une idée ?

Quant à la technique du overflow:auto, elle marche sous FF mais pas sous IE. Dommage, elle avait l'air sympathique.

Allez, bonne nuit et bise aux filles.

Tonio
Resalut Tonio,

C'est vrai que dans les tutos que j'ai lus, ils disent de mettre un <hr> ou un <div>&nbsp; </div> avec en style "clear:both". A vrai dire je ne sais pas pourquoi, car ça ajoute de l'espace ..

A mon avis le mieux est d'appliquer la class à un <br />, comme ça il n'y a aucun problème d'espace indésirable ! Ca marche sans problème avec FF, IE, Safari, Netscape, opera (j'ai même essayé la version 5..), Konqueror...
<head>
<style type="text/css">
.spacer {
	clear: both;
}
</style>
</head>
<body>
<div class=""><img src="" alt="" width="" height="" align=""/> blabla <br class="spacer" /></div>
</body>

Modifié par Alan (03 Jan 2006 - 15:02)
Salut à tous,

La technique du spacer marche bien, depuis que je l'ai introduite (quelque soit la variante, sauf pour l'appliquer au <BR />), le conteneur contient bien toute l'image.

En revanche, sous IE6 (sous XP Home), j'ai un effet de bord plutôt surprenant et très gênant.

Je vous invite à regarder la page de test suivante http://merignac-catho33.cef.fr/nouveau/pages/tmp.htm et de faire défiler le contenu avec l'ascenseur. Le texte apparaît, disparaît, les titres aussi...

Mon code ressemble à ça (répété pour chaque information) :

<dl class='Actu'>
<dt class='dates' >du 19 January 2006 au 21 January 2006</dt>
<dt class='titre'>mon titre</dt>
<dt class='lieu'>mon lieu</dt>
<dd><img class='ImageDroite' src='../../...gif' width='..' height='..'>
mon blabla
<hr class='spacer'>
</dd>
</dl>
<dl class='Actu'>


avec ImageDroite en float: right.

Si quelqu'un peut m'expliquer, ou alors, sous IE6, les <dl> cohabitent mal avec les float ou j'en perds mon latin...
Smiley fache Smiley fache Smiley fache

Merci d'avance

Tonio
Salut Tonio,

J'avais posé la même question que toi il y a qq jours concernant ce type de défaut avec IE6. On m'avait répondu que c'était un bug de haslayout qui pouvait éventuellement se régler par un simple zoom 1.

Par ailleurs la class "spacer" appliquée à la balise <br> marche normalement bien avec IE, et si ça ne marche pas, c'est peut être aussi lié à ce bug de haslayout.

Essaie d'ajouter à ".Actu dd" un zoom: 1;
.Actu dd {
	border: 1px inset #0066FF;
	background-image: url(../images/FondMenus.gif);
	background-repeat: repeat;
	background-position: left;
	margin: 5px;
	padding: 3px;
	font-size: 10px !important;
	overflow: auto;
	zoom: 1;
}


Ca devrait résoudre ce problème.
Et si ça marche, peux tu essayer de transformer quelque uns de tes <hr class="spacer" /> en <br class="spacer" /> pour voir ?

A+
Modifié par Alan (04 Jan 2006 - 00:33)
Super,

Merci Alan. Le seul détail est que ça me raccourcit la marge basse de mon <dl>, mais ça ne devrait pas êter difficile à résoudre.

Avec la combinaison zoom:1; et <br class="spacer" />, ça marche impec, alors que sans le zoom, le <br> ne marchait pas.

Merci tout plein. Tu peux voir le résultat à l'adresse http://merignac-catho33.cef.fr/nouveau/.

Bonne journée,

A+

Au fait, comment fait-on pour déclarer un pb résolu ?
Modifié par Tonio (04 Jan 2006 - 08:54)
Bonjour,

Manque de temps. Rapidement donc: attention à l'éventuelle compatibilité avec IE5.0 Win, qui n'implémente pas la propriété zoom.
Bonjour,
En me rappellant le conditionnel de ton message ("ou un innocent zoom: 1 si IE5.0 Win n'est pas touché par le bug"), j'avais testé sa page avec IE5, et l'affichage était normal.
D'ailleurs déjà mon problème ne touchait qu'IE 6.

Tonio, il suffit juste que tu édites ton premier message en ajoutant [résolu] dans le titre.
Sujet clos
Aller à