html-css

[potent linden]

Personne peut m'aider ?

[errant cypress]

sur ?

[gaunt yoke]

Ton truc est en ligne ou sur git? Plus simple pour régler le problème

[potent linden]

@errant cypress Mon menu mobile ...

[errant cypress]

AH

le responsive...

[potent linden]

@gaunt yoke Non je sais pas git j'aime pas et pas trop envie

@errant cypress Oui

[errant cypress]

simple git

[gaunt yoke]

Bah je peux pas t’aider alors

Avec 10 lignes

[errant cypress]

grâce à zozo j'ai réappris tro fort enzo

[gaunt yoke]

Si j’ai pas le rendu je vais rien pouvoir checker

[errant cypress]

créer un repo sur github

[potent linden]

Je dois faire quoi ?

[errant cypress]

et t'as les instructions

tout simple

[gaunt yoke]

Bah push sur git par ex

[errant cypress]

si t'as des galères on t'aidera pour git

[gaunt yoke]

Ou je sais que t’as un hébergement met juste en ligne et envoie la page

Je look soit ce soir soit demain

La je suis dehors

[errant cypress]

@potent linden Enlève height: 100%

et tu fous un z-index: 1,

sur .links dans ton media query

[potent linden]

le truc relou c'est que j'aimerai display none mon menu et quand j'ouvre le menu ça le display block bien ?

@errant cypress

[errant cypress]

c'très petit là

mais à ce moment là te fais pas chier

tu le margin-right

[potent linden]

le truc c'est que la le menu s'ouvre quand j'ai pas encore demande de l'ouvrir

[errant cypress]

j'ai vu ouais

le menu à droite quand t'es en responsive

je laisse enzo t'aider, c'est pas mon fort le front et encore moins la resp

[potent linden]

j'ai réussit

c'est bon j'ai juste add des class

merci quand meme 🙂

[errant cypress]

n

p

[sharp pendant]

Salut tout le monde, j'ai un soucis en JQuery et je ne trouve pas la solution.
Mon objectif, c'est d'avoir plusieurs listes d'éléments qui correspondent à des niveaux de recherche (ça va me représenter une structure de dossiers).
Donc, je charge mes données provenant du back dans la premier niveau, et une fois que je clique sur un élément ça charge les données du second niveau (2ème box list) en fonction de la valeur de cet élément. Le problème, c'est qu'à chaque fois que je clique sur un élément, ça me recharge les données mais en les dupliquant. Exemple : j'affiche dans une box list, initialement vide, ces éléments :

Json renvoyé à chaque fois (invariable) : ["machin2","machin2\test1","machin2\test1\test2","machin2\test2"]

Donc je vais avoir ça :

Le problème c'est que si je clique une nouvelle fois sur l'élément de la box list de niveau précédent, ça me multiplie ce que j'ai actuellement par le nombre d'éléments au total, donc 16 éléments.
Pourtant, j'ai tout essayé pour vider le #blocNiv2 lors de l'appel de la fonction $.getJSON, mais rien y fait. Dans le doute, j'ai aussi essayé d'ajouter un e.preventDefault(); lors du clic.

$(document).on("click",".cloneNiv1", function (e) {
            e.preventDefault();
            //var $id = $(this).attr('id');
            var $valeur = $(this).children(".chemin").html();

            var $bloc2 = $("#blocNiv2");
            var $item_li2 = $(".cloneNiv2");


            $.getJSON("/admin/regles/get/json/machin", function(data) {

                $bloc2.empty();

              
                console.log(data);
                var object = $.parseJSON(data);
                console.log(object);
                $.each(object, function (key, entry) {

                    console.log(entry);
                    var $clone2 = $item_li2.clone();
                    $clone2.attr("id", "listNiv2_val" + key);
                    //$clone.attr("href", "/hello/" + key);
                    $clone2.children(".chemin").text(entry);
                    //$clone.children(".chemin").append("<a href =" + "/hello/" + key + ">" + "</a>");
                    $bloc2.append($clone2);

                });
            });


        });

@gaunt yoke

[gaunt yoke]

je comprend pas ce que tu cherches à faire

[sharp pendant]

T'as lu depuis le début ?

Regarde les deux screens, j'ai une autre liste que toi tu ne vois pas là. Si je clique sur un élément ça me charge cette liste. Si je reclique dessus, ça me duplique les données. Or je vide le bloc qui contient les données (variable $bloc2)

[gaunt yoke]

Tu veux une notion de parent enfant ?

Genre si tu cliques machin1, afficher la liste associé a machin 1, en dessous de celle ci ?

et pas a la fin des autres éléments ?

[sharp pendant]

http://prntscr.com/tdx68a

[gaunt yoke]

AH ok tu affiches directement dans un autre encart

Si tu cliques sur une deuxieme case a gauche, ca doit vider celle de droite et afficher les nouvelles valeurs ?

ou les ajouter aux éxistantes ?

[sharp pendant]

http://prntscr.com/tdx6r1

Ca doit vider et recharger les données. Or ça duplique les données

Et j'ai pas trouvé de moyens pour régler ça :/

[gaunt yoke]

Yes mais recharger que dans la partie de droite ?

[sharp pendant]

Oui

[gaunt yoke]

celle de gauche ne bouge jamais finalement ?

[sharp pendant]

Vois ça comme une structure de fichiers

[gaunt yoke]

Oki je finis unt ruc 2s

[sharp pendant]

A gauche (à l'avenir je devrais le recharger au besoin mais pour le moment ça se fait lors du chargement de la page)

[gaunt yoke]

En gros, fais ca plus simplement et plus propre
Au chargement de ta page tu viens récupérer les valeurs de gauche, sur ça on est ok ?

Du coup ces valeurs là stockent les dans un premier tableau title par exemple
Tu vas venir vérifié

if (title?.length > 0) { // ce qui logiquement devrait tjrs etre good vu qu'il vient chercher ton fichier json
  // ici tu viens ajouter dans ton html les listes comme tu le fais déjà
}

Ensuite

[sharp pendant]

En fait au chargement de la page, je fais ça :

$(document).ready(function(){

            var $bloc = $("#blocNiv1");
            var $item_li = $(".cloneNiv1");
            

            $.getJSON("/admin/regles/get/json", function(data) {

                $bloc.empty();
                console.log(data);
                var object = $.parseJSON(data);
                console.log(object);
                $.each(object, function (key, entry) {

                  var $clone = $item_li.clone();
                    $clone.attr("id", "listNiv1_val" + key);
                    $clone.children(".chemin").text(entry);
                    $bloc.append($clone);

                });
            });
        });

Et ça marche très bien pour charger la liste de gauche au chargement de la page

[gaunt yoke]

Au clique de ta checkbox, je pense qu'elle te renvoie une valeur ?

function getData (value) {
   let datas = []
   // ici tu viens récupérer les sous-datas lier à la value que tu viens de récupérer
   // $.getJSON("/admin/regles/get/json/machin".... et tu viens stocker cette valeur dans un tableau do,nc
   $.getJSON("/admin/regles/get/json/machin", function(json) {
       datas.push(JSON.parse(json)) // vérifie avant que ce soit bien tableau
       //ici tu viens reboucler sur ton html pour afficher tes éléments
   })
}

ton .empty() en jquery il sert a vider une div de tout son contenu, mais le #blocNiv1 existe bien on est ok ?

[sharp pendant]

Oui, il existe bien

Mais en soit, j'ai utilisé la même façon de faire que ce soit pour la liste de gauche ou celle de droite

Juste qu'avec la liste de droite, j'ai le soucis étant donné qu'il ne vide pas le contenu de la div comme je le demande

[gaunt yoke]

log ton $bloc

voir si il te renvoie bien que la <div></div> vide déjà

et commente ce qu'il y a après

[sharp pendant]

Nan c'est pas vide

Et au fait, ce n'est pas au clique de ma checkbox (ça, c'est destiné à ajouter le chemin à la liste de tags juste au dessus, mais c'est pas encore fait). Là, je prends le clique au niveau de la div directement pour afficher le contenu d'un dossier

C'est curieux car j'ai l'impression que la fonction empty sur une div ne fonctionne jamais

[gaunt yoke]

Sinon fais le différement d'un empty, fais juste un
$bloc.innerHTML = '';

pour voir si elle se vide bien

[sharp pendant]

Alors, je l'ai fait ça se comporte légèrement différemment. Ca me conserve les données et ça rajoute en append les duplications comme ça faisait auparavant

Mais tout le même problème en soi...

Le JS c'est vraiment une foire aux bugs

[gaunt yoke]

Lors du clic tu as bien log le $bloc2 ? voir si il est bien empty ? en commentant le $each car sinon il te l'affichera jamais vide car le code s'executera aussi vite

juste laisser le $bloc2.empty()

meme sans log voir si la div se vide bien dans la vue

[sharp pendant]

Ca print la div dans le log

[gaunt yoke]

vide ?

[sharp pendant]

oui j'avais bien fait sans le $.each

[gaunt yoke]

ou toujours avec le contenu html dedans

[sharp pendant]

Alors vide à l'intérieur

[gaunt yoke]

du coup le empty fonctionne

[sharp pendant]

Ouaip, mais est-ce qu'il fonctionne lorsque le $.each n'a pas encore itéré, ou en permanence ?

[gaunt yoke]

il sera éxécuté des que ta fonction sera appelé et une seule fois du coup

1 fois par appel du click

[sharp pendant]

Qu'est-ce qui peut expliquer sinon que lors d'un nouvel appel JSON la div ne soit pas vidée alors que ça passe par cette directive

Oui, c'est ça. Mais le soucis, c'est que si je reclique bah ça me nettoie pas la div, mais ça me duplique les éléments

[gaunt yoke]

essaye juste de mettre ton $bloc2.empty() avant le $getJSon

qu'il soit vidé avant de recevoir les datas du json

[sharp pendant]

Si j'ai 4 éléments dans ma liste de droite et que je la recharge en cliquant sur un élément de ma liste de gauche, paf ça multiplie chaque élément par le total

Tellement étrange

J'essaie ça

Ah bah j'avais déjà essayé
Ca duplique de la même manière que lorsque le $bloc2.empty() se trouve dans le $.getJSON

Pourtant ça vient pas du retour JSON du back car j'ai vérifié, la data reçue est intacte

[gaunt yoke]

Je comprend pas le soucis, je viens de faire le test en js vanilla, sans load de donnée d'un json mais d'un tableau fictif (ce qui revient au meme) et j'ai 0 soucis

https://gyazo.com/15ff0bfc1b83494ddf7fe8eb934c8d1d

j'ai mis le click sur un bouton mais ca peut etre sur une checkbox ca revient au meme

j'ai que ça en code et sans forcer l'opti, tu veux m'envoyer ton truc et j'essaye de voir avec des vraies datas ?

[sharp pendant]

Bah déjà je me suis forcé à utiliser JQuery car j'avais trop de soucis avec AJAX en javascript vanilla. Donc dès que je suis passé sous JQuery, ça m'a réglé le soucis mais le problème c'est que je passe un temps incroyable à débuguer des trucs qui sont supposés fonctionner correctement. Ca me fait déprimer x)
Du coup, je t'envoie le CSS avec ? Mais j'utilise le framework utilitaire Tailwind CSS, donc ça va être un peu emmerdant. Sinon, je te fais une archive avec le fichier de build et je t'envoie ça ?

[gaunt yoke]

Tu peux tout envoyer j'ai deja use tailwind np

Bah déjà je me suis forcé à utiliser JQuery car j'avais trop de soucis avec AJAX en javascript vanilla.

quel intérêt je ne comprend pas

les requetes sont nativement asynchrone

[sharp pendant]

Franchement j'en sais rien, mais souviens-toi, il y a un mois de ça, j'avais des soucis en AJAX. Va savoir pourquoi, je n'ai jamais su :/

Ok, donc je t'envoie ça

[gaunt yoke]

enfaite me faudrait surtout ton JSON

que tu appelles

ca suffira

[sharp pendant]

Oui je t'envoie ça

[gaunt yoke]

@void anvilça ne fonctionne pas ici, et on respecte le but des channels, #bots-commands

[robust anvil]

transition ne fonctionne pas sur le transform ?

[gaunt yoke]

Si por que

ca va pas dans le transform

mais tu peux mettre les 2

[robust anvil]

Ah voilà, parce que mon transform était brutal du coup

[hollow brook]

Vous savez comment on peut avoir ce genre de rendu (la vague au milieu) ?

[robust anvil]

Après 2 minutes de recherche j'ai vu passer plusieurs fois l'intégration de svg dans le css

[hollow brook]

J'avais vu ça aussi

J'ai vu ça

[void anvil]

Tu peux utiliser le clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

[hollow brook]

J'vais check

[void anvil]

Il y a des outils en ligne pour les faire sans avoir à coder tout en ayant un visu sur le résultat final

[hollow brook]

Je l'ai

https://bennettfeely.com/clippy/

[stark rapids]

Je t'avais parlé d'une méthode la dernière fois

Moi perso se que je faisais c'est que j'utilise une image svg de la même couleur

Et je colle au bloc où je veux faire la vague

[hollow brook]

o k

[stark rapids]

Je faisais ça rapidement sur inkscape ou illustrator

[gaunt yoke]

Le mieux c’est de use effectivement du svg pour ce genre de chose, ou un pseudo élément et tu le custom, en fonction de ce que tu que tu veux
Pour le clip path c’est cool mais à utiliser que sur des images ou des éléments avec une hauteur fixe car sinon le texte sera tronqué aussi

[robust anvil]

Question conne mais c'est possible de mettre un min-width par rapport au max-content sans prendre en compte un texte qu'il y a dedans ? Parce que du coup ça casse le wrap du texte 👀

[gaunt yoke]

bah le max-content il se fait par rapport au content donc au texte ?? 🤔

[robust anvil]

Oui mais je voulais pas que ça se fasse uniquement par rapport à un élément, mais j'ai réussi à trouver une alternative merci quand même 😁

[robust anvil]

@gaunt yoke désolé de te ping mais étant donné que le front est carrément ton job

Tu sais comment accéder au texte d'un input file en CSS ?

Le button j'ai input[type=file]::-webkit-file-upload-button mais j'ai rien pour le texte

[errant cypress]

tu veux modif quel texte ?

https://gyazo.com/c77d3c04f421182ace125959e09e0ebe

[robust anvil]

Le texte en noir

Le bouton fonctionne très bien pour moi 🤔

[errant cypress]

t'as essayé !important pour test ?

[robust anvil]

!important sur quoi ?

Le ::-webkit-file-upload-button donne le bouton qui est à gauche (que j'ai donc pu modifier)

Ah ! J'ai trouvé !

input[type=file i]

[errant cypress]

ah bah voilà ^^

[robust anvil]

Merci quand même ^^

[gaunt yoke]

dsl je jouais

[dusky skiff]

Salut ! Comme vous le savez, je suis pas très bon en css 😂

Je voudrais savoir, comment je pourrais faire des formes sur mon site ? de type vague

Du genre ça

Merci

[quartz thunder]

avec des svg

[strong lynx]

https://getwaves.io/

Ce site te permet de générer des wave gratuitement et facilement ^^

[dusky skiff]

merci <3

[errant cypress]

svg

[dusky skiff]

C'est ce que je cherchais

[errant cypress]

trop bien ce site

[stark rapids]

Oh cool ce site

Moi je faisais à la main sur Illustrator

[dusky skiff]

Comment je pourrais faire pour que ça se prolonge en bas 🤔

[strong lynx]

tu change la background color de ta div en blanc

[errant cypress]

ouais au pire

tu peux pas augmenter la taille du svg?

[dusky skiff]

ok x)

Les gars je comprends pas pourquoi ça fait ça

j'ai pas mis de margin ni rien :((

ca vient du fait que ça ne soit pas dans la même div ?

[errant cypress]

très sûrement

ton svg est au-dessus de ton hr

[dusky skiff]

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#363636" fill-opacity="1"
          d="M0,224L30,213.3C60,203,120,181,180,160C240,139,300,117,360,122.7C420,128,480,160,540,192C600,224,660,256,720,261.3C780,267,840,245,900,208C960,171,1020,117,1080,122.7C1140,128,1200,192,1260,224C1320,256,1380,256,1410,256L1440,256L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
</svg><!--


--><div class="index_first"><!--


    --><br>
    <div class="title_index">
        <div class="text_title">
            🔥 Venez découvrir le Firelion's Mast3r 🦁
        </div>
    </div>

Ouai j'ai ça @errant cypress :(

Sauf que si je le met dedans ça met un fond blanc

😢

[stark rapids]

Qu'est-ce qui met un fond blanc ?

[strong lynx]

c'est ton <br>

[dusky skiff]

Le parent index_first

[strong lynx]

qui fait la ligne orange

[dusky skiff]

non justement

[stark rapids]

Ah oui c'est le br

[dusky skiff]

je l'ai ajouté après

Sans le br

[errant cypress]

le front la mort

[strong lynx]

avant le svgg

y'a quoi

[dusky skiff]

des divs

[strong lynx]

envoie un screen du code a la limite

[dusky skiff]

ok

et à la fin la div index_first se ferme ici

[strong lynx]

essaye de mettre sur ton svg

style="display: block;"

[dusky skiff]

ok merci

OUI CA FONCTIONNE

Merci :)

[strong lynx]

👌

[dusky skiff]

https://gyazo.com/85d0e7879c67769ba29f2fe0b0810588

Nice

Grace à vous les gars héhé

[gaunt yoke]

Le rendu est pas dinguo

[robust anvil]

+1

[dusky skiff]

ah t'aime pas

je kiffe perso

je respecte

[gaunt yoke]

C’est le désordre complet niveau architecture du site

[surreal lava]

Les emojis copy/paste dans le texte, déso mais faute de goût là c'est carton rouge

[robust anvil]

Moi aussi je kiffe mon site mais en soit il est pas très beau

[dusky skiff]

a

[robust anvil]

Quel copy/paste ? Y'a Windows + .

[surreal lava]

Nan getemoji surement ?

Après tu devrais mettre me contacter tout en bas

[dusky skiff]

C’est le désordre complet niveau architecture du site
Yep mais j'ai pas fini

Là je montrais juste les vagues

[gaunt yoke]

Elles sont trop large aussi

Les arrondis prennent énormément de place

[void anvil]

Perso j'aime bien le fond, mais niveau texte c'est pas ouf effectivement

[gaunt yoke]

visuellement on va voir que ça donc tu perds l’info principal

l’idée est cool mais réduis les un peu niveau hauteur elles sont trop tombantes

[dusky skiff]

pas faux

Je vasi tenter ça

Perso j'aime bien le fond, mais niveau texte c'est pas ouf effectivement
Y'a pas de texte encore 😂

Comme ça Enzo ?

Ou t'aurais fait moins haut 🤔

[quartz thunder]

@robust anvil oh putain merci je connaissais pas ce truc

[robust anvil]

De ? input[type=file i] ?

[errant cypress]

Windows +

[quartz thunder]

Windows + .

[dusky skiff]

Windows + = la loupe non

[errant cypress]

ah oui

[robust anvil]

Ah 😂

[gaunt yoke]

Ouais à la limite c’est mieux parce que si tu fais trop de hauteur ça va te créer d’énorme vide ensuite avec tes textes

[dusky skiff]

Oui pas faux

[dusky skiff]

Yo les gars, j'aimerais faire exactement comme sur ce site pour les images mais je ne sais pas comment faire :/

Vous avez des idées ?

https://www.riacreation.fr/nos-realisations

[gaunt yoke]

Tu peux gif l’effet ? Sur tel j’aurai peut être pas le même rendu

[dusky skiff]

Ah oui ok

https://gyazo.com/b79718176286bb3e58d70c3d136ae54d

voilà

[gaunt yoke]

Tu as plusieurs façon de faire, mais tu peux faire une div qui va contenir ton image, et une autre div qui sera en translateY(100%) et opacity: 0 et quand tu vas hover la div qui contient les 2 div tu translateY(0%) la div noir

Je sais pas si c’est clair mais c’est rapide à faire

[dusky skiff]

AAAAH oui

en gros une div qui va par dessus l'autre par transition

si j'ai bien compris

[gaunt yoke]

Yes en gros:
div1
img
div2

Div1 avec une position: relative, et div 2 par default aura:
opacity: 0; top: 0; left; 0; width: 100%; height: 100%; position: absolute; transform: translateY(100%)

[dusky skiff]

okk

[gaunt yoke]

et quand tu:
div1:hover div2 { transform: translateY(0); opacity: 1; }

après tu ajoutes ton style et tes transitions

[dusky skiff]

ooooh

Merci si ça marche !

[gaunt yoke]

ça marchera si tu le mets bien en place 😉

[dusky skiff]

:)

Merci

[errant cypress]

j'vais tester tiens

[dusky skiff]

et quand tu:
div1:hover div2 { transform: translateY(0); opacity: 1; }
Ca j'ai pas tout compris

[errant cypress]

au hover d'une image tu dis que div2 fera tatata

en gros c'est l'affichage du texte

[dusky skiff]

ah ok

[gaunt yoke]

je finis mon épisode et je vous envoie un exemple si vous voulez

[dusky skiff]

ok merci ^^

[errant cypress]

je le fais enzo, je vais tester et lui donner si j'ai pas de pb

[dusky skiff]

J'y arrive pas x)

.case_div1:hover {
    div2 { transform: translateY(0); opacity: 1; }
}

C'est ça ?

[gaunt yoke]

Non

[dusky skiff]

Ah

[gaunt yoke]

Là tu écris du scss / less

[potent linden]

Bonjour je souahterai faire un boutton comme celui si quelqu'un pourrai me guidé afin que je sache quoi utiliser ?

[gaunt yoke]

en css tu peux pas imbriquer les éléments

Un bouton comme lequel ?

[dusky skiff]

donc je fait comment :/

[gaunt yoke]

Le vert ? @potent linden

attend wailrone y a Lartaxx qui essaye si il y arrive pas je t’envoie un exemple juste après mon épisode

[dusky skiff]

ok

merci

[errant cypress]

@dusky skiff je le fais tqt je t'envoie

[dusky skiff]

merci ^^

Désolé les gars je galère un peu je débute x)

[potent linden]

J4ai trouvé @gaunt yoke Un arcordéon... je trouvais pas dsl... Merci

[gaunt yoke]

Good @errant cypress ?

[errant cypress]

Avec le code que t'as envoyé non, du moins y a plus simple je pense

au hover, on fout le visibility à visible, avec l'opacity ça fonctionne pas

[gaunt yoke]

https://gyazo.com/591e3b308f4880e562e014ec9bfe66c8

je comprend pas ou tu n'y arrives pas

[errant cypress]

fonctionne pas chez moi, t'as fais comment ?

[gaunt yoke]

le opacity n'est pas obligatoire c'est juste pour l'effet de transparence mais si je l'enlève tout fonctionne bien

bah comme je l'ai indiqué plus haut

https://gyazo.com/1fc7aeffab8eb39ad5b09b8bbbceab6b en customisant rapidement ça peut donner ce rendu

[errant cypress]

ah oui, je m'étais gouré

j'avais mis div2 en dehors de div1

[dusky skiff]

Oula c'est bugé x)

t'as réussi toi

WTF

[gaunt yoke]

Qu’est ce qui est bugué?

[dusky skiff]

ah je sais mdr quel boulet je suis

trop stylé encore une fois de plus merci enzo ça marche à merveille

[gaunt yoke]

Top

[dusky skiff]

https://gyazo.com/e8b1fa2011d0ee417ae9fec540f2190a

NOICE

[errant cypress]

d'ailleurs Enzo, pourquoi le border-radius sur l'image bug au bottom ?

https://gyazo.com/e8062a3fcf9502ed78076e7c2eeb5ad9

[dusky skiff]

x)

[errant cypress]

J'ai trouvé

le height xd

[gaunt yoke]

Met ton height en 100% sur les 2 éléments dedans

[errant cypress]

yes ils y sont, c'était juste la height de la div 1

[dusky skiff]

comment je peux faire pour que ça s'arrête en plein milieu 🤔

[gaunt yoke]

Le texte ?

Ah le carré noir, met le à 50% en height

et du coup le translateY au lieu de 0, 50% je pense

Quoi que au lieu de top: 0 met bottom: 0 ce sera plus simple que de changer ces valeurs là

[errant cypress]

comme ça Wailrone ?

https://gyazo.com/31694a023ae2484102ecf28356396b7c

[dusky skiff]

oui comme ça @errant cypress

désolé pour la réponse tardive j'ai eu un problème à gérer sur un serv ou je suis modo

[errant cypress]

pas de soucis

alors tu mets ça

à la place de top: 0; à .div1 .div2 {}, bottom: 0; et height: 50%;

[gaunt yoke]

c'est ce que j'ai dis

on m'écoute jamais

[dusky skiff]

merci :)

Désolé ENzo j'avais pas vu ton message 😂

Pour te rendre hommage x)

[gaunt yoke]

HAHA

[dusky skiff]

Ca mériterais de devenir un même x)

Cette emote est magnifique

[gaunt yoke]

merci 😎

[errant cypress]

si j’tai écouté Enzo

[dusky skiff]

@gaunt yoke @errant cypress merci les gars ^^ https://gyazo.com/2da2de8782e71a26f8c296f5d463ef85

ça marche nickel

J'ai quelques détails à modifier niveau design mais c'est pas mal

Il est reponsive en plus 👌

[gaunt yoke]

met le un peu plus rapide

[dusky skiff]

là j'arrête mais je le verrais demain :)

[errant cypress]

.6s ça doit être good

[dusky skiff]

.6s ?

Là c'est du 2s

[errant cypress]

mets 1s

1.5s

[dusky skiff]

Oki 🙂

Je verrais d'main

[dusky skiff]

#j'airiendit

[dusky skiff]

Salut les gars, j'aimerais que ça se mettre au centre :

Le problème c'est que ça se met en haut à gauche sans raison

Le code :

<div class="fixed" id="popup">
    <div class="popup"></div>
</div>

Le css :

.popup {
    background-color: white;
    width: 100px;
    height: 100px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.fixed {
    background-color: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    min-width: 500vh;
    display: none;
    z-index : 10;
    position: fixed;
}

En fait j'essaye de faire un pop up

https://gyazo.com/91424189b99c9e9304ff3b10a95a3bcf

[dusky skiff]

Bon j'ai avancé mais toujours le même problème ça se centre pas :(

[void anvil]

J'aime pas le button mon serveur discord

[dusky skiff]

ah

il est animé avec le fond le bouton

[gaunt yoke]

Toujours le soucis ?

[dusky skiff]

Oui :(

Je bataille depuis tout à l'heure

toujours en pls

tout fonctionne mais bon ça le met pas au middle j'ai tout essayé

https://gyazo.com/c6afe977d7bf8c9a5690898fcd9c3781

[gaunt yoke]

Met juste un parent à ta model avec un width : 100% et un height: 100vh en position absolute, et display: flex; align-items: center; justify-content: center;

Donc sur ta modal tu enlèves la position que tu as du mettre

Ah quoi que t’as déjà le parent en noir un peu transparent, donc dessus met juste le display flex etc

[dusky skiff]

<div class="fixed" id="popup">
    <div id="popup" class="overlay">
        <div class="popup">
            <h2>Ceci est un POP UP</h2>
            <a class="close" onclick="closepop()">&times;</a>
            <div class="content">
                Il est tout à fait moche car je n'arrive pas à le centrer mais bon c'est pas grave car les BG de GCA vont m'aider :)
            </div>
        </div>
    </div>
</div>

Donc si j'ai bien compris j'applique ça sur fixed

[gaunt yoke]

Oui

[dusky skiff]

Ca ne fonctionne pas 😢

[gaunt yoke]

Show me le code de fixed

[dusky skiff]

ah mais j'ai déjà le display none de base

pour cacher la div

[gaunt yoke]

Tu dois display: block quand tu veux le faire apparaître v

?

[dusky skiff]

oui

<script>
    function popup() {
        let x = document.getElementById("popup");
        x.style.display = "block";
    }
    function closepop() {
        let x = document.getElementById("popup");
        x.style.display = "none";
    }
</script>

[gaunt yoke]

Au lieu de block met flex ^^

[dusky skiff]

ah oui

Ouii enfin

ça marche à moitié mais je sais pas pourquoi ça met à droite

Au moins c'est au milieu 😂

[gaunt yoke]

T’as combien en width?

[dusky skiff]

mdrr j'étais en min-width 500vh

x)

mais du coup il est tout piti

.fixed {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 100vh;
    min-width: 100%;
    display: none;
    z-index : 10;
    position: fixed;
}

Y'a forcément un truc qui va pas 🤔

[gaunt yoke]

Top: 0; left: 0

Try

[dusky skiff]

ok

Nope toujours la même :'(

[gaunt yoke]

width: 100% ?

[dusky skiff]

oui

[gaunt yoke]

Ou 100vw comme tu veux

[dusky skiff]

elle est déjà à 100% :(

[gaunt yoke]

Le min essaye de mettre le width tout court aussi

[dusky skiff]

comment ça

J'enlève le min

Ouais ça change rien si j'enlève le min non plus

En tout cas merci tu m'a aidé à le centrer là c'est déjà bien

[gaunt yoke]

Pas de l’enlever

D’ajouter un width: 100% et pas que le min

[dusky skiff]

ah oui ça y est déjà

.fixed {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 100vh;
    min-width: 100%;
    display: none;
    z-index : 10;
    position: fixed;
}

look

[gaunt yoke]

Ah oui j’avais pas vu

[dusky skiff]

pas grave ^^

[gaunt yoke]

Et ta modal elle a pas du style ?

Genre un margin ou quoi

[dusky skiff]

bah ça en fait c'est directement dans le body

ah pop up peut etre

[gaunt yoke]

Yes la boxe blanche

Ça peut venir de la

[dusky skiff]

non je pense pas que ça vienne de là

.popup {
    border-style: solid;
    border-color: #592cc1;
    border-width: 3px;
    padding: 50px;
    color: black;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
}

Y'a pas de margin :(

[gaunt yoke]

Et c’est quoi la div juste au dessus ?

[dusky skiff]

bah fixed

[gaunt yoke]

Y a .fixed dedans id Po piper encore dedans .popup

[dusky skiff]

<div class="fixed" id="popup">
    <div id="popup" class="overlay">
        <div class="popup">
            <h2>Ceci est un POP UP</h2>
            <a class="close" onclick="closepop()">&times;</a>
            <div class="content">
                Il est tout à fait moche car je n'arrive pas à le centrer mais bon c'est pas grave car les BG de GCA vont m'aider :)
            </div>
        </div>
    </div>
</div>

[gaunt yoke]

Un id s’utilise une fois d’ailleurs

[dusky skiff]

comment ça

[gaunt yoke]

Tu as mis 2 fois id popup

Donc du coup le style fond noir vient de .fixed ?

[dusky skiff]

AH OUI

[errant cypress]

id = id unique

[dusky skiff]

class = overlay 🤔

[gaunt yoke]

mais class Overlay sert a quoi ?

Soit tu le vires

Sois tu lui met un width 100%

A toi de voir

[dusky skiff]

c'était ça

-_-

[gaunt yoke]

Oui car ton flex fonctionne que sur le premier enfant

[dusky skiff]

Je suis complètement bête

oui

aaaaah ok

Je savais pas

[gaunt yoke]

Et le flex annule le width 100% des types block

[dusky skiff]

c'est pour ça que ça le mettait à gauche là

https://gyazo.com/b8f87d083b045cbf09b86128c901e65c

c'est nickel

juste le padding est trop large en haut

[void anvil]

Tu devrais rajouter une margin entre tes sections

Tout semble collé

[dusky skiff]

Pas faux merci pour le conseil ^^

[errant cypress]

faut que t'harmonises le style de ton site maintenant

[dusky skiff]

oui :)

[errant cypress]

Yo, étant un nulos en front, vous savez comment aligner une icone en face d'un li ? genre bien aligné

https://gyazo.com/3d73a45a49395c54bf344747f8205da8

[gaunt yoke]

sois le ligne-height sois flex

[errant cypress]

le display: flex ?

[gaunt yoke]

oui

align-items: center

[errant cypress]

ça le met au-dessus :x

.icon {
    height: 20px;
    align-items: center;
    display: flex;
}

[gaunt yoke]

Car le flex se fait sur le parent

pas sur l'élément

https://flexboxfroggy.com/#fr

[errant cypress]

😮 oui, bah là du coup, ça fait le même résultat que si y avait pas de flex

[gaunt yoke]

??

show me ton code

[errant cypress]

ya

.icon {
    height: 20px;
    align-items: center;    
}

.cta {
    display: flex;
}

j'avais déjà un flex sur mon parent

fin le header

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
}

[gaunt yoke]

Il faut un flex sur l'élément qui contient juste l'icon et le titre

[errant cypress]

yes je l'ai fais, mais ça décale les trucs c'est un peu chelou

AHHH

my bad attend

<nav>
            <ul class="nav_links">
                <li><a href="#"><img src="../resources/images/movies.png" class="icon"> Films</a></li>
                <li><a href="#">Acteurs</a></li>
            </ul>
        </nav>

sur le nav ça fonctionne po non plus

[gaunt yoke]

Tu le mets ou ton flex sur la nav ?

[errant cypress]

yes

[gaunt yoke]

quoi yes

[errant cypress]

je mets mon flex sur la nav

[gaunt yoke]

c'est une question

Oui mais ou

[errant cypress]

comment ça où ? nav n'avait rien en css

[gaunt yoke]

Si tu veux aligner ton img et Film il veut que tu flex sur le <a>

sur le parent

pas le parent le plus haut, je t'ai dis sur l'élement qui contient les autres éléments a aligner

https://flexboxfroggy.com/#fr regarde ici tu comprendras

[errant cypress]

Yes merci !

[high karma]

Kiffant ce truc

[unborn merlin]

hello all, j'essaye depuis tout à l'heure de mettre mon texte au milieu :

<header>
    <nav>
        <div class="nav">
            <div class="nav-top">
                <div class="nav-top left">
                    <a href="welcome.php">Brice</a>
                </div>
                <div class="nav-top right">
                    <a href="#">Présentation</a>
                    <a href="#">Discord</a>
                    <a href="#">Application</a>
                </div>
            </div>
            <div class="nav-bottom">
                <h2>Bonsoir personnage <br><span>Brice</span> !</h2>
            </div>
        </div>
    </nav>
</header>```

/*Import of Montserrat font for title and Import of Poppins font for text*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Poppins:wght@300&display=swap');
*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

nav
{
    height: 400px;
    background-image: linear-gradient(to right, rgb(4, 98, 141), rgb(34, 126, 231));
    border: 5px solid red;
    position: relative;
}

.nav-top
{
    display: flex;
}

.left
{
    border: 5px solid green;
}

.left a
{
    text-decoration: none;
    color: white;
    font-size: 40px;
    font-family: "Montserrat", sans-serif;
}

.right
{
    border: 5px solid rgb(199, 119, 15);
    margin-left: auto;
}

.right a
{
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    margin: 20px;
}

.right a:hover
{
    color:red;
}

.nav-bottom
{
    border: 5px solid black;
    display:flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    
}

.nav-bottom h2
{
    margin-bottom: 100px;
    color: white;
    font-family: "Poppins", sans-serif;
    
    

}

.nav-bottom h2 span
{
    color:black;

}```

voilà ce que je veux faire

[errant cypress]

text-align: center;

[unborn merlin]

déjà testé

[errant cypress]

margin-left: auto;
margin-right: auto;

sur ton nav-bottom

[gaunt yoke]

tu veux le mettre ou ton texte ??

[unborn merlin]

Au milieu du texte Bonsoir personnage

C'est pour sa que j'ai span Brice

[gaunt yoke]

ah genre
Bonsoir personnage
Brice !

?

[unborn merlin]

Yes

[gaunt yoke]

normalement nav-bottom text-align: center dessus

ca devrait etre good

ah mais c'est ton flex sur nav-bottom

qui fait bug le truc

enfin qui rend le t-center non fonctionnel

[unborn merlin]

ah yes c'est bon ça marche,

merci, tu me dépannes bien

[unborn merlin]

petite question, pour les effets comme sa, c'est du javascript ?

je parle de la séparation, pas du fond

[errant cypress]

hum non pas forcément

[unborn merlin]

car je l'ai vu plusieurs fois et je trouve sa très épuré

[errant cypress]

soit c'est une image, soit c'est du code, après idk de comment il a fait si c'est du code

tu peux faire CTRL+U pour voir si c'est une image ou du code

[unborn merlin]

je pense que c'est fait avec du code

[quartz thunder]

je dirais un clip-path en css

[errant cypress]

ça parait pas mal

c'quoi la page que t'as trouvée qui a cette forme ?

[unborn merlin]

moi ?

[errant cypress]

yes

[unborn merlin]

c'est un site d'un serveur sur arma auquel je jouer :

http://tirna.eu/

[gaunt yoke]

Ils ont fait des formes en css

pour gérer le responsive, car avec le clip path c'est relou

Ils ont fait une div rectangle et un losange de chaque coté

[unborn merlin]

Ça a l'air d'être compliqué

[errant cypress]

non en gros

ils ont fait un rectangle

et ils ont mit par dessus un losange ou un truc comme ça fin une autre forme

ils l'ont mit par dessus avec un z-index très sûrement

si tu inspectes le code tu vois que derrière il y a un rectangle et par dessus l'autre forme

[flint jungle]

J'ai la douce impression que ce script ne fonctionne pas comme il le devrait 👀

$(document).ready(function() {
    $("#news-slider2").owlCarousel({
        items:3,
        itemsDesktop:[1199,2],
        itemsDesktopSmall:[980,2],
        itemsMobile:[600,1],
        pagination:false,
        navigationText:false,
        autoPlay:true
    });
});```

Résultat attendu :

Résultat obtenu mdr

Il faut savoir que j'ai déjà corrigé le CSS qui était incomplet, donc je vous laisse imaginer que le script doit être bien pourri mais je ne suis pas à même de pouvoir juger

[unborn merlin]

hello, j'ai besoin d'aide, mon élément nav-middle est mal centré verticalement:

https://codepen.io/BriceHarper/pen/XWdRBNE

[unborn merlin]

up

[gaunt yoke]

tu peux envoyer directement ton html et ton css ici ? je regarde quand je peux vers 12h

[unborn merlin]

yes je t'envoie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div class="nav-logo">
                <a href="#">Accueil</a>
            </div>
            <div class="nav-links">
                <a class="dark-mod" href="#">DarkMod</a>
                <a href="#">Recrutement</a>
                <a href="#">Forum</a>
                <a href="#">Contact</a>
            </div>
        </nav>
        <div class="nav-middle">
            <h1>Hello <span>Guy</span></h1>
        </div>
    </header>

    <section class="discord">
    </section>
    <script src="app.js"></script>
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
</body>
</html>```

*,::before,::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    height: 100%;
}


header{
    height: 100vh;
    background: linear-gradient(60deg, #b44f0c, #eea317ee);
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .nav-logo a, .nav-links a{
    margin: 50px;
    text-decoration: none;
    color:#000;
    font-size: 30px;
    letter-spacing: 5px;
    font-family: "Poppins", sans-serif;
}

.nav-middle{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border:2px solid red;
}```

en gros je veux centrer verticalement mon nav-middle dans mon header

[unborn merlin]

Up

[gaunt yoke]

tu me fais un paint sur ce que tu veux exactement ?

[unborn merlin]

Tu peux pas voir le codepen ?

[gaunt yoke]

Si mais plus simple si tu me dessines un truc ^^

que je vois le résultat que tu veux avoir

[unborn merlin]

Oké je te fais sa

ET voila le problème :

[gaunt yoke]

donc le carré gris doit etre ton texte c'est ça ?

[unborn merlin]

yep c'est sa Enzo

[gaunt yoke]

peut etre pas compris

mais tu veux ça ? https://codepen.io/enzofly0r/full/rNewBye

j'ai réecris rapidement le code au propre à ma façon

[unborn merlin]

Ouai

[gaunt yoke]

prend le code du coup si ça te va

[unborn merlin]

oula

euh jtavoue que jvoulais régler le problème mdr

car la je le règle pas vraiment

[gaunt yoke]

compare les 2 sinon

[unborn merlin]

bah justement j'essaye mais on a pas du tout fait de la même façon

[unborn merlin]

hello j'aimerai bien faire un texte qui prend comme couleur, le fond de la page avec un contour noir sur le texte, merci 🙂

[gaunt yoke]

pour le contour un text-shadow

[hollow kite]

Hi, Vous savez comment je pourrais centrer le texte d'un bouton dans tous les sens ?

(En css)

[gaunt yoke]

Généralement c’est censé l’être automatiquement avec ton padding et un texte align center

Pour qu’il soit responsive

[hollow kite]

Yep je crois que mon padding est mal foutue

SaSS fais des modifications sur le padding ?

Quand je fais un style en html et entre mon code css sa fonctionne mais avec SaSS sa ne fonctionne pas

🤔

[gaunt yoke]

Tu le fais mal alors

Tu uses un framework ? Peut être qu’il prend le dessus sur tes modifications, faut que tu le cibles mieux

[hollow kite]

Je n'utilise pas de framework

[gaunt yoke]

Montre ton code de ton button

[hollow kite]

<button class="cray-bg-turquoise-15 cray-border-hidden cray-p-50 cray-pl-100 cray-text-center">Yo </button>

[quartz thunder]

et le css ?

[hollow kite]

Ah oui sorry 3s

(Je compile ...)

[quartz thunder]

bah envoie ton sass sinon

[hollow kite]

https://github.com/Cray-dev/Cray-CSS/blob/master/css/cray-css.css (Sorry du retard)

[gaunt yoke]

Tu peux screen stp je suis sur tel @hollow kite

Juste la partie du button

Screen ton sass pas besoin de compile

[quartz thunder]

en même temps tu met un padding de 50px + un padding-left de 100px

logique que le texte du bouton soit pas centré

@hollow kite

[hollow kite]

(Sorry du retard) Ok merci

[quartz thunder]

et au passage tu compte vraiment te servir de toutes les class que ta fait la ? genre cray-p-200 ou encore cray-font-size-300 par exemple? perso j'ai des doutes et la ça fait qu'alourdir ton css pour rien quoi

(ce n'est que des exemples parmis tant d'autre)

[gaunt yoke]

ça sert à rien

généralement tu fais pas un font-size: 1px

tu as des échelles a respecter pour limiter tes boucles, je me sers souvent du 8, et donc j'aurais : 8px, 16px, 24px, 32px, 40px, etc.. et je limite à 10/15 en fonction de si c'est padding, margin, font size etc

[unborn merlin]

et bonsoir, j'aimerai enlever mon texte et laisser que le text shadow, c'est possible ?

[gaunt yoke]

Faut que tu joues sur les border-clip etc pour avoir un texte « transparent » mais vraiment transparent

Sinon tu peux juste lui mettre la couleur de ton fond ?

ce serait plus simple je pensé

[unborn merlin]

j'ai le fond en dégradé donc galère x)

[quartz thunder]

si tu met color: transparent; ça marche pas?

[unborn merlin]

ah yes ça marche

merci x)

[quartz thunder]

np

[gaunt yoke]

ça met pas le shadow sur tout le texte du coup ?

J’aurai pensé que si

[unborn merlin]

euh c'est à dire

[gaunt yoke]

Non rien j’ai pas dis le transparent je pensais pas à ce cas mais good du coup

[hollow kite]

et au passage tu compte vraiment te servir de toutes les class que ta fait la ? genre cray-p-200 ou encore cray-font-size-300 par exemple? perso j'ai des doutes et la ça fait qu'alourdir ton css pour rien quoi
@quartz thunder Nop c'est temporaire

[unborn merlin]

hello j'ai suivi un ptit tuto pour faire un burger sauf que ptit soucis, mon burger se barre de la page :

/*BURGER NAV*/
.burger{
    height: 24px;
    width: 42px;
    position: relative;
}

.burger span{
    display: block;
    width: 100%;
    height: 4px;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.burger span::before, .burger span::after{
    content: "";
    width: 100%;
    height: 4px;
    background: #fff;
    position: absolute;
}

.burger span::before{
 transform: translateY(-10px);
}

.burger span::after{
    transform: translateY(10px);
}

.burger.cross span{
    background: transparent;
}

.burger.cross span::before{
    transform: translateY(0px) rotateZ(45deg);
}

.burger.cross span::after{
    transform: translateY(0px) rotateZ(-45deg);
}```

[gaunt yoke]

Fais un code Pen plus simple que juste envoyer le css

[unborn merlin]

cadeau : https://codepen.io/BriceHarper/pen/xxVrQyy

[gaunt yoke]

Je regarde quand je suis sur pc

[unborn merlin]

pas de soucis

[unborn merlin]

Vers quelle heure

[potent linden]

Vers quelle heure
@unborn merlin
quand je suis sur pc
@gaunt yoke

en gros pas mtn

[unborn merlin]

J'avais bien compris

[gaunt yoke]

ok je suis dessus la

quand tu cliques tu veux qu'il ce passe quoi à part le changement des 3 barres en croix ?

[unborn merlin]

yes, justement c'est sa

mais si tu remarques, ma croix rentre dans le dehors de la page

[gaunt yoke]

change juste le code dans ton .cross span::after etc

pour plus qu'il soit décalé

[unborn merlin]

bah du coup j'ai mis un margin pour le descendre et sa marche, merci

[potent linden]

Salut quelqu'un sais comment il faut faire pour avoir les div draggable de la sorte ?

Et pouvoir les placer ou on veut ?

[gaunt yoke]

utilises un modules de drag and drop

a la main tu vas en chier pour rien

[potent linden]

Tu en connais ?

[gaunt yoke]

https://shopify.github.io/draggable/ par ex

[quartz thunder]

https://shopify.github.io/draggable/

ah

[gaunt yoke]

@quartz thunder🦜

[quartz thunder]

[potent linden]

@gaunt yoke Lui est cool non ?

https://muuri.dev/

[gaunt yoke]

yes carrément aussi

prend celui qui te parait le plus simple d'utilisation

[potent linden]

merci 😄

[potent linden]

J'ai plus qu'a me familiarisé avec haha

[unborn merlin]

Hello all, si ya moyen d'avoir un ptit peu d'aide pour faire une croix avec une rotation quand je clique sur le burger et supprimer la barre du milieu, merci https://codepen.io/BriceHarper/pen/bGprNGg

[potent linden]

@unborn merlin https://codepen.io/Lawax-lawax/pen/xxVLZQx

[unborn merlin]

oula merci, jvais essayer de décortiquer sa

mais sinon c'est une bonne pratique de faire une div pour faire la première ligne ou c'est selon les préférences ? <div class="nav-mobile"> <div class="burger"> <div class="line"></div> </div> </div>

[gaunt yoke]

bah ta class burger fait la première ligne

[unborn merlin]

euh nan

c'est ligne

[gaunt yoke]

Et ensuite avzc un before et un after tu fais les 2 autres

[unborn merlin]

qui fait la first ligne

[gaunt yoke]

ça sert a quoi d’avoir burger et ligne

Elle fait quoi là class burger ?

[unborn merlin]

jte montre :

<nav>
            <div class="nav-desktop">
                <div class="nav-logo">
                    <a href="#">
                        <img src="img/neuralink.png" alt="Accueil">
                    </a>
                </div>
                <div class="nav-links">
                    <a href="#">Présentation</a>
                    <a href="#">Expérience</a>
                    <a href="#">Compétence</a>
                    <a href="#">Contact</a>
                </div>
            </div>
            <div class="nav-mobile">
                <div class="burger">
                    <div class="line"></div>
                </div>
            </div>
        </nav>```

en gros ta une div Desktop qui contient nav-links pour la version pc

et une div Mobile qui contient le burger et qui contiendra les autres liens

[gaunt yoke]

Ça répond pas à ma question de pourquoi t’as burger et ligne dedans

Tu peux directement faire ta ligne avec la class burger

Ou alors elle contient quelque chose d’autre niveau style ?

[unborn merlin]

ah ui, burger, jpensais l'utiliser pour un fond avec un border radius

[gaunt yoke]

Bah ça du coup met le sur nah-mobile

et ta ligne tu l’enlèves et tu mets le style sur burger

car là t’imbriques bcp d’élément pour pas grand chose

[unborn merlin]

bah dans nav-mobile, yaura les liens qui apparaitront quand je clique sur le burger

[gaunt yoke]

Ah okay

Sinon pour faire ton burger menu, trouve le en svg html

Et comme ça tu peux éditer en css le svg

tu pourras avoir un icon un peu plus jolie que de simple ligne

[unborn merlin]

fin je sais pas si c'est bien mais en gros logiquement y'aura sa :

DIV MOBILE qui contient BURGER, LOGO, NAVLINKS

[gaunt yoke]

ça dépend de comment tu comptes l’afficher

[unborn merlin]

ouai mais bon j'essaye de faire moi même pour m'entrainer malgré que je galère

[gaunt yoke]

Si c’est un menu qui slide sur el coté je le mettrais pas dans la nav

Mais en indépendant

Pour pas avoir de problème de position, d’élément au dessus de l’autre et autre

[unborn merlin]

ah

je sens que ça va être le bordel mdr

[fading ridge]

Salut, j'ai un petit problème en gros j'ai une div qui me sert de bordure pour mon iframe en position absolute et un z-index 5, en dessous j'ai une iframe qui se met donc se met sous la div, le problème est que comme la div est au dessus de l'iframe les clics sont compté que sur la div ou je voudrais qu'il soit compter sur l'iframe quelqun a une idée ?

[gaunt yoke]

pas compris, tu peux envoyer un screen et expliquer ce que tu cherches à faire

[fading ridge]

Je m'en doutais que c'etait pas claire 😂 alors

  background-size:100% 100%;position: absolute;z-index: 5;"></div>
 <iframe style="padding-top: 15px; border-radius: 40px; position: relative;" id='iframe' name="iframe" src="flappy" width="295" height="575px"></iframe>

Et quand je veux cliquer sur des element de mon iframe ça marche pas ça clique sur la div

Je pense t'arrivera a comprendre avec mon beau dessin paint

[gaunt yoke]

tu veux pouvoir cliquer sur ta div et pas sur ton iframe ?

[fading ridge]

non juste sur l'iframe

et la ça fonctionne pas

[gaunt yoke]

Mais elle sert à quoi ta div ?

[fading ridge]

En gros c'est une image pour le moment, et elle doit passer au dessus de l'iframe pour que ça s'affiche uniquement sur les bord de l'iframe, le milieu est transparant donc niveau design c'est parfait mais bon le reste bloque

[gaunt yoke]

met sur ta div

pointer-events: none

[fading ridge]

C'est parfait merci 😘

[gaunt yoke]

no soucis !

[unborn merlin]

et bonsooir je sais pas pourquoi, je n'arrive pas à centrer mon hamburger

            <div class="hamburger">
                <span></span>
            </div>```

@media screen and (max-width: 1250px){

    .hamburger{
        width: 50px;
        height: 50px;
        background: black;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
    }

    .hamburger span{
        width: 100%;
        height: 5px;
        background: white;
        position: absolute;
        top: 25px;
        
    }

    .hamburger span::before, .hamburger span::after{
        content: "";
        width: 100%;
        height: 5px;
        background: white;
        position: absolute;
    }

    .hamburger span::before{
        bottom: 25px;
        left: 0px;
    }

    .hamburger span::after{
        top: 25px;
        left: 0px;
    }```

[unborn merlin]

up

[hollow kite]

Hey, Vous savez comment je pourrais créer une class en css nommé hover:text-white et en gros quand je passe sur l'élément le text se met en blanc ?

[errant cypress]

bah class:hover { color: white; } je comprends ta question?

[hollow kite]

Laisse tomber j'ai trouvé ( .hover:test { ... } )

Discord ne l'affiche pas

rip

[errant cypress]

non mais explique mieux

[hollow kite]

Bais en gels tu ajoute un \ entre hover et :

___ Réponse pour Enzo ___

Je le met sur mon body et quand je fais un hover et passe dessus tous disparais

Tous les éléments

[gaunt yoke]

montre ton body, et tes class appelé

Car là sans rien je peux pas t’aider

[hollow kite]

Je passe sur pc

[gaunt yoke]

ok et le test-hover tu l’utilises ou

[gaunt yoke]

Car là je vois 0 soucis sinon

Ok merci

Et ça te fait quoi comme bug ça ? 🤨

Car y a rien de bizarre à première vue

[gaunt yoke]

Et bah qu’est ce qu’il a ce container

[hollow kite]

Le code d'ailleurs

[gaunt yoke]

Bon attend je comprend rien tu m’envoies pleins de capture d’écran de partout sans m’expliquer le problème ou le bug 🤨🤨 tu peux la refaire de 0 et dans l’ordre ?

ce sera plus simple 👌👌

[hollow kite]

En gros quand je passe sur mon container il disparait ( https://media.discordapp.net/attachments/553913646170898452/751902036278378576/unknown.png?width=903&height=513 )

Code du container ( https://media.discordapp.net/attachments/553913646170898452/751902446707671180/unknown.png )

[gaunt yoke]

Et t’as 0 hover dessus ? Tu peux m’envoyer ton projet (juste l’html et le output css?) comme ça je regarde en rentrant à la maison ce soir si tu veux

Car là je suis sur téléphone

[hollow kite]

J'ai un hover et je vais commits mon projet

[gaunt yoke]

Tu me send le repo mp

[hollow kite]

yep

[gaunt yoke]

Salut @hollow kite du coup rapide retour concernant ton problème, tu as cette class sur chaque élément qui a un hover de la meme couleur que ton fond, donc les élements ne sont pas hide, juste de la meme couleur que ton fond

[robust anvil]

C'est impossible d'avoir un ::before ou ::after sur un input ? Y'a zéro moyen de contourner ?

(mise à part utiliser un span)

[gaunt yoke]

Pas sûr les inputs non, ce que tu peux faire, c’est une div qui contient ton input et par exemple ton icon si c’est pour ça ton before

[robust anvil]

Donc c'est bien ce que je pensais, ça va merci

[hollow kite]

Ok ok merci

[potent linden]

Salut j'ai une question, j'ai fait un boutton avec un dropdown mais le truc c'est que je vais use se boutton pleins de fois alors qu'il as un position absolute ect... Vous savez pas comment je peut mettre le dropdown automatiquement en dessous du boutton ?

[gaunt yoke]

le dropdown est dans un meme élément que ce bouton ?

[potent linden]

http://pastebin.fr/64848

[gaunt yoke]

genre

<div class="parent-dropdown">
  <button></button>
  <div class="dropdown"></div>
</div>
``` ?

[potent linden]

Voila mon code

[gaunt yoke]

et l'html ?

[potent linden]

@gaunt yoke

<button class="btn-dropdown"><span>Créer un évenement</span><i class="material-icons">public</i>
                           <ul class="dropdown">
                               <li class="active"><a href="#">Création d'évenement</a></li>
                               <li><a href="#">Évenement Public</a></li>
                               <li><a href="#">Évenement Privé</a></li>
                           </ul>
                       </button>

[gaunt yoke]

met lui juste une position relative à ton btn-dropdown

le absolute sera donc relatif au btn-dropdown

donc a son parent et pas a la page entière

[potent linden]

ok merci

[hollow brook]

Yo, je cherche à savoir comment j'peux centrer mes elements qui sont dans le flex dans cette situation

[unborn merlin]

Justify-content: center; ??

[potent linden]

@hollow brook Margin: 0 auto;

[hollow brook]

Mais c'est un flex enfait

[gaunt yoke]

Ta div project elle fait 100% en width ?

Ça doit être pour ça, du coup elle fait 100% du parent qui est flex

donc c’est flex mais ça prend toute la largeur donc tu le vois pas

I Think

[robust anvil]

Du coup un padding horizontal automatique ferait l'affaire à la limite non ? 🤔

[potent linden]

@hollow brook T'as essayé au moins ?

[gaunt yoke]

@hollow brook pour ton soucis en media query met juste ta class .portfolio a justify-content: center;

je viens de check du coup c'est à cause de space between

[hollow brook]

J'arrive sur mon PC je check ça

En effet c'était ça j'aurais dû le voir dès le début 😦

[azure dawn]

Hello,
J'ai un petit soucis, avec un bouton et une image :
Je mets une image sur une div, mais le soucis, c'est que le bouton en dessous, il est en bas à droite de l'image et on ne peut pas le bouger (à savoir que j'ai change l'image pour vous montrer )

Est ce que vous savez comment je peux mettre mon button en dessous de l'image ?
Merci 😉

[gaunt yoke]

bah ce sont 2 élements inline donc met en un en block

ou tu flex column mais bof, tu peux juste foutre ton bouton dans une div pour avoir un inline et un block

[azure dawn]

Mon bouton est déjà en block

.navigation img {
    width: 100px;
    height: 100px;
}

.navigation a {
    color: white;

    display: block;
    -webkit-border-radius: 20;
    -moz-border-radius: 0;
    border-radius: 0px;
    font-family: Arial;
    font-size: 18px;
    padding: 10px 25px 20px 0px;
    text-decoration: none;

( je verrai pour la responsive plus tard )

[gaunt yoke]

show me le .navigation

[azure dawn]

.navigation {
    position: absolute;
    left: 0; top: 0;

    width: 350px;
    height: 100vh;

    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: medium;
    text-align: center;
    color: white;

    background-color: #2f3640;
}

[gaunt yoke]

t'as pas un truc ou on peut tester direct ?

plus simple

[azure dawn]

J'viens de comprendre

J'ai oublier le > à la fin de mon img x)

Merci beaucoup 😉

[azure dawn]

Est ce que quelqu'un sait comment je peux mettre une variable sur un élément (<a par exemple) afin de la réutiliser dans mon fichier style ?
Merci

[gaunt yoke]

comment ça

t'as les variables en css style="--nomvariable: xxx" si tu veux

[azure dawn]

Oui mais comment je peux la définir la variable pour la réutiliser en CSS ?

[gaunt yoke]

comme je t'ai montré la dans l'html

et dans le style tu auras aussi --variable

et pour la use
color: var(--tavariable)

car tu auras passer la couleur ds l'html

[azure dawn]

t'as les variables en css **style="--nomvariable: xxx" **si tu veux
?

[gaunt yoke]

En gros:

<a href="#" style="--color: red'"></a>

a {
  --color: blue;
  color: var(--color)
}

tu la redefine si tu veux avant ou meme en dehors de l'élément pour avoir un default value

[azure dawn]

Ok

Merci beaucoup

Niquel merci ! 😉

[silent frost]

bichoir 🙂 quelqu'un sait comment detecter en js si une div touche le bord de l'ecran ?

[void anvil]

Je suis pas sûr mais ça pourrait t'aider ne serait-ce que pour récupérer les dimensions du bord, après il va falloir sûrement utiliser des conditions pour détecter si ta div touche le bord de l'écran. https://developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect

Vois ce que cela te retourne et fais des tests avec.

[silent frost]

ok, merci 🙂 je vais faire des testes.
(je connais peut de chose en js en terme de fonction donc c'est compliqué xD)

[void anvil]

Pas de soucis, il y a beaucoup de chose à voir en JS mais il y a beaucoup de documentation donc si tu cherches bien tu devrai trouver la réponse à la plupart de tes questions.

[silent frost]

le monde du dev web est immense xD

[void anvil]

C'est pour ça qu'il est important de se spécialiser !

[silent frost]

je préfére faire du backend mais comme j'aime faire le plus de chose seul, je fait aussi le frontend quand je peut 😐

[void anvil]

Bah après c'est plus facile de ce spéaliser quand on est dans une équipe avec plusieurs compétences. Moi je suis aussi spécialisé backend et c'est très très rare que je fasse du frontend parce qu'on a une équipe dédié au frontend.

[silent frost]

sa sauve la vie d'etre en equipe 🙂

[void anvil]

Bah c'est surtout que je suis en entreprise donc c'est normal XD Mais sinon oui essaye d'intégerer une équipe de développement avec un chef de projet si tu souhaites progresser sur ce sujet

[silent frost]

je verrai bien 😄 merci pour le retour 👍

[north lagoon]

Hey, je vient a vous car comment je pourrais mettre une barre comme la rouge en dessous quand il est hover ?

merci d'avancze

[void anvil]

#monid:hover {
  border-bottom: 1px solid red;
}

Tu remplaces #monid par le selecteur de ton element

Et tu lui rajoute la pseudo classe :hover

[north lagoon]

Et tu lui rajoute la pseudo classe :hover
@void anvil https://gyazo.com/c2c475351c824f51bf23530fc6347f3c sauf que maintenant genre ca fait resize le header

[void anvil]

https://stackoverflow.com/questions/21668301/how-to-avoid-elements-to-resize-when-hovering

[silent frost]

Rebichoir :)
J'ai un problème avec un dropdown, quand la fenêtre est réduit, le dropdown disparait un peu.
sur le screen 1, le dropdown disparait un peu
sur le screen 2, le dropdown est entier

une idée pour que cela sois dynamique ?

[silent frost]

problème règle, un peu de js et de css et voila 🙂

[hollow brook]

Yo, vous savez comment je peux espace un texte en CSS ? genre comme ça

[gaunt yoke]

letter-spacing

[hollow brook]

Merci le 💯

[unborn merlin]

et si je met un bg-black sur mon end-burger, j'ai sa :

[hollow kite]

?

[slim bridge]

@unborn merlin y’a rien

[void anvil]

Il as oublié l'image je croit

[hollow brook]

Petite question, le autocomplete="on" pour un input ça fonctionne que en mobile nan ?

[stone verge]

Il me semble, en tout cas en tant que utilisateur je n'est jamais vu sa sur pc mais uniquement sur mobile (Android et IOS)

[gaunt yoke]

@hollow brook c'est aussi pour Desktop, quand par exemple tu ne veux pas que sur un champ on te propose automatiquement de le remplir avec des informations déjà enregistrées au préalable

[hollow brook]

ah ok je vois

[gaunt yoke]

Souvent quand tu remplis un formulaire pour une commande tu as deja du voir que ca peut te le remplir auto, bah tu peux le disabled ce truc

[hollow brook]

Ok super

Genre pour le nom et l'email c'est interessant

[gaunt yoke]

yes

[hollow brook]

dacc' chef

[hollow brook]

Je cherche un moyen d'enlever le petit truc en bas à droite de mon textarea

[gaunt yoke]

resize: none;

[hollow brook]

ok dacc'

[hollow kite]

Steam l'utilise pour les payements de jeux je crois

[hollow brook]

??

[strong lynx]

[hollow kite]

L'autocomplete

[hollow brook]

??

soit plus précis stp

[quartz thunder]

bah en gros il dit juste que steam utilise l’autocomplete dans les input pour le payement des jeux

[gaunt yoke]

Après en réalité c’est pas vraiment steam ou autre c’est ton navigateur qui exécute cette action

[quartz thunder]

logique

[hollow kite]

Microsoft chez pas quoi

[potent linden]

Salut quelqu'un sais comment je peut mettre mon dropdown bien le code est a gauche

Je souhaiterai qu'il soit comme ça mais sans avoir besoin des params width et/ou left svp je glr

[unborn merlin]

hello la team j'ai juste une ptite question, je veux rendre mon header responsive, je commence par là

@media screen and (max-width: 600px){
    header{
        height: 85vh;
        nav{
            display: none;
        }
    }
}```

mais ma nav ne disparait pas quand je fais un display:none;

[gaunt yoke]

montre ton html

[unborn merlin]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/style.css">
    <title>Sn'Game</title>
</head>
<body>
    <header>
        <img class="wave" src="svg/header.svg" alt="">
        <nav>
            <div class="logo">
                <a href="#">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
            <div class="navlinks">
                <a href="#">Jeux</a>
                <a href="#">GitHub</a>
            </div>
        </nav>
        <div class="play">
            <h1>SN'GAME</h1>
            <button>Play Now</button>
        </div>
    </header>
</body>
</html>```

[gaunt yoke]

quand tu essayes t'es bien a 600px ou moins de width de l'écran ?

[unborn merlin]

yes

jte send un screen

[gaunt yoke]

tu fais du sass/less on est okay ?

pour imbriquer comme ça

[unborn merlin]

scss

yes

[gaunt yoke]

augmente juste a 900px voir si ca va etre prit en compte juste pour voir si c'est pas ce soucis la

[unborn merlin]

toujours pareil

[gaunt yoke]

Montre le css que ca te génère

[unborn merlin]

jtenvoie tout mon scss si tu veux

[gaunt yoke]

voir si y a pas un soucis lors de la generation du css

au niveau du media query

[unborn merlin]

@media screen and (max-width: 900px){
    header{
        height: 85vh;
        nav{
            display: none;
            background: red;
        }
    }
}```

[gaunt yoke]

non ça c'est ton scss

montre le css que ca te gén_rze

[unborn merlin]

ah ui

@media screen and (max-width: 900px) {
  header {
    height: 85vh;
  }
  header nav {
    display: none;
    background: red;
  }
}```

bizzard tu vois

[errant cypress]

ça met le bg ?

[unborn merlin]

ouai

[gaunt yoke]

met juste un !important alors

[errant cypress]

essaye !important

o

h

https://stackoverflow.com/questions/15855826/css-alternatives-to-style-displaynone

[unborn merlin]

yaaa ça marche merci les gars

[errant cypress]

np

[potent linden]

Salut comment je peut installer SASS ?

Sans npm

[hollow kite]

Bonne question 🤔

Tu peut l'installer avec ruby

https://www.tutorialspoint.com/sass/sass_installation.htm

Et c'est tous je crois

[gaunt yoke]

Non, tu peux tout simplement utiliser un plugin vscode par exemple qui va te générer ton fichier css

Pour des projets vanilla c’est plus simple

[unborn merlin]

Yes

[potent linden]

thx

[potent linden]

element.style {
    background: url(https://manager.isaper.com/IzTGeAe.png);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
}

Pour ton https://manager.isaper.com/auth/login ( ton body )

[empty tartan]

@gaunt yoke avec un ndd que ton navigateur connais pas ça devrait bloquer l'autoplay

[gaunt yoke]

Oui faut qu'il valide le son etc sur le navigateur

mais ça toi tu peux l'intercepter cet event et du coup hop lancer ta video

et ensuite au refresh plus besoin ca va s'autoplay

[empty tartan]

Comment faire pour l'intercepter 😂

Facile à dire mais à faire c'est un peu contourner une sécurité

[gaunt yoke]

Ah non j'ai plus le code mais j'avais fais ce meme genre de système mais pour les notifications chrome (sans service worker) et une fois que le mec l'accepte tu peux le savoir et donc exec ton action

[empty tartan]

Et puis regarde moi ça https://developers.google.com/web/updates/2018/11/web-audio-autoplay

[gaunt yoke]

un peu long de lire tout ça

peut etre + la flemme que long d'ailleurs

[empty tartan]

[gaunt yoke]

ça date de 2017 qu'il laisserait + de temps pour gérer

après c'est un autre sujet toi c'est pour ton super portfolio

Mais par contre coca je sais po si c'est fait exprès

mais on peut pas play ta vidéo manuellement

😠

[empty tartan]

Askip il faut attendre 7 secondes et ensuite déclencher le playvideo

[gaunt yoke]

trop long 7 secondes bordel

[empty tartan]

If the user often lets a website’s domain play audio for more than 7 seconds then we assume in future that the user is expecting this website to have the right to autoplay audio. 

Ah non

JE SAIS PAS

[gaunt yoke]

après c'est vrai que l'autoplay ca reste mega relou quand tu t'y attend pas

[empty tartan]

Oui

[gaunt yoke]

"Salut moi c'est pierre, je peux t'aider à gagner 1000€ par mois sans rien faire"

[empty tartan]

Ouais et c'est bizarre car eux il y arrive !

À faire fonctionner l'autoplay

[prime blade]

bawélogik

[dawn agate]

Car ils sont plus fort que toi

[empty tartan]

[prime blade]

rajoute &autoplay=1 dans l'url de la vidéo

perso ça marche

@empty tartan

[empty tartan]

envoie moi la ligne complète

avec le iframe

@prime blade

[prime blade]

nan mais je sais pas ce que t'as branlé mais sur youtube tu fais partager et tu l'as

c'est quoi ce bins là

[empty tartan]

bah c'est du script

[prime blade]

mais il sert juste à créer ton iframe?

[empty tartan]

Oui

[prime blade]

<iframe id="player" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="1280" height="720" src="https://www.youtube.com/embed/e-6eWEhjMa4?enablejsapi=1&amp;origin=https%3A%2F%2Fwww.thecocasio.fr&amp;widgetid=1"></iframe>

[empty tartan]

Mais c'est youtube qui dise de faire comme ça

rooh

[prime blade]

ça fonctionne sur ton site maintenant 👌

après met la vidéo en boucle

x)

[gaunt yoke]

Ca va c'est pas du tout ce que j'ai dis tout a l'heure

moi il me dit que non toi il t'écoute

[prime blade]

ça marche plus mdr

[unborn merlin]

hello, je comprends pas j'ai fais mon reset comme ceci :

*, ::before, ::after{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}```

mais lorsque j'ai crée ma nav **MOBILE**, je me rends compte que si je fais `padding: 0; `, un padding s'enlève alors que j'ai tout reset :/

Voici le code html/css de la nav :

```html
<ul class="navLinks">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Jeux</a>
                </li>
                <li>
                    <a href="#">Github</a>
                </li>
                <li>
                    <a href="#">Discord</a>
                </li>
            </ul>```

```css
.navLinks{
  position: absolute;
  right: 0;
  height: 81vh;
  top: 10vh;
  width: 50%;
  display:flex;
  flex-direction: column;
  align-items: center;
  background: var(--bgPrimary);
  padding: 0;
  border: 2px solid red;
}```

Résultat sans padding:0; sur la NavLinks

Résultat avec padding: 0; sur la NavLinks

[unborn merlin]

hello suite au message de l'importance de la fonction fleché, je poste mon problème :

si j'utilise une fonction "normale" sans arrow function, alors la fonction marche mais si je fais une fonction fleché, sans succès

const body = document.querySelector("body");

setInterval(rainFall, 10);

let rainFall = ()=>{
    const waterDrop = document.createElement("i");
    
    waterDrop.classList.add("fas");
    waterDrop.classList.add("fa-tint");
    waterDrop.style.fontSize = Math.random() *7 + "px";
    waterDrop.style.animationDuration = Math.random() *2 + "s";

    body.appendChild(waterDrop);
}```


Et voici l'erreur x) : `Uncaught ReferenceError: Cannot access 'rainFall' before initialization`

[gaunt yoke]

inverse ton setInterval(rainFall) après la déclaration de ta fonction pour voir

elle est pas encore init au chargement

comme tu l'as déclares après

Mais pourquoi tu assignes ta fonction à une variable

Sauf si tu en as l'utilité comme je vois pas tout la

[unborn merlin]

inverse mon setInterval ?

ah yes, c'est good merci Enzo 😉

[gaunt yoke]

let rainFall = () => {
    console.log('hey')
}
setInterval(rainFall, 10);

ah bah top

[dusky skiff]

Salut, j'ai besoin que quelqu'un me sauve la vie !

<link rel="stylesheet" media="(min-width: 767.98px)" href="./stylesheets/style.css">
<link rel="stylesheet" media="(max-width: 767.98px) and (orientation: portrait)" href="./stylesheets/style_mobile.css">
<link rel="stylesheet" media="(max-width: 767.98px) and (orientation: landscape)" href="./stylesheets/style_mobile_landscape.css">

En gros, j'ai fait ça pour que le site s'adapte en fonction des appareils

Mais, quand je ZOOME ( je ne comprends pas pourquoi ) ça passe de style.css à style_mobile_landscape.css

Alors que logiquement, ça devrait rester sur le fichier style.css

Est-ce que ça vient de ça ?

<meta content="width=device-width, initial-scale=1" name="viewport"/>

[dusky skiff]

[lapis dock]

La meta na rien a voir la dedans et si tu la met pas tu flingue ton SEO

Quand tu zoom sur ton navigateur?

@dusky skiff

[dusky skiff]

Oui @lapis dock

C'est quand je zoome ça change de css

Je ne comprends pas pourquoi

[lapis dock]

C'est nomal du coup c'est les navigateur font sa par defaut. En gros sa prend ta résolution et pas la taille réel de ton écran

Quand tu zoom tu modifie la résolution

Et donc tu passe par ta media queries

[dusky skiff]

:/

Et comment je fais pour régler ça du coup ?

J'ai cherché mais j'ai rien trouvé

[lapis dock]

Tu fait des media queries plus restrictive

[dusky skiff]

C'est à dire ?

Ah au niveau des conditions ?

[lapis dock]

Yes

[dusky skiff]

Bah le seul problème c'est que je ne sais pas quoi mettre :/

J'ai regardé

[lapis dock]

Tu fait une media screen 1050px

[dusky skiff]

Au niveau de la hauteur peut être ? 🤔

[lapis dock]

1050 800

800 500

et après libre a toi d'ajuster

[dusky skiff]

Et tu penses que ça peut fonctionner ?

[lapis dock]

J'en suis sur

[dusky skiff]

Ok merci je verrais ^^

[lapis dock]

Yas pas de quoi

[dusky skiff]

@lapis dock Désolé de te re-déranger, mais tu t'y connais en backend ou pas du tout ?

[lapis dock]

Ouai

[dusky skiff]

Bah en fait

J'ai fait un autoplay de musique, jusque là rien de compliqué