News en php avec image flottante
Résolu
Arpheus
Messages postés
40
Date d'inscription
Statut
Membre
Dernière intervention
-
Arpheus Messages postés 40 Date d'inscription Statut Membre Dernière intervention -
Arpheus Messages postés 40 Date d'inscription Statut Membre Dernière intervention -
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 ?
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 :
Merci d'avance pour vos éventuelles réponses.
Arpheus
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
A voir également:
- News en php avec image flottante
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Transformer une image en icone - Guide
1 réponse
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
Dans les propriétés CSS, un
finit le travail, et permet d'ajuster son cadre à l'image en float.
Voilou
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