News en php avec image flottante

Résolu/Fermé
Arpheus
Messages postés
40
Date d'inscription
jeudi 4 décembre 2008
Statut
Membre
Dernière intervention
29 mars 2010
- 1 sept. 2009 à 10:05
Arpheus
Messages postés
40
Date d'inscription
jeudi 4 décembre 2008
Statut
Membre
Dernière intervention
29 mars 2010
- 2 sept. 2009 à 14:06
Bonjour,
Je suis en train de développer un site personnel en XHTML/CSS/PHP/MySQL, et j'ai décidé il y a peu d'y intégrer un système de news fonctionnant avec une base de donnée.
Une interface me permet d'entrer un titre, du texte, et l'url d'une image, le message s'enregistre, et ma page affiche automatiquement les billets.

Le problème que je rencontre se situe dans l'affichage de l'image. Je lui ai attribué une propriété float : right, mais dès lors le cadre de la news ne s'adapte plus à la taille de l'image. Je joint le code qui me permet d'afficher les news. Quelqu'un a t'il une astuce pour adapter la taille de mon cadre à mon image ?

<?php 
	mysql_connect("serveur", "ID", "mdp") ;
	mysql_select_db("bdd");
	$resp = mysql_query("SELECT * FROM billets ORDER BY ID DESC LIMIT 0, 4") or die('Erreur sur la requête : '.$sql.'<br/>'.mysql_error());
	while ($aff = mysql_fetch_array($resp, MYSQL_ASSOC)) { ?>
	<div class="post">
		<img src="bordure-haute.png" alt="bordure" /><br />
		*<img src="img/<?php echo $aff['Date'].'.'.$aff['img']; ?>" alt="" class="accompagnement" />*
		<?php echo date('d/m/Y', $aff['Date']); ?>   <strong><?php echo $aff['Titre']; ?></strong><br />
		<p><em><?php echo $aff['Texte']; ?></em></p><br />
	</div>
	<?php }
	mysql_close() ;
?>


L'image qui pose problème est entourée avec des * pour que vous la reconnaissiez.

Je vous ajoute un petit bout de CSS correpondant :

.post {
	width : 860px ;
	margin : 20px 10px ;
	height : auto ;
	background-image : url("bordure-basse.png") ;
	background-position : left bottom ;
	background-repeat : no-repeat ;
	padding-bottom : 20px ;
	padding-left : 20px ;
	padding-right : 10px ;
}
.post .accompagnement {
	float : right ;
}

Merci d'avance pour vos éventuelles réponses.

Arpheus

1 réponse

Arpheus
Messages postés
40
Date d'inscription
jeudi 4 décembre 2008
Statut
Membre
Dernière intervention
29 mars 2010
9
2 sept. 2009 à 14:06
J'ai fini par trouver une méthode visiblement controversée car un peu bidouille, mais qui au moins fonctionne : spacer.
Si quelqu'un cherche la même chose que moi, je la décrit :

à la fin du contenu du cadre, mettre un
<div class="spacer"> </div>
, le div contenant un espace insécable.
Dans les propriétés CSS, un
.spacer {
      clear : both ;
}

finit le travail, et permet d'ajuster son cadre à l'image en float.
Voilou
0