Un cadre autour d'un image

Bonjour,

Je débute totalement en CSS et je bloque sur un point avec IE. Si vous pouviez m'aider.

Je souhaite afficher une image au milieu d'une bordure tout en laissant une marge entre le cadre et cette photo de taille(la photo) variable. Ma première tentative avec des tableaux fonctionne.
Pour la seconde, qui utilise CSS, ça fonctionne sous mozilla, mais sur IE la bordure reste à la dimension de l'image.

Le code html.

<div id="page">
<div id="illustration">
<img class="photo" src="/img/facade.jpg" alt="facade">
</div>
</div>

La feuille de style:

div#illustration{
text-align : center ;
margin-top : 30px;
}
.photo
{ padding:20px 20px;
border: 1px solid rgb(230, 85, 28);
}

div#page
{ margin-top : 30px;
padding: 0px 40px 0 40px ;
margin-right:220px;
text-align : left ;
}

Le résultat ici

Merci de votre aide
Modifié par AirV (22 Feb 2006 - 23:50)

Salut,

Je ne sais pas si c'est la solution, mais avec IE sait-on jamais : et si tu précisais les dimensions de ton image en rajoutant le "width" et "height" à ta balise image ???

Bonjour AirV,

Tu aurais du poster ton sujet dans la salon CSS, tu aurais vu qu'une question identique a été posée récemment. J'y donne la réponse.

Pandore a écrit :

et si tu précisais les dimensions de ton image en rajoutant le "width" et "height" à ta balise image ???

Les attributs width et height de la balise img ne sont pas des précisions mais des informations qu'il faut donner quoiqu'il en soit. Ne serait ce, entre autre, que pour indiquer aux small screens qu'ils peuvent zapper.

Merci pour votre aide, j'ai donc modifié mon code comme proposé,

Malheureusement si mon cadre est bien décallé de 20px autour de ma photo sous Mozilla, sous IE il reste toujours collé à cette dernière.

Si quelqu'un pouvait jeter un oeil sur ma page html , et sur ma feuille de style

Je précise que je débute totalement en CSS et à peine plus expérimenté en Html, je compte donc sur votre aide. Merci.

salut,

applique ton padding à div#illustration et non à image et ça devrait aller.

Le alt de ton image n'est pas très bon. Tu devrais rédiger quelque chose de plus descriptif genre :

"Photo extérieure de l'auberge, la façade vue depuis la rue."

PS : joli site, bravo
Modifié par clb56 (26 Feb 2006 - 12:32)

J'ai appliqué le padding à div#illustration, mais du coup ça ne marchait plus sous mozilla.
Du coup je l'ai appliqué aux deux?. Seulement je n'ai pas IE chez moi, alors je ne sais pas ce que cela donne.

Merci pour vos encouragement concernant le design de ce site, mais je tiens à remercier Alsacreations et ses tutoriaux sans lesquels j'en serais toujours à cette première version