Votre question

Bordure speciale pour une image, perdu dans le code

Tags :
  • Web
  • Programmation
Dernière réponse : dans Programmation
5 Décembre 2009 14:49:46

Hello,
Je n'y trouve pas l'issue, j'aimerai un petit coup de pouce sur ce truc sur lequel je bloque depuis hier.

J'aimerai reproduire ce cadre ombre portée à une image, plus précisément ça > http://demo.wordspop.com/fotofolio/

J'ai donc la page en question qui affiche l'image (plugin pixelpostrss) :

  1. echo "<div class=\"float\" id=\"pixelpostrss\">";
  2. foreach ( $items as $item )
  3. {
  4. if(preg_match('<img src="([^"]*)">', $item['description'], $imgUrlMatches))
  5. {
  6. $imgurl = $imgUrlMatches[1];
  7. $imgurl = str_replace("/images/", "/thumbnails/thumb_", $imgurl);
  8. print "<a href=\"".$item["link"]."\" title=\"".$item["title"]."\">";
  9. print "<p class=\"float\"> <img src=\"$imgurl\" title=\"".$item["title"]."\" />";
  10. print "</a></p>\n";
  11. print $item["title"];
  12. }
  13. ?>
  14. est la photo du jour, blablalbla
  15. <?
  16. }
  17. echo "</div>";
  18. }
  19. } // end if RSS


concernant la bordure et l'ombre, voila ce que j'ai tenté :
ajouter ce code css dans les balises <style> en haut de page

  1. .photostyle {
  2. padding: 5px;
  3. background: #ebebeb;
  4. background: url(images/shadow-left.png) no-repeat left bottom;
  5. background: url(images/shadow-right.png) no-repeat right bottom;
  6. }

puis ajouter le <div> à cette ligne :

  1. print "<p class=\"float\"> <div class=\"photostyle\"><img src=\"$imgurl\" title=\"".$item["title"]."\" /></div>";


mais le resultat n'est pas du tout bon :

Avant:


Après:


C'est pas beau et rien n'a fonctionné, je ne comprends
Si quelqu'un pouvait me donner un coup de main, parce que ça fait déjà une nuit blanche que je galère ^^

EnormeMerci d'avance

Autres pages sur : bordure speciale image perdu code

5 Décembre 2009 22:42:24

Il n'est pas possible de mettre une balise <div> dans une balise <p>. Pour pouvoir t'aider il faudrait que l'on connaisse le code css du reste, et notamment du <p class="float">.

Enfin, je ne pense pas que ce soit d'un padding ton tu ais besoin, mais d'une bordure pour ton image.
m
0
l
6 Décembre 2009 02:05:38

ah ça ne je savais pas, merci.
voici la css de float:

  1. .float
  2. {
  3. float: left ;
  4. padding-right: 10px;
  5. }


:hello: 
m
0
l
Contenus similaires
6 Décembre 2009 05:32:37

problème résolu:)  merci quand même !
m
0
l
a b L Programmation
6 Décembre 2009 19:41:23

ludo260484, donne ta soluce, sait-on jamais, d'autres pourraient en profiter.
Merci.
m
0
l
7 Décembre 2009 03:35:38

Enfait c'éait tout con, le css avec ombre portée s'appliquait sur tout le bloc et non pas sur l'image :) 
m
0
l