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 :

Grid Layout - Alignement bas d'une cellule


Sujet :

Grille CSS (CSS Grid)

  1. #1
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut Grid Layout - Alignement bas d'une cellule
    Bonjour tout le monde,

    On m’a conseillé d’abandonner les balises <table> pour utiliser les Grid Layout. Donc, vu que je ne prends jamais les conseils à la légère, je suis en train de refaire le design de mon site en utilisant les Grid Layout au lieu de mes balises <table>. Cependant, je me retrouve confronté à un problème qui me dérange grandement.

    Voici l’image de mon architecture pour que vous voyiez visuellement le souci :

    Nom : IMG_1.jpg
Affichages : 364
Taille : 27,3 Ko


    Sur le haut de la page, se trouve le logo et la date. La date est affichée sur le haut de la cellule, mais ce n’est pas du tout ce que je veux… Moi, ce que j’aimerais c’est que la date s’affiche sur le bas de la cellule, mais je n’arrive pas à trouver comment faire ?

    Avec une balise <td> je la définirais simplement avec l’attribut valign="bottom", ce qui est assez simple. Mais avec les Grid Layout, j’ai essayé pas mal de chose, mais rien à faire, cette maudite date ne veut pas descendre en bas. Pouvez-vous m’aider ?

    Voici le code source de ma page :

    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    <!DOCTYPE html>
    <html lang="fr-CH">
    <head>
    	<title>Gwanda.ch</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="cache-control" content="no-cache" />
    	<meta http-equiv="pragma" content="no-cache" />
    	<link rel="stylesheet" href="images/designs/styles.css" />
    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    	<script src="https://kit.fontawesome.com/2e9b34a81e.js"></script>
    	<style>
    .tabloPrincipal {
            display: inline-grid;
            grid-template-columns: 200px 600px;
            grid-template-rows: auto auto auto auto;
            justify-content: center;
            align-content: start;
            grid-gap: 0px;
            padding: 0px;
            background-color: #000000;
    }
    .cellPrincipal {
      font-size: 15px;
    }
     
    .tabloLogo {
            display: grid;
            grid-template-columns: auto auto;
            align-content: start;
            justify-content: space-between;
    }
    .cellLogo {
      font-size: 15px;
    }
            </style>
    </head>
     
     
    <body>
     
     
     
    <div align="center">
    	<div class="tabloPrincipal">
     
    		<div class="cellPrincipal" style="grid-column-start: 1; grid-column-end: 3; background-color: #ADBC81; border: 1px solid #000000; padding: 0px;">
     
    			<div class="tabloLogo" style="align-content: end;">
    				<div class="cellLogo"><div align="left" style="padding: 15px 0px 0px 15px;"><img src="images/designs/logo.png" border="0"></div></div>
    				<div class="cellLogo">
    					<div align="right">
    						<div style="padding: 0px 10px 5px 0px; white-space: nowrap;">
    							<?=ucFirst($dateExtract->joursTXT(date('w')));?> <?=date('j');?> <?=$dateExtract->moisTXT(date('n')-1);?> <?=date('Y');?> - <span id="horloge"> </span>
    						</div>
    						<script type="text/javascript">
                                                            function horloge(){
                                                                    var div = document.getElementById("horloge");
                                                                    var heure = new Date();
                                                                    var hours = (heure.getHours()<10)?"0"+heure.getHours():heure.getHours();
                                                                    var minutes = (heure.getMinutes()<10)?"0"+heure.getMinutes():heure.getMinutes();
                                                                    var seconds = (heure.getSeconds()<10)?"0"+heure.getSeconds():heure.getSeconds();
                                                                    div.firstChild.nodeValue = hours+":"+minutes+":"+seconds;
                                                                    window.setTimeout("horloge()",1000);
                                                            }
                                                            horloge();
                                                    </script>
    					</div>
    				</div>
    			</div>
     
    		</div>
     
    		<div class="cellPrincipal" style="grid-column-start: 1; grid-column-end: 3; background-color: #000000; padding: 7px; color: #FFFFFF">
    			<div align="left"><i class="fas fa-chevron-right"></i> Accueil</div>
    		</div>
     
     
    		<div class="cellPrincipal" style="background-color: #FFFFFF; padding: 10px; border: 1px solid #000000; border-right: 0px;">
    			<a href="index.php" target="_parent"><div class="menuA">Accueil</div></a>
    		</div>
     
     
    		<div class="cellPrincipal" style="background-color: #FFFFFF; border: 1px solid #000000; border-left: 0px;">
    			<div align="left">CONTENU.... CONTENU.... CONTE</div>
    		</div>
     
     
    		<div class="cellPrincipal" style="grid-column-start: 1; grid-column-end: 3; background-color: #FFFFFF; padding: 5px;">
    			<a href="" target="_parent" title="Remonter sur le haut de la page" style="top: 0;"><span style="font-size: 20px;"><i class="fas fa-sort-up"></i></span></a>
    			<div style="margin: -5px 0px 0px 0px; font-size: 9px;">
    				<a href="gwanda.ch" target="_parent">Gwanda.ch</a> - <a href="contact.php" target="_parent">Contact</a><br />
    				Mise &agrave; jour de la page, le <?=MAJ;?><br />
    			</div>
    		</div>
     
     
    	</div>
    </div>
    </body>
    </html>



    Et voici comment la date devrait s'afficher (Exemple avec la balise <table>) :

    Nom : IMG_2.jpg
Affichages : 378
Taille : 29,2 Ko

  2. #2
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 507
    Détails du profil
    Informations personnelles :
    Âge : 56
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 507
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Je te remercie pour ta réponse !
    Ceci-dit, j'ai commencé avec le w3Shool et ne trouvant pas, je suis venue ici regardé dans les tutoriel. Mais soit je suis passée à côté, soit j'ai pas trouvé... Quoi qu'il en soit, ça va faire des heures et des heures que je cherche partout, mais je n'ai pas trouvé de réponse... C'est pour cela que je me suis dis que je pouvais ouvrir un sujet et voir si quelqu'un pouvait m'aider.

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 236
    Par défaut
    Bonjour,
    il te faut faire comme avec tes anciens tableaux mais la propriété change pour les grilles, et les flexBox, il faut utiliser
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .cellLogo {
      font-size: 15px;
      align-self: end;   /* start | center | end */
    }
    Nota :
    • ta structure est bien trop compliquée pour ce que tu fais ;
    • abandonne tout de suite les « style inline », contenus dans les balises, sauf cas exceptionnel, du style :
      Code html : Sélectionner tout - Visualiser dans une fenêtre à part
      <div align="left" style="padding: 15px 0px 0px 15px;">

  5. #5
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Merci beaucoup pour ta réponse !

    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    il te faut faire comme avec tes anciens tableaux mais la propriété change pour les grilles, et les flexBox, il te faut utiliser
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .cellLogo {
      font-size: 15px;
      align-self: end;   /* start | center | end */
    }
    Excellant !!! Merci beaucoup, ça fonctionne superbement bien.
    J'ai pensé à testé beaucoup de chose, comme bottom:0; ou encore vertical-align, etc. Mais évidemment, rien ne fonctionnait




    Citation Envoyé par NoSmoking Voir le message
    Nota :
    • ta structure est bien trop compliquée pour ce que tu fais ;
    Oui, je trouve aussi, mais pour arriver aux résultat que je souhaite, je n'ai pas réussi à faire mieux.. J'avoue que je ne suis pas encore au point avec les Grid Layout, je suis bien trop habituée à mes balises <table>. Si tu as moins compliqué à me proposer, je suis preneuse !




    Citation Envoyé par NoSmoking Voir le message
    Nota :
    Je suis désolée, mais mis à part pour ma classe .tabloPrincipal je n'ai pas utilisé de style "inline", à moins que je n'ai pas compris !?
    Pour ma classe .tabloPrincipal, j'ai été obligée de l'utiliser, car autrement mon tableau prends toute la largeur de la page.



    EDIT :
    Quand tu m'as parlé de flex, je t'avouerais que cela m'a mis la puce à l'oreille ! Je me suis dis mais pourquoi faire un 'Grid Layout' si je peux utiliser un flex, surtout si mon logo et ma date se trouve sur une seule ligne ! Ayant fait un peu de 'Responsive' j'aurais dû y penser... En utilisant les flex pour les éléments qui se trouve sur une seule ligne, c'est bien plus simple et je pense aussi bien plus juste. Merci de m'avoir soufflé la réponse

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 236
    Par défaut
    Si tu as moins compliqué à me proposer, je suis preneuse !
    moins compliqué peut-être pas mais peut-être plus clair
    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    <!DOCTYPE html>
    <html lang="fr-CH">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gwanda.ch</title>
    <link rel="stylesheet" href="images/designs/styles.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://kit.fontawesome.com/2e9b34a81e.js"></script>
    <style>
    * {
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.25 Verdana,sans-serif;
      background-color: #FFF;
    }
    .grid {
      display: grid;
      align-content: start;
      justify-content: center;
      margin: auto;
      padding: 0;
      max-width: 60em;
      min-height: 100vh;
      border: 1px solid #000;
      /* grid-template-columns: 200px 600px;/*--*/
      grid-template-columns: 200px 1fr;
      grid-template-rows: auto auto 1fr auto;
      grid-gap: 0;
    }
    .header {
      display: flex;
      padding: 0;
      background-color: #ADBC81;
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .header-logo {
      padding: 1rem;
    }
    .header-logo img {
      display: block;
    }
    .header-info {
      flex: 1 0 auto;
      align-self: flex-end;
      padding: 0 10px 5px 0;
      text-align: right;
      white-space: nowrap;
    }
    .ariane {
      padding: 7px;
      color: #FFF;
      background-color: #000;
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .aside {
      padding: 10px;
      border: 1px solid #000;
      border-width: 1px 0;
    }
    .aside a {
      display: inline-block;
      padding: .25em .5em;
      min-width: 6em;
      border: 1px solid #000;
      text-align: center;
      text-decoration: none;
      background-color: #ADBC81;
      box-shadow: 0.25em 0.25em 0.5em #AAA;
    }
    .main {
      border: 1px solid #000;
      border-width: 1px 0;
    }
    .footer {
      padding: 5px;
      text-align: center;
      font-size: .6rem;
      line-height: 2;
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .footer p {
      margin: 0;
    }
    .footer i {
      font-size: 1.25rem;
    }
    </style>
    </head>
    <body>
    <div class="grid">
      <div class="header">
        <div class="header-logo">
          <img src="images/designs/logo.png" alt="Logo Gwanda.ch">
        </div>
     
        <div class="header-info">
          <div>
            <?=ucFirst($dateExtract->joursTXT(date('w')));?>
            <?=date('j');?>
            <?=$dateExtract->moisTXT(date('n')-1);?>
            <?=date('Y');?> -
            <span id="horloge"></span>
          </div>
        </div>
      </div>
     
      <div class="ariane">
        <div>
          <i class="fas fa-chevron-right"></i> Accueil
        </div>
      </div>
     
      <div class="aside">
        <a href="index.php" target="_parent">
          Accueil
        </a>
      </div>
     
      <div class="main">
        <section>CONTENU.... CONTENU.... CONTE</section>
      </div>
     
      <div class="footer">
        <p>
          <a href="" target="_parent" title="Remonter sur le haut de la page">
            <i class="fas fa-sort-up"></i>
          </a>
        </p>
        <p>
          <a href="gwanda.ch" target="_parent">Gwanda.ch</a> -
          <a href="contact.php" target="_parent">Contact</a>
        </p>
        <p class="footer-maj">
           Mise &agrave; jour de la page, le  <?=MAJ;?>
        </p>
      </div>
    </div>
     
    <script>
    function horloge() {
      var div = document.getElementById("horloge");
      var heure = new Date();
      var hours = (heure.getHours() < 10) ? "0" + heure.getHours() : heure.getHours();
      var minutes = (heure.getMinutes() < 10) ? "0" + heure.getMinutes() : heure.getMinutes();
      var seconds = (heure.getSeconds() < 10) ? "0" + heure.getSeconds() : heure.getSeconds();
      //div.firstChild.nodeValue = hours + ":" + minutes + ":" + seconds;
      div.textContent = hours + ":" + minutes + ":" + seconds;
      window.setTimeout(horloge, 1000);
    }
    horloge();
    </script>
    </body>
    </html>
    Certaines de tes balises pourraient être remplacé par des balises plus sémantiques, comme <header>,<main>,nav> mais bon ..!


    Je suis désolée, mais mis à part pour ma classe .tabloPrincipal je n'ai pas utilisé de style "inline", à moins que je n'ai pas compris !?
    Pour ma classe .tabloPrincipal, j'ai été obligée de l'utiliser, car autrement mon tableau prends toute la largeur de la page.
    Regarde comment est gérer le style et les contraintes en utilisant la « cascade » du CSS.


    Je me suis dis mais pourquoi faire un 'Grid Layout' si je peux utiliser un flex, surtout si mon logo et ma date se trouve sur une seule ligne !
    J'aurais tendance à dire, de façon raccourci, que flex pour les composants et grid pour la mise en page.
    Dans le cas que tu cites, ton <header> peut effectivement être en flex mais également en grid en prenant en compte 2 colonnes sur ta première ligne.

    Là c'est une question de choix et dépend aussi de comment tu veux gérer ta page avec les média-queries.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="grid">
      <div class="logo"></div>
      <div class="info"></div>
     
      <div class="ariane"></div>
     
      <div class="aside"></div>
      <div class="main"></div>
     
      <div class="footer"></div>
    </div>
    avec des « areas » définies comme suit, c'est une autre façon de faire :
    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
    .grid {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      grid-template-columns: 200px 1fr;
      grid-template-areas: "logo info"
                           "ariane ariane"
                           "sidebar main"
                           "footer footer";
    }
    /*-- définitions des zones --*/
    .logo     { grid-area: logo;}
    .info     { grid-area: info;}
    .ariane   { grid-area: ariane;}
    .sidebar  { grid-area: sidebar;}
    .main     { grid-area: main;}
    .footer   { grid-area: footer;}

  7. #7
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Clair que du point de vue HTML, c’est nettement plus clair !! Et du point de vue CSS, oui, c’est un peu plus complexe. Je vais aller étudier tout ça dans les moindres détails, car effectivement, lorsque l’on ajoute du contenu dans les pages, si on peut avoir un minimum de HTML et mettre un maximum en CSS, c’est quand même mieux ! En tout cas, je te remercie beaucoup pour cette mise en page ! Car cela m’aide énormément à comprendre le principe.

    Citation Envoyé par NoSmoking Voir le message
    Certaines de tes balises pourraient être remplacé par des balises plus sémantiques, comme <header>,<main>,nav> mais bon ..!
    Je ne connais pas très bien la sémantique, mais je pourrais alors écrire mon HTML plus ou moins comme cela :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    <head></head>
    <body>
       <logo></logo>
       <nav></nav>
       <main></main>
       <footer></footer>
    </body>
    </html>
    Ou est-ce que je dois les garder dans les balises <div> ? Je savais que l’on pouvait définir certaine balise selon certains contenus, mais je ne savais pas que c'était de la sémantique et je ne savais pas que c'était très utiles pour les mal-voyants et les moteurs de recherche. Je viens de l'apprendre en faisant une petite recherche sur le net.

    Citation Envoyé par NoSmoking Voir le message
    avec des « areas » définies comme suit, c'est une autre façon de faire :
    J’avais entrevue les areas sur le w3School. Donc, si je veux utiliser la sémantiques, c’est mieux d’utiliser ce principe alors ?

  8. #8
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Je viens de regarder mon site depuis mon téléphone et c’est une CATASTROPHE ! Lorsque j’utilisais les balise <table> le site s’affichait en tout petit, mais proportionnel à ce que je voyais sur le PC. Mais depuis que j’ai tout modifié pour utiliser le CSS au lieu des balises <table>, tout est devenu difforme et c’est vraiment horrible !!!

    Donc, à ce stade et vu ce que je viens de voir, je me questionne grandement sur la qualité vis-à-vis du CSS… Je ne veux pas critiquer le CSS, parce que j’apprécie l’utiliser pour la mise en page, mais avec ce que je viens de voir sur mon téléphone, je suis très sérieusement déçue.

    Quoi qu’il en soit, je ne peux pas laisser le design se déformer de la sorte. Donc, soit je laisse radicalement tomber le CSS et je l’utiliserais pour des petites choses ; Soit je suis dans l’obligation de changer radicalement le design de mon site. Et si je décide de changer radicalement le design de mon site, je vais être dans l’obligation de le faire en responsive et ça ne m’arrange pas vraiment… Donc, je reste mitigée et très très très indécise. Mais il est clair que je ne peux pas laisser le design se déformer comme ça

  9. #9
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 236
    Par défaut
    Je viens de regarder mon site depuis mon téléphone et c’est une CATASTROPHE !
    Il serait bon dans ce cas que tu nous donne l'adresse de celui-ci pour que l'on puisse y jeter un oeil !


    tout est devenu difforme et c’est vraiment horrible !!!
    Au départ il ne faut pas oublier une ligne comme <meta name="viewport" content="width=device-width, initial-scale=1.0"> qui fait des miracles.


    Quoi qu’il en soit, je ne peux pas laisser le design se déformer de la sorte
    L'utilisation des « grid » associée aux « média queries » est une bénédiction pour peu que cela soit bien appliqué, mais il est vrai que cela n'est pas forcément évident au premier abord


    Pour te montrer ce que l'on peut faire simplement, j'ai mis un exemple en ligne :


    A peu de choses près cela ressemble à ce que tu souhaites faire, bonne lecture.

  10. #10
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Tu peux voir la page sous l’adresse : https://www.gwanda.ch/index.php
    Et la page TEST où j'analysais le design que tu m'avais proposé : https://www.gwanda.ch/tests.php

    Depuis le PC, tout s’affiche correctement et proportionnel. Donc, tous les textes sont de la même taille. Seulement, depuis le téléphone, les boutons et les textes du menu sont minuscules et disproportionnel au contenu du reste de la page… Je suis peintre décoratrice de profession et ce genre de vue me fait vraiment très mal aux yeux !

    Cet après-midi, j’ai pas mal réfléchi à mon site et ce que je veux faire de lui… En gros, l’une des plus grosse partie de ce site sera des tutoriels en image munie de messageries, alors il y aura tout de même pas mal d’utilisateurs qui viendront sur mon site avec leur téléphone. Ce qui m’oblige d’utiliser une architecture ‘responsive’ bien que je voulais éviter. Mais là, je n’ai plus le choix et de toute manière, il faut que je m’adapte…

    Si je ne suis pas chaude pour l’utilisation d’un design responsive, c’est que cet été, j’ai aidé un ami à faire son site en responsive. Ce qui m’a donné l’envie de tester cette pratique sur mon site. L’idée en elle-même est très intéressante, mais pour des personnes qui ne sont pas habitué à l’utilisation d’internet, s’ils ont l’habitude de voir le site depuis un PC et qu’après ils vont sur le site depuis leur téléphone, de ne plus voir le site comme ils ont l’habitude de le voir, ils sont complètement perdu. Ce fut le cas pour mes parents. Ils ont entre 75 et 85 ans et ils ne sont pas habitués à l’utilisation d’internet. Avec les temps d’aujourd’hui, ils ont été obligé de s’y mettre, mais c’est encore très compliqué pour eux et surtout pour ma maman qui n’avait jamais touché un ordinateur de sa vie. Ce que je veux dire par là, c’est que des utilisateurs peuvent être complètement perdu lorsque les parties du site se déplace et ils ne savent plus où regarder et ou chercher, car ça les déstabilise. Donc, bien que je trouve l’idée super pratique et intéressante d’un œil de développeur, en voyant la réaction de mes parents, cela m’a fait pas mal réfléchir… C’est un peu pour cela, que lorsque j’ai refait mon site dernièrement, j’ai essayé d’éviter au maximum le côté responsive pour ne pas déstabiliser ce genre d’utilisateur.

    Ceci-dit, j’ai été voir l’exemple que tu m'as donné et il est vraiment super ! C’est une belle présentation et j’avoue que cela me donne envie. Mais comme je le disais, le bémol est pour les utilisateurs comme mes parents qui vont plus rien y comprendre et être totalement déstabilisé. Je n’aurais pas vu la réaction de ma maman lorsqu’elle a vu mon site depuis son téléphone, j’aurais sans hésité utilisé un design en responsive, c’est clair !

    Alors, cet après-midi, j’ai un peu médité à tout cela et sachant que ma maman utilisera très souvent mon site, je me dois de penser à ce genre d’utilisateur. Je dois trouver un design qui sera identique qu’il soit vu depuis un PC, une tablette ou encore un téléphone. Je ne sais pas si c’est une bonne idée, mais j’ai pensé à mettre le menu en horizontal et éventuellement de le faire interagir en tant que sticky. Ce qui laissera la place pour le contenu et pausera moins de problème sur le contenu des pages. Mais voilà, un menu à l’horizontal apporte certains inconvénient lorsque l’on a beaucoup de catégorie et que certaines ont des mots assez grand comme par exemple ‘programmations’. Il suffirait que je place encore un ‘immobilier’, un ‘dictionnaire’ et un ‘décorations’ que sur un téléphone, la barre du menu sera plaine.

    Bref, tout ça pour dire que je pense à pleins de solutions, mais impossible de trouver une qui compatible PC, tablette et téléphone en évitant de faire bouger les blocs des pages.

  11. #11
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 420
    Par défaut
    Citation Envoyé par RinaBK Voir le message
    Je n’aurais pas vu la réaction de ma maman lorsqu’elle a vu mon site depuis son téléphone, j’aurais sans hésité utilisé un design en responsive, c’est clair !
    Oui ça peut surprendre pour quelqu'un qui n'a pas l'habitude, mais normalement il ne faut pas beaucoup de temps pour s'adapter. Dans tous les cas, que ce soit sur portable ou sur pc, si on a pas l'information voulue en première intention on scrolle vers le bas, c'est pas un automatisme difficile à acquérir. Et puis tu peux lui expliquer, non ?

    Citation Envoyé par RinaBK Voir le message
    Je dois trouver un design qui sera identique qu’il soit vu depuis un PC, une tablette ou encore un téléphone.
    Une seule solution pour ça, c'est de faire un site à une seule colonne. Si plusieurs colonnes, il est bien évident que tu ne pourras pas les faire tenir sur un plus petit espace. La seule chose que tu ne pourras pas éviter c'est de transformer ton menu horizontal avec plusieurs liens côte à côte, en menu vertical pour les smartphones, avec des liens les uns en dessous des autres. Mais c'est pas déroutant puisqu'on les a sous les yeux.

    Après si tu veux ne pas modifier la présentation des menus tu peux faire deux menus verticaux aussi bien sur desktop que sur smartphone comme ici. Mais à part ces deux solutions je ne vois pas ce que tu pourrais trouver d'autre, car ce n'est pas un problème technique, mais tout simplement un problème de place disponible sur l'écran.

  12. #12
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Oui ça peut surprendre pour quelqu'un qui n'a pas l'habitude, mais normalement il ne faut pas beaucoup de temps pour s'adapter. Dans tous les cas, que ce soit sur portable ou sur pc, si on a pas l'information voulue en première intention on scrolle vers le bas, c'est pas un automatisme difficile à acquérir. Et puis tu peux lui expliquer, non ?
    Oh, bien sur que je peux lui expliquer. D'ailleurs, à chaque fois qu'elle doit utiliser sa tablette, elle me téléphone pour me demander comment on fait déjà.. Pour des gens comme nous, c'est facile car nous avons tous un peu grandi et évoluer dans l'informatique. Mais des gens comme ma maman, qui découvre Internet pas parce qu'ils ont envie, mais par obligation, c'est tout autre chose. Tu sais, beaucoup de personne du 3e âge ne sont pas capable de simplement retirer de l'argent dans un distributeur ou encore simplement payer avec une carte de crédit leur courses. Je parle de ma maman, mais ce n'est pas la seule, j'ai souvent eu affaire avec ce genre de personne qui, malgré que tu prends le temps de leur monter et expliquer, qu'ils n'y arrivent pas. C'est pour cela que je réfléchi à un design facile et pas trop déstabilisant.


    Citation Envoyé par ABCIWEB Voir le message
    Une seule solution pour ça, c'est de faire un site à une seule colonne. Si plusieurs colonnes, il est bien évident que tu ne pourras pas les faire tenir sur un plus petit espace. La seule chose que tu ne pourras pas éviter c'est de transformer ton menu horizontal avec plusieurs liens côte à côte, en menu vertical pour les smartphones, avec des liens les uns en dessous des autres. Mais c'est pas déroutant puisqu'on les a sous les yeux.

    Après si tu veux ne pas modifier la présentation des menus tu peux faire deux menus verticaux aussi bien sur desktop que sur smartphone comme ici. Mais à part ces deux solutions je ne vois pas ce que tu pourrais trouver d'autre, car ce n'est pas un problème technique, mais tout simplement un problème de place disponible sur l'écran.
    Justement, j'ai pensé à mettre le menu de navigation en sticky et horizontal pour obtenir une colonne (voir ici), mais le problème est que depuis mon téléphone, le menu est minuscule comparé au contenu de la page. J'ai essayé de changer la taille des textes du menu, mais il ne bouge pas d'un poile. Quand mon menu de navigation et à l'intérieur d'un grid-layer, ou autre CSS du genre, le texte du menu est tout petit et trop petit pour être utilisable. Cependant, si je le sors du grid-layer, les liens s'affiche normalement.

    J'ai fait un test, j'ai utiliser ce code que j'ai copier/coller sur une page depuis le w3school :
    Code CSS : 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
     
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
      .example {background: red;}
    }
     
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
      .example {background: green;}
    }
     
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
      .example {background: blue;}
    } 
     
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
      .example {background: orange;}
    } 
     
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
      .example {background: pink;}
    }
    Sur mon PC, j'obtiens le rose, ce qui est juste. Sur ma tablette, j'obtiens le bleu, là aussi c'est correct. Mais sur mon téléphone au lieu d'obtenir le rouge, j'obtiens le bleue, ce qui est faux. Je n'ai pas un grand téléphone vu que j'ai un Huawei P smart 2019 POT-LX1. J'ai essayé aussi depuis un OPPO de la même taille et j'obtiens aussi la couleur bleu au lieu du rouge. Donc, effectivement, il doit y avoir un problème sur ma page. Car lorsque je vais sur le w3scool depuis mon téléphone, j'ai bien le design du w3scool en format téléphone.

    En sachant que le problème vient de ma page, j'ai repris un nouveau fichier et j'ai tout retaper à la main, j'ai ensuite tout décortiqué, ensuite, j'ai recopier chaque élément directement depuis le w3shool, mais rien à faire.. Voici le code source de la page où je test les couleurs :
    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
    <!DOCTYPE html>
    <html lang="fr-CH">
    <head>
    	<title>Gwanda.ch</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
    	<meta http-equiv="pragma" content="no-cache" />
    	<meta http-equiv="viewport" content="width=device-width, initial-scale=1.0" />
    	<link rel="stylesheet" href="images/designs/styles2.css" />
    </head>
     
     
     
    <body>
     
     
    <img src="images/designs/logo.png" border="0" alt="Logo : Gwanda.ch" style="padding: 15px;">
    <p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>
     
     
    </body>
    </html>
    et ma page CSS :
    Code CSS : 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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
     
    body {
    	font-size: 15px;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	margin: 0px;
    	padding: 0px;
    }
     
    a:link, a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    a:hover {
    	color: #F30C2F;
    	text-decoration: none;
    }
    a:active {
    	color: #FFFF4F;
    	text-decoration: none;
    }
     
    .example {
      padding: 20px;
      color: white;
    }
     
    .example {
      padding: 20px;
      color: white;
    }
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
      .example {background: red;}
    }
     
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
      .example {background: green;}
    }
     
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
      .example {background: blue;}
    } 
     
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
      .example {background: orange;}
    } 
     
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
      .example {background: pink;}
    }
    Comme vous pouvez le voir, il n'y a rien mis à part la gestion des couleurs en responsive. Donc, je ne comprends pas pourquoi j'obtiens toujours la couleur bleu sur le téléphone...





    Concernant ma page où j'ai ce bug sur le menu, voici sont code source :
    A savoir que vu ce qui se passait avec l’ancien design qui avait le menu sur la gauche, j'ai refait la page pour le menu en horizontal :
    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    <!DOCTYPE html>
    <html lang="fr-CH">
    <head>
    	<title>Gwanda.ch</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
    	<meta http-equiv="pragma" content="no-cache" />
    	<meta http-equiv="viewport" content="width=device-width, initial-scale=1.0" />
    	<link rel="stylesheet" href="images/designs/styles.css" />
    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    	<script src="https://kit.fontawesome.com/2e9b34a81e.js"></script>
    </head>
     
     
     
    <body>
     
     
     
    <div class="pageGrid">
     
    	<div class="pageContenu">
     
     
    		<div class="header">
    			<img src="images/designs/logo.png" border="0" alt="Logo : Gwanda.ch" style="padding: 15px 0px 0px 15px;">
    		</div>
     
    		<div class="navbar">
     
    			<ul>
    				<li class="dropdown">
    					<a href="index.php" target="_parent" class="dropbtn" title="Page d'accueil de Gwanda.ch">Accueil</a>
    					<div class="dropdown-content">
    						<a href="#">News</a>
    						<a href="#">Statistiques</a>
    					</div>
    				</li>
    				<li class="dropdown">
    					<a href="index.php" target="_parent" title="Les outils rélalisés par Gwanda.ch">Utilitaires</a>
    					<div class="dropdown-content">
    						<a href="#">Comptabilité</a>
    						<a href="#">Divers</a>
    					</div>
    				</li>
    				<li class="dropdown">
    					<a href="index.php" target="_parent" title="Tutoriels, aides et astuces concernant les jeux">Jeux</a>
    					<div class="dropdown-content">
    						<a href="#">HayDay</a>
    						<a href="#">Sims</a>
    						<a href="#">SimCity</a>
    					</div>
    				</li>
    				<li class="dropdown">
    					<a href="index.php" target="_parent" title="Tutoriels et aides pour différentes catégories">Tutoriels</a>
    					<div class="dropdown-content">
    						<a href="#">Cuisine</a>
    						<a href="#">Décorations</a>
    						<a href="#">Jardinage</a>
    					</div>
    				</li>
    				<li style="float:right"><a href="index.php" target="_parent" title="Partie Membres de Gwanda.ch">Membres</a></li>
    			</ul>
     
    		</div>
     
    		<div class="contenu">
    			<? $salutations = ((date('G') > 3) && (date('G') < 17)) ? 'Bonjour' : 'Bonsoir'; ?>
    			<b style="font-size: 19px;"><?=$salutations;?>,</b>
    			<div align="justify">
    				Nous avons tous des passions communes, des intérêts communs et des choses que nous aimons partager 
    				avec ceux qui ont les mêmes intérêts. Pour certains c'est le sport, pour d'autres le jardinage ou encore la 
    				cuisine, voire encore les voyages... Il y a ceux qui utilisent simplement Facebook ou une autre interface 
    				similaire, d'autres qui ont un blog ou une chaine YouTube pour partager leurs passions. Quand on aime 
    				et que l'on a des notions pour réaliser son site web soi-même, il n'est plus question d'utiliser des interfaces 
    				prêtes à l'emploi, mais de réaliser son site selon ces envies et ces motivations. Si vous êtes arrivé sur mon 
    				site, c'est que nous avons très certainement des intérêts communs. Donc, profitez de l'occasion de votre 
    				présence ici pour faire le tour du propriétaire !
    			</div>
    			<div align="center" style="font-size: 20px; padding: 10px 0px 0px 0px;"><a href="" target="_parent" title="Remonter sur le haut de la page"><i class="bi bi-chevron-double-up"></i></a></div>
    		</div>
     
    		<div class="footer" align="center">
     
    		</div>
     
    	</div>
     
    </div>
     
     
    </body>
    </html>
    Et la page styles.css :
    Code CSS : 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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    body {
    	font-size: 15px;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	margin: 5px;
    	padding: 0px;
    }
     
    a:link, a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    a:hover {
    	color: #F30C2F;
    	text-decoration: none;
    }
    a:active {
    	color: #FFFF4F;
    	text-decoration: none;
    }
     
     
    .header { grid-area: header; }
    .navbar { grid-area: navbar; }
    .contenu { grid-area: contenu; }
    .footer { grid-area: footer; }
     
     
    .pageGrid {
    	display: grid;
    	justify-content: center;
    	grid-template-columns: auto;
    	grid-template-rows: auto auto auto auto;
    	grid-template-areas: 'header' 'navbar' 'contenu' 'footer';
    }
     
     
    .pageContenu {
    	width: 900px;
    }
     
     
    .header {
    	border: 1px solid #000000;
    	background-color: #ADBC81;
    }
     
     
     
    /*	MENU DE NAVIGATION */
     
    .navbar {
    	color: #FFFFFF;
    	border: 1px solid #000000;
    	background-color: #000000;
    	position: -webkit-sticky; /* Safari */
    	position: sticky;
    	top: 0;
    }
     
    ul {
    	color: #FFFFFF;
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	overflow: hidden;
    	background-color: #000000;
    }
    li {
    	float: left;
    	border-right: 1px solid #FFFFFF;
    }
    li:last-child {
    	border-right: none;
    }
    li a, .dropbtn {
    	display: inline-block;
    	text-align: center;
    	padding: 7px 11px 7px 11px;
    	text-decoration: none;
    }
    li a, li a:link, li a:visited, .dropbtn {
    	color: #FFFFFF;
    }
    li a:hover, .dropdown:hover .dropbtn {
    	color: #000000;
    	background-color: #ADBC81;
    }
    li.dropdown {
    	display: inline-block;
    }
    .dropdown-content {
    	display: none;
    	position: absolute;
    	background-color: #000000;
    	min-width: 160px;
    	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    	z-index: 1;
    }
    .dropdown-content a {
    	color: #FFFFFF;
    	padding: 7px 11px 7px 11px;
    	text-decoration: none;
    	display: block;
    	text-align: left;
    }
    .dropdown-content a:hover {
    	color: #000000;
    	background-color: #ADBC81;
    }
    .dropdown:hover .dropdown-content {
    	display: block;
    }
     
     
     
    .contenu {
    	border: 1px solid #000000;
    	padding: 15px;
    }
     
     
    .footer {
     
    }

    A oui, j'ai même modifier la taille de mes texte en em, j'ai aussi mis font-size: 15px; ou font-size: 1em; partout dans toutes mes fonctions CSS, mais rien à faire...

  13. #13
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 236
    Par défaut
    Tout d'abord je tiens à préciser que l'exemple que j'ai fourni était à vocation d'exemple pour voir ce que l'on peut facilement faire avec les grid associés aux media queries, mais cela n'a jamais était une obligation.

    Plusieurs points essentiels :
    • supprime tes balises <meta> obsolètes
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
    <meta http-equiv="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="pragma" content="no-cache" />
    ... et remplace les par :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • oublie le dimensionnement des éléments en valeur fixe, comme le px, on trouve dans ton CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .pageContenu {
       width: 900px;           /* ça c'est la mort du « resposive ]» */
    }
    ... il te faut le remplacer, par exemple par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .pageContenu {
       width: auto;            /* laisse faire la nature, ce sera 100% du conteneur, mais pas utile d'ailleurs c'est par défaut */
       max-width: 900px;       /* limite la taille, surtout sur grand écran */
    }
    Pour la suite il y aura d'autres préoccupations à prendre en compte, comme l'utilité de voir tel ou tel élément sur smartphone, typiquement l'affichage de la date pas vraiment utile, utilisation de menu dit « hamburger », dimensions du logo qui mange trop de place ...

  14. #14
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Tout d'abord je tiens à préciser que l'exemple que j'ai fourni était à vocation d'exemple pour voir ce que l'on peut facilement faire avec les grid associés aux media queries, mais cela n'a jamais était une obligation.
    J'avais bien compris ! ..Et si je me suis mise à utiliser le CSS pour ma mise en page, c'est que justement ça m'intéresse. C'est juste gonflant quand on reste coincé et qu'on a beau chercher dans tous les sens, on ne trouve pas la réponse Mais je suis du genre à persévérer, car si non, j'aurais abandonné depuis longtemps


    Citation Envoyé par NoSmoking Voir le message
    Plusieurs points essentiels :
    • supprime tes balises <meta> obsolètes
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
    <meta http-equiv="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="pragma" content="no-cache" />
    ... et remplace les par :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • oublie le dimensionnement des éléments en valeur fixe, comme le px, on trouve dans ton CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .pageContenu {
       width: 900px;           /* ça c'est la mort du « resposive ]» */
    }
    ... il te faut le remplacer, par exemple par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .pageContenu {
       width: auto;            /* laisse faire la nature, ce sera 100% du conteneur, mais pas utile d'ailleurs c'est par défaut */
       max-width: 900px;       /* limite la taille, surtout sur grand écran */
    }
    OUAWW ! Effectivement, ça fonctionne super !!!
    Mais c'est assez hallucinant, car dans un sens, les métas n'étaient pas faux, mais il a suffit de les mettre en forme courte pour que cela fonctionne. Je mettais la faute sur les grid-layer car il suffisant que je sorte le menu pour que cela fonctionnait, mais étonnamment même les codes donnés par le w3shool ne fonctionnait pas, ce que je trouvais assez bizarre. C'est d'ailleurs, pour cela que pour finir, je me suis amusée à tout virer le design et je suis passé aux couleurs spécifiés pour les résolutions d'écran. Comme quoi, des fois il ne faut pas grand chose...

    Ceci-dit, je me pose la question, si d'enlever le meta "no-cache" cela permet d'afficher la page correctement, comment je fais pour éviter que le navigateur enregistre le site dans le cache?



    Citation Envoyé par NoSmoking Voir le message
    Pour la suite il y aura d'autres préoccupations à prendre en compte, comme l'utilité de voir tel ou tel élément sur smartphone, typiquement l'affichage de la date pas vraiment utile, utilisation de menu dit « hamburger », dimensions du logo qui mange trop de place ...
    Oui, pour la date et l'heure, j'y avais pensé et d'ailleurs, ce n'est pas la seule chose que je pourrais viré pour l'affichage sur le téléphone. A vrai dire, au départ, j'avais mis la date et l'heure pour combler le vide qu'il y avait dans le cadre du logo. Et nous sommes aussi d'accord qu'il y a tout à remodeler pour les téléphones


    Maintenant que tout fonctionne, je me questionne sur un autre point au sujet du menu. Quand on a un écran tactile, et que l'on veut afficher les sous-catégorie dans le menu, on est obligé de cliquer sur le menu en question pour les afficher. Cependant, on est directement redirigé sur la page de la catégorie. Cette page est utile pour moi, car j'y affiche certaines choses que je ne peux pas afficher dans les sous-catégorie. Mais le fait de cliquer sur la catégorie, cela nous oblige de nous diriger sur la catégorie et cela ferme en même temps le menu. Donc, cela devient difficile de cliquer sur une sous-catégorie. Vu le problème, je me demande si ce genre de menu est bien adapté !?

  15. #15
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 236
    Par défaut
    Mais c'est assez hallucinant, car dans un sens, les métas n'étaient pas faux,
    si car ici tu es en HTML5 because la déclaration <!DOCTYPE html>.


    Ceci-dit, je me pose la question, si d'enlever le meta "no-cache" cela permet d'afficher la page correctement, comment je fais pour éviter que le navigateur enregistre le site dans le cache?
    comme ta page est en PHP, il te faut le gérer en PHP avec par exemple, si je ne m'abuse un
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    header("Cache-Control: no-cache, must-revalidate");


    je me questionne sur un autre point au sujet du menu. Quand on a un écran tactile, ...
    Il est a noter que le hover sur tactile n'existe pas, il faut mettre le doigt dessus et cela peut correspondre à un clic et donc si il y a un lien cela redirige direct.
    Néanmoins ton menu est mal structuré, il ne faut pas mettre de <a> si tu as des sous menu et utiliser le couple <ul><li> de bon aloi.

    Tu pourrais simplement remplacer ton menu par le code suivant :
    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
    <ul>
      <li class="dropdown">
        Accueil
        <ul class="dropdown-content">
          <li><a href="#">News</a></li>
          <li><a href="#">Statistiques</a></li>
        </ul>
      </li>
      <li class="dropdown">
        Utilitaires
        <ul class="dropdown-content">
          <li><a href="#">Comptabilité</a></li>
          <li><a href="#">Divers</a></li>
        </ul>
      </li>
      <li class="dropdown">
        Jeux
        <ul class="dropdown-content">
          <li><a href="#">HayDay</a></li>
          <li><a href="#">Sims</a></li>
          <li><a href="#">SimCity</a></li>
        </ul>
      </li>
      <li class="dropdown">
        Tutoriels
        <ul class="dropdown-content">
          <li><a href="#">Cuisine</a></li>
          <li><a href="#">Décorations</a></li>
          <li><a href="#">Jardinage</a></li>
        </ul>
      </li>
      <li style="float:right">
        <a href="index.php" target="_parent" title="Partie Membres de Gwanda.ch">Membres</a>
      </li>
    </ul>
    il te faut reprendre un minimum ton CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    li {
    /*  float: left;  /* à supprimer */
      border-right: 1px solid #FFFFFF;
    }
    et sûrement d'autres petits aménagements.

  16. #16
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    En tout cas, je te remercie beaucoup pour ton aide !



    Citation Envoyé par NoSmoking Voir le message
    si car ici tu es en HTML5 because la déclaration <!DOCTYPE html>.
    Ah voilà le pourquoi ! Va falloir que je fasse plus attention à cela alors



    Citation Envoyé par NoSmoking Voir le message
    comme ta page est en PHP, il te faut le gérer en PHP avec par exemple, si je ne m'abuse un
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    header("Cache-Control: no-cache, must-revalidate");
    euuh, mais j'y ai même pas pensée ! J'étais tellement dans ma page HTML que j'en ai presque oublié mon PHP




    Citation Envoyé par NoSmoking Voir le message
    Il est a noter que le hover sur tactile n'existe pas, il faut mettre le doigt dessus et cela peut correspondre à un clic et donc si il y a un lien cela redirige direct.
    Néanmoins ton menu est mal structuré, il ne faut pas mettre de <a> si tu as des sous menu et utiliser le couple <ul><li> de bon aloi.......
    .......et sûrement d'autres petits aménagements.
    Oui, justement le hover ne fonctionne pas sur l'écran tactile ! Dis comme ça c'est nettement plus clair que mon explication qui tourne en rond
    Donc hier, après avoir lu ton message, je suis direct partie sur ma page pour déjà modifiée la correction que tu m'as donné. Et je t'en remercie
    Ceci-dit, j'ai voulu continuer ma page, mais je dois avouer que malgré tout, mon menu de navigation me dérangeait quand même un peu... J'ai fini par retourner sur le w3Shool pour tenter de l'améliorer et c'est ce que j'ai fais. Sur téléphone, il se transforme en bouton et sur PC, il est en ligne. Bref, je pense que même si il change entre le PC et le téléphone, cela reste tout de même compréhensible pour des utilisateur comme ma maman. J'ai gardé la méthode sticky pour que la ligne du menu reste visible même si on descend la page. J'ai aussi ajouté un bouton qui s'affiche lorsque l'on descend la page pour remonter sur le haut. Oui, Oui... Se sont tous des codes que j'ai repris des HowToo du w3shool

    Je vais encore rajouter la date et l'heure uniquement pour les grands écrans et elle sera en hidden pour les petits comme le téléphone. Et j'ai encore trouvé quelques petits fonctions que je souhaite encore intégré dans mes pages, mais pour ce qui est de l'architecture de base, je pense que ça ira comme ça. Du moins, je l'espère !


    Voici le résultat -> https://www.gwanda.ch/index.php


    Pour ce qui est de ma page styles.css :
    Code CSS : 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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
     
    body {
    	font-size: 15px;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	margin: 7px;
    	padding: 0px;
    }
     
    a:link, a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    a:hover {
    	color: #F30C2F;
    	text-decoration: none;
    }
    a:active {
    	color: #FFFF4F;
    	text-decoration: none;
    }
     
     
    .logo {
    	display: block;
    	max-width: 100%;
    	padding: 7px 0px 0px 7px;
    }
     
     
     
    #btTop {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      font-size: 30px;
      border: none;
      outline: none;
      background-color: #FFFFFF;
      color: #000000;
      cursor: pointer;
      padding: 10px 15px;
      border-radius: 4px;
    }
     
    #btTop:hover {
      background-color: #ADBC81;
    }
     
     
     
    .header { grid-area: header; }
    .navbar { grid-area: navbar; }
    .contenu { grid-area: contenu; }
    .footer { grid-area: footer; }
     
     
    .pageGrid {
    	display: grid;
    	justify-content: center;
    	grid-template-columns: auto;
    	grid-template-rows: auto auto auto auto;
    	grid-template-areas: 'header' 'navbar' 'contenu' 'footer';
    }
    .pageContenu {
       width: auto;
       max-width: 900px;
    }
     
     
    .header {
    	border: 1px solid #000000;
    	background-color: #ADBC81;
    }
    .navbar {
    	color: #FFFFFF;
    	border: 1px solid #000000;
    	background-color: #000000;
    	position: -webkit-sticky;
    	position: sticky;
    	top: 0;
    }
    .contenu {
    	border: 1px solid #000000;
    	padding: 15px;
    }
    .footer {
    	font-size: 11px;
    	color: #ADBC81;
    	padding: 3px;
    }
     
     
     
    .topnav {
    	overflow: hidden;
    	background-color: #333;
    }
    .topnav a {
    	float: left;
    	display: block;
    	color: #f2f2f2;
    	text-align: center;
    	padding: 14px 16px;
    	text-decoration: none;
    	font-size: 17px;
     
    }
    .active, .active:link, .active:visited {
    	background-color: #ADBC81;
    	color: #000000;
    }
    .topnav .icon {
    	display: none;
    }
    .dropdown {
    	float: left;
    	overflow: hidden;
    }
    .dropdown .dropbtn {
    	font-size: 17px;
    	border: none;
    	outline: none;
    	color: #FFFFFF;
    	padding: 14px 16px;
    	background-color: inherit;
    	font-family: inherit;
    	margin: 0;
    }
    .dropdown-content {
    	display: none;
    	position: absolute;
    	background-color: #f9f9f9;
    	min-width: 160px;
    	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    	z-index: 1;
    }
    .dropdown-content a {
    	float: none;
    	color: black;
    	padding: 12px 16px;
    	text-decoration: none;
    	display: block;
    	text-align: left;
    }
    .topnav a:hover, .dropdown:hover .dropbtn {
    	background-color: #555;
    	color: #FFFFFF;
    }
    .dropdown-content a:hover {
    	background-color: #ddd;
    	color: black;
    }
    .dropdown:hover .dropdown-content {
    	display: block;
    }
     
     
     
     
    @media screen and (max-width: 600px) {
    	.topnav a:not(:first-child), .dropdown .dropbtn {
    		display: none;
    	}
    	.topnav a.icon {
    		float: right;
    		display: block;
    	}
     
    	.topnav.responsive {
    		position: relative;
    	}
    	.topnav.responsive .icon {
    		position: absolute;
    		right: 0;
    		top: 0;
    	}
    	.topnav.responsive a {
    		float: none;
    		display: block;
    		text-align: left;
    	}
    	.topnav.responsive .dropdown {
    		float: none;
    	}
    	.topnav.responsive .dropdown-content {
    		position: relative;
    	}
    	.topnav.responsive .dropdown .dropbtn {
    		display: block;
    		width: 100%;
    		text-align: left;
    	}
     
     
    	.logo {
    		display: block;
    		max-width: 100%;
    		padding: 7px 0px 0px 0px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	.dropdown .dropbtn {
    		border-radius: 13px 13px 0px 0px;
    	}
    	.active {
    		border-radius: 0px 0px 13px 13px;
    	}
    	body {
    		margin: 0px;
    	}
     
    }


    ...Et la page index.php :
    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
     
    <?php
    //      Date de mise à jour de la page
    define('MAJ','09.02.2021 08:01:51');
     
     
     
    //      Empêcher la mise en cache des pages
    header("Cache-Control: no-cache, must-revalidate");
     
     
     
    ?>
    <!DOCTYPE html>
    <html lang="fr-CH">
    <head>
    	<title>Gwanda.ch</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<link rel="stylesheet" href="images/designs/styles.css" />
    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    	<script src="https://kit.fontawesome.com/2e9b34a81e.js"></script>
    	<meta name="author" content="GREMION Wanda Rébecca">
    	<meta name="description" content="Site personnel d’aide dans différents domaines qui vous propose des tutoriels en images et des outils à dispositions afin de vous aider dans certaines de vos démarches.">
    	<meta name="keywords" content="Gwanda, Gremion, Wanda, Rebecca, RinaBK, Beka, Rina, BK, Tutoriel, HayDay, Sims, Decoration, decor, Outil">
    </head>
     
     
     
    <body>
    	<button onclick="topFunction()" id="btTop" title="Go to top"><i class="fas fa-angle-double-up"></i></button>
     
    <div class="pageGrid">
    	<div class="pageContenu">
     
    		<div class="header"><img src="images/designs/logo.png" border="0" alt="Logo : Gwanda.ch" class="logo"></div>
     
     
    		<div class="navbar">
    			<div class="topnav" id="myTopnav">
    				<a href="index.php" class="active"><i class="fas fa-home"></i></a>
    				<div class="dropdown">
    					<button class="dropbtn">Gwanda <i class="fa fa-caret-down"></i></button>
    					<div class="dropdown-content">
    						<a href="#">Accueil</a>
    						<a href="#">News</a>
    						<a href="#">Statistiques</a>
    						<a href="#">Support</a>
    					</div>
    				</div>
    				<div class="dropdown">
    					<button class="dropbtn">Outils <i class="fa fa-caret-down"></i></button>
    					<div class="dropdown-content">
    						<a href="#">En ligne</a>
    						<a href="#">Office</a>
    						<a href="#">Simleys</a>
    					</div>
    				</div>
    				<div class="dropdown">
    					<button class="dropbtn">HayDay <i class="fa fa-caret-down"></i></button>
    					<div class="dropdown-content">
    						<a href="#">Le jeu</a>
    						<a href="#">Tutoriels</a>
    						<a href="#">Notre équipe</a>
    						<a href="#">Notre règlement</a>
    					</div>
    				</div>
    				<div class="dropdown">
    					<button class="dropbtn">Membres <i class="fa fa-caret-down"></i></button>
    					<div class="dropdown-content">
    						<a href="#">Connexion</a>
    						<a href="#">Inscription</a>
    					</div>
    				</div>
    				<a href="javascript:void(0);" style="font-size:17px;" class="icon" onclick="myFunction()"><i class="fas fa-align-justify"></i></a>
    			</div>
    		</div>
     
     
     
    		<div class="contenu">
    			<? $salutations = ((date('G') > 3) && (date('G') < 17)) ? 'Bonjour' : 'Bonsoir'; ?>
    			<b style="font-size: 15px;"><?=$salutations;?>,</b>
    			<div align="justify">
    				Nous avons tous des passions communes, des intérêts communs et des choses que nous aimons partager avec ceux qui 
    				ont les mêmes intérêts. Pour certains c’est le sport, pour d’autres le jardinage ou encore la cuisine, voire encore les voyages… 
    				Il y a ceux qui utilisent simplement Facebook ou une interface similaire, d’autres qui ont un blog ou une chaine YouTube pour 
    				partager leurs passions.  Quand on aime et que l’on a des notions pour réaliser son site web soi-même, il n’est plus question 
    				d’utiliser des interfaces prête à l’emploi, mais de réaliser son site selon ces envies et ces motivations. Si vous êtes arrivé sur 
    				mon site, c’est que nous avons très certainement des intérêts communs. Donc, profitez de l’occasion de votre présence ici 
    				pour faire le tour du propriétaire !
    			</div>
    		</div>
     
     
    		<div class="footer">
    			<div align="right">Mise à jour de la page, le <?=MAJ;?></div>
    		</div>
     
    	</div>
    </div>
     
     
     
     
     
     
    <script>
            //Get the button
            var mybutton = document.getElementById("btTop");
            
            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function() {scrollFunction()};
            
            function scrollFunction() {
                    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                            mybutton.style.display = "block";
                    } else { mybutton.style.display = "none"; }
            }
            
            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
            }
    </script>
     
     
     
     
    <script>
    function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }
    }
    </script>
     
     
    </body>
    </html>

  17. #17
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 420
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 420
    Par défaut
    Salut,

    Je vois que tu approches de la fin. Trois petites remarques:

    Je suis pas fan des arrondis du menu lors du redimensionnement sur portable, mais bon les goûts et les couleurs...

    Je trouve ta flèche en bas de page (pour remonter en haut) un peu gênante, elle cache un bout de texte et c'est le genre de truc qui m'agace, surtout que son utilité est discutable puisqu'on a un menu permanent disponible en haut de page.

    Aussi le hoover pour ouvrir les menus gagnerait à être désactivé quand le menu passe en mode portable, car sur desktop le menu devient difficilement utilisable et cet effet est inutile sur les portables. Après il est vrai qu'on utilise rarement une petite largeur de page sur desktop mais ce ne devrait pas être difficile à désactiver dans le media query.

    Voilà pour le reste ça roule, je n'ai rien à redire.

    Après dans l'absolu je suis pas fan d'être dépendant d'autres sites pour faire afficher le miens (je parle des liens dans tes balises méta) mais je suis sans doute vieux jeu puisque presque tout le monde le fait maintenant et je dois être un des derniers à faire de la résistance, donc je me garderai d'en faire une critique.

    A bientôt dans le forum php si besoin

  18. #18
    Membre confirmé Avatar de RinaBK
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 50
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2021
    Messages : 92
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Je vois que tu approches de la fin.
    Oui oui oui !! J'ai encore quelques fignolage et normalement, ça devrait être tout bon.


    Citation Envoyé par ABCIWEB Voir le message
    Je suis pas fan des arrondis du menu lors du redimensionnement sur portable, mais bon les goûts et les couleurs...
    Fallait bien que je m'amuse un peu ! C'était surtout pour tester un peu le menu et sa mise en forme. Je pensais au départ faire comme des onglets, mais je n'aimais pas du tout le résultat sur le PC... Donc, j'ai laissé pour le téléphone, car ça allait encore.. Je ne sais pas encore si je vais laisser l'effet, car c'était vraiment pour m'amuser plus qu'autre chose.



    Citation Envoyé par ABCIWEB Voir le message
    Je trouve ta flèche en bas de page (pour remonter en haut) un peu gênante, elle cache un bout de texte et c'est le genre de truc qui m'agace, surtout que son utilité est discutable puisqu'on a un menu permanent disponible en haut de page.
    Mouet.. C'est discutable... Moi, j'aime bien.



    Citation Envoyé par ABCIWEB Voir le message
    Aussi le hoover pour ouvrir les menus gagnerait à être désactivé quand le menu passe en mode portable, car sur desktop le menu devient difficilement utilisable et cet effet est inutile sur les portables. Après il est vrai qu'on utilise rarement une petite largeur de page sur desktop mais ce ne devrait pas être difficile à désactiver dans le media query.
    Effectivement, maintenant que tu en parles et que je regarde ça, c'est quelque peu pas pratique... Je vais voir si je peux faire quelque chose pour changer ça




    Citation Envoyé par ABCIWEB Voir le message
    Après dans l'absolu je suis pas fan d'être dépendant d'autres sites pour faire afficher le miens (je parle des liens dans tes balises méta) mais je suis sans doute vieux jeu puisque presque tout le monde le fait maintenant et je dois être un des derniers à faire de la résistance, donc je me garderai d'en faire une critique.
    Tu parles des sites pour faire afficher les icônes? Car si c'est ça, j'étais comme toi et je préférais les faire moi-même en image. Ceci-dit, j'ai changé d'avis lorsque je me suis rendue compte que ces icônes réagissaient comme du texte. Je trouvais que c’était pas si mal et ça évitait pas mal de soucis lorsque l'on a une image, comme les changement de couleur ou le hover. Bref, et ça m'évitais aussi de passer trop de temps sur Photoshop. Testé et approuvé comme on dit !

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

Discussions similaires

  1. aligner un objet en bas dans une cellule
    Par nass94 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/04/2009, 16h53
  2. espace vide entre une image et le bas d'une cellule d'un tableau
    Par danyboy85 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 18/10/2006, 16h29
  3. [positionnement]image au bas d'une cellule
    Par bakonu dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 15/10/2005, 13h25
  4. Alignement verticale dans une cellule td de tableau table
    Par Longrais dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 16/09/2005, 12h37
  5. aligner verticalement dans une cellule
    Par mic79 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/12/2004, 11h52

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