Cadres arrondis pour images, tableaux et autres...

Des cadres arrondis pour toutes sortes "d'objets" par insertion dans un DIV

Je ne détaillerai pas beaucoup le code car les options sont assez nombreuses et évidentes. Prendre garde tout de même de supprimer ou de mettre à zéro les sempiternelles marges par défaut des images de Blogger. J'ai cependant parfois eu des problèmes pour bien centrer mes cadres ce qui explique certaines variantes dans ce code. Le code des cadres arrondis proprement-dit est en jaune. Cela fonctionne aussi avec des vidéos Youtube et des iframes.

Ci-dessous, RSS feed du National Hurricane Center affiché dans un DIV. J'ai utilise parfois la balise <center> pour bien centrer le tout dans mon blog. Mais on peut utiliser d'autres méthodes. De plus, étant très débutant en CSS, je ne garantis pas que mon code soit parfait !

<div style="border-radius: 6px; border: 1px solid #6F7376; height: 100%; text-align: left; width: 100%; margin-left: auto; margin-right: auto;">
<script charset="UTF-8" language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&amp;num=3&amp;desc=600&amp;tz=-4&amp;targ=y&amp;utf=y" type="text/javascript"></script>
<noscript>
<a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&num=3&desc=600&tz=-4&targ=y&utf=y&html=y">View RSS feed</a>
</noscript>

</div>

Résultat

Ci-dessous, image satellite, mais cela peut fonctionner évidemment avec n'importe quelle image...

<div class="separator" style="clear: both; text-align: center;">
<a href="http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=24&amp;lon=-55&amp;width=750&amp;height=400&amp;gtt=63&amp;num=20&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=1&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=gif&amp;proj=ll" imageanchor="1"><img border="0" src="http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=24&amp;lon=-55&amp;width=750&amp;height=400&amp;gtt=63&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=1&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll" height="293" style="-moz-border-radius: 5px; -moz-box-shadow: 0px 0px 0px transparent; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 0px transparent; background: transparent; border-radius: 5px; border: 1px solid #fdb804; box-shadow: 0px 0px 0px transparent; padding: 2px;" width="550" /></a></div>

Résultat:

Ici, un DIV avec une image satellite en "background", ce qui permet de superposer (imbriquer) un autre mini-DIV à coins arrondis qui marque l'emplacement de mon île (code en noir). Le cadre extérieur est évidemment lui-aussi à coins arrondis. Le DIV principal est une alternative au tableau. Attention, il peut y avoir des problèmes d'arrière-plan si vous mettez un padding à moins peut-être d'utiliser l'attribut no-repeat (pas essayé).

<center>
<div style="background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18.1&amp;lon=-63&amp;width=550&amp;height=400&amp;gtt=55&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=3&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); border-radius: 6px; border: 1px solid #07D9FC; height: 400px; text-align: center; text-align: left; width: 550px;">
<div style="background-color: red; border-radius: 5px; border: 2px solid white; height: 5px; margin-left: auto; margin-right: auto; margin-top: 200px; text-align: center; width: 5px;">
</div>
</div>
</center>

Résultat:

Notez que l'on peut tout aussi bien faire cela systématiquement et classiquement pour tous les objets d'un blog avec du CSS et des "class".