Bonjour à tous,

j'ai un widget que j'essaie d'installer sur mon site depuis ce matin, mais je n'arrive pas à faire en sorte qu'il ne dépasse pas de mon cadre.

Quel balise serait le plus propre à utiliser pour fair en sorte que ça ne passe pas le cadre ?

j'ai également cherché a modifier le texte couleur en dessous pour modifier sa couleur, mais je pense que ceci n'est pas possible et que ça fait partie du widget.

Merci d'avance

Jim

Bonjour,

sans code ou adresse de la page, difficile de savoir comment t'aider… L'idéal ici est une page en ligne, puisqu'on parle comportement et intégration dans un contexte Tu peux nous donner ça pour qu'on aille voir ?

Bonjour,

oui biensur.

gagner-argent.biz

Comment est-ce que tu ajoutes ton widget sur la page ? Est-ce que tu peux le mettre dans une simple div qui aurait ensuite une largeur donnée ? Sachant que tu peux faire plus simple que ta version actuelle qui est de fixer une largeur puis de la mettre à auto sur plus petits écrans : normalement, une max-width suffirait

Voici le code widget :

le max width je l'avais essayé, mais ça n'a pas marché, ou bien je l'ai mal fait !?

J'ai fait le css comme ça:

header #widget_tv
{
	width: 500;
	margin: auto;
}

j'ai mis ceci dans le fichier php :

<div class="widget_tv">
le code widget
</div>

le code widget :

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://fr.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Suivre tous les marchés sur TradingView</span></a></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
  {
  "symbols": [
    {
      "proName": "FOREXCOM:SPXUSD",
      "title": "S&P 500"
    },
    {
      "proName": "BITSTAMP:BTCUSD",
      "title": "Bitcoin"
    },
    {
      "proName": "BITSTAMP:ETHUSD",
      "title": "Ethereum"
    },
    {
      "description": "SingularityNet",
      "proName": "BINANCE:AGIXUSDT"
    },
    {
      "description": "Algorand",
      "proName": "CRYPTO:ALGOUSD"
    },
    {
      "description": "Chiliz",
      "proName": "CRYPTO:CHZUSD"
    },
    {
      "description": "Constellation Dag",
      "proName": "CRYPTO:DAGUSD"
    },
    {
      "description": "Dogecoin",
      "proName": "CRYPTO:DOGEUSD"
    },
    {
      "description": "GalaGames",
      "proName": "CRYPTO:GALAUSD"
    },
    {
      "description": "Chainlink",
      "proName": "CRYPTO:LINKUSD"
    },
    {
      "description": "Polygon Matic",
      "proName": "CRYPTO:MATICUSD"
    },
    {
      "description": "Decentraland",
      "proName": "CRYPTO:MANAUSD"
    },
    {
      "description": "AllianceBlock",
      "proName": "CRYPTO:NXRAUSD"
    },
    {
      "description": "Optimism",
      "proName": "CRYPTO:OPUSD"
    },
    {
      "description": "Quant",
      "proName": "CRYPTO:QNTUSD"
    },
    {
      "description": "Render",
      "proName": "CRYPTO:RNDRUSD"
    },
    {
      "description": "Sandbox",
      "proName": "CRYPTO:SANDUSD"
    },
    {
      "description": "Solana",
      "proName": "CRYPTO:SOLUSD"
    },
    {
      "description": "VeChain",
      "proName": "CRYPTO:VETUSD"
    },
    {
      "description": "Verasity",
      "proName": "CRYPTO:VRAUSD"
    },
    {
      "description": "Stellar",
      "proName": "CRYPTO:XLMUSD"
    },
    {
      "description": "Ripple",
      "proName": "CRYPTO:XRPUSD"
    }
  ],
  "showSymbolLogo": true,
  "colorTheme": "dark",
  "isTransparent": true,
  "displayMode": "adaptive",
  "locale": "fr"
}
  </script>
</div>
<!-- TradingView Widget END -->

header #widget_tv {
    width: 500;
    margin: auto;
}

un id étant unique sur la page, header dans le sélecteur est inutile

width: 500;

  500 quoi ?

-
Edité par Domi65 9 septembre 2023 à 16:16:28

Sur ton site, widget_tv est une classe, pas un id (et, oui, 500 quoi ?)

Effectivement, j'avais oublié le px. J'ai changé div class par div id.

Par contre, toujours rien. ça ne fonctionne pas.

PS : dsl je ne suis pas "codeur", je me débrouille juste et j'aime ça, j'aime le code.

Merci pour votre aide

J'aurais dû le voir plus tôt : ton widget n'est pas dans le header. Donc le sélecteur doit être #widget_tv tout court. header #widget_tv signifie « l'élément d'id widget_tv qui a header pour ancêtre ».

Bonjour,

en fait, je viens de le retirer et de relancer le sujet ici, voici la raison :

Donc, la solution proposé pour afficher le widget sans que ça dépasse fonctionne sans problème, grâce à vos conseils, mais depuis que j'ai fait ça, l'affichage mobile ne fonctionne plus comme il faut. J'ai remarqué que quand je mets le widget, la version mobile ne fonctionne pas optimale. Je vais remettre en ligne pour que ça fonctionne sur le site et que ça fait le bug sous mobile pour vous montrer.

est-ce que du coup je dois créer ou modifier quelque chose dans le fichier css pour la version mobile suite à l'ajout du widget ?

Qu'appeles-tu une version mobile ?

En principe, de nos jours, on fait appel à des media queries pour adapter la page aux divers écrans. Et donc, oui, c'est dans le CSS que ça se passe.

Bonjour Domi65,

Ben j'ai un css "device". J'ai le mobile friendly.

Depuis que j'ai mis le widget, ça ne va pas sur la version mobile à cause du widget, du coup je me demande s'il y a un code ou une modif à faire sur le device.css ? Le site s'affiche bien sous gsm, mais le widget dépasse vers la droite de la version mobile friendly.

Est-ce que tu peux m’aiguiller ?

Bonjour, ne donne pas de largeur fixe. Ou alors tu dois le modifier dans la media queries.

#widget_tv {
  width: 1050px;
  margin: auto;
}

  Remplace width par max-width

https://developer.mozilla.org/fr/docs/Web/CSS/max-width

Une fois cela corriger tu as un autre problème avec l'image https://www.gagner-argent.biz/data/header.png qui fait 1050px de large. Même topo que pour ton image en bas de page décrit dans ton autre sujet max-width: 100% pour cette image.

PS : Tu utilises bien l'inspecteur de code pour analyser ton code? Si pas F12 ouvre les outils de développement du navigateur.  

Bonjour AbcAbc,

Ah, je ne connaissais pas ça "max-width" :-o

J'ai fait ce que tu m'as dis pour le header aussi, nikel ! Merci !

Problème reglé, je cloture, mais je me permets avant de cloturer de te laisser répondre à ci-dessous:

Pour ce qui est de devlopper de mozila, j'ai bien ça mais j'avoue que j'utilise très peu, je ne suis pas encore très familier avec ça.

Je n'utilise pas non plus "l'inspecteur de code" pour analyser, je ne sais même pas ce que c'est.

Oh, F12, connaissais pas non plus :-D. Merci. Et au risque de paraitre bête, qu'est ce que ça fait de plus que notepad++ que j'utilise ?

Les navigateurs ont un débogueur intégrer si je puis dire, en activant F12 les outils de développement s’ouvrent,   il y a différents onglets l'inspecteur des éléments est le principal outil en HTML/CSS en cliquant sur un élément HTML tu peux voir dans la partie de droite les styles appliqués à cet élément ainsi que la cascade des styles qui lui sont appliqués. 

Les autres onglets tel que console c'est pour consulter les erreurs JavaScript , l'onglet réseau pour voir les requêtes que la page effectue et voir le status de retour. Je ne vais pas tout passer en revue.

Quel est l'avantage par rapport à notepad++, bien c'est que tu peux modifier les valeurs CSS dans la partie de droite, et tu vois les modifications en directe. Pas besoin de modifier ton code, enregistrer, actualiser la page... Tu vois le comportement des éléments en direct dans le navigateur cela vas plus vite pour déboguer un problème.

Autre façon d'ouvrir les outil de développement, dans la page sur la partie qui pose problème un clique droit puis inspecter. Les outils de développement s'ouvre sur l'onglet inspecteur avec l'élément sélectionner en surbrillance et tu peux consulter sur la partie de droite les styles qui sont appliquer à cet élément. 

Ses outils sont pourvu d'une vue adaptative pour voir le rendu sur mobile. Pour Firefox CTRL + MAJ + M. C'est avec cela que j'analyse une page web.

Lecture : https://developer.mozilla.org/fr/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools

MDN c'est LA documentation à consulter. Lors d'une recherche dans un moteur de recherche ajoute "MDN" comme mot clés au début, certes un peu rébarbatif à lire quand on débute mais tellement utile quand on en prend l'habitude. 

D'autre question?

-
Edité par AbcAbc6 10 septembre 2023 à 20:01:39

Nikel ! Un grand merci pour avoir pris le temps de m'expliquer ça ! Je vais tester ça aujourd'hui !

Je vais lire un peu les docs et les infos au tour de ça.

Merci!