28220 sujets

CSS et mise en forme, CSS3

Bonjour voila j'ai tenté de fiare une présentation pour les news de mon site mais j'ai un problème :s j'utilise un float right a l'interieur de mon cadre de news pour afficher les informations relatives a la news (Auteur Source, nbr commentaires etc etc) mais le problème c'est que si ma news est trop courte le bas du cadre de mon div contenant la news passe par dessus ce "float right" :s et je sais pas trop comment résoudre ce problème :s

VOici mes sources :


#news
	{
	padding: 10px;
	margin-bottom: 50px;
	border: 1px solid #AFBDC9;
	background: #ffffff;
	}

#news p
	{
	text-indent: 40px;
	}
	
.titre_news
	{
	margin-top: 20px;
	padding: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #669900;
	border: 1px solid #AFBDC9;
	border-bottom: 0;
	background: #EBEEF3;
	}

.infos_news
	{
	float: right;
	margin: 5px;
	border-left: 5px solid #AFBDC9;
	background: #EBEEF3;
	}


Et le Xhtml


<h2 class="titre_news">Bienvenue</h2>

<div id="news">
<table class="infos_news">
<tr>
	<th>Auteur:</th>
	<td>Moha</td>
</tr>
<tr>
	<th>Date:</th>
	<td>01/01/05</td>
</tr>
<tr>
	<th>Source:</th>
	<td><a href="http://www.monsite.com">source</a></td>
</tr>
<tr>
	<th>Comm:</th>
	<td><a href="#">2</a></td>
</tr>
</table>

<p class="contenu_news">lalalala voici ma news</p>

</div>


Voici ce que m'affiche actuelement Firefox et Ie, (Le float: right concerne le petit cadre avec l'auteur la source etc etc) :
http://www.222.free.fr/pasbon.jpg

Voici ce que j'aimerais avoir :
http://www.222.free.fr/bon.jpg

Edit : Oui effectivement je suis nouveau mais ce matin en postant ce topic je n'ai pas vriament eu le temps de lire les règles et j'ai posté ce topic en esperant avoir une réponse en rentrant ce soir lol mais c'est peine perdu lol.
Modifié par fieldset (13 May 2005 - 18:39)
Bonjour fieldset Smiley smile et bienvenue

A la lecture de ton message, je suppose que tu n'as pas lu les règles du forum

Tu pourras ainsi modifier ton message en plaçant ton code dans les balises "Code" pour une meilleure lecture des échanges. Smiley cligne
Et si tu pouvais fournir un lien vers la page, ce serait mieux car il semble que tu utilises un langage serveur (que je n'arrive pas à déterminer d'ailleurs, ça ressemble à du PHP mais sans les balises <?php ... ?>) et il nous est impossible de reproduire ta page.

C'est plus facile de comprendre un code quand on le voit fonctionner Smiley cligne
En positionnant le bloc en float, il sort du flux normal et sa hauteur n'est plus prise en compte par le conteneur pour calculer sa propre hauteur.

Une solution serait d'ajouter, à la fin du conteneur, un calque vide (ou un <hr> invisible) ayant comme propriété
clear: both;
il y a des tutos ici sur la façon d'aligner la hauteur de plusieurs colonnes...
Smiley smile
Modifié par Ricou13 (13 May 2005 - 18:28)
Oui donc justement j'ai pensé a cette solution mais en mettant un calque vide ayant comme propriété clear: both; voici ce que j'obtient :

(Seulement sous IE, Sur Firefox ya aucun pb le problème est résolu)
http://sertret.free.fr/pasbon2.jpg

Et je ne peux pas lire le début de la news :s
Modifié par fieldset (19 May 2008 - 12:56)
Nan je suis dsl tout est sur mon pc mais je vais vous présentez sa dans une petite page Smiley smile je m'en occupe la Smiley smile

Sinon j'ai trouvé une piste je crois que ce problème est causé par mon tableau car quand je l'enleve et que je met autre chose en float: right il n'y a aucun problème Smiley smile

Donc je crois qu'on peut chercher de ce côté la lol Smiley smile
Modifié par fieldset (19 May 2008 - 12:56)