Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
#1 05-12-2009 14:53:03
- ludo2604
- Membre
- Inscription : 05-12-2009
- Messages : 1
Bordure speciale pour une image : perdu dans le code !
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 :
foreach ( $items as $item )
{
if(preg_match('<img src="([^"]*)">', $item['description'], $imgUrlMatches))
{
$imgurl = $imgUrlMatches[1];
$imgurl = str_replace("/images/", "/thumbnails/thumb_", $imgurl);
print "<a href=\"".$item["link"]."\" title=\"".$item["title"]."\">";
print "<p class=\"float\"> <img src=\"$imgurl\" title=\"".$item["title"]."\" />";
print "</a></p>\n";
print $item["title"];
}
?>
est la photo du jour, blablalbla
<?
}
echo "</div>";
}
} // 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
padding: 5px;
background: #ebebeb;
background: url(images/shadow-left.png) no-repeat left bottom;
background: url(images/shadow-right.png) no-repeat right bottom;
}
puis ajouter le <div> à cette ligne :
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
Dernière modification par ludo2604 (05-12-2009 17:06:46)
Hors ligne
#2 07-12-2009 14:29:34
- renamed1
- Membre
- Inscription : 13-09-2009
- Messages : 25
Re : Bordure speciale pour une image : perdu dans le code !
Bonjour l'ami,
Je ne vois pas trop ton problème avec ton bous de code à tu une URL de démo ?
sinon c'est peut être padding ou float {...}
Sinon voila ce que tu demande :
PAGE HTML / PHP :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Bla Bla Bla</title>
<link rel="stylesheet" href="fichiers/style.css" type="text/css" media="screen"/>
</head><body>
<div id="container">
<div class="featured">
<div class="photo shadow-left">
<div class="shadow-right">
<ul class="innerfade" style="position: relative; height: 285px;" id="photos">
<li style="z-index: 1; position: absolute; display: list-item;">
<img src="fichiers/timthumb_007.png" alt="Image du jour"/>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
PAGE CSS :
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
.featured img {
padding: 5px;
background: #ebebeb;
}
.photo {
float: left;
}
.shadow-left {
background: url(../fichiers/shadow-left.png) no-repeat left bottom;
}
.shadow-right {
background: url(../fichiers/shadow-right.png) no-repeat right bottom;
padding: 15px;
}
ul#photos {
list-style: none;
width: 490px;
height: 285px;
}
Hors ligne