28106 sujets

CSS et mise en forme, CSS3

Bonjour

J'aurais besoin de quelques clarifications sur l'utilisation des @media queries.
J'ai une feuille de styles qui comporte la description d'une div contenant 3 images,appelons les A, B et C
Selon la taille des écrans d'affichage:
1) l'image A reste située à gauche, mais sa taille peut varier pour ne pas occuper toute la page pour des petits écrans
2) l'image B reste située à droite, sa taille en % ne semble pas avoir besoin de changer
3) l'image C doit être déplacée et sa taille changer pour ne pas entre en conflit avec des deux autres.

J'ai donc l'intention de mettre dans ma feuille de styles des @media queries pour traiter ce problème.
En gros j'ai besoin de traiter 3 situations:
1) taille de fenêtre supérieure à 800 pixels
2) taille entre 360 et 800 pixels
3) taille inférieure à 360 pixels

Les essais que j'ai effectués ne me donnent pas satisfaction. Faut-il redéfinir tout ce qui de près ou de loin a un rapport avec ces 3 images pour que ça fonctionne correctement?
J'ai essayé des choses du genre

#imageC {....}

@media screen and (max-width: 800px) {
    #imageC {....}
 }

@media screen and (max-width: 360px) {
    #imageC {....}
 }


J'obtiens à peu près n'importe quoi pour cette malheureuse imageC! En particulier pour les petits écrans < 360 je retrouve l'apparence des écrans > 800
Désolé de ne pas pouvoir vous montrer ces exemples, je les ai détruits ç force de faire des essais/erreurs (je sais, ce n'est pas professionnel...)

La documentation que j'ai lue ne me semble pas très claire, il est toujours question d'un seul objet et d'une seule taille limite. Je comprends bien que pour un tutoriel il faut rester simple,mais si quelqu'un pouvait me donner un exemple concret qui fonctionne, je lui en serais reconnaissant.
Merci Raphaël
Effectivement, mais j'ai un grand "petit" problème: il y a 1000+ pages à modifier. Je peux modifier le fichier css et le fichier JavaScript qui sont communs à toutes ces pages. Il y a un appel à une fonction JS en début et en fin de fichier pour générer headers et footers, mais est ce que je peux dynamiquement ajouter un <meta viewport>?
Merci de ton aide et bon week-end
PapyJP a écrit :
Effectivement, mais j'ai un grand "petit" problème: il y a 1000+ pages à modifier.

Un task Runner tel que Grunt, avec un plugin replace pourrait être votre ami pour ce genre de chose, vous permettant de modifier tous les fichiers à la volée.

De mémoire, il me semble que des éditeurs comme Sublim Text permettent aussi cela quand on ouvre un ensemble de fichiers comme un projet. Mais je ne suis pas chez moi, il faudrait vérifier...
Modifié par Olivier C (28 Jun 2015 - 07:26)
Olivier C a écrit :

Un task Runner tel que Grunt, avec un plugin replace pourrait être votre ami pour ce genre de chose, vous permettant de modifier tous les fichiers à la volée.

De mémoire, il me semble que des éditeurs comme Sublim Text permettent aussi cela quand on ouvre un ensemble de fichiers comme un projet. Mais je ne suis pas chez moi, il faudrait vérifier...

Oui, il y a plein de programmes qui permettent de modifier à la volée le contenu de nombreuses pages, et j'en ai déjà fait moi même dans d'autres contextes. Mais je n'ai pas le cran de lancer un tel programme sans pouvoir vérifier de visu qu'il n'y a pas d'effet de bord.
Et pour plus de 1000 fichiers c'est pas coton. Outre qu'il faudrait ensuite recharger les fichiers si on le fait en local.
Quant à le faire sur le site, j'ai découvert que l'hébergeur par "précaution" a paramétré le PHP comme incapable en pratique d'écrire sur le site, ce que je n'avais jamais vu jusqu'à présent. J'ai le choix entre changer le mode d'hébergement ou mettre manuellement les droits d'accès à 777 pour chaque répertoire et chaque fichier.
Je vais du reste ouvrir un nouveau fil sur ce sujet.
Si je n'ai pas de solution non intrusive, je ferai du Javascript, comme d'habitude.