28220 sujets

CSS et mise en forme, CSS3

[résolu] Style "float" et mise en page fluide

Bonjour,

Je voudrais faire une mise en page fluide pour être aussi bien consultable en 800, 1024 ou 1260 pixels de large. Jusque là je n'ai pas de problème.

Où ça se complique, c'est que j'aimerais pouvoir présenter plusieurs div les uns au dessus des autres. Chaque div contenant : une image à gauche, suivie d'une "definition list".

Ce qui donne : voir la page de test

Si vous utilisez IE vous n'aurez aucun problème à redimensionner sans avoir de problème particulier.

En revanche avec Firefox ou Opéra, vous pourrez observez que bien que le texte soit fluide et se place correctement, les images restent fixes - ce qui est normal pour des images flottantes, puisqu'elles sont hors du flux.

J'aimerais obtenir la même chose dans Firefox que dans IE.
Comment faire pour obtenir une mise en page similaire et que l'image suive le texte ?

code CSS :


div.detail{
	width: 100%;
}
div.detail img{
	clear:left;
	float:left;
	margin-right:20px;
	border:0;
}
div.detail a{
	display:block;
	font-weight:0.7em;
	margin-top:10px;
}
div.detail div{
	width:100%
}
dl{
	height:100px;	
}
dt{
	font:bold 0.8em Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
	color:#4E758D;
}
.part1{
	font:normal 0.7em Verdana, Arial, Helvetica, sans-serif;
	color:#333;
	}
.part2{
	font:normal 0.7em Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	}
.part3{
	font:oblique normal 0.7em Verdana, Arial, Helvetica, sans-serif;
	color:#999;
}


Code HTML (code d'un div)


<div class="detail">			
	<dl><a href="#"><img src="images/autoformation.jpg" width="108" height="83"></a>
		<dt>Titre</dt>
		<dd class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lobortis diam vel leo.
		 Suspendisse leo turpis, egestas sed, volutpat id. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		 Maecenas lobortis diam vel leo. Suspendisse leo turpis, egestas sed, volutpat id.
		 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lobortis diam vel leo. Suspendisse leo turpis,
		 egestas sed, volutpat id. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		 Maecenas lobortis diam vel leo. Suspendisse leo turpis, egestas sed, volutpat id.</dd>
		<dd class="part2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam vestibulum odio nec mi. Duis ac.
		 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam vestibulum odio nec mi. Duis ac.</dd>
		<dd class="part3">Pellentesque tellus. Donec eget nulla. Nullam vestibulum odio nec mi. Duis ac.</dd>
		<dd class="part3">Pellentesque tellus. Donec eget nulla.</dd>	
	</dl>						
</div>


J'ai essayé de mettre la hauteur du dl en pourcentage, ce qui me permet d'arriver au résultat (en partie) désiré, mais dans ce cas les dl ne viennent plus se positionner en face de chaque image

Merci pour vos éventuelles solutions.

Eric
Modifié par EricLB (24 Nov 2005 - 15:44)
Salut,

Le pb n'a rien a voir avec la hauteur du div ou du dl. Voilà ce que j'ai fait (et qui marche) :

1) tu as un problème dans ta structure : le lien avec l'image ne peut pas être dans le dl. Celui-ci n'admet que des dt et dd comme contenu. Met le lien directement dans le div.
2) Met le lien (et non l'image) en float. Et donne une largeur au lien.
3) Donne au dl une marge gauche égale à largeur de l'image + marge à droite de l'image
4) Met le clear sur le div et non sur l'image

Voilà ça marche Smiley cligne
yyoupla a écrit :
Bonjour,

est ce que cet article de la FAQ peut répondre à ta question ?


Merci yyoupla ! Je ne savais plus où chercher.
Je me suis inspiré des différents articles sur openweb pour obtenir ce résultat :

Page rectifiée

Comme tu peux le voir ça marche !
Le problème venait du texte qui dépassait de la hauteur du dl.
En ajoutant :
hr {
  clear:both;
  visibility:hidden;
}

Dans la feuille de style et <hr /> avant la balise </dl> le pb est résolu.
Au passage les <div class="detail"> ne servent plus à rien, je les ai donc enlevés, ce qui fait :

CSS:

dl{
	width: 100%;
	margin-bottom: 10px;
}
dl img{
	clear:left;
	float:left;
	margin-right:20px;
	border:0;
}
dl a{
	display:block;
	font-weight:0.7em;	
}
dt{
	font:bold 0.8em Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
	color:#4E758D;
}
.part1{
	font:normal 0.7em Verdana, Arial, Helvetica, sans-serif;
	color:#333;
	}
.part2{
	font:normal 0.7em Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	}
.part3{
	font:oblique normal 0.7em Verdana, Arial, Helvetica, sans-serif;
	color:#999;
}
hr {
  clear:both;
  visibility:hidden;
}


HTML:

<dl><a href="#"><img src="images/autoformation.jpg" width="108" height="83"></a>
		<dt>Titre</dt>
		<dd class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lobortis diam vel leo.
		 Suspendisse leo turpis, egestas sed, volutpat id. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		 Maecenas lobortis diam vel leo. Suspendisse leo turpis, egestas sed, volutpat id.
		 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lobortis diam vel leo. Suspendisse leo turpis,
		 egestas sed, volutpat id. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		 Maecenas lobortis diam vel leo. Suspendisse leo turpis, egestas sed, volutpat id.</dd>
		<dd class="part2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam vestibulum odio nec mi. Duis ac.
		 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam vestibulum odio nec mi. Duis ac.</dd>
		<dd class="part3">Pellentesque tellus. Donec eget nulla. Nullam vestibulum odio nec mi. Duis ac.</dd>
		<dd class="part3">Pellentesque tellus. Donec eget nulla.</dd>	
	<hr />
	</dl>


Encore merci pour ta résponse !

Eric
Marvin Le Rouge a écrit :
Salut,

Le pb n'a rien a voir avec la hauteur du div ou du dl. Voilà ce que j'ai fait (et qui marche) :

1) tu as un problème dans ta structure : le lien avec l'image ne peut pas être dans le dl. Celui-ci n'admet que des dt et dd comme contenu. Met le lien directement dans le div.
2) Met le lien (et non l'image) en float. Et donne une largeur au lien.
3) Donne au dl une marge gauche égale à largeur de l'image + marge à droite de l'image
4) Met le clear sur le div et non sur l'image

Voilà ça marche Smiley cligne


Bonjour Marvin, merci pour ta réponse que je vais essayer pour voir la différence avec celle de mon précédent post.
Pour prolonger la discussion :
1) pourquoi le lien avec l'image ne peut-être contenu dans la balise <dl> ? Sauf erreur de ma part <dl> est une balise de type block et donc peut accepter tout autre balise, non ?
Dans la solution inspirée par les articles d'openweb, celà ne semble pas poser problème et le code est réduit à son minimum.

2) Dans le cas présent, mettre la balise <a> en float me parait une bonne idée, mais j'ai d'autres cas similaires où l'image illustre le texte et ne renvoie pas sur une page ou ancre dans la page et n'a donc pas de lien. Je pourrais mettre un lien fictif, mais ça ne ferait qu'alourdir la page.

Que penses tu de la solution citée dans mon post précédent ?

Eric
yyoupla a écrit :
Merci Marvin Le Rouge aussi pour la structure dl/dt/dd parfois confuse.
EricLB, un petit [Résolu] ? merci Smiley cligne


Pas d'impatience, yyoupla ! Juste le temps d'essayer la méthode de Marvin Le Rouge et de me prendre un break déjeuner et me voilà de nouveau pour mettre un point final à ce sujet !

merci Marvin pour ta solution qui me semble meilleure que la mienne, je l'adopte !

Eric
Sujet clos
Aller à