IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Lire la suite .. en fonction de la taille de l'écran


Sujet :

CSS

  1. #1
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 341
    Par défaut Lire la suite .. en fonction de la taille de l'écran
    Bonjour,

    Je refais le site de notre club qui est responsif via CSS.
    Certaines div ont un contenu trop long pour un affichage sur Smartphone, ce qui oblige de scroller de trop ... ce qui n'est pas convivial pour les lecteurs.

    Je souhaiterais donc ajouter une fonctionnalité Lire la suite ... dès que le CSS passe en mode Smartphone et pas dans les autres cas.
    Pour compliquer l'histoire, il y a plusieurs div qui devraient être indépendantes pour la suite de la lecture sur une même page.

    J'ai jquery-3.60 installé sur le site.

    Ce que je trouve pas, c'est de faire la liaison avec @media screen du CSS et les div à masquer/afficher.

    Comme j'ai le jquery installé, cela peut être en un ou plusieurs éléments (pas du javascript) :
    - PHP
    - CSS
    - jquery

    Je ne sais absolument pas si cela est possible
    Si quelqu'un a une idée.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 267
    Par défaut
    Bonjour,
    Certaines div ont un contenu trop long pour un affichage sur Smartphone,
    est-ce à dire que quoiqu'il arrive cela n'est pas gênant de charger tout le contenu de celles-ci ?


    Je souhaiterais donc ajouter une fonctionnalité Lire la suite ... dès que le CSS passe en mode Smartphone et pas dans les autres cas.
    Les media queries font cela très bien pour peu que les bornes de bascules soient bien définies. Il suffit de gérer ensuite l'affichage, les dimensions des éléments visés.


    Pour compliquer l'histoire, il y a plusieurs div qui devraient être indépendantes pour la suite de la lecture sur une même page.
    Je ne comprend pas bien le sens de ta phrase !


    Ce que je trouve pas, c'est de faire la liaison avec @media screen du CSS et les div à masquer/afficher.
    Qu'est ce que tu ne comprends pas : Media queries !
    Exemple simple :
    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
    body {
      background-color: #FFF;
    }
    @media (min-width:768px) {
      body {
        background-color: #DEF;
      }
    }
    @media (min-width:992px) {
      body {
        background-color: #FDE;
      }
    }
    @media (min-width:1200px) {
      body {
        background-color: #EFD;
      }
    }

    Je ne sais absolument pas si cela est possible
    Oui

    Le fait que tu aies JavaScript opérationnel peut t'aider pour un meilleur le dynamisme.

  3. #3
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 341
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    est-ce à dire que quoiqu'il arrive cela n'est pas gênant de charger tout le contenu de celles-ci ?
    Le temps de chargement des pages complètes est dans le normes d'un confort de surf par GSM : moins de 2 sec. C'est juste la longueur du texte qui oblige de scroller beaucoup (trop d'infos ?, mais c'est le club qui veux )
    Le CSS fait le gros du travail de la mise en page, le reste n'est que du texte.

    Citation Envoyé par NoSmoking Voir le message
    Qu'est ce que tu ne comprends pas : Media queries !
    Je n'ai aucun problème avec les Media queries, le site est bien responsive, je ne sais juste pas comment activer les Lire la suite ... quand celle-ci est dans la catégories GSM, c'est à dire : @media(max-width:767px) par ex.


    Citation Envoyé par NoSmoking Voir le message
    Pour compliquer l'histoire, il y a plusieurs div qui devraient être indépendantes pour la suite de la lecture sur une même page.
    Je ne comprend pas bien le sens de ta phrase !
    Le site a 4 menus principaux (pages) et chacun d'eux ont des sous-menus sous forme d'ancre (contenu de la page donc) : plusieurs sous-menus peuvent avoir un Lire la suite...

    Menu 1 : Le Club -> éléments de la page : Nous proposons - Les cours - Nos horaires - Adresse - Nos données
    Menu 2 : Nos écoles -> éléments de la page : Les chiots - Education - Obéissance - Agility - Hooper
    Menu 3 : Activités -> éléments de la page : Nos activités - Nos concours - Inscriptions
    Menu 4 : Infos -> éléments de la page : Contacts - Plan - Liens / Sponsors - Nederlands

    Le Facebook n'est qu'un lien

    Voici une image du site de test en local pour le GSM :

    Nom : menus.JPG
Affichages : 538
Taille : 15,5 Ko

    J'espère que cela vous aide à mieux comprendre

    EDIT :
    Pour l'instant j'ai 2 bannières suivant la résolutio : 1 pour les PC et 1 pour GSM et tablette.
    Je vais en faire une 3me pour le GSM qui devrait réduire de +/- 30% l'existante qui ne fait que 80ko

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 267
    Par défaut
    Il existe plusieurs façons de mettre en oeuvre un « Lire +/- », un méthode « simple » étant d'utiliser le masquage/affichage via un élément <input type="checkbox"> associé à un élément <label>, seul ce dernier étant visible, ou non dans certains de tes cas.

    Si l'<input> n'est pas coché, la zone correspondant est réduite en hauteur en jouant avec sa max-height:5em par exemple en prenant soin de mettre un overflow: hidden de bon aloi.
    Lorsque celui-ci est coché, via son <label> associé, la zone correspondant est agrandie. En fait on passe la max-height à none.

    Lorsque l'on veut le faire uniquement avec les media queries il suffit, en plus, de masquer le <label> et d'agrandir la zone correspondante en libérant sa max-height, avec max-height:none.

    L'adjonction de JavaScript est un plus.

    Sans entrer plus dans le détail, j'ai fait un exemple qui reprend dans la même page les deux situations.

    Exemple en ligne : Read more - Read less.

  5. #5
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 341
    Par défaut
    Bonsoir NoSmoking,

    Merci pour votre exemple, c'est exactement la partie dans "Les Articles".

    Votre explication écrite ne m'a pas aidée pour faire le code, mais le principe y est très clair
    Je vais passer par le code source de votre exemple (le code y est bien commenté, c'est super de votre part) ... je savais le CSS puissant, mais je me rend compte qu'il l'est encore bien plus

    Je vous tiens au courant des résultats obtenus, code que je dois encore traduire à ma page.
    Malheureusement, ce ne sera pas ce soir, mais j'ai pris le temps d'y jeter un coup d’œil ... et surtout vous remercier pour le temps que vous avez passé pour m'aider et créer cette page

    NB : j'évite le javascript tant que je peu (il peut être désactivé), malgré ses bienfaits pour rendre un site plus convivial et interactif

    @ très bientôt

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 267
    Par défaut
    Citation Envoyé par ddaweb
    Votre explication écrite ne m'a pas aidée pour faire le code, mais le principe y est très clair
    Je dois admettre que ce n'est qu'un exemple et que cela ne décrit pas clairement la façon de faire, je vais surement me pencher sur la rédaction d'une page plus claire, sachant quand même qu'il doit y en exister des Mo sur la toille .



    Je vais passer par le code source de votre exemple (le code y est bien commenté, c'est super de votre part) ... je savais le CSS puissant, mais je me rend compte qu'il l'est encore bien plus
    Merci bien, c'est un peu le rôle des exemples que je mets sur le forum.



    NB : j'évite le javascript tant que je peu (il peut être désactivé), malgré ses bienfaits pour rendre un site plus convivial et interactif
    Concernant les smartphones, je doute que le JavaScript soit désactivé, il n'y aurait dans ce cas que peu de sites « visitables ».
    On peut avoir également la démarche inverse en masquant le surplus si JavaScript est activé en ajoutant une classe par exemple, mais ceci est un autre débat.

  7. #7
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 341
    Par défaut
    Voilà, j'ai réussi à mettre ton code dans mon projet, un grand merci

    J'ai eu un peu de boulot car mon CSS partait du plus grand écran vers le plus petit, maintenant c'est l'inverse
    Comme base, je suis parti du bootstrap de Google en 4 résolutions avec quelques petites adaptations comme une taille max. à partir de laquelle plus rien ne grandit.
    Plus de 70% de l'ancien CSS est déjà converti et opérationnel, en profitant de le simplifier ... un beau morceau encore à faire sont les formulaires.

    J'ai galéré avant de trouver qu'il fallait mettre une <section> (dans ton code <article>) pour faire fonctionner chaque groupe indépendamment, j'avais une interaction avec les <label> sans cela
    En masquant les éléments un à un de ton code, que je soupçonnais être la cause, j'ai trouvé ce qui était mon manquement

    Voici un aperçu du résultat actuel, j'ai appliqué un effet zoom de x1.5 en cliquant sur les photos en mode GSM ou tablette (c'est du hoover) :

    Nom : Lire_plus.jpeg
Affichages : 518
Taille : 78,3 Ko

    Nom : Lire_plus2.jpeg
Affichages : 500
Taille : 28,0 Ko

    Toute la mise en page est à partir du CSS.
    Si vous avez encore des idées, n'hésitez pas

  8. #8
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 341
    Par défaut
    J'ai constaté un petit fonctionnement bizarre, que ce soit sous Android ou Ubuntu Touch (Linux) :
    - Si le "Lire Plus ... " est dans le fond de l'écran, le texte s'affiche en dessous et on peut continuer à scroller
    - Si on est plus haut, l'écran se positionne au " ... Voir moins" et il faut remonter dans le texte

    Voici mon CSS, la transition n'est pas utilisée, ne fonctionne pas :
    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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /* ----- Lire plus ... responsif GSM ----- */
    section { position: relative; }
    .responsive_lire_plus {
      position: relative;
      margin-bottom: 1em;
      padding: .5em;
      max-height: 31em; /* hauteur que l'on souhaite visible */
      overflow: hidden;
      /*transition: 0.5s ease;*/ /* pour le fun mais pas du tout indispensable */
    }
    .label_lire_plus {
      position: absolute;
      right: 0.5em;
      bottom: 0;
      left: 0;
      padding: 3px 15px 3px 0px;
      text-align: right;
      color: #E91E63;
      background-color: #ddd;
      cursor: pointer;
      border: 1px solid #aaa;
      border-radius: 0px 0px 10px 10px;
      font-weight: bold;
    }
    .label_lire_plus:hover { color: #00897B; }
    .label_lire_plus:before { content: "Lire plus ..."; }
    .check_lire_plus { position: absolute; bottom: 0; /* pour éviter que la page remonte */ opacity: 0; }
    .check_lire_plus:checked ~ * .label_lire_plus:before { content: "... Voir moins"; }
    .check_lire_plus:checked + * { max-height: none; }
    Le code pour une section, celui du screen de ma réponse précédente :
    Code HTML : 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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <h2>L'école des chiots</h2>
    	<section>
    		<div class="div_image">
    			<div class="div_image_photo"><img src="./photos/chiots_01.jpg" alt="Chiot 1" title="Chiot 1" /></div>
    			<div class="div_image_photo"><img src="./photos/chiots_02.jpg" alt="Chiot 2" title="Chiot 2" /></div>
    			<div class="div_image_photo"><img src="./photos/chiots_03.jpg" alt="Chiot 3" title="Chiot 3" /></div>
    			<div class="div_image_photo"><img src="./photos/chiots_04.jpg" alt="Chiot 4" title="Chiot 4" /></div>
    		</div>
    		<div class="clear">&nbsp;</div>
    		<input type="checkbox" id="ecole_chiot" class="check_lire_plus" aria-label="expand collapse" />
    		<div class="responsive_lire_plus">
    				<strong>Dès ses 8 semaines</strong> et s'il est en ordre de pré-vaccins, votre chiot aura accès au terrain (ceci lui permet, à notre sens, de poursuivre ou de parfaire l'éducation que lui a donné sa mère).<br />Dès <strong>les premières leçons</strong> dans l'école des chiots, votre chiot évoluera régulièrement <strong>sans laisse en compagnie d'autres chiots de son âge</strong>, avec des périodes de récréation, sur un terrain clôturé.
    				<p><strong>L'école des chiots</strong> est composée de différentes classes :</p>
    					<ul>
    						<li class="li_logo"><strong>Les chiots</strong> : de 2 à 5 mois</li>
    						<li class="li_logo"><strong>Les puppys</strong> : de 5 à 7 mois</li>
    						<li class="li_logo"><strong>Les juniors</strong> : de 7 à 9 mois</li>
    					</ul>
    				<p>Le but de ces leçons <strong>n'est pas de faire "travailler" votre chiot</strong> à proprement parler mais plutôt de lui donner l'opportunité d'acquérir les attitudes d'un chien équilibré par l'apprentissage, dont par exemple :</p>
    					<ul>
    						<li class="li_logo">De la vie en communauté avec d'autres congénaires</li>
    						<li class="li_logo">Des codes canins : en jouant avec d'autres chiots</li>
    						<li class="li_logo">De la conduite à avoir envers les humains (confiance, manipulations utiles...)</li>
    						<li class="li_logo">D'une certaine complicité avec son maitre (le 'rappel', ordres de base)</li>
    					</ul>
    				<strong>La taille et la force des chiots augmentent au fur et à mesure de sa croissance</strong>, c'est pour cela qu'il existe plusieurs catégories d'âges. Il est inutile d'effrayer un chiot par la mise en présence de congénaires inadaptés et ceci afin d'éviter tout facteur d'échec dans son évolution.<br />
    				<span class="font_brun"><em>Vous n'avez pas besoin de calculer l'âge de votre chiot, l'informatique le fait automatiquement</em></span>.
    				<p><strong>Les premiers apprentissages d'un chiot doivent se faire en douceur</strong>, les expériences négatives ne l'incitent en rien à se construire, à évoluer dans la relation qui le lie à son maitre alors que les expériences positives sont une réelle motivation pour lui à les reproduire. Le chiot accepte d'exécuter les ordres parce qu'il en apprécie les effets (récompenses, félicitations, jeux).</p>
    				<strong>C'est pour cette raison que nous avons choisi de prôner une méthode douce</strong>, respectueuse des chiots et de leur caractère joueur. Une méthode qui vous permet de créer sans pression cette complicité tant recherchée car le passage d'un niveau à un autre n'est pas lié aux résultats que vous obtiendrez, mais bien à l'âge de votre nouveau compagnon.
    				<p>Dès que votre chiot quitte "l'école des chiots", <strong>il pourra passer son Test de Comportement Social (TCS)</strong> qui est demandé dans beaucoup de communes, notre club organise plusieurs TCS/an.</p>
    				<p class="space_lire_plus">&nbsp;</p>
    				<label for="ecole_chiot" class="label_lire_plus"></label>
    		</div>
    	</section>
    <p id="educ"><a href="#top"><img src="./images/retour_haut_page.png" alt="Top" title="Haut de page" /></a></p>

    Aurais-je omis quelque chose ?

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 267
    Par défaut
    Si on est plus haut, l'écran se positionne au " ... Voir moins" et il faut remonter dans le texte
    ce comportement est voulu, via le CSS voir le commentaire, qui correspond à l'ergonomie « je replis et je lis ce qui viens après ».

    Lorsque l'on clique sur le <label>, l'<input> correspondant prend le focus et donc est replacé visible, plus ou moins bien, dans la page.
    Si tu souhaites ce comportement par défaut il te faut supprimer la ligne bottom:0 du CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .check_lire_plus {
      position: absolute;
    /*  bottom: 0; /* pour éviter que la page remonte */
      opacity: 0;
    }
    l'<input> prendra place au début de son parent, par défaut, et non en fin.

  10. #10
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 341
    Par défaut
    Le bottom:0 m'avais bien interpellé, mais j'ai mal interprété ton texte, c'est pour cela que je l'ai laissé (probablement que je l'aurais retiré à un moment donné).

    Dans mon cas, je préfère le supprimer car cela descend parfois de plus d'un écran complet
    Mettre un "Lire plus ..." pour éviter de scroller de trop et devoir le faire après pour remonter est un non sens ... mais chaque cas est différent

    Quand ce topic a été déplacé dans le CSS, j'avoue que j'étais un peu septique : je m'attendais plus à devoir le faire via JavaScript ou JQuery ... mais cette solution me plait bien, un grand merci à vous !
    Elle m'a en plus permise de simplifier mon CSS et une meilleure réponse responsive du site ... que du bonheur.

    Encore un formulaire à vérifier, ensuite sauver les données après contrôles et 1-2 ajustement de CSS pour les petits écrans GSM (4.5 "), et je peux le mettre en ligne.
    C'est la première fois que le rendu GSM/Tablette est meilleur qu'en PC
    Vu leur part de marché, ce n'est pas plus mal.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 23/10/2011, 20h54
  2. [AC-2003] dimensionnemment auto des form en fonction de la taille de l'écran
    Par adelsunwind dans le forum IHM
    Réponses: 3
    Dernier message: 21/12/2009, 15h12
  3. Redimensionner une image en fonction de la taille de l'écran
    Par vva dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 09/01/2009, 16h03
  4. Réponses: 5
    Dernier message: 11/06/2007, 23h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo