Bonjour à tous,
Voilà, entre les différentes résolutions d'appareils il faut jongler un maximum avec le code. Du coup, je me demande si mon code est bancal ou pas si ça part pas dans tous les sens et si y a pas moyen de faire beaucoup plus simple pour un résultat parfait d'affichage sur tous écrans.
Mon site est simple, il n'a qu'une page un header avec logo, un petit contenu avec 2 titres, une citation et un player audio, puis enfin, un footer fixe. Si vous avez des idées d'améliorations, n'hésitez pas !

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+DW+Pica&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link rel="icon" href="image/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon" href="image/favicon.png">    
<style>
        body {
            margin: 0;
            background-image: url('image/a.webp');
            background-color: #161616;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            padding: 20px;
            margin-top: 9%;
            flex: 1;
        }

        .logo {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 180px;
            height: 190px;
        }

        h1, h3 {
            font-family: 'IM Fell English SC', serif;
            font-weight: normal;
        }

        h1 {
            margin: 0px 0 0px 0;
            font-size: 9em;
            color: #fff;
            text-shadow: 1px 1px 2px black;
        }

        h2 {
            font-family: 'IM Fell DW Pica', serif;
            font-weight: normal;
            margin: -40px 0 0px 0;
            font-size: 2.8em;
            color: #747474;
            text-shadow: 1px 1px 3px black;
        }

        h3 {
            margin: 10px 0;
            font-size: 1em;
            font-weight: normal;
            color: #747474;
            text-align: center;
        }

        p {
            font-family: 'IM Fell DW Pica', serif;
            font-weight: normal;
            font-size: 0.9em;
            color: #fff;
        }

        blockquote {
            width: 100%;
            text-align: center;
            margin: 0px 0;
            font-family: 'IM Fell DW Pica', serif;
            font-weight: normal;
            color: #fff;
        }

        .footer {
            width: 100%;
            background-image: url('image/image.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            color: white;
            padding: 15px 0;
            position: relative;
            bottom: 0;
        }

        .footer-container {
            width: 100%;
            margin: 0 auto;
            justify-content: space-between;
            display: flex;
        }

        .footer p {
            margin: 0;
            padding: 0 20px;
            text-align: center;
        }

        a:link {
            color: #fff;
            text-decoration: none;
        }

        a:visited {
            color: #747474;
            text-decoration: none;
        }

        a:hover {
            color: #fff;
            text-decoration: none;
        }

        a:active {
            color: #fff;
            text-decoration: none;
        }

        @media (max-width: 1200px) {
            .footer {
                background-size: 50%;
            }
        }

        @media (max-width: 768px) {
            .logo {
                width: 100px;
                height: 100px;
                top: 10px;
                right: 10px;
            }

            h1 {
                margin-top: 40%;
                font-size: 2.6em;
            }

            h2 {
                margin-top: 1%;
                font-size: 1.6em;
            }

            h3 {
                font-size: 0.8em;
            }

            .footer p {
                font-size: 0.8em;
                margin-bottom: 0px;
            }

            .footer {
                background-size: cover;
                background-position: center;
                padding: 13px 0;
            }

            .footer-container {
                width: 80%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <img src="image/test.png" alt="Logo" class="logo">
    <div class="container">
        <h1>Lorem ipsum</h1>
        <h2>Lorem ipsum</h2><br>
        <iframe src="https://radio4/embed?theme=light" 
        frameborder="0" allowtransparency="true" style="width: 60%; min-height: 150px; border: 0;"></iframe>
    </div>
    <blockquote>
        <i>blabla</i><br>
      Machin
    </blockquote>
    <div class="footer">
        <div class="footer-container">
            <div>
                <h3>Lorem ipsum</h3>
                <p>lorem ipsum</p>
            </div>
            <div>
                <h3>lorem ipsum</h3>
                <p><a href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a></p>
            </div>
            <div>
                <h3>lorem ipsum</h3>
                <p><a href="xx.html">lorem ipsum</a></p>
            </div>
        </div>
    </div>
</body>
</html>


Explication à ma demande : j'ai dû batailler avec le code pour que le footer (que je veux fixe) ne cache pas la citation sur écran moyens (15") car elle passe derrière, d'où les médias queries, et aussi pour que l'image qu'il contient ne prenne pas toute la largeur de la page en étant déformée. Ca me paraît bancal tout ça au final, comme des rustines ici et là Smiley ohwell Pourtant le site n'est pas compliqué : responsive à tout point de vue, une grosse image de fond dans le body fixe et non répétée, un logo fixe à droite et en haut et un footer avec 3 paragraphes sur une image transparente.
Modifié par Lily47 (22 May 2024 - 10:56)
Bonjour,
J'en étais sûr.

Comme expliqué, j'aurais voulu un résultat propre d'un site responsive, bien adaptable sur tous écrans, et comportant une image de fonds fixe, un logo, un contenu avec deux titres et un player audio, un pied de page fixe avec 3 paragraphes.
En gros... c'est tout !
Modifié par Lily47 (22 May 2024 - 12:52)
salut
2 petites erreurs dans le html

1 Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.?From line 195, column 9; to line 196, column 99?>? <iframe src="https://radio4/embed?theme=light" ? frameborder="0" allowtransparency="true" style="width: 60%; min-height: 150px; border: 0;"></ifra

2 Error: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.?From line 195, column 9; to line 196, column 99?>? <iframe src="https://radio4/embed?theme=light" ? frameborder="0" allowtransparency="true" style="width: 60%; min-height: 150px; border: 0;"></ifra

css OK
SPIPE ne va pas ajouter du code inutilement ? est-ce vraiment adapté pour un micro site ? Je me méfie de tout ces logiciels qui doivent alourdir le code, peut-être.
Modifié par Lily47 (22 May 2024 - 13:10)
Modérateur
Bonjour,
Lily47 a écrit :
SPIPE ne va pas ajouter du code inutilement ? est-ce vraiment adapté pour un micro site ? Je me méfie de tout ces logiciels qui doivent alourdir le code, peut-être.

Dans ton cas, vu que tu sembles avoir déjà des notions de codage, et vu que ton site est petit, il est probable que des outils tel que oodo, spip ou wordpress soient en effet plutôt source de problème que de solution.

Si tu n'avais aucune notion de codage, même pour un micro site, ces outils auraient pu avoir leur utilité (même si je n'en suis pas fan du tout), car apprendre à coder est chronophage.

Amicalement,
Modérateur
Bonjour,
Lily47 a écrit :
...je me demande si mon code est bancal ou pas...

Il est perfectible (mais tous les codes sont perfectibles).

Avant même de regarder le css, on constate que ton code html contient beaucoup de <div>. Tu n'es pas tout seul à avoir ce défaut (majeur selon moi, mineur selon d'autres). La plupart des développeurs saupoudrent leur code de <div> très souvent inutiles.

Concrètement, comme visuellement tu as un header, un footer et entre les deux un contenu qu'on peut considérer comme principal, tu devrais utiliser les balises <header>, <footer> et <main> pour contenir ces différentes parties au lieu de <div> comme par exemple le <div class="footer"> que tu as utilisé pour le footer.

Ensuite, à l'intérieur de ces différentes parties, tu as des <hn> suivi d'un contenu. Ces parties peuvent être encapsuler dans des balises <section> au lieu de balises <div>.

Les autres balises <div> sont probablement dans ton cas inutiles pour la présentation que tu espères faire.

Attention à tes <hn>. Les <h3> de ton footer par exemple ne sont clairement pas "sémantiquement" des titres de sous-sections de la partie contenant le seul <h2> de ta page qui se trouve dans la partie principale.

Amicalement,
Modifié par parsimonhi (22 May 2024 - 14:24)
Salut,

je pense que tu n'as pas besoin d'utiliser toute une usine à gaz pour faire une seule page Smiley sweatdrop

Petit détail pour le logo qui me semble un peu bizarre, tu le fais passer d'un presque carré à un vrai carré, ça va le déformer non Smiley ohwell ?

        .logo {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 180px;
            height: 190px;
        }
        @media (max-width: 768px) {
            .logo {
                width: 100px;
                height: 100px;
                top: 10px;
                right: 10px;
            }


Et je ne sais pas si je n'aurai pas juste essayer de faire un truc en pourcentage avec des limites min et max pour éviter d'avoir à gérer un "point de rupture" avec @media :


        .logo {
            position: absolute;
            top: 20px;
            right: 20px;
            max-width: 180px;
            max-height: 180px;
            min-width: 100px;
            min-height: 100px;
            width: 20%;
            aspect-ratio: 1/1;
        }


J'ai fais un petit jsfiddle pour essayer de voir vaguement ce que donne ton code (j'ai juste remplacé l'image du logo) : https://jsfiddle.net/9tq2j8x0/

Pour le coup je trouve un peu bizarre que le logo soit en position: absolute, et ça m'a l'air de déconner un peu, il se retrouve très haut par rapport au titre quand on passe en petit non Smiley sweatdrop ?
La réponse de parsimonhi me semble claire : il conseille à Lili de coder son site from scratch.

En effet, même si elle a quelques difficultés à mettre en place son layout, elle est quand même arrivée à un résultat, et a ainsi démontrée qu'elle a des notions de codage suffisantes pour ses besoins et donc, ici, suffisantes pour se passer d'un CMS.

Et, non, je n'irai pas jusqu'à dire que vous avez la "même optique" ni le même contexte : votre projet à vous, 2lwess, semble nécessiter un système de gestion de contenu (un CMS) ; de même, vous ne partez pas du même point en ce qui concerne vos compétences web. C'est pour cela que je vous conseillais, sur un autre topic, de partir sur du no code.
Modifié par Olivier C (23 May 2024 - 00:06)
Mes notions sont franchement limitées. Par exemple, je voudrais utiliser le css GRID pour avoir une adaptabilité parfaite mais là c'est hyper pas jouable vu mon niveau et surtout c'est que ça va être hyper chronophage, oui; hors le but pour moi c'est de mettre mon site en ligne et non d'avoir les mains dans le cambouis pendant des heures et des heures, surtout pour un si petit site Smiley smile Smiley mur

Sinon, j'ai fait un zouli dessin pour montrer ce que je désirerai comme résultat sur écrans normaux :
upload/1716386491-86611-exemplesite.jpg

ça, c'est bon, j'y arrive plutôt. Et maintenant, voici le résultat que je souhaite sur petits écrans :
upload/1716387298-86611-rendusmartphones.png


C'est essentiellement le rendu sur petits écrans qui me pose un GROS problème en fait.
parsimonhi a écrit :
Bonjour,

Il est perfectible (mais tous les codes sont perfectibles).

Avant même de regarder le css, on constate que ton code html contient beaucoup de &lt;div&gt;. Tu n'es pas tout seul à avoir ce défaut (majeur selon moi, mineur selon d'autres). La plupart des développeurs saupoudrent leur code de &lt;div&gt; très souvent inutiles.

Concrètement, comme visuellement tu as un header, un footer et entre les deux un contenu qu'on peut considérer comme principal, tu devrais utiliser les balises &lt;header&gt;, &lt;footer&gt; et &lt;main&gt; pour contenir ces différentes parties au lieu de &lt;div&gt; comme par exemple le &lt;div class="footer"&gt; que tu as utilisé pour le footer.

Ensuite, à l'intérieur de ces différentes parties, tu as des &lt;hn&gt; suivi d'un contenu. Ces parties peuvent être encapsuler dans des balises &lt;section&gt; au lieu de balises &lt;div&gt;.

Les autres balises &lt;div&gt; sont probablement dans ton cas inutiles pour la présentation que tu espères faire.

Attention à tes &lt;hn&gt;. Les &lt;h3&gt; de ton footer par exemple ne sont clairement pas "sémantiquement" des titres de sous-sections de la partie contenant le seul &lt;h2&gt; de ta page qui se trouve dans la partie principale.

Amicalement,

Oui, il y en a partout des <div>, c'est sale je trouve niveau code cette profusion, je ne suis pas douée pour faire les choses simplement on dirait..
Mathieuu a écrit :
Salut,

je pense que tu n'as pas besoin d'utiliser toute une usine à gaz pour faire une seule page Smiley sweatdrop

Petit détail pour le logo qui me semble un peu bizarre, tu le fais passer d'un presque carré à un vrai carré, ça va le déformer non Smiley ohwell ?

        .logo {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 180px;
            height: 190px;
        }
        @media (max-width: 768px) {
            .logo {
                width: 100px;
                height: 100px;
                top: 10px;
                right: 10px;
            }


Et je ne sais pas si je n'aurai pas juste essayer de faire un truc en pourcentage avec des limites min et max pour éviter d'avoir à gérer un "point de rupture" avec @media :


        .logo {
            position: absolute;
            top: 20px;
            right: 20px;
            max-width: 180px;
            max-height: 180px;
            min-width: 100px;
            min-height: 100px;
            width: 20%;
            aspect-ratio: 1/1;
        }


J'ai fais un petit jsfiddle pour essayer de voir vaguement ce que donne ton code (j'ai juste remplacé l'image du logo) : https://jsfiddle.net/9tq2j8x0/

Pour le coup je trouve un peu bizarre que le logo soit en position: absolute, et ça m'a l'air de déconner un peu, il se retrouve très haut par rapport au titre quand on passe en petit non Smiley sweatdrop ?

Merci pour ton travail. Effectivement j'ai mis de mauvaises dimensions au logo et il se place trop haut. Pour les medias querie et leurs dimensions, bah ça m'épuise les allers et retours entre le moniteur pc et le rendu téléphone.
Modifié par Lily47 (22 May 2024 - 16:23)
Euh mais il ne faut pas te faire chier à faire des aller retours entre l'ordi et le téléphone, tu peux faire tout directement sur le moniteur pc Smiley sweatdrop
Dans les solutions possibles :
- tu mets ta fenêtre de navigateur en petite taille puis tu alternes la fenêtre entre plein écran et petite taille (juste en cliquant à coté de la croix)
- dans les outils développeurs de ton navigateur ( F12 ), tu as un outil qui permet de basculer sur un simulateur de dimension ("toggle device" raccourci : ctrl shift M ) et tu as juste a cliquer sur la taille voulu pour basculer d'une taille à l'autre.

Après ce que je disais, c'est que j'aurai sans doute essayer de ne pas avoir besoin de point de rupture et que ça "glisse" dune configuration à l'autre en faisant jouer des pourcentages (et éventuellement quelques limites avec des min et max width / height ) . (Mais c'est probablement parce que je n'aime pas trop les points de ruptures car je suis majoritairement sur pc et que des fois je me retrouve avec un gros changement parce que j'ai diminué la fenêtre 3 pixel trop loin Smiley bawling , donc bon j'ai peut être un avis biaisé)
Je voulais parler des allers-retours sur les fenêtres des navigateurs, oui Smiley smile ça m'épuise tout autant que les allers-retours physiques.
:)
Lily47 a écrit :
Bonjour,
J'en étais sûr.

Comme expliqué, j'aurais voulu un résultat propre d'un site responsive, bien adaptable sur tous écrans, et comportant une image de fonds fixe, un logo, un contenu avec deux titres et un player audio, un pied de page fixe avec 3 paragraphes.
En gros... c'est tout !


C'est bien ce que tu as fait, j'ai juste deux trois trucs à dire :

Tu pourrais utiliser Flexbox pour le footer tu as déjà utilisé Flexbox pour d'autres parties de ton site, mais tu peux également l'appliquer au conteneur du footer pour simplifier le positionnement des éléments à l'intérieur.

Oublie pas d'optimisé les images assure toi que les images que tu utilise sont optimisées pour le web afin de réduire le temps de chargement de la page.

Et surtout, essaye de moduler ton code (regroupe les éléments dans des pages externes)
Modifié par JENCAL (23 May 2024 - 11:26)
@Jencal,
Justement, je m'y mets aux css grid. Là, globalement j'ai réussi à faire un truc propre avec le nouveau code je pense. Enfin...j'ai bidouillé un peu : pour les petits écrans j'ai fait une media queries avec une image de fonds adaptée. Au moins il n'y a pas de déformations et ça reste visuellement exactement comme je le voulais au départ.

Sinon, j'ai toujours un problème avec le footer. notamment avec le paragraphe central qui est légérement décalé. J'ai beau jouer avec les margin et padding, et autres éléments, ça veut pas. Le décalage n'est pas important mais perso je ne vois que ça, ça me dérange.