#html-css

1 messages · Page 2 of 1

stoic plume
#

je n'ai pas de pop up non

urban ingot
#

Même pas un bouton ?

stoic plume
#

non apparement

urban ingot
#

Je suis à court d'idée, si tu as envie tu peux m'envoyer tes sources pour que j'essaye

#

Rapport à ta capture, tu peux aller dans "paramètres de site" pour voir sit u peux activer le son

stoic plume
urban ingot
#

Et le fichier audio

stoic plume
urban ingot
#

Ah, et ça marche ?

stoic plume
#

c'est en automatique de base

urban ingot
#

Tu as un app.js aussi ?

stoic plume
#

oui mais pour des animations c'est tout

urban ingot
#

Vaudrait mieux que je l'aie on sait jamais, si tu veux que je teste

stoic plume
#

je vais essayer d'intégrer un lecteur et au pire je t'envoie

#

je vais pas te faire chier

#

t'es pas non plus à mon service

urban ingot
#

ça me fait pas chier tkt

stoic plume
#

Merci 🙂

urban ingot
#

En même temps je suis curieux de savoir pourquoi diable ça marche pas 😂

stoic plume
#

Moi aussi notlikethis

urban ingot
#

ça pourrait être le fichier audio le pb

stoic plume
#

@urban ingot (sorry pour l'heure) J'ai réussi à intégrer la musique 😁 C'était le fichier qui devait être corrompu, je l'ai retélécharger et puis ça a marcher 🙂

#

Merci beaucoup pour ton aide en tout cas !

urban ingot
#

👍

brave jay
stoic plume
brave jay
#

J’ai pas lu la conversation du coup je sais pas de quoi vous parliez

stoic plume
#

Pas de problème ^^

woven kindle
#

bonsoir je commence le développement et je ne trouves pas mon erreur pourriez vous m'aider svp

urban ingot
#

Bonsoir, il n'y a en soi pas d'erreur dans cette ligne de code, bien que je pense que la balise doit finir par ">" et non "/>"

woven kindle
urban ingot
#

Il me faut plus d'infos ^^

#

L'image est cassée c'est ça ?

#

Enfin, tu vois le texte "Volcic Icone"

brave jay
urban ingot
#

Techniquement parlant effectivement mais il voulait qu'on lui trouve une erreur 🤣

exotic sentinel
# woven kindle

Le problème c’est sûrement le path, si c’est pas résolu montre ton arborescence de fichier

brave jay
#

Ouvre sur chrome fait f12 va dans l’onglet network et appuis sur f5

#

Et screen

void anvil
#

met le .wav

void anvil
stoic plume
# 
        <section class="musiquecontainer">
            <div id="content">
                <div class="musique">
                    <img src="img/onigiri/musique.png">
                    <div class="info">
                        <h1>OnigiSong</h1>
                        <p>Onigiri Music</p>
                    </div>                     
                    <div id="content">
                        <input type="button" id="button" value="Click me">
                        <canvas id="canvas"></canvas>
                        <audio id="audio" loop></audio>
                        <div class="controls">
                            <img src="img/play-solid.svg" alt="" id="play">
                            <img src="img/pause-solid.svg" alt="" id="pause">
                            <img src="./volume-high-solid.svg" alt="" id="mute">
                        </div>
                      </div>
            </div>
        </section>
#

y'a un problème

#

j'arrive pas à changer l'apparence du button

#

j'ai essayé en CSS avec background-image mais ça change pas vraiment

#

je voulais mettre ça

#

mais ça donne ça c'est un peu dégueulasse

unknown.png
# 
#button {
    background-image: url(img/play-solid.svg);
    position: flex;
    top: 10px;
    left: 10px;
    z-index: 100;
  }
#

j'arrive pas à faire un truc simple je vais péter un cable mdr je crois que je suis dessus depuis trop longtemps donc je stagne

urban ingot
#

Faut virer la value click me qui donne une grande largeur à ton élément, et à la place lui mettre les dimensions de ton img

stoic plume
#

il est tout fin du coup

unknown.png
#

ah att j'essaye un truc

urban ingot
#

C'est pour ça que j'ai dit qu'il faut lui donner des dimensions

stoic plume
#

ah oui ça prend tout son sens

#

j'avais essayer de changer le value mais ça sert à rien

#

bon j'ai réussi mais

#

ça rend pas très beau avec le fond blanc

unknown.png
#

enfaîte j'ai mis un image DANS le bouton

stoic plume
#

c'est bon j'ai réussi @urban ingot !

unknown.png
#

sue pourquoi j'en chie autant pour de la merde j'en peux plus

urban ingot
#

Parce que tu es débutant

stoic plume
#

Ouai mais là

#

je veux bien débuter mais bon

urban ingot
#

😂

stoic plume
#

c'est chaud là

#

je régresse j'ai l'impression

brave jay
#

tu sais que tu peux faire d'une div un bouton ou alors ajouter une image dans un bouton

#

tu n'as pas forcement besoin d'un background image

stoic plume
#

il va plus reconnaitre sinon

#

et ça va tout casser

#

enfaîte pour être clair, je veux faire ça

unknown.png
brave jay
#

tu as le onClick sur js

stoic plume
#

sauf que

#

à la place du truc orange dégueu je veux mettre mon truc à moi en .js

#

avec les boutons qui marchent

#

mais j'ai l'impression que je me suis embarqué dans un truc qui n'est pas de mon niveau notlikethis

brave jay
#

Tu as sois cette version

unknown.png
stoic plume
brave jay
#

ou ca :

unknown.png
#

Enfaite c'est complètement de ton niveau il faut juste avoir les bonnes pratique et savoir ou chercher

formal jewel
#

Pourquoi ne pas utiliser querySelector en lieu et place de getElementById ?

brave jay
#

les deux marchent c'est juste que j'ai l'habitude de l'id

stoic plume
brave jay
#

querySelector permet de sélectionné via la class genre : ```js
document.querySelector('.maClass')

#

ou alors par id avec #monId

stoic plume
#

ahh ok

#

je note

formal jewel
#

Tu peux utiliser tous les selecteurs, avec querySelector

#

T'as aussi querySelectorAll pour récupérer plusieurs mêmes éléments

#

Genre une liste de " li "

brave jay
#

Mais pour l'instant ne te tracasse pas tu n'en a pas besoin 😄 mais c'est toujours bon de savoir 😉

urban ingot
brave jay
#

Oui mais je montre avec du code classique mis a part className

urban ingot
#

Et que la balise img est normalement auto-fermante

stoic plume
brave jay
#

oui

rugged timber
#

Hey ! J’ai réaliser un site avec wordpress et j’ai ajouté des boutons paypal quelqu’un saurait comment faire pour que lorsque un achat est effectué la personne obtient un role discord

urban ingot
#

Pas avec du html / css 😄

stoic plume
#

bon voilà où j'en suis

unknown.png
#

oui c'est dégueulasse oui c'est le bordel

#

mais

#

je débute PepeClown donc ça va

#

est-ce que je peux vous demander je dois mettre quoi en .js ou html/css pour le bouton pause ? et pour le bouton mute, qu'il mute la musique et qu'il change d'apparence et quand on reclic il redevienne normal et le son revient

#

Merci pour l'aide onche

formal jewel
#

T'as pas une api pour ça ?

stoic plume
urban ingot
urban ingot
stoic plume
#

y'a plusieurs chapitre

#

le 1 c'est bon

#

maintenant y'a le 2 et 3

urban ingot
#

J't'avais envoyé un code pour mute, /demute et changer l'image

stoic plume
#

ah bon

urban ingot
#

Tu m'avais remercié

stoic plume
#

att

#

je vais chercher

#

ah oui

#

ça



volumebtn.onclick = function(){
    audio.toggleMute()
    if(audio.muted){
      image.src = 'srcImagedmuted'
    }else{
      image.src = 'srcImagePasMuted'
    }
}
#

du coup en effet

urban ingot
#

Faut adapter à ton code à toi

stoic plume
#

oui

#

je vais essayer

stoic plume
#

j'ai fais une erreur ? parce que ça marche pas donc je pense mais je vois rien

unknown.png unknown.png unknown.png
#

j'ai copié le bouton play dans le html

#

vu que ça marchait comme ça je me suis dis que c'était ok

urban ingot
#

Pour que ce que j'ai fait marche, il faut pas que l'image soit en background, mais en balise img

#

Autrement tu peux simplement toggle une classe sur ton bouton, et quand ton bouton a cette classe, il a un différent background-image

stoic plume
stoic plume
#

celui que tu ma donné

urban ingot
#

Non je joue sur le src d'une balise img, pas sur les classes

stoic plume
#

ah

stoic plume
urban ingot
#

Ouais

stoic plume
#

bon tant pis j'y arrive pas j'en ai marre

#

je ferais demain

stoic plume
#

si je le met au dessus ça casse tout, dedans pareil

#

et en dessous ça fait rien

# 
window.onload = function() {
    
    button.onclick = function() {
      audio.src = "onigiri_audio.mp3";
      audio.load();
      audio.play();
      var context = new AudioContext();
      var src = context.createMediaElementSource(audio);
      var analyser = context.createAnalyser();
  
      var canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var ctx = canvas.getContext("2d");
  
      src.connect(analyser);
      analyser.connect(context.destination);
  
      analyser.fftSize = 256;
  
      var bufferLength = analyser.frequencyBinCount;
      console.log(bufferLength);
  
      var dataArray = new Uint8Array(bufferLength);
  
      var WIDTH = canvas.width;
      var HEIGHT = canvas.height;
  
      var barWidth = (WIDTH / bufferLength) * 2.5;
      var barHeight;
      var x = 0;
  
      function renderFrame() {
        requestAnimationFrame(renderFrame);
  
        x = 0;
  
        analyser.getByteFrequencyData(dataArray);
  
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
  
        for (var i = 0; i < bufferLength; i++) {
          barHeight = dataArray[i];
          
          var r = barHeight + (25 * (i/bufferLength));
          var g = 250 * (i/bufferLength);
          var b = 50;
  
          ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
          ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
  
          x += barWidth + 1;
        }
      }
  
      audio.play();
      renderFrame();
    };
  };
#

ici

#

j'ai essayé au debut mais ça foire le code

#

pourtant je l'ai mis en dessous et ça marche pas je comprends pas

unknown.png
#

il est pourtant pas lié à celui du dessus

#

ça non plus ça marche pas

unknown.png
brave jay
#

Met dans le onload

#

Et fait un const de ton getelement

stoic plume
#

j'ai rien d'autre

#

et en plus ça marche pas notlikethis

urban ingot
#

Hello @stoic plume quoi de neuf ?

stoic plume
#

j'ai regarder sur internet et j'ai demandé sur un forum mais j'attend voir ce qu'on me dit

urban ingot
#

Tu penses à contrôler les éventuelles erreurs javascript ?

stoic plume
#

ba enfaîte ça marche mais quand j'essaye de combiner le code pour mute/demute ça casse tout et j'ai essayé de le mettre un peu partour et soit ça marche pas du tout ou alors ça marche pas le mute/demute

#

sinon y'a pas d'erreur vu que ça marche donc c'est bon je pense

urban ingot
#

Non mais les erreurs javascript dans la console ?

brave jay
#

On le fait ensemble demain apres-midi stv

stoic plume
stoic plume
long thunder
steady verge
#

Salut, quel est le sens de la vie ?

dusky skiff
steady verge
dusky skiff
open saffron
#

Salut !
Je sais pas où mettre cette demande puisque, étant un énorme noob je fais mon site via Wordpress.
Je voulais savoir s'il était possible d'envoyer quelque chose, ou effectuer une quelconque action après
un achat (abonnement) par un bouton paypal ajouté par bloc de HTML ?
Merci d'avance à vous ❤️ !

jade ferry
#

Moi je te conseille sellix puis tu intègres a ton site si tu veux vendre un fichier, une clé par exemple, ensuite tu intègre a ton site le payment

open saffron
iron trout
#

Bonjour, comment je pourrai virer la bande noir ici, et celle du dessous aussi sur ma vidéo html

unknown.png unknown.png
copper warren
#

essaye un object-fit:cover

iron trout
#

déjà essayer, mais ses les bande de la vidéo il en font partie je voudrais remonter la vidéo ou la recadrer pour qu'elle ne sois plus visible jsp si ses possible avec html ou en js?

glad glen
#

coucou svp quelqu'un peut m'aider pour finir vite fait mon site en html et css mp moi?

urban ingot
iron trout
urban ingot
#

Comment ça ?

exotic sentinel
urban ingot
#

@exotic sentinel tu es sûr que c'est à moi que ton message est destiné ?

exotic sentinel
urban ingot
#

^^

exotic sentinel
iron trout
#

C'est à dire ?

copper warren
#

Bah le code quoi y'a rien de plus à comprendre

#

Ton html / CSS

stoic plume
#

Bonjour, je souhaite créer un site de marketplace pour vendre des vêtements avec personnalisations, vous me conseiller wordpress/autre ou de faire moi même ? Je voudrais intégrer un système de paiement style stripe et un système d'ajout au panier avec la possibilité d'avoir différentes tailles et couleurs. Faudra t-il une base de donnée ? si oui, vous me conseiller quoi et comment. Merci

brave jay
#

Pour un gros projet comme ça utilise WordPress ou au pire shopify

#

Mais le faire toi même c’est ultra galère

rugged acorn
#

hey , qlq a une idée d'un truc a coder ( parce que jai plus d'idée 😅 ) ?

void anvil
#

Hmm je sais un site de sneaker en vrai

stoic plume
brave jay
wise hamletBOT
#
Citation du message de Snox#7329 posté dans #présente-ta-création

quoteStart Petit système de Bang comme sur https://duckduckgo.com/bang (Projet perso pour entrainement) quoteEnd

Ce message contient également une image, visible à droite de l'embed.

Ce message contient également un embed.

➜ [Voir le message original](#présente-ta-création message)

Cité par Snox#7329 ·
brave jay
#

C’est super cool à faire et ça t’apprend pas mal de choses

nova spoke
#

bonsoir, je rencontre un probleme avec ma navbar, je voudrais qu'elle reste fix avec un position fixed mais le soucis c'est que mon trait bleu qui est un svg va tout en haut lui aussi

forest echo
#

Je n’ai pas ouvert ton lien car je suis sur téléphone mais je viens juste ici pour te dire d’éviter les position fixed. C’est vraiment contre responsive.

nova spoke
forest echo
#

En haut quand tu scroll?

#

Ou en haut de la page?

#

Position relative / absolute pour mettre des coordonnées.
Ou sinon tu met ton div dans l’arborescence tout en haut et ça reste en haut.

brave jay
#

Quand tu ajoutes position: fixed il faut aussi ajouté top, left, right, bottom

#

ils ne sont pas tous obligatoire

nova spoke
urban ingot
#

top : 0

cloud dawn
#

Salut, j'ai une question. Je n'arrive pas à mettre mon texte en dessous de l'autre. Mon code : ```html
css :

.bloc h1
{
color: white;
font-family: "Arial Black";
font-size: xxx-large;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}

.bloc p
{
color:white;
font-family: Arial;
font-size: x-large;
display: flex;
justify-content: center;
align-items: center;
height: 0vh;
}
html :
<div class="bloc">
<video src="./content/background.mp4" muted loop autoplay></video>
<h1>
Bienvenue sur VRIX
</h1>
<p>
Vos animés à prix réduit
</p>
</div>

formal jewel
#

Bizarre

cloud dawn
#

screen de ce que ça me fait :

unknown.png
formal jewel
#

Les balises titre et les paragraphes sont de type bloc, dont ça devrait se mettre l'un sous l'autre

urban ingot
#

Ben c'est l'un sous l'autre 😄

cloud dawn
urban ingot
#

Ton h1 fait la moitié de la haut de l'écran donc c'est normal

#

hauteur*

formal jewel
#

Ce qui est bizarre, c'est d'utiliser deux fois flex, pour ton titre et ton paragraphe

cloud dawn
#

Il y a une meilleur solution ?

cloud dawn
stable jetty
#

tu devrais définir le flex dans la class bloc

formal jewel
#

Si tu veux aligner ton contenu (h1, P), définir le flex sur la class " bloc ", c'est la bonne façon de faire

stable jetty
#

pour éviter de le mettre deux fois

stable jetty
cloud dawn
#

Ok je vais test

stable jetty
cloud dawn
#

mtn j'ai ça

unknown.png
urban ingot
stable jetty
urban ingot
#

Il te faut flex-direction: column maintenant

cloud dawn
stable jetty
#

ou tu mets tout dans le meme fichier

stable jetty
#

et le but du projet c'est quoi ?

cloud dawn
#

Enfin j'ai quelque base mais j'aimerais m'améliorer

cloud dawn
# 
.bloc video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}``` ma vidéo
urban ingot
#

Sors la vidéo du .bloc

#

Car là elle fait 100% de 50%

cloud dawn
#

Ouaip c'est bon c'est résolu

urban ingot
#

Tu pouvais faire top 0 et left 0, sans le transform

#

C'est plus simple

cloud dawn
#

Ok et mdr mtn j'ai des scrollbar qui apparaissent mdr

urban ingot
#

Ah bon

cloud dawn
#

Nn c'est bon en faite j'ai juste rajouté un truc

#

Mais là le problème c'est que j'ai un texte qui se supprime

stable jetty
#

@urban ingot #php stp si ya moyen

wispy dome
#

i need help with some css im new to this im a student and i need to move the elements of pikachus face with flexbox...

#

body {
background-color: #f7e4b7;
background-image: url('../img/background.png');
background-repeat: no-repeat;
}

#depart {
margin-left: 500px;
margin-top: 250px;
}

#depart > img {
display: flex;
}

#texte_css {
position: absolute;
top: 600px;
font-size: 3em;
}

.oeil
{
align-items: flex-start;
flex-direction: row;
}

#bouche
{
position: absolute;
-ms-flex-align: center;
}

#

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

    <title>Ex08 - Pikachu Meme</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div id="depart">
        <img class="oeil" src="img/oeil_gauche.png" alt="oeil gauche">
        <img class="oeil" src="img/oeil_droit.png" alt="oeil droit">
        <img src="img/nez.png" alt="nez">
        <img src="img/joue_droite.png" alt="joue droite">
        <img src="img/joue_gauche.png" alt="joue_gauche">
        <img id="bouche" src="img/bouche.png" alt="bouche"><br>
    </div>

    <span id="texte_css">CSS is awesome !!</span>
</body>

</html>

exotic sentinel
wispy dome
brave jay
wispy dome
#

a laide

#

XD

#

pikachu est tout deformer cest affreux sauvez le

#

le flexbox me rentre vraiment pas dans la tete

urban ingot
#

ça a l'air marrant ton exo

#

It looks to be a funny exercise

cloud dawn
nova spoke
#

bonjour, comment faire pour que ma box soit au dessus de mon svg ?

brave jay
#

Zindex

nova spoke
#

Sa marche pas

formal jewel
#

@nova spoke Il faut sans doute déclarer la position

#

absolute ou relative

violet scroll
#

Salut tout le monde,

Je vais maintenant depuis pas mal de temps et je suis plus dans le côté algorithme que design.
Il se trouve que pour certains choses je suis amené à faire des UI de logiciel ou bien des web site. Et ce qui m'intéresse ajd c'est avoir l'avis de personnes qui connaisse bien le dev front web.

Comme dit je suis une tanche en design, beauté etc... Donc malgrés le fait que je connais bien le html,css,js c'est la galère de faire quelque chose qui rend beau.
J'ai donc entendu parlé de technologie comme wordpress, bootstrap.

Ma première question c'est "Qu'est ce que vous me conseillez pour faire de beaux sites sans trop se casser la tête car c'est pas ce que j'aime faire ?"

Deuxième "Concernant WordPress, il parait que c'est vraiment simple et rapide, mais on m'a parlé que le wordpress resté dans l'url sauf si on payé. Est ce que c'est vrai et est-il possible de l'enlever ?"

nova spoke
#

bonjour, comment se fais il que la bordure fasse tous le tour ?

formal jewel
#

@nova spoke Une bordure fait par défaut tout le tour d'un bloc

#

Si tu veux une bordure uniquement sur le bas, il faut faire un border-bottom: 1px solid #000;

nova spoke
#

sa va jusquau bout de lecran

#

moi je veux uniquement sur le contour du texte

formal jewel
#

C'est normal, un bloc prend par défaut toute la largeur de l'écran

#

Essaie width: fit-content;

#

De souvenir, la bordure va se limiter au texte et non prendre toute la largeur de l'écran

nova spoke
#

sa marche, merci

#

mais par contre du coup je ne peux pas le mettre au centre

#

de l'ecran

formal jewel
#

Peut-être avec width: min-content; alors

#

Et un petit margin: 0 auto; pour le centrer

#

Après avoir regardé la chose d'un peu plus près, tu as width: min-content; qui prend la plus petite taille possible, basé sur le mot le plus long d'une phrase. Tu as width: max-content; qui lui prend le plus grand espace possible pour afficher toute la longueur d'une phrase. Et tu as fit-content qui applique l'un ou l'autre selon la situation.

#

Donc fit-content est bien la propriété à utiliser.

#

Et si tu veux centrer du contenu horizontalement et verticalement, tu as display: flex;

nova spoke
#

mrc

cloud dawn
#

Salut, j'ai une question. Comment je peux faire pour rapprocher deux texte. J'utilise flex box avec space-around (gérer leur distance)

urban ingot
#

En ajoutant du padding-left/right au parent, ou en donnant des marges aux textes

copper warren
copper warren
violet scroll
quaint fossil
#

bonjour, j'ai crée une boite (div) dans laquelle j'ai mis une autre boite (div) qui ont tout 2 des bordures mais la deuxième boite n'apparait pas dans la premièe malgré mes test de l'aligner ou de set un position relative, je suis débutant donc je ne connais pas bcp de technique

#

le text container est en dehors

#

du first part

formal jewel
#

@quaint fossil Faut un peu plus de contexte

#

Genre un screen de ce que ça donne

#

Pis il manque le CSS

quaint fossil
#

ce que tu vois en bas n'est pas dans la boite du haut alors qu'elle le devrait

unknown.png
#

enfaite ma box s'adapte a la box principale donc elle est bien dedans

#

mais je galère niveau positionnement

#

je voudrais la mettre a l'intérieur sans utiliser le positionnement absolue

#

je veux utiliser le relatif ou l'alignement vertical horizontal

#

mais sa marche pas

#

enfaite tout simplement je crois que j'utilise la mauvaise propriété et que je ne devrais pas use relative

#

pour ce que je veux faire

#

j'ai réussi en faisant sa mais sa reste pas très bien pour la suite

#

** position: relative;
bottom: 50%; **

formal jewel
#

Franchement, avec ta capture d'écran, j'ai du mal à visionner le truc

#

Ta façon de nommer tes blocs, c'est confus aussi

quaint fossil
formal jewel
#

Fais ce que tu peux. Et demain, à moins que ton problème soit réglé, j'essaierai de regarder tout ça de plus près.

quaint fossil
#

genre les 2 grosse box

#

c'est des div qui contiennent d'autre box

#

je voudrais les positionner sur la page sans utiliser absolute

#

sinon après je me retrouve a mettre du 400% si je fais un one page

formal jewel
#

Comme ça, au doigt mouillé, flex box. Mais là je suis au lit. Donc je peux pas t'aider tout de suite.

#

Et renseigne toi davantage sur les positions absolute et relative, tu sembles mal les comprendre.

quaint fossil
#

bah j'étais justement entrain de look un tuto flex box donc sa doit etre sa ensuite pour les position je commence a comprendre leur fonctionnement en tout cas en globalité

formal jewel
#

Prend le temps de bien comprendre. T'auras solutionné le problème avant demain. Je check tout ça demain si tu veux. Là, dodo 🦤😁

brave jay
#

Oui pour ce que tu veux faire c’est les flexbox

formal jewel
#

Flex box mon ami 👍

urban ingot
#

Ya des sites avec des exos ludiques très sympa pour apprendre flexbox

formal jewel
#

Flexbox frog

urban ingot
#

Exactement

brave jay
#

Et surtout pour les positions absolute c’est vraiment simple quand tu as compris le principe

formal jewel
#

Go google

quaint fossil
quaint fossil
#

tu vois ce que je veux dire ?

brave jay
#

C’est même très mal car du coup tu casses complètement le responsive

quaint fossil
#

je veux faire responsive

brave jay
#

ca par exemple c'est fait avec flex :

unknown.png
#

je rajoutes du gap entre les elements qui ont un justify-content: center

#

ce qui fait que c'est centré sur mon écran

#

Regarde a quoi sers justify-content

quaint fossil
#

tu peux venir voc pour que jte pose un question ou pas?

brave jay
#

Non désolé ma co ne le permet pas xD

quaint fossil
#

mais si je veux quadrillé ma page en 4 parties

#

mais que dans ces parties ya d'autre parties

#

mais que je veux pas que les sous parties soit en flex box

#

je fais comment

#

?

urban ingot
#

Dans chaque bloc tu fais ce que tu veux

brave jay
#

tu fais t'es 4 partie

urban ingot
#

Chaque bloc est en quelque sorte une nouvelle page

brave jay
#

puis dans les parties tu mets display: block

quaint fossil
#

yes

urban ingot
#

En fait tes enfants de l'élément en display flex, auraont leur display naturel, pas flex

quaint fossil
#

ouai et ducoup dans body c'est bon

#

?

brave jay
#

il vaut mieux utiliser des divs

quaint fossil
#

main alors

#

je vais faire sa

#

<main>

#

le problème c'est que je ne sais pas a l'avance combien va faire ma page donc a chaque fois que je modif une valeur je vais devoir tout remodif

#

c'est galère nan ?

#

si je fais tout en pourcentage

brave jay
#

mais tu n'as pas besoin de faire de valeur

#

essaye de montrer ce que tu veux faire

quaint fossil
#

nan je me suis embrouillé

#

tu sais quel technique utilisé pour que quand on zoom sa reste intacte ?

brave jay
#

c'est ce qu'on appelle le responsive

quaint fossil
brave jay
#

si

#

mais j'aimerais bien savoir ce que tu essayes de faire pour pouvoir mieux t'aider

quaint fossil
#

un one page en 4 parties avec differents bloc certains qui compose des background d'autre qui composent du texte

#

genre

#

les barre c'est le header et le footer

#

et les 4 blocs sont collé ya pas d'espace sur la page

brave jay
#

tu peux faire un truc comme ca :

unknown.png
quaint fossil
#

ha ouai c'est utile enfaite les class

#

mdr

#

genre moi moi j'ai mis plusieurs div dans main alors que pas besoin

#

je le ferai

#

la en l'occurence je viens de me rendre compte que je peux pas car chaque bloc n'est pas identique niveau taille etc maisoui

#

c'est bien

brave jay
#

ah mais il faut obligatoirement du css pour ce que tu veux faire

quaint fossil
brave jay
quaint fossil
#

j'aurai besoin d'aide pour responsive ma nav bar .

#

j'essaie d'utiliser les flex box

#

pour centré et espacer mes élements de navigation dans la nav bar

#

mais je n'arrive pas a use les flex box

#

je partirai sur :

display: flex
flex-direction:row

et ensuite je met un espacement

#

mais le problème il vient de ma compréhension parent enfant

#

de préference je pense devoir mettre le display et flex direction dans le header et ensuite l'espacement dans le nav ;

formal jewel
#

@quaint fossil J'essaierai de t'aider, après mon diabolo grenadine, quand je serai chez moi.

void anvil
#

Salut

#

Une personne serais me dire comment bien débuter dans le html pour faire un site?

formal jewel
#

@void anvil Essaie par exemple openclassroom

#

Ce sont des cours qui t'apprenne, pas à pas, comment est structuré un site et comme le styliser

void anvil
#

Ok ok merci je vais aller voir sa

quaint fossil
vestal bramble
#

Ou est ton soucis exactement ? @quaint fossil

#

Si c'est pour mettre en ligne les éléments de la ul c'est sur ton ul que tu met flex

quaint fossil
#

ce n'est pas assez grand et cela ne laisse pas de place a mon texte

#

j'arrive pas a le decaler sur le coté

#

a droite

vestal bramble
#

Le décaler sur le côté ?

#

Je pense que t'as un soucis de conception sur ta navbar

#

La non

#

Envoie tout ton code

quaint fossil
#

nan mais c'est de la perte de temps tu va rien comprendre autant attendre que tu puisse voc

vestal bramble
#

HTML et CSS pls

#

Je suis la dans genre 20-30 minutes

quaint fossil
#

bah parfait

urban ingot
#

Tu peux faire un white-space: nowrap par exemple

#

@quaint fossil

quaint fossil
urban ingot
#

Sur le ul

quaint fossil
#

genre sur la nav bar ou sur les ul

#

ok

urban ingot
#

navbar ça marche aussi

#

Pas sur tous les ul

#

Juste sur ton menu

quaint fossil
#

le problème c'est que je veux faire du responsive et j'arrive pas a use les % dans le padding

vestal bramble
#

Le responsive c'est pas seulement mettre des pourcentage hein

quaint fossil
#

on commence déja par sa mdr

#

et j'ai fais des flex box

#

ensuite

#

j'apprend

vestal bramble
#

Si tu veux voir pour du responsive intéresse toi au média query

quaint fossil
vestal bramble
#

Les flexbox != responsive

quaint fossil
#

tt facon on va voc 😂

quaint fossil
formal jewel
#

Les médias queries permettent un style conditionnel, selon les tailles d'écran. Si tu es sur grand écran PC, tu appliques un flex row, si tu es sur un écran mobile, tu appliques un flex column.

quaint fossil
brave jay
void anvil
#

Okay j'ai une question qui aurait une formation et un moyen d'apprendre le HTML et CSS assez rapidement

onyx breach
brave jay
brave jay
void anvil
hollow sentinel
#

Stack Overflow aussi

void anvil
#

J'ai deja commencer mais j'avais juste fait une longue pause sur sa car je n'avais pas le Time

hollow sentinel
#

mais en vrai html css c'est juste de l'intégration web

#

si tu veux vraiment faire des sites faut apprendre le php

#

mais c'est un autre paire de manches

floral haven
#

PHP ou n'importe quel autre langage backend*

nova spoke
#

bonsoir mes boutons input en html ne fonctionne pas, comment faire ?

formal jewel
#

@nova spoke Il te manque des choses, à première vue

#

Qu'est-ce que tu cherches à faire au juste ?

#

Tu as une page de traitement prévu pour ton formulaire ?

brave jay
urban ingot
#

Le type par défaut c'est submit 🤔

brave jay
#

J’ai jamais regarder

formal jewel
#

C'est un input qu'on utilise

#

<input type="submit">

nova spoke
#

cetait pas ca, fallais mettre un position relative

urban ingot
#

Une simple balise button ça marche comme un input type submit

copper warren
#

Salut tout le monde petite question pour ceux qui ont déjà fais du Vue / Tailwind :

<!-- Work -->
<div class="w-full h-full grid justify-center items-center" :class="`grid-cols-[repeat(24,minmax(0,1fr))]`">

<!-- Doesn't Work -->
<div class="w-full h-full grid justify-center items-center" :class="`grid-cols-[repeat(${48/2},minmax(0,1fr))]`">
#

J'ai pourant le même output de class.

bronze crow
#

Bonjour tout le monde je compte me lancer dans un projet assez conséquent et une question qui me ronge et que je ne maîtrise pas est comment adapte son code pou toutes les plateformes (pc, téléphone, tablette …
Merci

small basalt
#

en utilisant les bonnes unités et en utilisant les media queries, ça s'appelle le responsive t'as plein de tutos sur youtube ou autre

bronze crow
#

Ok merci beaucoup

brave jay
copper warren
brave jay
#

Bah parce que ça donne exactement la même class au final

#

Mais je viens de comprendre ton code

copper warren
cloud dawn
#

Salut j'ai une question comment je peux espacer deux éléments d'un display-block ?

copper warren
#

Non block fait que ça retourne à la ligne

#

Si tu veux éloigner deux élément tu me fais avec des flex

copper warren
cloud dawn
copper warren
#

Montre le html

cloud dawn
# copper warren Montre le html 
<div class="bloc">
        <video src="./content/background.mp4" muted loop autoplay></video>
            <h1>Offres</h1>
            <p>Vous trouverez ici toutes les offres de VRIX Anime</p>

        <div class="option">
            <a href="#">Voir le catalogue</a>
            <a href="#">S'abonner</a>
        </div>

    </div>```
copper warren
#

Les a sont pas des block c'est des Inlines block de mémoire

#

Et ta div options à pas de width

#

Met déjà la width et regarde si ça change

cloud dawn
#

Ok

#

Non ça change rien mais après j'utilise media screen pour la responsive il se peut que je l'utilise très mal

copper warren
#

Si tu veux on regarde ça un peu plus tard ensemble je fini un truc IRL

cloud dawn
#

Ouaip vsy pas de soucis préviens moi quand tu poura

urban ingot
#

Hello @cloud dawn c'est quoi les deux éléments que tu veux espacer ?

brave jay
#

tu peux faire un flex-direction si jamais

languid ledge
brave jay
#

c'est ultra galere

void anvil
#

Bonjour, je ne sais pas trop ou posté ça j'ai un problème avec Git Bash e plus précisément avec le dossier ".gitconfig" quelqu'un aurais la gentillesse de bien vouloir m'aider sil vous plait ( 3 jours que je suis sur ça 😢 )

mild canyon
#

Quel est ton problème @void anvil

tame star
#

si vraiment tu veux faire cette effet (déjà sa va te prendre bcp de temp si tu n'as jamais fait de JS ou de moteur de rendu) mais je te conseille la formation de Bruno Simon (car elle est bien et c'est la seule mdr) sinon tu as leur doc (je par le de ThreeJs) qui est vraiment complète ! (sinon gl ^^ )

languid ledge
cloud dawn
#

Salut, j'ai une question. J'essaye de faire que mon site soit responsive, est pour cela j'utilise media screen. Sauf que je n'arrive pas à comprendre pourquoi cela ne marche pas. css @media screen and(max-width: 768px) { #title { font-size: 20px; left: 20% } }Voici mon code et quand je modifie ma résolution rien ne se passe.

formal jewel
#

@cloud dawn Je dirais parce que ton " and " est collé à (max-width: 768)

cloud dawn
#

J'ai une question comment je peux faire pour ajouter du contenu où pour y accèder on doit descendre dans la page ?

formal jewel
#

@cloud dawn Tu parles de quoi, je comprends pas

cloud dawn
formal jewel
#

Ah !

#

Beh tu peux faire ça avec le système des ancres HTML, accompagné du smooth scroll, inclus dans le CSS

#

Et pour la taille de tes conteneurs, suffit de se baser sur l'écran courant, donc d'utiliser les unités " vw " et " vh "

#

Ce qui correspond au viewport width et height

#

Si t'as du mal, je peux te montrer en partage d'écran, si je ne suis pas trop rouillé

cloud dawn
formal jewel
#

Oui

copper warren
tame star
copper warren
#

Pas sur tel ça doit être pour ça alors

tame star
#

donc non en css c'est pas posssible

tame star
#

google n'apprécies pas la 3D en mobile mdr

copper warren
#

Trop gourmand en perf je pense

#

Sinon très bonne réf Bruno Simon

#

J'entend que du bien de ses cours

tame star
#

(mais oui il est super cool et avec son accent Français c'est vachement compréhensible pour nous)

copper warren
tame star
#

de toute façons quand tu fais de la prog tu est sensé comprendre l'anglais ou alors tu ne comprend pas ton code lol

copper warren
#

Oui je sais bien mais je trouve ça dommage je préférais personnellement regardé des tuto dans ma langue natal qu'en anglais même si je le parle / comprend bien.
Par exemple la doc de vue est en chinois aussi ça serait pas choquant des tuto en français je trouve même si c'est que de l'ecris

tame star
#

oui fin elle est aussi en anglais

#

et l'anglais c'est un langage universelle (officieusement)

copper warren
#

Ça change pas ce que j'ai dis au dessus

tame star
#

"la doc de vue est en chinois aussi" elle est surtout en anglais

#

et sa rejoint ce que je viens de dire

#

d'ailleurs il est en japonais si tu ne comprend pas le chinois PepeClown

brave jay
#

Qui m’a ghost histoire que je lui coupe les doigts

spiral phoenix
#

Hey, sauriez-vous comment je peux center le <a> en rouge dans ma <li> en bleu ? ( verticalement et horizontalement )

unknown.png
tame star
thick leaf
#

Bonjour ,je suis à la recherche d'une bonne formation gratuite sur le responsive svp

tame star
#

pour mieux comprendre les grid et les flex

#

apres je te conseille de regarder les media query

thick leaf
#

Ok je vais voir ça merci

drifting crown
#

Bonsoir, j'ai un petit soucis en css

#

en gros je fais un chat, et du coup quand les messages arrivent ça rajoute des element dans mon ul, mais le problème ce que la hauteur du chat s'adapte au text et ne respecte pas la max height que j'ai mis

#

et voila en gros de base la taille est la meme que le carré noir

void anvil
#

Essai de faire t'on ul de messages dans un iframe

quaint fossil
#

hey

#

j'aurai besoin d'aide, je fais une sous nav bar

#

voici mon css pour le hover.

#

et le problème étant que sa cible tout la sous nav bar avec le .Projects:hover comme vous pouvez-le voir , comment puis-je cibler seulement le .Projects indépendament d'être obliger de cibler tout ses enfants qui sont les ul li de la sous nav bar ?

#

--

je reexplique le problème enfaite quand je hover sa hover aussi la sous nav bar et sa m'ouvre le menu quand je passe ma souris ici :

#

en dessous du menu quoi a l'endroit ou doit apparaitre le menu

#

donc sa hover a des endroits ou je voudrais pas

#

vous avez compris

brave jay
brave jay
drifting crown
brave jay
#

de quoi tu as fais en js

quaint fossil
#

juste je cible quelque chose qui en contient d'autre

#

donc le hover se fait sur tout les élements

#

alors que je veux sur un seul éléments qui est .Projects

brave jay
#

.sub -navbar .Project....

quaint fossil
#

sa donne plutot sa par rapport a ce que je veux faire mais sa cible encore les enfants

#

.navbar .Projects

#

faudrait-il utiliser les selecteurs enfants pour que le ciblage s'arette a .projects et n'affecte pas les enfants

#

div > span

#

genre .navbar > .Projects

#

je sais pas sa marche pas

drifting crown
ancient jackal
#

quelqu'un a une idée de comment récupérer ce qui est entré dans le input et l'utiliser pour l'envoie quelque par?

brisk forum
#

détaille @ancient jackal

ancient jackal
#

En gros je dois récupérer ce que me mec entre la dedans et l'utiliser en python et l'utiliser en envoie a Google où autre

stable jetty
# 
<?php
// inclusion de la bibliotheque
include("google-api.php");

// la cle (n'oubliez pas de la remplacer par votre cle)
$cle = '01234567890123456789012345678901';

// le nb de pages est bloque a 10
$nb_par_page = 10;

// notre requete (mettez ce que vous voulez !)
$q = "site:www.votresite.com a propos de moi";

// on cree un objet pour utiliser la Google API
$google = new GoogleApiSearch;

// par defaut on recupere les premiers resultats, mais on peut faire une boucle qui fait varier $start pour recuperer les 1000 premiers resultats
$start = 0;

// lancement de la requete
$result = $google->doGoogleSearch($cle, $q, $start);

// on verifie le resultat de la requete
if (!$result)
{
  // la requete n'a pas pu fonctionner
 echo "Désolé... La requête a échoué.Réessayez d'ici quelques heures...";
}
else
{
 // la requete a reussi, on regarde maintenant le nb de resultats

 // nombre estime de resultats
 $nb_res = $result['estimatedTotalResultsCount'];

 if ( $nb_res == 0 )
 {
  // aucun resultat
  echo "Aucun résultat.";
 }

 else
 {
  // on affiche les resultats
  foreach ($result['resultElements'] as $resultat)
  {
  // URL, titre et description
  echo $resultat["URL"]."<br>";
  echo "title :<b>".$resultat["title"]."</b><br>";
  echo "snippet :".$resultat["snippet"]."<br><br>"; 
  }
 }
}
?>
#

sauf que la tu définis la requête dans le code

#

Alors que toi tu veux faire avec un input t'as juste à changer ça et les paramètres que tu veux.
Après c'est du PHP et toi je crois tu fais du python

ancient jackal
#

ok merci beaucoup

shrewd cobalt
#

ah oui désoler j'ai pas expliquer c'est que j'arrive pas faire un scroll bar dans la list des jeux quand j'en mais une elle fait pas son role

formal jewel
#

Mets ça dans un codepen, sinon ça va être pénible à regarder

brave raptor
#

bonjour, je viens ici car j'ai un problème tout con mais je galère en gros j'aimerais faire ça

unknown.png
#

enfaite c'est déjà fait mais en gros

#

j'arrive pas à faire que la flèche soit en bas de façon responsive

void anvil
brave raptor
#

comment ça rend?

void anvil
#

Yes

brave raptor
#

ouep

void anvil
#

Pour pouvoir mieux t'aider

brave raptor
#

la flèche c'est normal qu'elle soit petite j'ai rien touché

#

mais en gros là j'aimerais qu'elle soit le plus bas possible de la page

#

et que en scrollant elle ne bouge pas

void anvil
#

Ok, tu as déjà commencé ton code ?

brave raptor
#

oui

#

c'est déjà en html là

void anvil
#

tu as utilisé @media ?

brave raptor
#

pour?

void anvil
#

Comment par exemple ici

unknown.png
brave raptor
#

non dutout

void anvil
#

C'est assez simple voici une idée de code pour toi :

@media screen and (max-width: 740px) {
  NOM DE TA DIV / CLASS / ID {
     width: 100px;
    justify-content: center;
  }
}
brave raptor
#

vas-y je regarde ça merci 😉

void anvil
#

Pas de soucis, n'hésite pas à me ping !

brave raptor
#

visiblement j'crois que c'est pas l'bon truc

void anvil
#

Et dedans tu y mets les attribus qu'il te faut

unknown.png
brave raptor
void anvil
brave raptor
#

mais j'comprends ap width ça à quelque chose à voir avec le top?

void anvil
brave raptor
#

ahh ouais pardon j'étais perdu

#

vas-y merci 😉

brave jay
#

utilise fixed

#

et tu mets bottom: 10px

stable jetty
#

@brave raptor sur ton site c'est une simple page ? Si oui pourquoi utiliser react ou next?

brave jay
stable jetty
brave jay
#

et du coup c'est un scroll horizontale ?

drifting crown
#

Bonsoir, petite question, j'aimerais mettre un element en absolute quand je passe en plein écran et je sais pas comment faire pour le mettre de façon a ce qu'il soit cliquable

spiral phoenix
#

Hey savez vous comment je peux placer mon text ( il est dans une div ), en dessous de mon icon ? ( Il est également dans une div )

unknown.png
mild canyon
spiral phoenix
#

Att

# 
<div class="about">
      <div class="about-title">
        <h1>Qu'est ce que PayBot ?</h1>
      </div>
      <div class="about-cardgrid">
          <div class="about-card">
            <div class="about-icon">
              <i class="fa-solid fa-bolt"></i>
            </div>
            <div class="about-cardtitle">
              <h1>Rapidité</h1>
            </div>
          </div>
          <div class="about-card">
          </div>
          <div class="about-card">
          </div>
      </div>
    </div>

CSS:

.about{
  background-color: #dbdbdb;
  width: 100%;
  height: 50vh;
}

.about .about-title{
  display: flex;
  justify-content: center;
}

.about .about-title h1{
  margin-top: 2vh;
  font-size: 5vh;
  color: #2952cb;
}

.about .about-title h1:after{
  content: "";
  display: block;
  height: 5px;
  width: 20%;
  background-color: #2952cb;
  border-radius: 2vh;
  margin-top: 10px;
  margin-left: 40%;
}

.about-cardgrid{
  height: 30vh;
  margin: 10vh auto;
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.about-cardgrid .about-card{
  width: 25%;
  height: 30vh;
  background: rgba( 41, 82, 203, 0.6 );
  box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.5 );
  backdrop-filter: blur( 10px );
  -webkit-backdrop-filter: blur( 10px );
  border-radius: 10px;
  border: 2px solid rgba( 255, 255, 255, 0.28 );
  display: flex;
  justify-content: center;
}


.about-card .about-icon{
  margin-top: 1vh;
  width: 45%;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-icon i{
  font-size: 10vh;
  color: #2952cb;
}

.about-card .about-cardtitle{
  display: flex;
}
#

Comment je pourrais faire ?

mild canyon
#

Sur ta card un flex-direction column

spiral phoenix
#

ok ok merci

dim osprey
#

Vous savez comment on fait des background image

spiral phoenix
#

background-image je suppose @dim osprey

dim osprey
#

Ok

#

Merci !

void anvil
#

ltWithCodeBetter @mossy zenith

stable jetty
#

jveux que ca passe au dessus mais cheplus comment on fait

#

c'est pas z-index ? (je l'ai fait sans succès)

dusky skiff
#

Si c'est z-index il suffit que la valeur soit au dessus de celle de ton footer

stable jetty
#

par défaut c pas 0?

#

bizarre ca change rien

unknown.png unknown.png
brisk forum
#

met une valeur negatif z-index: -1;

delicate marsh
#

Bonjour est se que vous aurez des sites à me conseiller pour commencer en JS ?

brisk forum
#

des site de ? pour tentrainer ? ou des site a faire

brave jay
iron stone
#

Des amiliorations ?

knotty scaffold
#

🤣 HTML tu maîtrise a 75%
C'est vraiment pas ouf de mettre des barre de progression pour un language cela ne signifie rien.

#

Je ne me moque pas de tes compétences, je me moque de ce que ton template fais comprendre.

#

Met juste les logo des language cela serait plus pertinent

dusky skiff
#

Oui je suis d'accord avec lui le pourcentage ça ne veut rien dire

stable jetty
#

Il aura vu des vidéos YouTube ou y'avait ça dessus, c'est répandu et franchement a part la signification c'est quand même plutôt joli

dusky skiff
#

On s'en tape un peu que ce soit beau, ça ne veut rien dire LUL

small basalt
# iron stone

Fais attention au contraste sur le partie de gauche, et ouai sinon les barres de progression à la poubelle

tame forge
# iron stone

Sympa, mais effectivement, les progress bar ne veulent rien dire et tu a oublié la majuscule au "I" 👀

ancient jackal
#

quelqu'un à une idée de comment je peux récupérer les information rentré dans un input? sois en php ou en js ou en python

fresh flare
#

variable = input(str)

#

et voila le resultat du input et return dans ta variable

#

pour python

tame forge
fresh flare
ancient jackal
#

je vais essayer avec python et js

stable jetty
#

Mais détaille ton projet bg, tu veux faire quoi concrètement

ancient jackal
#

Pour faire simple je travaille sur un meta-moteur

knotty scaffold
#

bosser sur un metamoteur sans savoir gérer le DOM PepeClown

#

c'est con

distant zinc
#

Bonjour à tous je fais ce post un peu tard ^^ Je suis entrain de faire le Dashboard de mon bot discord. Je fais actuellement une barre de navigation sur le côté et j'aimerais savoir comment faire en sorte qu'elle prennent toute la largeur de la page merci d'avance ^^

knotty scaffold
#

display flex

void anvil
#

Bonjours,
J'ai fait une balise <audio src="audio.mp3" loop autoplay></audio> mais le autoplay ne se lance pas
Merci d'avance

tame forge
void anvil
#

ok

brisk forum
#

@void anvil tien ya cette doc qui peut t'aider https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

Autoplay guide for media and Web Audio APIs - Web media technologie...

Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. In thi...

mint mountain
#

Bonjour, je cherche à modifier la hauteur de mon composant en survolant un bouton mais ça ne fonctionne pas, quelqu'un pourrait-il m'aider ?

unknown.png
tulip mural
#

Je pense c'est parce que tu as mis un :hover et après tu as visé une autre class encore

sacred surge
#

Salut j'ai un problème,
quand je sélectionne une lettre de quick access cela fait une grande sélection qui prend une grande hauteur. Le problème viens du css mais je ne sais pas d'où quand je mets un background a quick access il est normal il suit le texte il est pas haut comme la sélection. Quelqu'un serait un goat pour m'aider

unknown.png
brave jay
sacred surge
#

nn toujours pas

brave jay
#

envois le code css

sacred surge
#

c'est dans quick access title

brave jay
#

essaye d'enlever ca ::selection { background-color: #5d00ff; }

sacred surge
#

cela change juste la couleur de la selection

#

je l'ai deja fait en local ça fonctionne pas

brave jay
#

je comprend pas pourquoi tu fais une selection pour chaque bouton

sacred surge
#

section tu veux dire

brave jay
#

non non

#

chaque bouton

#

ou lien

sacred surge
#

?

#

tu veux dire soit la balise li soit la a

brave jay
#

bah pourquoi tu ne fais pas qu'une seul classs pour tous

sacred surge
#

parce que j'arrive pas a appliquer le margin pour qu'il ne soit pas coller

brave jay
#

tu devrais utiliser les flexbox

#

mais normalement si tu fais une seul classe si tu lui met un margin vertical de 5px ca devrait marcher

sacred surge
#

j'essaie mais ça regle pas le probleme de selection

brave jay
#

ah je viens de comprendre ton soucis

sacred surge
#

j'ai tout rassembler tout

sacred surge
brave jay
#

enfaite tu as mal fait les choses

#

attend 2s

sacred surge
#

ouais j'imagine

sacred surge
brave jay
# sacred surge j'essaie mais ça regle pas le probleme de selection 

.category-container {
    background-color: #34495e7e;
    width: 25%;
    /* padding: 16px; */
    border-radius: 12px;
}

.category-header {
    height: 10%;
    background-color: #34495e7e;
    border-radius: 10px 10px 0 0;
    font-size: 2em;
    padding: 5px;
    color: aliceblue;

}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


.category-button {

    background-color: #bababa20;
    padding: 8px 23px;
    border-radius: 13px;
    margin: 0 0 10px;


}

.category-button a {
    color: #ADADAD;
    transition: all ease-in 100ms;
}

.category-button a:hover {
    color: white;
}

.quick-category2 {
    list-style: none;
    font-size: 25px;
    font-family: 'Whitney';
    text-align: center;
}
.quick-category {
    list-style: none;
    font-size: 25px;
    font-family: 'Whitney';
    text-align: center;
}
# 
 <div class="category-container">
      <div class="category-header">
         QuickAccess
      </div>
      <div class="flex-container">
         <ul class="quick-category">
            <li class="category-button"><a href="">alternative to</a></li>
            <li class="category-button"><a href="">android app</a></li>
            <li class="category-button"><a href="">code </></a></li>
            <li class="category-button"><a href="">computer</a></li>
            <li class="category-button"><a href="">design</a></li>
            <li class="category-button"><a href="">downloader</a></li>
            <li class="category-button"><a href="">ebook</a></li>
            <li class="category-button"><a href="">game</a></li>
            <li class="category-button"><a href="">learn</a></li>
            <li class="category-button"><a href="">movie / serie</a></li>
            <li class="category-button"><a href="">music</a></li>
            <li class="category-button"><a href="">osint</a></li>
         </ul>
         <ul class="quick-category2">
            <li class="category-button"><a href="">password</a></li>
            <li class="category-button"><a href="">software</a></li>
            <li class="category-button"><a href="">steam</a></li>
            <li class="category-button"><a href="">tips</a></li>
            <li class="category-button"><a href="">upload</a></li>
            <li class="category-button"><a href="">wallpaper</a></li>
            <li class="category-button"><a href="">3D</a></li>
         </ul>
      </div>
   </div>```
sacred surge
#

et le problème venait d'où ?

brave jay
#

en gros j'ai juste refait ton code en flexbox

#

et sans absloute

sacred surge
#

c'est quoi flexbox

#

display flex quoi

brave jay
#

c'est ce qui te permet de centrer des elements ou de bien les placer

#

oui

sacred surge
#

okok

brave jay
#

si tu n'arrives pas a compred pas un truv n'hesite pas

sacred surge
#

j'essaie de l'implementé

#

tout vas bien merci

sacred surge
#

Le probleme venait du container que j'ai utiliser pour Quick access j'ai utiliser span au lieu d'une div @brave jay

#

merci beaucoup ^^

brisk forum
#

wow comment tu a du te casser la tete

brisk forum
sacred surge
#

C'est juste long pas dure

brisk forum
#

ouais mais tu aurais pu en faire 1 seul

sacred surge
#

maintenant c'est fait

brisk forum
#

c'est nickel 👍

gaunt thicket
#

Bonjour, qu'est ce que je pourrais faire pour que mon titre se place par rapport a chaque texte.

#

genre je voudrais que sa ressemble a sa

#

mais moi sa ressemble a sa

sacred surge
#

Tu le descend avec un bottom ou un top

gaunt thicket
#

ouais mais tout mes texte sont lié genre si je fais un bottom sa me descend les 4 titre

sacred surge
#

Bas tu crees une nouvelle classe qui lie seulement ton titre

gaunt thicket
# sacred surge Bas tu crees une nouvelle classe qui lie seulement ton titre

HTML : <div class="header">
<h1 id="titre">Vision AVTR : </h1>
</div> var titre = document.getElementById("titre"); titre.innerHTML = "Vision AVTR :" titre.innerHTML = "Vision EQS :" titre.innerHTML = "Maybach EQS :" titre.innerHTML = "Vision EQXX :" CSS : .header h1{
display: block;
opacity: 0;
transform: translateY(-30px);
animation: apparition 0.5s 1.7s ease-out forwards;
width: 100%;
color: #fff;
position: fixed;
bottom: 360px;
left: 150px;
font-size: 40px;
font-weight: 200;
text-decoration: underline;
}

sacred surge
#

Tu as ton css dans ton html

gaunt thicket
#

non

#

genre c'est un fichier separé

brisk forum
#

quand tu drop du code fait le bien comme sa ```html
<h1>Comme sa</h1>

brisk forum
# gaunt thicket **HTML** : <div class="header"> <h1 id="titre">Vision AVTR :... 
<div class="header">
            <h1 id="titre">Vision AVTR : </h1>
        </div>                                                                                                                                                                                                                                                       var titre = document.getElementById("titre");                                                                                                                                                                                    titre.innerHTML = "Vision AVTR :"                                                                   titre.innerHTML = "Vision EQS :"                                                                      titre.innerHTML = "Maybach EQS :"                                                                titre.innerHTML = "Vision EQXX :" 
```  ```css
 .header h1{
    display: block;
    opacity: 0;
    transform: translateY(-30px);
    animation: apparition 0.5s 1.7s ease-out forwards;
    width: 100%;
    color: #fff;
    position: fixed;
    bottom: 360px;
    left: 150px;
    font-size: 40px;
    font-weight: 200;
    text-decoration: underline;
}
delicate marsh
#

Salut j'aurais une question est ce que se serrai possible de faire une bar de recherche qui vient rechercher une donné dans la page et qui enmene directement à l'endroit concerné un peu dans le style du CTL+F
Si possible qui recherche uniquement dans un <h3>

median mountain
delicate marsh
#

Euh c'est quoi le dom ? 😅

hazy spade
# delicate marsh Euh c'est quoi le dom ? 😅

Document Object Model, c'est un documet chargé dans le navigateur sous forme d'un arbre nodal via lequel tu peux rechercher, modifier, ajouter ou supprimer des éléments de ta page web.
Via différentes fonctions incluses dans JS tu vas pouvoir parcourir l'entièreté de ta page et de ses sous-éléments.

unknown.png
delicate marsh
#

ah d'accord je comprend

#

et donc grace a sa il serrai possible de par exemple dans une page avec plusieurs div sous cette forme

#

venir a enlever les div qui ne corresponde pas a la recherche

#

c'est possible de le faire seulement en html et css ?

hazy spade
#

Alors oui c'est tout à fait possible de supprimer/cacher des divs avec une recherche mais quand tu manipules le DOM c'est via des scripts

median mountain
#

Comme @hazy spade le dit. Avec un script

hazy spade
# 
<script type="text/javascript">

function getElementId(textid)
{
 elem = document.getElementById(textid);
}
</script>

Petit exemple de récupération d'un élément avec son ID, une petite structure conditionnelle pour cacher les divs ne correspondant pas à la recherche. Si tu veux plus d'infos/aide on peut passer sur le salon #javascript-typescript (ici l'exemple c'est pour une recherche unique, il faudra peut-être ajouter des boucles pour récupérer/cacher tout le reste, je suis pas un expert du DOM)

if (elem.id != "monId") {
  // supprimer l'élément du DOM
  elem.style.display = 'none';
  // cacher l'élément du DOM
  elem.style.visibility = 'hidden';
}```
median mountain
hazy spade
median mountain
# hazy spade Yes merci pour la précision ! Vu que j'utilise principalement des SPA pour mes d...

Les SPA c'est pareil.
Le style display agir sur le type/comportement de la Balise ( inline-test, block, none)
Et none, il va pas être interpréter mais toujours là.

Par contre visibility l'élément va juste être invisible mais il prendra la place dans la page.

Si c'est pour une recherche et ne pas afficher dans la page.

Il peut simplement jouer avec le style et faire display: none

Tous dépend du but

hazy spade
#

Avec VueJS je fais juste une condition v-if ou alors un v-for pour afficher cacher/afficher mes éléments via les variables de data() { return {} } et une :key pour update en temps réel si la variable s'update, en tout cas merci pour les précisions, toujours bon à savoir bolbhyper

delicate marsh
#

d'accord bon je vais laisser de coté pour le moment c'est oas dutout de mon niveau

hazy spade
fringe sparrow
#

Salut, vous avez un site pour bien apprendre comment faire un site de a-z ?

thick leaf
fringe sparrow
thick leaf
#

https://www.youtube.com/watch?v=qsbkZ7gIKnc&t=2992s je pense que c'est bien pour commencer

YouTube
From Scratch - Le développement Web de zéro
[Cours HTML] Apprendre HTML de zéro

🌱 Après cette vidéo, si tu veux tout savoir sur CSS → https://youtu.be/HDobHQfbRbo

  • Dans ce cours nous verrons toutes les choses utiles (ou presque) pour coder en HTML. Gérer les photos, vidéos, listes, tableaux, liens, formulaires, mails, transferts de fichiers…

  • HTML Cheat Sheet : https://htmlcheatsheet.com/

  • Icones en HTML : https://w...

▶ Play video
delicate marsh
#

salut j'ai une question comment est ce que on pourrais faire pour superposer 2 flex box ?

fringe sparrow
brisk forum
delicate marsh
#

alors enfaite quand je clique sur les différents thèmes il faut que sa change aussi les films

unknown.png
#

et bien sure je fais tout en full html css 😅 je connais pas trouve le php et le sql sinon sa aurais étais différents

brisk forum
#

ouais c'est possible sa que en html/css/js mais je ne vois pas pour quoi tu veux superposer 2 flexbox

delicate marsh
#

je ne recrée pas de page a chaque fois je fais seulement un changement #

#

et je change seulement la visibilité de la flexbox

brisk forum
#

a ok je vien de comprendre

delicate marsh
#

sa m'évite de regénérer la page a chaque fois

#

le seul moyen que j'ai trouver pour le moment c'est en faisant
transform: translateX(-100%);

brisk forum
#

sa marche correctement ?

#

sa décale juste tes élement en dehor

#

je pense faut éviter

delicate marsh
#

pour le moment sa marche

#

mais je doute que sa marche jusqu'a ce que sa dépasse la ligne

brisk forum
#

ouais et aussi quand tu va le rendre responsive sa va faire nimp

delicate marsh
#

ouai voila

#

meme si j'ai pas encore vraiment compris comment rendre responsive

#

enfete sa fait pas longtemps que je dev pour le web

brisk forum
#

pour le rendre résponsive moi j'utilise bootstrap sa va plus vite

delicate marsh
#

c'est quoi enfete bootstrap ?

#

un logiciel ?

brisk forum
#

c'est un fremwork

#

pour le front end

delicate marsh
#

d'accord et sa s'utilise comment ?

brisk forum
#

non c'est du code

delicate marsh
#

d'accord et on l'utilise comment ?

brisk forum
#

alors c'est pas tres compliqué

#

tu met ton code ou lien bootstrap dans ton fichiers css

delicate marsh
#

d'accord et se code je le trouve ou ?

#

je viens de trouver sa

brisk forum
#

sois tu l'apprend et t'ecrit ton propre code ou sois sur internet ya des lien deja pres bootstrap faut chercher

delicate marsh
#

ah d'accord ok

#

et c'est universelle ?

brisk forum
#

@media sa te dit quelque chose

delicate marsh
#

non absolument rien

brisk forum
#

c'est a dire universelle

delicate marsh
#

ah oui d'accord si j'ai déja vu sa

brisk forum
#

j'ai trouver se code pen c'est la meme mequanique a peu pres par rapport a se que tu chèreche

#

mais il te faudra un fichiers js

delicate marsh
#

d'accord sa se fait forcément en js ?

brisk forum
#

ba en css je pense pas sa trop possible

delicate marsh
#

ouai c'est surtout que j'ai vraiment aucune connaissance en js 😅

brisk forum
#

ah ouais ok

delicate marsh
#

pour le moment le responsive sa serra pas vraiment possible je pense

brave jay
#

Pour faire ce que tu veux faire c’est assez simple

#

D’après ce que j’ai compris tu veux juste afficher les éléments 1 par 1

#

Il te suffit juste de placer tous t’es élément en display none puis quand tu veux les afficher modifier le display

brave jay
#

C’est bien mieux et fonctionnel

brisk forum
#

ouais j'ai deja essayer j'hésite a faire la trensition

delicate marsh
#

attend au pire je peux vous passez mon html et mon css j'ai la premiere "animation "de faite

brisk forum
#

je sais pas si c'est voulu sa

unknown.png
delicate marsh
#

ah euh sa c'étais juste un memory que je m'étais fait x)

brave jay
#

En vrai j’ai pas très bien compris ce que tu voulais faire, mais pour l’instant j’ai pas trop le temps de t’aider

brisk forum
#

ah ok

delicate marsh
#

c'étais quand j'aurais beaucoup de contenu j'aimais bien les animation quand on scroll sur cette page mais j'y suis pas encore

delicate marsh
#

merci quand meme

brave jay
delicate marsh
#

ah ouaaiiii c'est vrai que c'est une bonne idée

brave jay
#

Tu veux faire un scroll du même style que Netflix genre ?

delicate marsh
#

ouai c'est vrai que faire le scroll comme netflix sa pourrais etre pas mal mais ducoup sa me changerai un peu toute ma page

#

pour faire une page vraiment dans le style de netflix sa serrai compliquer ?

#

avec vraiment les différents theme et les différents scoll par themes

unknown.png
brisk forum
#

non en vrais leur page n'est pas compliqué du tout

#

j'ai meme fait un projet qui etais de clone netflix

#

ya pas tres longtemps

delicate marsh
#

sa serrai peut etre beaucoup moins prise de tete et plus sympa visuellement que se que j'essaye de faire non ?

#

et si je voudrais faire un bouton de recherche faudrais faire du php et sql ?

brisk forum
#

si c'est se que tu veux vasy

brisk forum
delicate marsh
#

quel type de défaut ?

brisk forum
#

faut je retrouve un code pen que j'avais fait

delicate marsh
#

j'aimerais voir le pour et le contre

#

dac nickel merci

brisk forum
#

dr

#

lis le code html tu va voire c'est pas bien compliqué

delicate marsh
#

oui oui non mais la il y a le bouton mais il va pas venir rechercher un ellements dans la page ?

brisk forum
# 
      if (a === "youtube") {
                window.open("https://www.youtube.com/");
            } ```
#

si tu ecrit youtube sa va te mettre youtube

delicate marsh
#

ouai mais j'aimerais le faire par rapport a ma page

brisk forum
#

donc si tu choisit film1 et tu ecrit open film1.html sa va ouvrire film1.html

#

sauf si tu a que une page

delicate marsh
#

oui non mais tu vois le type de recherche de netflix

#

je me suis déja fait une page comme sa

unknown.png
brisk forum
#

ouais je vois je vois

delicate marsh
#

je pense qu'il faudrais faire en php et sql pour vraiment disocié les différents élément

brisk forum
#

ouais

#

sauf si tu bidouill avec la base de ma barre de recherche tu peut faire un bon truc

brave jay
#

Hein

#

De quoi vous parlez ?

delicate marsh
#

un élément de recherche type netflix

brisk forum
#

une barre de recherche sans Php ni sql

brave jay
#

Il n’y a absolument pas besoin de php pour faire une barre de recherche

#

C’est très facile à faire en js

delicate marsh
#

ou sa viens rechercher directement les elements sur la page et les met en avant directement

brisk forum
delicate marsh
#

mais tu as pas de js la decu x)

brisk forum
#

mais lui il veux un truc type netflix

brisk forum
delicate marsh
#

ah oui j'avais pas vu

brave jay
#

Non mais ça c’est une très mauvaise façon de faire

#

Sachant que si tu veux 50 lien ça va vite être le bordel

delicate marsh
#

50 liens ? je comprend pas bien

brave jay
#

Bah faire un if pour chaque recherche c’est pas bien

#

Parce que si tu en a 50 ça va vite être le bordel dans ton code

delicate marsh
#

ouai mais si on fait sa au bout d'un moment quand il y aura beaucoup d'element ca va mettre beaucoup de temps la recherche non ?

brisk forum
#

pour ton truc de nav barr tu peut masqué les div en javascript

delicate marsh
#

et si je les masque la div que je recherche elle va etre mis en avant ?

#

mais ducoup on doit venir superposer 2 div ?

#

j'arrive pas bien a comprendre la logique sans phph ou sql pour se type de truc )

#

x)

brisk forum
delicate marsh
#

ah ouai bas voila c'étais un peu sa qu'il m'aurais fallu pour mon autre affichage

brisk forum
#

ouais sa m'ai venu apres

#

bon a plus je me déco

delicate marsh
#

dac en tout cas merci beaucoup

brisk forum
#

dr

delicate marsh
#

j'ai une question le quel est prioritaire entre l'id et la class ?

median mountain
delicate marsh
#

dac merci

median mountain
delicate marsh
#

ouai ouai je vais faire le test c'étais juste de la curiosité

#

et j'y arrive pas x)

#

j'ai sa mais je n'arrive pas a faire marcher les boutons pour afficher les pochettes de films seulement quand il font partie de la catégorie

#

je m'y connais pas dutout en js alors c'est largement possible que j'ai fais n'importe quoi

median mountain
#

Et la façon que tu es partir, tu va dupliquer ton code.

delicate marsh
#

alors euh je ne comprend pas trop se que tu me dis 😅 je n'y connais absolument rien en JS c'est pour sa j'ai qlq soucis

delicate marsh
#

j'ai l'impression que sa vient par rapport au changement que j'ai fait au ligne 42 et 43 du js

#

getElementsByClassName

cunning terrace
#

Vous savez comment on fait des séparations comme sur cette photo ?

cap_separation.png
brave jay
cunning terrace
brave jay
#

essaye tu verras bien

cunning terrace
#

yess

desert marlin
#

yoo y a quelqu un qui serait m aider a cree un bot pour mon serveur

#

svp

tame forge
viscid copper
cunning terrace
#

Comment on fait des boutons de recherche comme ça ?

rech.png
void anvil
#

SVG

forest echo
cunning terrace
forest echo
#

bah tu utilises une div avec un champ de texte + une icone de loupe

cunning terrace
#

D'acc, merci

sand ingot
#

Quelqu'un serais me dire pourquoi

body{
   background: linear-gradient(185deg, rgb(255, 111, 111), rgb(255, 20, 20)255, 255, 255);
}```
ne marche pas le background reste blanc alors que si je mets un 
```css
body{
      background-color: blue;
}```
là ça marche
forest echo
brave jay
#

pour ca je pense

image.png
brave jay
sand ingot
#

nan même pas fallais que je mettes un
height: 100vh;

#

pour que ça prennent toute la hauteur*

karmic flume
#

comment on change la couleur de fond un site svp je debutre

median mountain
karmic flume
#

ya r

#

@median mountain

#

sa me met en css

#

mais je veux en html

median mountain
karmic flume
#

hein

#

bah si la couleur de background

#

@median mountain

#

elle est changeable

median mountain
#

Oui avec une règle CSS

karmic flume
#

comment

#

@median mountain

median mountain
nova moth
#

Salut ! J'aimerais avoir des conseils à propos des débuts dans le dev en html-css (sans rémunération, ce qui reste normal pour des conseils, et que si tu as le temps 🙂 ).
Mon rêve est de commencer le développement web , je viens d'entrer au lycée, et j'aimerais commencer à construire mon avenir et commençant à développer mes capacités 🙂
Je ne parle pas d'une Formation Privée, mais juste de conseils

merry karma
#

@karmic flume Et dans l’exemple de Rémi selector tu le remplaces par le tag, l’ID, la class, etc. de l’élément dont tu veux changer le style ! Regardes sur MDN ! Tu marques mdn sélecteur css sur Google, tu vas trouver

median mountain
# nova moth Salut ! J'aimerais avoir des conseils à propos des débuts dans le dev en html-cs...

salut, si tu veux apprendre le dev web.
je te conseil d'apprendre le fonctionnement de html/css suivi de javascript ( avec ça tu peux faire des sites stastique )

ensuite quand tu es capable de faire une page statique tu peur regarder pour le coté back ( PHP, ou javascript avec NodeJs )
pour rendre les pages dynamique.

je te conseil de te trouver un projet que tu aimerais réaliser, site perso, application.
et voir un peu d'algo pour apprendre le fonctionnement de la programmation.

petit exemple de mini projet qui sont facile a faire :

  • jeu du plus ou moins ( juste prix )
  • jeu du pendu
  • faire un chronometre
brave jay
median mountain
brave jay
brave jay
#

Avec ce cours tu auras une bonne base si par contre tu préfères des cours écris il en existe pleins sur l’internet

nova moth
#

D'accord, merci beaucoup @brave jay @median mountain

median mountain
nova moth
karmic flume
#

comment on met du js dans un fichier html css ?

median mountain
karmic flume
#

quelqun pourraait me faire menu nav et m envoyer fichier

brave jay
#

Je te le fai pour 30 € si tu trouv person promi pa darnak

#

Non en vrai pourquoi tu ne le fait pas toi même ?

karmic flume
#

j arrive pazs

#

@brave jay

brave jay
#

Bah ça tombe bien on est là pour t’aider

karmic flume
#

tu peux m aider

#

@brave jay

brave jay
#

C’est quoi ton problème moi peut être pas mais je suis sûr que quelqu’un peu

karmic flume
#

j arrive pas du tout

#

@brave jay

brave jay
#

d'accord mais c'est quoi le soucis ?

#

tu as essayé au moins ?

median mountain
thick siren
#

hellooo, j'ai un petit souci :

quand j'essaie de faire un apostrophe ou des guillemets sur vscode ca me met pas ceux que je veux, quelqu'un sait comment y remédier ? mercii

image.png
tame forge
hollow sentinel
#

ex : " "" "

#

Yo tout le monde !
Quelqu'un sait comment faire pour que quand je passe ma souris sur un bouton ou un lien, il y ait une animation avec le bouton qui grossit un peu ?

ivory nimbus
#

Utilise le hover avec un size :
Genre
.button::{
width : taille avant;
height : taille avant;
}
.button::hover {
width : taille après;
height : taille après;
}

hollow sentinel
#

merci tu gères @ivory nimbus

hollow sentinel
ivory nimbus
#

En pourcentage ou pixels

unborn merlin
acoustic current
void anvil
#

Yowww ! Je suis en formation actuellement et on à un exercice à faire et j'aimerais avoir des conseils sur ma partie à faire en CSS et HTML ( plutôt flexbox ou css grid ? etc .)

desktop-design.jpg
#

Y'a un collègue qui s'occupe du header

#

un autre du footer

#

et moi je suis au middle

acoustic current
#

C'est surtout selon ca que tu dois faire ton choix

#

Perso dans ton cas je ferais avec Flexbox car c'est ce que je connais le mieux.