[RESOLU] Problème CSS pour l'affichage

bg62bg62 Member
juillet 2023 modifié dans Entraide

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

Réponses

  • 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


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • kowalskykowalsky Member
    juillet 2023 modifié

    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>
    
  • merci à tous les deux, je pense que là ce doit être bien mieux sur l'ensemble des liens +100 :)

Connectez-vous ou Inscrivez-vous pour répondre.