28221 sujets

CSS et mise en forme, CSS3

[Résolu] "Forcer" un float à rester dans son conteneur

Bonsoir,
bon mon probleme n'en est pas vraiment un puisque je l'ai résolu mais la solution ne me plait pas.
Donc sur cette page par exemple j'ai une liste d'articles avec devant un logo flottant dont on ne connait pas la taille. 

<!-- Articles de la rubrique -->
<ul class="listeArticle">
	<li style="min-height:96px;">
		<a href="Location-La-Rochelle" title="Site de location saisonnière à La Rochelle."><img src="IMG/arton12.png"  alt="logo de l'article" />Location à La Rochelle, vacances d&#8217;été</a>
		<p class="spip">Site de location saisonnière à La Rochelle.</p>
				vendredi 6 mai 2005
	</li>
	<li style="min-height:96px;">
		<a href="PrestigeSelect" title="PrestigeSelect vous propose de découvrir des lieux et hébergements de luxe et d'exclusivité."><img src="IMG/arton6.png"  alt="logo de l'article" />PrestigeSelect</a>
		<p class="spip">PrestigeSelect vous propose de découvrir des lieux et hébergements de luxe et d&#8217;exclusivité.</p>
		mercredi 16 mars 2005
	</li>
...			
</ul>
<!-- Fin des articles -->


et le css de ce bloc :

.listeArticle{
  list-style : none;
  padding : 0 0 5px;
  margin : 0;
}
.listeArticle li{
  border-left : solid #bfbaba 1pt;
  border-bottom : solid #bfbaba 1pt;
  margin : 0 0 5px;
  padding-left : 5px;
}
.listeArticle li img{
  float : left;
  margin-right : 5px;
}
.listeArticle li a{
	text-align : left;
	font-size: 120%;
	font-weight: bold;
	float : none;
	margin : 1.5em 0 0 0;
}


Logiquement le logo sort du flux, dépasse du bloc < li > conteneur et détruit la mise en page des blocs suivants (sauf sous IE mais c'est pas normal).

Donc j'ai résolu ça en déterminant la hauteur du logo en php (getimagesize) et en ajoutant style="min-height : (hauteur trouvée)px;" à chaque < li >
mais ça ne me plait pas trop, j'aurais voulu faire ça qu'en CSS.
Quelqu'un voit-il une solution ?

Mon but est de garder le même effet : si le texte est plus grand que le logo, il passe en dessous (pas une colonne logo et une texte).

Merci Smiley ravi
Modifié par Shagshag (02 Apr 2007 - 14:17)
Bonjour,
Le lien fonctionne chez moi mais tu peux passer par la racine du site et aller dans la rubrique Portfolio ou une autre c'est pareil partout.

Oui j'ai regardé dans la FAQ et les solution avec "clear" et "overflow:auto" ne fonctionnent pas.
"clear" repousse bien les logo mais pas les conteneurs (normal) et "overflow:auto" affiche des barres de défilement.

En explorant plus loin les liens proposés je suis tombé ici qui affiche utiliser overflow:auto mais dans le code c'est overflow:hidden Smiley confus . Et cette solution marche.

donc mon nouveau CSS

.contenu .listeArticle li{
  border-left : solid #bfbaba 1pt;
  border-bottom : solid #bfbaba 1pt;
  margin : 0 0 5px;
  padding-left : 5px;
  [b]width : 100%;
  overflow:hidden;[/b]
}

le "width : 100%;" est pour IE sinon ça ne marche pas (pourquoi je ne sais pas)
Enfin d'après Mediabox
a écrit :
"overflow:hidden" : Contenu rogné. Sans possibilité de voir la partie cachée.

donc c'est pas logique. Quelqu'un sait pourquoi ça marche ?

Mais problème résolu. Merci beaucoup Smiley biggrin
Modifié par Shagshag (02 Apr 2007 - 14:17)
Ok rien à dire, j'aurais du pousser un peu plus loin les recherches. En même temps ça fait longtemps que j'avais envie de poser une question sur ce forum. J'ai l'impression d'être un initié maintenant Smiley lol .

Ca fait un peu "bidouille" un bloc vide pour arranger la mise en page. Non ?
On s'eloigne de la séparation information/mise en forme.
Administrateur
Shagshag a écrit :

Ca fait un peu "bidouille" un bloc vide pour arranger la mise en page. Non ?
On s'eloigne de la séparation information/mise en forme.

En fait, ce n'est pas un bloc vide, c'est un séparateur (balise <hr />), qui d'ailleurs ne peut qu'être vide.
Donc dans ce cas, il remplit assez bien son rôle de séparateur.

Mais c'est vrai que cela implique de rajouter un élément dans la structure HTML.

On peut le faire bien plus joliement en utilisant la pseudo-classe "after", comme l'explique très bien Nanoum : http://www.nanoum.net/blog/5_before_et_after.html
Seul soucis : IE ne reconnaît pas (encore?) cette pseudo-classe Smiley ohwell
Sujet clos
Aller à