28172 sujets

CSS et mise en forme, CSS3

[resolu]Problème avec un Float dans une colonne central.

Voici une copie d'ecran de mon problème
http://img398.imageshack.us/img398/9735/mywebvh5.th.jpg

Dans la colonne central j'aimerais que chaque news est une image aligné a gauche. et quelques soit la longueur de la news que la ligne qui commence part "Publié dans..." soit toujours en dessous.
Le problème c'est que si j'utilise un clear et bien ça descend la ligne "Publié dans..." tout en bas des colonnes de gauche et droite. Ce qui peut faire des tres grand espace dans certain cas. comment puis-je faire pour que la ligne "Publié dans..." ne soit plus affecté part le float ?

Merci d'avance

chaque news a le code html suivant

<!-- START POST -->
<hr>
<div class="post" id="post-{id}" >
	<div class="titlepost">
		<h2>
			<a href="index.php?Mod={_Mod}&Id={id}" rel="bookmark" title="Permanent Link to {title}">{title}</a>
		</h2>
	</div>
	<div class="infopost">
		<small>{date} by {user} </small>
		<!-- START ADMINPOST -->
			[<a href="index.php?Mod={_Mod}&Act=admin&Tsk=edit&Id={id}&Back=main&p={currentpage}">Edit</a>] [<a href="index.php?Mod={_Mod}&Act=admin&Tsk=delete&Id={id}&Back=main&p={currentpage}">Supprimer</a>]
		<!-- END ADMINPOST -->
	</div>
	<div class="entrypost">
		<!-- START IMGPOST -->
			<img src="modules/forum/icons/{icon}" border="0"  alt="test" class="iconpost" width="128"/>
		<!-- END IMGPOST --><br/>
		<span>{content}<br/>
		<!-- START LOOK -->
			<a href="index.php?Mod={_Mod}&Id={id}">Lire la suite&nbsp;&raquo;</a>
		<!-- END LOOK --></span>
	</div>
</div>
	<div class="postmetadata">
		Publié dans <a href="index.php?Mod={_Mod}&c={c}" title="Voir tous les articles dans {Category}" rel="category tag">{Category}</a> | 
		Pour <a href="index.php?Mod={_Mod}&g={g}" title="Voir tous les articles du group {group}">{group} </a> |
		<a href="index.php?Mod=forum&m={id}#comments" title="Commentaires pour {title}">{nb_answer} commentaires dans le forum</a> |
		<a href="index.php?Mod=forum&Act=info&s={id}&BckMod={_Mod}">Vu {nb_view} fois</a>
	 </div>

<!-- END POST -->


et le code css pour les news

/* + -----------------------------------------------------
	Styles appliqués au Module Blog
+ ----------------------------------------------------- */
.post {

	}

.titlepost {
}

.infopost{
}

.entrypost span {
	text-align: justify;
}

.iconpost{
	float:left;
}
.postmetadata {
	display:block;
	width:100%;
}

Modifié par thyphoon (04 May 2008 - 14:55)
Il faut que tu imbriques tous les blocs qui doivent aller dans la colonne centrale dans un div qui fait cette colonne.

Par exemple:

<div>
 <p style="float: left; width: 30%;">
  blabla
 </p>
 <p style="clear: both;">
  blabla....
 </p>
</div>


En gros: Tu précises les colonnes, puis ce qu'il y a dedans, dans les divs concernés Smiley smile
[quote=Lpu8er]Il faut que tu imbriques tous les blocs qui doivent aller dans la colonne centrale dans un div qui fait cette colonne.

Par exemple:

<div>

En gros: Tu précises les colonnes, puis ce qu'il y a dedans, dans les divs concernés [smile][/quote]
 <p style="float: left; width: 30%;">
  blabla
 </p>
 <p style="clear: both;">
  blabla....
 </p>
</div>


Merci beaucoup mais helas ça ne fonctionne pas... enfin si ça fonctionne mais la ligne avec le clear:both se retrouve en bas de la colone de gauche ...
voir cette image
http://img108.imageshack.us/img108/4938/mywebpw5.th.jpg

Une autre idée ?
Normalement, cela fonctionne si l'imbrication est bien effectuée. Pour ce cas, on a un shéma du style:

<div id="corps">
 <div id="colonne_de_gauche">
  Colonne de gauche...
 </div>
 <div id="colonne_centrale">
  <div id="image_et_texte">
   <p id="image">
    <img src="..." alt="..." />
   </p>
   <p id="texte_du_haut">
    blabla... Lire la suite
   </p>
   <p style="clear: both;">
    Publié dans...
   </p>
  </div>
 </div>
 <div id="colonne_de_droite">
  Colonne de droite
 </div>
</div>


En espérant que tu voies ce que je veux dire.
J'ai mis des divs pour repérer où va chaque chose.
Vérifies également si tu n'as pas un block qui "en fait sauter un autre" (non-respect des règles d'imbrication, comme un div dans un p, voire un bloc dans un inline)...

EDIT suite à la dernière réponse:
Ah ouais, connaissais pas, ça... J'ai toujours réussi à résoudre ce problème en imbricant comme ci-dessus, mais le truc du contexte de formatage, je connaissais pas... Vais regarder Smiley smile
Modifié par Lpu8er (04 May 2008 - 14:18)
Heyoan a écrit :
Salut thyphoon Smiley cligne ,

ce serait plus facile avec une page en ligne mais ça ressemble bien à un problème de contexte de formatage.

A+

Merci beaucoup j'avais déjà lu ça, mais j'avoue n'avoir pas réussi a mettre les solutions en œuvre...
le lien de ma page en ligne : http://www.thyphoon.com/
j'ai fait des tests mais le plus souvant ça ne change strictement rien :o(
Comme indiqué dans le lien plus haut il suffit de rajouter :
.post { 
     overflow: hidden;
}

et pour IE < 7 :
<!--[ if lt IE 7]> /* sans espace avant le if */
<style type="text/css">

.post {
     height: 1%;
}

</style>
<![ endif]--> /* sans espace avant le endif */

Modifié par Heyoan (04 May 2008 - 14:49)
Heyoan a écrit :
Comme indiqué dans le lien plus haut il suffit de rajouter :
.post { 
     overflow: hidden;
}

et pour IE < 7 :
<!--[ if lt IE 7]> /* sans espace avant le if */
<style type="text/css">

.post {
     height: 1%;
}

</style>
<![ endif]--> /* sans espace avant le endif */


Fabuleux .... !!!
Smiley biggrin j'avais bien essayer le fameux overflow:hidden; mais je le mettais pas là ou il fallait Smiley biggol
Un grand merci
Sujet clos
Aller à