[RESOLU] Problème CSS pour l'affichage

bg62 · juillet 2023

bonjour
sur : https://unesourisetmoi.info
que je suis en train de " revoir " à force de bidouiller je me retrouve avec une largeur d'affichage qui colle beaucoup trop au bords des pages, voire même plus selon les navigateurs ^^^j'ai dû faire 'sauter' un bout de code mais je ne trouve pas...
pas touché à la css, donc peut-être autre chose, mais je voudrais bien récupérer un affichage correct et RWD comme auparavant ...
SOS = quel spécialiste pourrait m'y aider ?
grands mercis

gcyrillus-nomade · juillet 2023

Il te manque le div <div class="container"> juste aprés <body id="top"> .
Note que l'id="top" est manquant sur d'autre pages.

A vue de nez, ce n'est pas ton CSS mais des differences dans les template .

Cdt

kowalsky · juillet 2023

salut @bg62
si ton CSS est basé sur PluCSS, alors à aucun moment tu ne définis la largeur de ta page ou de tes sections avec la classe "container". Et comme ensuite tu utilises le système de grille (grid) qui rajoute des marges négatives, tu te retrouves avec les débordements que tu observes.

Voir ligne 954 de https://github.com/pluxml/PluCSS/blob/master/plucss.css

Le seul élément pour lequel tu as donné une valeur pour la largeur est #centrage {margin: auto;max-width: 1000px;}

Un correction rapide sera de modifier body en rajoutant <body id="top" class="container"> ou d'ajouter une div "container" englobant le reste tout simplement

    <body id="top">
    <div class="container">
        <header>...</header>
        <main class="main grid">
            <section class="col sml-12 med-8">...</section>
            <aside class="aside col sml-12 med-4">...</aside>
        </main>
        <div id="centrage">...</div>
    <div id="footer1">. ..</div>
        <footer>...</footer>
    </div>
    </body>

Une fois fait il te faudra regarder tes autres sections si tu veux harmoniser tes marges, comme par exemple passer "centrage" en mode grille également

<div id="centrage" class="grid">
    <div class="col sml-12">...</div>
</div>

Pour "footer1" ce sera un peu plus complexe avec tes 3 colonnes, avec une base comme celle-ci :

<div id="footer1" class="grid">
    <div class="col sml-12">
        <div class="grid">
            <div class="col sml-12">
                <div class="grid">
                    <div class="col sml-12 lrg-4">...</div>
                    <div class="col sml-12 lrg-4">...</div>
                    <div class="col sml-12 lrg-4">...</div>
                </div>
            </div>
            <div class="col sml-12">
                <div class="grid">
                    <div class="col sml-12 lrg-4">...</div>
                    <div class="col sml-12 lrg-4">...</div>
                    <div class="col sml-12 lrg-4">...</div>
                </div>
            </div>
        </div>
    </div>
</div>

bg62 · juillet 2023

merci à tous les deux, je pense que là ce doit être bien mieux sur l'ensemble des liens +100

[RESOLU] Problème CSS pour l'affichage

Réponses