Discussion :

[Doudou Augustus]

Bonjour à tous,

Tout d'abord, je suis nouveau ici, et me réjouis d'être parmi vous.

J'ai des connaissances CSS extrêmement basiques, aussi ma question pourra-t-elle sembler.. idiote. Je vous prie par avance de m'excuser.

Question : insérer un style CSS interne dans une ou plusieurs pages spécifiques peut il avoir une influence sur le reste du site? Sachant que le site est geré par une agence externe, et le css est donc stocké sur un fichier externe (enfin j'imagine) -

Je travaille sous Typo3, mais n'ai pas accès au background du site, géré par une agence externe, et n'ai donc pas accès a la structure du site.

Il est néanmois possible, sur Typo3 d'insérer un code HTML par page, et j'ai donc voulu rendre quelques vidéos reponsive - j'ai donc ajouté ce style css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
 width: 100%;
  height: 100%;
}
</style>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="video-container">  
LIEN YOUTUBE
</div>

Les videos sont enfin responsive MAIS je remarque quelques jours après que les photos du site ne sont plus reponsive... cela peut-il avoir un quelconque lien? Puis je avoir effectué une mauvaise manip sans m'en rendre compte? D'aprés mes connaissances non, mais...

Merci par avance pour votre aide,

Cordialement

E.

[donimedia]

Bonjour ,


Un code CSS interne est prioritaire par rapport à un code CSS externe .

Donc si ce code CSS interne n'est en plus pas "responsive" , vous faites par la même occasion perdre à la page où vous l'introduisez , son caractère "responsive" .

Dans le CSS interne que vous utilisez , vous faites appel à des valeurs relatives ,
ce sui contribue à rendre la page responsive .

Le problème , c'est que :

1. ces valeurs ne sont pas toutes relatives
2. utiliser des valeurs relatives n'est pas suffisant pour rendre une page totalement responsive .
   En effet , il faut adapter le code CSS aux différents types de périphériques , de taille d'écran , etc ...

Pour cela , le mieux c'est d'utiliser la règle CSS @media pour effectuer des requêtes Media ( Media queries )

Pou en savoir plus sur les pages "responsive" et les Media queries , vous pouvez lire ce tutoriel :

https://viseo.developpez.com/tutorie...ponsive-design