5588 sujets

Sémantique web et HTML

Centrer un un widget iframe

Bonjour
Sur mon site de rando, j'ai installé un widget météo.
Mais il s'affiche à gauche dans la colonne !
Comment le centrer ?

Voici le code :
<iframe src="https://api.wo-cloud.com/content/widget/?geoObjectKey=15902142&language=fr®ion=FR&timeFormat=HH:mm&windUnit=kmh&systemOfMeasurement=metric&temperatureUnit=celsius" name="CW2" scrolling="no" width="318" height="318" frameborder="0" style="border: 1px solid #10658E;border-radius: 8px"></iframe>

Merci pour votre aide Smiley smile
Modifié par Rando76 (02 May 2025 - 20:56)
Modérateur
Bonjour,

La méthode à employer dépend beaucoup de ce qu'il y a autour de l'iframe.

Voici un court exemple complet ci-dessous. On donne à l'iframe un display:block et un margin:0 auto ce qui le centre horizontalement dans son conteneur :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
iframe {
	margin: 0 auto;
	display: block;
}
</style>
</head>
<body>
<h1>Exemple de widget météo</h1>
<iframe src="https://api.wo-cloud.com/content/widget/?geoObjectKey=15902142&amp;language=fr&amp;region=FR&amp;timeFormat=HH:mm&amp;windUnit=kmh&amp;systemOfMeasurement=metric&amp;temperatureUnit=celsius" name="CW2" scrolling="no" width="318" height="318" frameborder="0" style="border: 1px solid #10658E;border-radius: 8px"></iframe>
</body>
</html>

Note 1 : remplace les & par des &amp; dans l'url spécifiée comme valeur de l'attribut src si tu ne veux pas avoir de surprise.

Note 2 : il y a beaucoup d'autres manières de faire ce que tu demandes.

Amicalement,
Modifié par parsimonhi (03 May 2025 - 12:35)
Merci pour ce retour, mais pas applicable
C'est un widget html à intégrer dans une colonne sur un site existant donc que du html

Ci-joint lien vers le site, c'est mieux. C'est le widget météo dans la colonne de droite sous le calendrier
https://www.escapaderando.fr/

Merci
Bonjour,
>> mais pas applicable
Pour quelles raisons dis tu ça. C'est parfaitement applicable. Voici une capture écran du code ci dessus :
(zut l'image n'est pas passée, je la place ici )
Modifié par casper2 (03 May 2025 - 14:04)
Modérateur
Rando76 a écrit :
Merci pour ce retour, mais pas applicable
C'est un widget html à intégrer dans une colonne sur un site existant donc que du html

Ci-joint lien vers le site, c'est mieux. C'est le widget météo dans la colonne de droite sous le calendrier
https://www.escapaderando.fr/

Merci


Peut tu alors précisé ce que tu veut dire par :
Rando76 a écrit :
Mais il s'affiche à gauche dans la colonne !
Comment le centrer ?

Et ce que tu veut vraiment en final ?
Parce que :
1) Il s'affiche là ou tu l’insère dans le code de ta page, donc la colonne de droite. Si ce n'est pas l'endroit où tu veut qu'il s'affiche, il te suffit de replacer cette iframe à l'endroit voulu dans ta page.
2) un iframe est effectivement du HTML et en lui appliquant un display:block+margin:auto comme suggéré, ton widget ce centre dans sa colonne. Le CSS s'applique au HTML ciblé par un sélecteur.

3) si tu veut agir sur l'affichage contenu dans l'iframe depuis ta page, cela n'est pas possible. Ce sont en fait deux pages différentes avec leur propre feuille de styles.


Cdt
Modérateur
Bonjour,

En remplaçant
<iframe src="https://api.wo-cloud.com/content/widget/?geoObjectKey=15902142&language=fr&region=FR&timeFormat=HH:mm&windUnit=kmh&systemOfMeasurement=metric&temperatureUnit=celsius" name="CW2" scrolling="no" width="290" height="318" frameborder="0" style="border: 1px solid #10658E;border-radius: 8px"></iframe>
par
<iframe src="https://api.wo-cloud.com/content/widget/?geoObjectKey=15902142&language=fr&region=FR&timeFormat=HH:mm&windUnit=kmh&systemOfMeasurement=metric&temperatureUnit=celsius" name="CW2" scrolling="no" width="290" height="318" frameborder="0" style="border: 1px solid #10658E;border-radius: 8px;display: block;margin: 0 auto"></iframe>

J'obtiens

upload/1746279937-54900-z688.png

Je n'ai fais qu'ajouter au style de l'iframe display: block et margin: 0 auto (voir vers la fin de la ligne de code), et cela correspond au code que j'avais donné dans mon post précédent, mais en l'insérant d'une manière différente. Après, il se peut que tu n'aies pas accès au code pour faire cette modification. À voir.

Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à