Problèmes d'overflow et de responsivité par Otakin - page 1

Bonjour, j'ai un problème avec l'overflow-x de mes blocs.

Actuellement, voici ce que cela fait :

https://i.imgur.com/3MxlM27.gif

Je souhaite que mon bloc "Objets utiles" ne se casse pas lorsque la taille de l'écran se réduit. Toutefois, j'aimerais que l'overflow-x automatique se déclenche pour le bloc en général et non pas uniquement pour ce qu'il contient à l'intérieur.

Voici mon code responsable de l'affichage (ne prêtez pas attention aux classes en polonais et à la structure sous forme de table, qui n'est pas adaptée pour du responsive design, mais je n'ai pas le choix, l'ensemble du site est conçu de cette manière) :

<div class='oknoNT' style='max-width: 620px;width: 100%;display:inline-block;margin-bottom:20px;'>
    <div class="tytul lang" key="arenaT4">&nbsp;</div>
    <div class='ramka'>
        <div class='dane'>
            <div class='zawartosc'
                style='overflow-x: auto; position:relative; margin:10px 1% 10px 1%; color:#FFF; width:98%; display:inline-block'>
                <table id="tabUzyteczneRzeczy" width="100%" style="border-spacing: 10px 30px;">
                </table>
            </div>
        </div>
    </div>
</div>

    function uzyteczneRzeczy() {
        document.getElementById("tabUzyteczneRzeczy").innerHTML = "";

        for (r = 0; r < tabUzyteczne.length; r++) {
            var linia = "<tr>";
            linia += "<td><div class='divEQIkona infoSkad' skadID='" + tabUzyteczne[r][5] + "'><img src='/images/" +
                tabUzyteczne[r][0] + ".png'/></div></td>";
            linia += "<td style='color:#FB8'>" + tabUzyteczne[r][1] + "</td>";
            linia += "<td style='text-align: left; padding-left: 20px;'>" + tabUzyteczne[r][2] + "<img src='/images/" + tabUzyteczne[r][3] + ".png'/>" +
                tabUzyteczne[r][4] + "</td>";
            linia += "</tr>";
            document.getElementById("tabUzyteczneRzeczy").innerHTML += linia;
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        uzyteczneRzeczy();

Si je retire le "overflow-x: auto;" de la classe "zawartosc" et que je remplace le "max-width: 620px; width: 100%;" par "width: 650px; overflow-x: auto" dans la classe "oknoNT", cela produit presque le comportement que je souhaite. Cependant, à l'exception près que la barre de défilement ne s'affiche pas.

https://i.imgur.com/MPrvEfB.gif

Et cela pose un problème, car lorsque mes éléments se cassent, cela devient illisible. De plus, il y a d'autres blocs de code encore plus compliqués, avec des éléments positionnés en absolu, rendant ainsi impossible l'adaptation du code sans tout refaire depuis le début. C'est pourquoi, pour les petits écrans, si les blocs en table pouvaient ne pas se casser et simplement défiler, cela me soulagerait énormément.

https://imgur.com/pn4Gvb0

Quant au nommage des classes, je prévois de tout traduire du polonais au français avec un script Python une fois mon site terminé ; pour l'instant, je laisse tel quel pour ne pas me mélanger les pinceaux.

Otakin

18 avril 2024 à 16:11:28

AbcAbc6

18 avril 2024 à 16:37:42

Bonjour, quelle est L’URL de ton site? Pour voir le comportement de la page en ligne.

18 avril 2024 à 17:23:02

Voici des liens de mon site où il y a des problèmes de responsive :

- https://www.nostar.fr/arenas#shop

- https://www.nostar.fr/stuffs

- https://www.nostar.fr/bac

-
Edité par Otakin 18 avril 2024 à 17:53:37

14 mai 2024 à 0:25:21

Domi65

14 mai 2024 à 11:47:19

Hello.

Je viens de regarder la première des trois pages (/arenas)

Les boutons "sortent du champ" si la fenêtre n'est pas assez large. Est-ce ça que tu veux corriger ?

Tu peux le faire en remplaçant flex-wrap: nowrap par flex-wrap: wrap au sélecteur .tabs-nav ul.

Et pour que le conteneur s'ajuste en hauteur lorsque les boutons se placent les uns au-dessus des autres, tu supprimes height:70px au sélecteur .tabs-nav

Les overflow deviennent inutiles.

Il ne reste plus qu'à régler les marges des balises li.

Problèmes d'overflow et de responsivité

Problèmes d'overflow et de responsivité

Supprimer

Modérer

Signaler le message aux modérateurs