html-css

[sly abyss]

.barreSeparation {
  height: 10px;
  width: 70%;
  background-color: red;
  border-radius: 20px;
}

[severe matrix]

Position center essaye ça

[sly abyss]

sa existe sa?

[severe matrix]

Sa date mais attend

https://www.w3.org/Style/Examples/007/center.fr.html

Enzo mtn j’ai apprit à chercher

Et sa te dérange si je m’inspire de ta bio ? @sly abyss

[sly abyss]

je regarderai sa demain mais merci

[sly abyss]

oep vsi tkt

[severe matrix]

Ok

Et merci

[sly abyss]

(dailleur si ta des retour je suis preneur)

[severe matrix]

Retour de la bio ?

Si oui juste centre la lune avec la terre

Stp

[sly abyss]

A je pensait que tu parlait de mon site en disant bio 😂

[severe matrix]

Ah 😂

[rustic anvil]

essaye margin:0 auto ?

[errant cypress]

Soit tu fais un margin: 0 auto; soit tu l'englobes d'un autre div parent où tu le fous en display: flex; justify-content: center

[sly abyss]

sa fonctionne merci

[sly abyss]

javai deja essaye la div parent mais sa n'as pas fonctionné

[golden flume]

ta réussi?😅

sinon: margin: 0 auto;

[sly abyss]

oep merci

[golden flume]

good

[storm folio]

Sinon si dans ton dossier app tu met un index.php si tu va directement à /app normalement tu tombera sur ton index sans qu'il sois écrit dans la barre d'adresse

[rustic anvil]

ça ne marcherait ptet pas, il faudra ajouter le multiview dans l'htaccess avant

Options +MultiViews

[void anvil]

Comme ceic ?

RewriteEngine On
 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
RewriteRule ^([^\.]+)$ $1.html [NC,L]
RewriteRule ^/app/?$ /app/index.php [L]
Options +MultiViews

[rustic anvil]

parfait ouip

[void anvil]

J'ai toujours la même choses ppour le moment.

[rustic anvil]

simple question, y'aurait pas un soucis de route?

[void anvil]

Aucune idée

Comment je peux vérifier ceci ?

Car je n'ai jamais créer de router avec php mais qui c'est peut être que l'hébergeur du site (aapanel) intègre un router

[rustic anvil]

ah c'est du pure php? je pensais qu'il y avait un framework :) désolé
donc en pure, tu n'auras pas de soucis de route effectivement,
donc quand tu marque ton url complete ça marche bien tu confirme, et sans le "index.php" ça ne marche pas; hm

[storm folio]

Moi ça fonctionne sans sousci

Les deux c'est la même page

[rustic anvil]

okay, et si le htaccess ne contient pas l'options multiviews, ça marche encore? juste pour être certain que ce soit bien ça et pas autre chose qui gere

[storm folio]

Oui

[rustic anvil]

ah donc c'est autre chose que le multiviews alors :'(

[void anvil]

c'est ça je confirme

[rustic anvil]

clyde me répond ceci pour apache+php :

Tu peux le faire en modifiant la directive DirectoryIndex dans ton fichier de configuration Apache (habituellement httpd.conf ou apache2.conf). Assure-toi d'inclure "index.php" dans la liste des fichiers de la directive DirectoryIndex. Une fois cela fait, tu pourras accéder à ton index.php en accédant simplement au répertoire correspondant sans spécifier le nom du fichier dans l'URL.

[void anvil]

Je crois que ça y est déjà :

<IfModule dir_module>
    DirectoryIndex index.html index.htm index.php
</IfModule>

Mais c'est vrai que je n'y avais pas penser merci

[supple crag]

salut des gens peuvent m'aider pour améliorer le design de ces pricing cards ?

[rustic anvil]

faudrait poser une annonce pour avoir un graphiste :)

[covert verge]

salut, excuser moi, je début en css mais il y a un concept que je ne comprend pas dans le cours que je suis, ces quoi les display flex,

on nous a apris grid, float, mais flex, je comprend pas la mecanique

[gaunt yoke]

https://flexboxfroggy.com

ça t’aidera peut être à mieux comprendre

ce sont des exercices sous forme de jeu pour utiliser les différentes propriétés liés à flex

[austere ginkgo]

Le meilleur site pour comprendre le flex !

[waxen hare]

merci !

[covert verge]

merci beaucaup, et ces vraiment cela qui faut pour le maitriser, il y a pas d'autre chose a expérimenter ?

[gaunt yoke]

pas pour le maitriser mais pour le comprendre

ensuite il faut pratiquer

[waxen hare]

t'as toujours des cours vraiment complet sur Youtube

et il y a aussi Uemy

mais je sais que sur YouTube, il y a vraiment des bons cours en série sur Python

[vestal sage]

Je connaissais pas, ça à l'air super sympa pour apprendre, j'ai vu qu'il y a la même pour les grid, les sélecteurs css etc..
Grave cool pour apprendre

[dusky skiff]

C'est une dinguerie j'ai appris à utiliser les flexbox comme ça

Depuis je suis accro j'en met partout

[glad brook]

Yoo tout le monde j'aurais besoin d'un petit coup de main en css pour centrer ce formulaire je vous envoie le css et le html :

merci d'avance

[brave jay]

Utilise flex

[glad brook]

deja essayer ça a rien changer saauf si je l'ai mit au mauvais endroit faudrait le mettre ou ?

[brave jay]

sur l'element parent tu lui donne une width de 100% 😉

sur formlogin du coup

[glad brook]

ça a pas bouger d'1 px 😦

[eternal jay]

WIP - Premier site ! techno utilisé : JS, Python, Html, CSS. Tout les textes, images et couleurs peuvent être modifié & ajouter par une plateforme d'administration ! Vous en pensez quoi ?

[vestal sage]

Je trouve ça super sympa ! Gg

[rustic anvil]

salut, peux-tu faire une petite page, qui reprend les principes (blocs:div) de ta page, pour essayer d'utiliser flex avec et comprendre pourquoi cela ne fonctionne pas

[brave jay]

Super propre !

[brave apex]

Salut, j'ai besoin d'un peu d'aide sa fait quelques heures que je recherche une solution mais je n'y arrive pas, j'aimerai savoir si en css ou avec tailwind il y a la possibilité de faire quelque chose du genre, et lorsque qu'une image est hover l'afficher en grand, merci à ceux qui apporterons un peu d'aide

[rustic anvil]

en pure css c'est avec une déformation "3D", mais avec tailwind je ne sais pas

[brave apex]

Merci je ne connaissais pas ce terme je débute en css, j'ai pus trouver quelques exemples d'utilisation intéréssant je vais pouvoir mis pencher

[rustic anvil]

voici un exemple "complet" que je viens de faire, en évitant les "translation"
c'est en pure css, c'est pas avec tailwind, et pourtant c'est assez simple :)
la "distance" de 800px permet d'avoir une bon résultat, on peut faire varier la valeur pour avoir un résultat différent
et l'angle permet de faire "tourner" l'image pour avoir cet effet de trapeze
bon recopiage :)

élément {
    background: url('image.png') no-repeat center center/contain;
    width: 600px;
    height: 600px;
    transform: perspective(800px) rotateY(45deg);
}```

par contre je suis désolé mais c'est super classe, je vais surement l'utiliser dans les jours prochains^^ (j'avais jamais essayé)

[brave jay]

Tu peux le faire aussi avec swipper

[glad brook]

C'est bon j'ai réussi je me suis rendu compte qu'il y avait une margin right par défaut donc le formulaire ne rentrer pas complètement dans la div donc j'ai régler ça et c'est centrer 🙃

[mighty vault]

Bonjour, bonjour ! Des gens ayant déjà travaillé avec Webflow ici ? Vous avez un avis dessus ?

[void anvil]

Bonjour , j'ai trouver un beau système de switch light / dark OS sur github et j'aimerais l'impmenter dans mon code sans tous cassé une personne pourrais m'aider

[golden flume]

salut fais voir

[mighty vault]

Bonjour, bonjour.

J'ai une petite question pour les meilleurs intégrateurs d'entre-vous, comment travaillez vous l'intégration de vos maquettes ?

Mobile first ? J'essai de plus en plus de m'améliorer sur le côté front de mes projets, mais je suis gavé, j'ai du mal à comprendre par où commencer pour l'intégration d'une maquette.

Merci !

[tame star]

Pour le coup je fais beaucoup d'inte avec de la 3d (WebGL) et autre feature tres niches. Donc bien souvent je fais du pc first puis je desactive les feature sur mobile (c'est plus une contrainte qu'un choix)

[mighty vault]

Je vois le truc oui !

Mais je pense que dans ma situation, pour l'intégration d'une maquette c'est plus simple de faire le mobile first

[tame star]

en realiter tout depend de la maquette. certains presentation peuve prendre plus de temps a etre afficher sur pc que mobile. Car bien souvent ces dernier sont desactiver par manque de place

[void anvil]

mon code ou le code github?

[golden flume]

Les deux

[void anvil]

/* Add your CSS styles here */
body {
    font-family: 'Bebas Neue', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}
.top-right-icon {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 9px;
    right: 15px;
    
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #000000; /* White */
}
.btn {
    background-color: #ffffff;
    width: 80px;
    height: 30px;
    border-radius: 10em;
}
/* Style the moon icon */
header {
    background-color: #1f1f1f;
    color: white;
    padding: 20px;
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

h1 {
    margin: 0;
    font-size: 36px;
}

#search {
    width: 80%;
    padding: 10px;
    margin: 20px auto;
    display: block;
    border: none;
    border-radius: 10px;
    font-size: 18px;
}

#brand-listings {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px;
}

.brand-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 20px;
    margin-right: 20px;
    width: 242px;
    height: 297px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.brand-card img {
    max-width: 100%;
    text-align: center;
    height: auto;
}
h2 {
text-align: center;
}
.brand-card h2 {
    font-size: 24px;
    margin: 10px 0;
}

.brand-card p {
    font-size: 18px;
    margin: 0;
    text-align: center;
    vertical-align:sub;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    overflow: auto;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    max-width: 672px;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    width: 550px;
    height: 600px;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
}

/* Add more styles as needed */

// Simulated data for brand listings
const brandListingsData = [
    { name: 'Brand X', favoris: 0, image: 'brand_x.jpg', largeImage: 'brand_x_large.jpg' },
    { name: 'Brand Y', favoris: 0, image: 'brand_y.jpg', largeImage: 'brand_y_large.jpg' },
    // Add more data here
];


// Function to display brand listings
function displayBrandListings() {
    const brandListingsSection = document.getElementById('brand-listings');
    brandListingsData.forEach(brand => {
        const card = document.createElement('div');
        card.classList.add('brand-card');
        card.innerHTML = `
            <h2>${brand.name}</h2>
            <img src="${brand.image}" alt="${brand.name}">
            <p>Favoris: <span id="${brand.name}-favoris">${brand.favoris}</span></p>
        `;
        card.addEventListener('click', () => openBrandDetails(brand)); // Use 'click' event, not 'favoris'
        brandListingsSection.appendChild(card);
    });
}

// Function to open brand details modal
function openBrandDetails(brand) {
    const modal = document.getElementById('brand-details-modal');
    const modalContent = document.querySelector('.modal-content');
    const brandName = modalContent.querySelector('h2');
    const largeImage = modalContent.querySelector('img');

    brandName.textContent = brand.name;
    largeImage.src = brand.largeImage;

    modal.style.display = 'block';

    modalContent.addEventListener('click', (e) => {
        if (e.target.classList.contains('close')) {
            closeBrandDetails();
        }
    });

    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeBrandDetails();
        }
    });
}

// Function to close brand details modal
function closeBrandDetails() {
    const modal = document.getElementById('brand-details-modal');
    modal.style.display = 'none';
}

// Display brand listings
displayBrandListings();

<!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="styles.css">
    <title>X</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap">
</head>
<body>

    <header>
        <h1>Welcome to X</h1>
        <input type="text" id="search" placeholder="Search for brands...">

    </header>
    <section id="brand-listings">
        <!-- Brand listings will be populated here -->
    </section>

    <!-- Brand details modal -->
    <div id="brand-details-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Brand Name</h2>
            <img src="brand_x_large.jpg" alt="Brand X">
            <!-- Add more brand details here -->
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

https://github.com/devmode-on/Animated-Dark-Mode-Button

[void anvil]

tien bg

[golden flume]

yes je regarde quand j'ai le time, mais deja c'est bien pour les autres pour t'aider

[void anvil]

okk, pas de souci

[void anvil]

enfaite j'ai reussi a le mettre mais il est en haut a gauche et moi je veux qu'il soit a au milieu a gauche du titre

[golden flume]

je suis sencé avoir ça?

le toggle est dans le code que tu ma envoyer?

[void anvil]

oui

[void anvil]

oui sur le github

[golden flume]

Ah d'accord tu la pas encore mis dans le projet

[void anvil]

mais ma partie du code n'a pas le systeme ni les bouton*

[golden flume]

Si jai bien compris c'est un toggle qui permet à ton site de changer de thème?

[void anvil]

oui

et genre j'aimerais que le bouton soit la

[golden flume]

Ah okay

Je regarderai mais pas sur que je réussi

Jai pas encore analyser comment étais fait le repo github

[broken oriole]

C'est du BootStrap ?

[golden flume]

Non

[broken oriole]

ok ça ressemble au niveau de la barre de recherche

et tu veux juste afficher le bouton à droite de ta barre de recherche ?

@void anvil

tu peux faire quelque chose comme ceci en terme de CSS :

.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.search-bar {
    padding: 10px;
    width: 200px;
    margin-right: 10px;
    /* Tout le reste de ton style pour ta barre de recherche */
}

.search-button {
    padding: 10px 20px;
    /* Tout le reste de ton style pour ton bouton */
}```

[golden flume]

j'ai capter le truc

faut juste reduire et bien positionner le bouton

[golden flume]

je finerai plus tard mais sinon c'est a peut pres sa non?

[broken oriole]

le bouton c'est le truc jaune ?

[golden flume]

Oui juste j'ai un problème de taille mais j'ai pas encore fixé le bug

[broken oriole]

je peux voir ton CSS ?

[golden flume]

Oula

J'ai pas encore tout nettoyer haha

Cetais déjà brouillons

[broken oriole]

t'inquiète, je vais m'y retrouver

montre moi, je vais t'aider

[golden flume]

T'inquiètes c'est juste la j'ai arrêter car j'ai cours

J'envoie après

[broken oriole]

pas de soucis

[golden flume]

tes chaud pour finir? car chepa si j'aurai le temps ce week faut que je boss pour mes exam et un finir un projet qui doit etre en prod ce week end

[austere lark]

@lusty forum

[sly abyss]

hey est ce que qlqn sait pourquoi ma video ne s'affiche pas?

[tawdry bear]

Bonsoir @sly abyss

Je te laisse aller voir ce site : https://fr.w3docs.com/snippets/html/comment-inserer-un-video-dans-html.html

Je pense que tu trouvera la réponse à ton problème

[sly abyss]

ok mrc

[sly abyss]

Enft le problème c que j'avais bien le autoplay mais j'avais oublié la maj vu que je suis sur react

[latent vigil]

Bonsoir. J'utilise l'API darkmode.js pour apporter un mode sombre à mon site internet mais mon bouton passe en dessous de certain élément.

Voici le code actuel :

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    const options = {
      bottom: '32px', // default: '32px'
      right: '32px', // default: '32px'
      left: 'unset', // default: 'unset'
      time: '0.3s', // default: '0.3s'
      mixColor: '#fff', // default: '#fff'
      backgroundColor: '#fff',  // default: '#fff'
      buttonColorDark: '#100f2c',  // default: '#100f2c'
      buttonColorLight: '#fff', // default: '#fff'
      saveInCookies: false, // default: true,
      label: '🌓', // default: ''
      autoMatchOsTheme: true // default: true
  }

  const darkmode = new Darkmode(options);
  darkmode.showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

Je ne sais pas si il est possible de le passer en "premier plan". Ainsi le darkmode pourra s'appliquer sur l'entièreté de la page et le bouton sera en premier plan.

[jaunty vortex]

Tu peux peut-être essayer ça en CSS https://developer.mozilla.org/fr/docs/Web/CSS/z-index

[latent vigil]

Merci. J'y regarde demain.

[latent vigil]

En effet, je te remercie, c'était ça.

[granite lintel]

Et si oui, j'aimerais bien une tranche de prix s'il vous plait 🙂

[austere lark]

Si tu cherches un dev pour te le faire -> #poster-une-recherche

[granite lintel]

Aucun problème 👌

J'attend d'avoir une réponse (positif ou négatif), puis je supprimerais mon message et l'enverrai dans le salon approprié.

[austere lark]

J'ai supprimé tqt, tu peux poster au bon endroit 😉

[granite lintel]

https://tenor.com/view/ojas-rn-angry-eating-funny-gif-26828688

J'ai pas pu copier

😂

[austere lark]

Je t'envoie en MP

[granite lintel]

Merci

Mais je ne sais pas si c'est possible 🤔

[void anvil]

Bonjour, permettez-moi de vous expliquer : je suis en train de concevoir un site web. En substance, j'aimerais que lorsque cette fenêtre (screen) s'ouvre, il y ait une flèche à gauche et à droite de l'image, permettant ainsi de visionner d'autres images. Cependant, je ne sais pas comment procéder. Est-ce qu'une personne pourrait m'aider, s'il vous plaît ?

[tame forge]

Dans une div que tu place sous ton popup, tu mets tes deux flèches, et tu applique ça sur la div :

div#id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ... */

[void anvil]

je ne comprend pas précisement ce que je doit faire

[broken oriole]

Tu souhaites mettre en place un système de flèche pouvant faire un avant et arrière pour changer de produit ?

@void anvil

[rustic anvil]

la fenetre s'appel une modal, et pour les fleches il faut avoir 3 divs
gauche, photo, droite
par contre selon le format de photo ça va être joyeux
chaque div contiendra des choses, et chaque div fera parti d'un groupe flex, pour avoir tout à la ligne
donc :
<div flex>
<div fleche1>
<div photo>
<div fleche2>
</div>

ps: la flex devra faire tout l'écran, donc position fixed, left 0, top 0, width 100vw height 100vh

[spare pumice]

bonjour ! j'ai commencé à apprendre l'html aujourd'hui et voila ce que j'ai réussis à faire pour l'instant, des remarque ou des conseils ne serait pas de refus !

[rustic anvil]

une petite remarque, mais rien de bien mechant, les input ou autre zone sont préférable dans des <div>...</div>
ça permet ensuite de mettre facilement en page. mais là en html simple c'est très bien ainsi jtrouve

[hoary junco]

Bonjour, je ne comprend pas l’erreur sortie sur ma console, quelqu’un peut m’aider s’il vous plaît?

[storm folio]

c'est normal <br/> réfère a rien en JS met ta variable dans php entre guillemet

[hoary junco]

Ok je vais essayer

[hoary junco]

J’ai rajouter des guillemets mais ça marche tjr pas

[storm folio]

tu veut faire quoi exactement ?

[hoary junco]

Beh que en gros mon tableau PHP passe dans mon script JS pour afficher dés choses en fonction des donne dans le tableau PHP

[storm folio]

ça te met toujours une erreur meme avec les guillemet ?

[hoary junco]

Exact

J’ai mit des guillemets « <?php … ?> »

[storm folio]

envoie ton erreur

[hoary junco]

La même que sur la photo de tout à l’heure

[storm folio]

ta fait var data = "<?php ?>"; ?

[hoary junco]

Oui

[storm folio]

Bizzare

[hoary junco]

Ouais je comprend pas

[storm folio]

montre ton code et l'erreur

[storm folio]

tu ma juste renvoyer le screen la..

fait en de nouveau

[hoary junco]

Beh oui mais mon code c’est ça

[storm folio]

bah t'es pas censé avoir ton erreur la

[hoary junco]

Beh oui mais j’ai toujours la même erreur

C’est ça que je comprend pas

Je fais les choses bien

Ça marche pas

Ça me gonfle

[dusky skiff]

T'as quoi dans ta console

Et tu peux pas prendre des screens ? Plutôt que des photos

[hoary junco]

Nop j’suis pas sur mon ordi 😅

[storm folio]

tu peut te connecter sur discord sur le web et juste en scannant un qr code hein..

[hoary junco]

Nop je peux pas c’est l’ordi de mon école du coup pas possible (j’ai déjà essayer)

[hoary junco]

Dès que je passe une valeur en brut, genre ‘0´ , ça marche, mais des que je passe une variable, là ça ne marche plus, je ne comprend pas

[storm folio]

montre l'erreur dans ta console

et prend un nouveau screen pas l'ancienne

[hoary junco]

Ok le problème viens du fait que je lui passe un tableau

Celle du haut ne t’en occupe pas, je sais d’où ça vient mais ca marche, je m’en occuperai plus tard

[brave jay]

Le problème vient du fait que tu as un problème ligne 49 je pense

[severe matrix]

Ah il nous hagarh pas si ils voyent qu’on code ?

[sterile vault]

hello, petite ( ou grosse ) question, en gros je fait mon site pour mon bot, et je veux affiché les cmd qui sont déja toutes écrites dans un fichier.json, et j'arrive pas a relier mon js/html a mon json, mais quand je rentre mes cmd direct dans mon fichier js ça fonctionne bien

jsp si c'est très claire

[storm folio]

Faut juste que tu récupère ton fichier json puis en affiche le contenu que tu souhaites, utilise du JS ou du php

[rustic anvil]

il faut surement fetch le fichier pour lire les datas

[dusty sorrel]

Bonsoir j'ai un soucis avec mon code, je souhaite que la premiere section et la 3ieme section soient collé a la deuxieme.
Le truc c'est que compris que le problème viens du fais que vu que j'ai réduit la taille des images, alors elle prennent pas toutes la section, moi je veux faire en sortent qu'elles gardent la taille que je leur ai mise, et qu'elle colle bien la deuxieme section

des idées svp ?

[storm folio]

Pas trop compris mais bon tente object-fit: cover

[dusty sorrel]

je vais essayé merci

[covert verge]

Question, existe t'il un site qui réfère tous les combinaisons des attributs?

[rustic anvil]

quand tu fais F12, t'as le style à droite lorsque tu inspecte un element, tu peux écrire le début et rester appuyé sur "bas" pour faire tout défiler (t'auras un preview live pour l'element, à chaque nouvelle valeur)

[covert verge]

ok merci, mais je recherchais plus dans le sens que je connais pas forcement les options

genre exemple writing-mode, juste me renseigner sans pour autant qu'il sois present

[rustic anvil]

ok, ah, de tous les lister,
peut être avec le site w3school

[covert verge]

ok, merci

[covert verge]

ces plate, car exemple avec html

il y a la liste des elements https://developer.mozilla.org/en-US/docs/Web/HTML

[rustic anvil]

je vois que la console permet d'autocomplete certains cssproperties
donc peut être que tu peux naviguer dedans ^^
là par exemple wri = writingMode (donc writing-mode)

[rustic anvil]

est-ce qu'il manque le main
ou est-ce que le main que j'ai appris n'est pas une balise standard?

[covert verge]

est-ce que tu peux voc, ces peux etre plus simple si je t'Explique lol

[rustic anvil]

cela dit il manque le <a> donc bon, liste ptet pas complete

[void anvil]

Salut les gars

[dusty sorrel]

Bonsoir, si j'ai une section ou je veux qu'elle sois de 285px de height, mais que l'image que je veux faire renter dans cette section fais plus de height, comment je fais pour pouvoir la centrer correctement même si elle fais pas 285 de height

[rustic anvil]

salut, tu veux absolument que ce soit une img ou tu accepte que ce soit le background d'une div par exemple?

[dusty sorrel]

Bah enfaîte c'est une section ou yaura une image qui va recouvrir le background

En sois c'est la même non que ce sois une balise img ou non

J'enverrais un screen plus tard pour être plus précis, merci à toi merci

[brave jay]

Tu peux faire un object fit

[rustic anvil]

c'est quasiment pareil entre img et background de div,
en fait pour background div c'est bien plus simple car tu pose ton url, et tu précise la position et la taille donc : background:COLOR url(URL) no-repeat center top/cover (cover ou contain, tu peux aussi centrer genre center center)
ducoup tout est en place. et pour une img,
- il faut que ta div parent soit par exemple en flex, et que tu center l'item img
- ou alors que ta div parent soit en text-align:center
- ou que ta div parent contienne une div enfant en margin auto et elle contient ton img
bref.. un peu moins simple que juste background, si t'as le choix c'est tellement plus simple de poser ton image en background :3

[storm folio]

sur ton image tu met juste object-fit: cover ou contain mais plus cover dans ton cas

[dusty sorrel]

Seul soucis, c'est qu'avec bg-cover (1er image) sa casse la qualité et object-cover aussi

<div className="image-container h-full">
<img src="/d.png" alt="Image droite" className="object-cover bg-cover w-full h-full" />
</div>
</div>

[vocal torrent]

Bonjour, Bonsoir,

Je me permets de solliciter votre aide car j'aimerais savoir s'il est possible de modifier l'effet de "scrolling" quand on clique sur la barre de navigation (d'un site single page) pour que celui-ci nous arrête plus haut que prévu à l'endroit de l'id ?

(ps: si je ne suis pas clair je peux faire des screenshot de mon problème)

[broken oriole]

je voudrai bien un exemple stp

[dusky skiff]

Il faut que tu rajoute du padding sur ton élément, et vraiment du padding, le margin est considéré comme étant extérieur

Donc tu met un wrapper autour de tes divs, puis un padding top

T'as l'exemple sur mon site si tu veux

[vocal torrent]

OK je vois ce que tu veux dire ! J'avais pas pensé à rajouter du padding top 🤔

[vocal torrent]

Trés stylé ton site au passage 👌 (il manque plus que la partie projet xD)

[dusky skiff]

Effectivement

[void anvil]

Bonjour a tous je suis développeur web /front-end/ html-css-js spécialisée dans la création des siteweb et j'ai du mal a trouvé des clients

Du coup j'aimerais savoir quel moyen je pourrais trouvé des clients pour leur proposer mes services

[gaunt yoke]

Malheureusement c’est pas magique, essaye de postuler au site creators area (https://creatorsarea.fr)
Mais tu seras en concurrence avec d’autres développeurs pour sur, autant sur le prix que sur les compétences
c’est celui qui séduira le plus le client qui l’emportera
(un bon folio, de bon exemple de chose déjà réalisé et autre)

pour le prix si tu es plus chère qu’un autre et que la personne te le fait remarquer c’est bien de savoir répondre à ça de ton côté, mais de façon structuré

Pars du principe que les gens sont bêtes (pas de façon péjorative, je m’explique 👉):
Les clients ne sont pas développeurs, souvent pas du tout à l’aise avec le monde du web, et donc c’est important de savoir expliquer ce que tu proposes

par exemple, c’est tout bête, mais: parler de responsive, ça ne va rien lui dire, parler d’adaptabilité sur les différents appareils: mobile, ordinateurs, tablette, ça lui fera déjà + de sens

mais dans l’idée c’est de savoir te vendre, et surtout mieux que les autres

[storm folio]

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding

[storm folio]

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

[dusty sorrel]

Merci

[void anvil]

Yo j'aimerai avoir vos avis ou suggestions sur mon site svp

[clear pumice]

Le dégradé blanc vers gris dans le background est très étrange (pas beau)

En terme d'UX ça m'a pas l'air mauvais

bottom instead of botoom*

Et le paragraphe dessus est bizarre je trouve

[void anvil]

tu me conseille quoi comme backdgorund

[clear pumice]

Regarde pour des palettes de couleurs sur Internet

[wraith remnant]

Hello @void anvil,
Les couleurs ne vont vraiment pas ensemble

[void anvil]

A

[wraith remnant]

Je te conseille https://coolors.co/, pour trouver ta palette de couleurs qui te convient

[void anvil]

j'ai juste mis en blanc :/

[wraith remnant]

Essaye de mettre ton BG en #eee

[void anvil]

ba j'en ai ,trouver mais les couleurs sur le site et moi quand je les met non sont pas vraiment similaire

[wraith remnant]

Et tes card en #fff

Rajoute également un border en gris clair

[void anvil]

tu veut je vienne voc ?

[wraith remnant]

Si tu veut !

[rustic anvil]

et gris vers blanc ça donne quoi? gris léger sur 25% de la page puis le reste en blanc

[void anvil]

grace a @wraith remnant il ma aider et j'ai modif comme sa

[clear pumice]

Manque plus qu'à changer les couleurs des boutons en haut à gauche 🙂

[void anvil]

ba jsp prcq c'est le bouton ou ce trouve l'utilisateur

[clear pumice]

Après c'est mon avis, à voir avec les autres

[void anvil]

@wraith remnantt'en pense quoi tu tis connais bien toi

[wraith remnant]

Hey, beaucoup mieux et propre je trouve

C'est du bon travail

Je rejoint l'avis de @clear pumice, le active de la navbar, je changer le fond pour soit le mettre en blanc, ou ne pas mettre de fond et mettre le text en gras et noir quand il est actif

[void anvil]

le active de la navbar ?

[covert verge]

Wow, j'adore

[void anvil]

mtn c'est comme sa et merci bcp

@covert verge

[brave jay]

Met t’es icônes en blancs quand ils sont hover

[void anvil]

ba nn sa va les rendre invisible ?

[brave jay]

Quand ils sont en hover en gros quand ils sont sous la sourie, et quand ils sont aussi sélectionné. Car là on les voits pas

Apres je suis pas sur que ton site soit très « moral »

[void anvil]

moral ?

@brave jay

[brave jay]

Bah faire un bot ou tout autre choses qui n’est pas en accord avec les règles Discord

[void anvil]

bot ?

[brave jay]

Pardon j’aurais peut être du te demander à quoi ça servir ton site

[void anvil]

a administrer des serveur fivem

[covert verge]

ah perso, je préférais l'Autre, sa donner un petit style

[void anvil]

le background ou juste les bull et etc

[covert verge]

els bull, mais la ton backgroud actuel, ces que blanc

[rustic anvil]

ils sont en noir sur fond blanc, le contraste est suffisant, donc c'est l'inverse de "on les voit pas"

[rustic anvil]

tu aimais bien avec dégradé? (moi j'aurai aimé voir gris vers blanc)

[covert verge]

j'ai des gouts bizzare aussi lol

mais sa pourrais êre bien avec une couleur primaire

[rustic anvil]

:D on est tous différent, là c'est du flat design donc perso je déteste, ducoup je suis surement bizarre aussi ^^

[brave jay]

Quand ils sont sélectionné je parle

[cloud kelp]

yo j'aurai besoin d'aide, si possible quelqu'un calé sur les medias queries, responsive,... J'ai finit ma page principale et maintenant je souhaite la mettre en responsive cependant lorsque je fais les lignes necessaires :

sans média queries :

.profile-wrapper,
.profile-wrapper2,
.porifle-wrapper3 {
  width: 350px;
  height: 450px;
  position: relative;
}

avec média queries :

@media screen and (max-width: 680px) {
  .profile-wrapper,
  .profile-wrapper2,
  .porifle-wrapper3 {
    width: 250px;
    height: 350px;
    flex-direction: column;
  }
}

ça ne marche pas, aucune explication me vient en tête... si quelqu'un aurait une solution svpp

[rustic anvil]

salut, vu le court extrait de code, ça m'a l'air bon, quel est le résultat, ça reste tout le temps en width 350px ?

[cloud kelp]

ouep et le flex-direction n'est pas appliqué

[rustic anvil]

ok etrange, chez moi ça marche

donc le code n'est pas mauvais, mais l'utilisation a peut être des soucis, essaye de voir l'ordre de tes css, et les classes de tes elements

[cloud kelp]

tu veux dire que l'ordre est peut être mal géré ?

[rustic anvil]

je suppose, ce sont des erreurs classique
en tout cas, là, j'ai une div avec une class, j'ai le css avec defaut puis media, et ça marche donc je nsais pas pk ça ne marche pas pour toi :s

[cloud kelp]

format desktop (1365x955)

vs

format iphone 12 pro

[rustic anvil]

envoi aussi les blocs de code pour comprendre, car là il manque les cotes (largeurs par exemple) de chaque element & zones, et aussi l'arborescence des elements

[cloud kelp]

<div id="container" class="container">
    <div class="profile-wrapper">
        <div class="profile">
            <div class="profile-image">
                <a href="C:\Users\menmu\Desktop\site graphe\pagepostinsta\postinsta.html">
                    <img src="images/post1.png" alt="Profile">
                </a>
            </div>
            <ul class="social-icons">
                <li>
                    <a href="https://instagram.com/oommbbrree" title="Instagram">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                             stroke-linejoin="round">
                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/oommbbrree" title="Twitter">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 
                             stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter">
                            <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 
                                    10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5
                                    4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z">
                            </path>
                        </svg>
                    </a>
                </li>
            </ul>

.profile-wrapper,
.profile-wrapper2,
.porifle-wrapper3 {
  width: 350px;
  height: 450px;
  position: relative;
}

.profile-name h2,
.profile-name2 h2,
.profile-name3 h2 {
  margin-bottom: 8px;
  text-align: h; 
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.profile-bio {
  text-align: center;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 450px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: 0.5s;
}

.profile .profile-image {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: var(--background);
  transition: .5s;
}

.profile-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.profile:hover img {
  opacity: 0.4;
  transition: .5s;
}

.profile:hover .profile-image {
  transform: translateY(-104px);
  transition: all .9s;
}

.profile:hover .profile-bio {
  opacity: 0.9; 
}

il manque une partie mais c'est long après mais voilà le nécessaire

[rustic anvil]

tu peux faire un zip, car le code que tu as envoyé n'a l'air d'avoir rien à voir avec les 3 images

[cloud kelp]

J'ai une meilleure idée, https://oommbbrree.000webhostapp.com/

[rustic anvil]

(ouille, déjà je vois qu'au moins une image fais 2200ko ... pour du web c'est très lourd, faudra penser à compresser pour que l'image fasse une taille classique de 250ko environ :p)

pas de soucis, les images sont bien à la suite :

[cloud kelp]

haha je vois, mais compresser ça perd en qualité ? Et le but du site c'est un portfolio donc la qualité joue bcpp

[rustic anvil]

non non, sauf si tu compresse à 98% là oui t'auras des pertes :p

[cloud kelp]

wtfff ?? comment tu as fait ?

[cloud kelp]

tu as un moyen de compresser sans perdre ?

[rustic anvil]

quand je zoom sur l'image, je peux voir s'il y a des défauts, donc niveau compression tu peux y aller à fond, tu ne perdra rien

[cloud kelp]

je vois je vois

[rustic anvil]

j'ai ouvert le site, j'ai supprimé la div insupportable du texte qui change à haute fréquence, et j'ai juste resize la page jusqu'à voir le changement

[cloud kelp]

comment ça ? j'arrive pas trop à suivre je t'avoue en plus vue l'heure... je suis devenu un escargot mdrrr

[rustic anvil]

oui, avec un paint tout simple, tu exporte en jpg (généralement c'est le mieux)
tu compresse à 20% 40% 60 % 80 % 95 %
et tu compare les résultats
exemple : tu ouvre al 95, tu vois que c'est bordelique, tu supprime. tu ouvre la 80% tu vois que c'est correct, tu la garde et tu supprime les autres qui sont + lourdes :) et voilà qualité validée

[rustic anvil]

j'ai ouvert et c'est tout

[cloud kelp]

okkkkk je voisss

[cloud kelp]

tu n'as rien changé dans le code ??

[rustic anvil]

pour avoir une idée de la compression, 15 à 20% serait bon, et pourtant ça pese 80ko au lieu de 2'200 :p

donc temps de chargement instantané au lieu de 4...20 secondes

[cloud kelp]

ahhhh ok je vois

et tu compresses avec quel logiciel ?

[rustic anvil]

le logiciel le plus simple du monde sous linux : kolourpaint
mais il existe aussi gimp, et des centaines d'autres dont photoshop, psp7, paintdotnet, paint...

[cloud kelp]

tu peux compresser avec photoshop ?

[rustic anvil]

je peux surement mettre en ligne un petit site, tu glisse une image, ça charge en local (donc pas de transfert serveur) et tu peux preview + dl, la qualité selon celle qui te semble le mieux
m'enfin je voudrais bien coder aussi un redimentionnement, ça serait cool. bref bref tout est possible :D

oui heureusement :p sinon photoshop serait mis de coté par la commu :p

[cloud kelp]

incroyable mec

[rustic anvil]

tout les logiciels peuvent le faire, et le javascript aussi :D

[cloud kelp]

haha "💛 Le javascript permet tant de choses o_o"

[rustic anvil]

tu peux venir en voc 30secondes?

[cloud kelp]

nop demain stv

[rustic anvil]

ok tu me notif et je viendrai, faire une demo live de mon vieux site (fevrier 2022 mdr)
mais qui marche encore

[cloud kelp]

okok pas de soucis

mais donc pour le responsive tu as une solution ?

[rustic anvil]

essaye d'autres navigateurs peut être, et essaye de voir avec d'autres personnes, en tout cas moi j'ai juste lancé le site sur un nav random (firefox) et c'était ok

memo: https://oommbbrree.000webhostapp.com/

[cloud kelp]

bizarre, pourtant quand je le lance via mon téléphone il fait la même erreur

[rustic anvil]

(je viens de modif le vieux site, il accepte desormais le bouton "importer" et le glisser/deposer)

[rustic anvil]

xD 4% de l'original, effectivement il était temps de compresser xD

[rustic anvil]

j'ai ajouté une preview (tu bouge ton curseur sur l'image, et ça zoom 200% et suit le mouvement de la souris^^) cet outil va devenir vraiment utile en fait :D

[rustic anvil]

voici le résultat :

https://msnbrest.github.io/compress_jpg.html
🥗 j'attend des critiques et propositions
prévenez si vous trouvez des problemes :D

⚠️ c'est libre, sur github, amusez vous à repomper le code osef.

testé avec du jpg, png, ico et svg ça marche (pas encore testé avec gif)
fonctionne en glissé déposé ou bouton import
sous toutes compression, la taille est normalement en accord à 0.5% de précision par rapport au réel téléchargé
Enjoy

[hot osprey]

propre !!

[cloud kelp]

wtf mec je passe de 3.1mo à 67ko 💀💀 t'es un monstreeeeee

[rustic anvil]

♥️
je suis un puriste, une tete de mule, un mec insuportable, perfectionniste chiant, mais... parfois... ça aide ouip
si t'as des questions même impossible, demande, peut être que ça pourrait me motiver à ressortir d'anciens projets :3

[void anvil]

Il est open source le site ?

[cloud kelp]

bien sur, il marche incroyable

[cloud kelp]

nan vrmt incroyable mecc

[void anvil]

Je peut le télécharger ou ?

Svp

[cloud kelp]

demande au boss @rustic anvil

[rustic anvil]

le miens oui, go tout pomper, même le svg est une copie d'un truc trouvé sur internet que j'ai recodé ^^ bref tout est from scratch jpense

[rustic anvil]

DL quoi donc?

[void anvil]

OK ta pas un lien ou un github pour le télécharger

[rustic anvil]

(github propose surement un fork pour le site entier, m'enfin pas hyper utile, prend les phrases qui te plaisent, souvent y'a un seul fichier, parfois y'a juste un js et css en plus, faut verifier au début du mini code source de chaque page :p)

la page compress_jpg fonctionnera en local oui, il faut DL : la page html, le fichier css, le fichier js
donc
- compress_jpg.html
- nanocss.css
- nanojs.js

mais bon, je peux te conseiller, durant quelques mois, de rester sur la version """web""" car y'aura surement des news, selon les critiques & conseils que je recevrai

car tout le monde va se lancer dans des tests acharnés pour trouver des bugs, hein dites? ^^ mdr

[cloud kelp]

la commu hynnnn

mais y'a des billets à se faire dessus mon gars, rends le payant pcq ça des gens paieront, mais laisses une version free pour nous 🤣

[rustic anvil]

^^ ce sont de betes fonctions js, tqt que pour l'argent je bosse déjà de mon coté

[nimble egret]

quelqu'un sait pourquoi mon site web veut pas s'étendre ? ca fait des heures j'essaye de trouver une solution, je veux pas que ca soit en "fixed" car ca m'intéresse pas, je veux que ca scroll normalement, j'ai aussi un code js avec les étoiles en bg que j'essaye aussi d'étendre

[rustic anvil]

[avec le code, c mieu]

[nimble egret]

oups oui

html, body {
position: absolute;
min-width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
}
canvas {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
canvas .cnv {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
}

.gradient {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.gradient .bg {
overflow: auto;
display: flex;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: calc(100% + 100px);
background-image: linear-gradient(to top, #A566AA, #402C6A);
transform: translate(-50%, -50%);
}
/* Creates a transparent scrollbar */
::-webkit-scrollbar {
width: 0px;
}

.content {
position: absolute;
font-size: large;
z-index: 1;
color: white;
top: 50px;
width: 100%;
}

le css

j'essaye un peu tout dessus surtout que comme jss débutante bah c'est assez difficile mdr

[rustic anvil]

:) pas de soucis
tu peux apprendre par coeur betement
tu peux apprendre en suivant des tutos en bordel et en essayant
tu peux apprendre en testant tout seul et en cherchant des astuces en tout genre
:3

[nimble egret]

oui mais là j'essaye vraiment de cherhcer partout et je trouve pas la solution a mon problème

je veux juste étendre le fond de mon site qu'il reste pas en format de première vue dès qu'on l'actualise ;((

[rustic anvil]

okok, envoi aussi le html, ou zip le tout, faut que je constate pour pouvoir aider

[nimble egret]

j'envoie ici ?

j'ai enlevé tout de moi mdr faudra juste un peu faire des marges pour voir en bas

[rustic anvil]

(Creates a transparent scrollbar) <- outch l'accessibilité mdr...

ok parfait je l'ai, tu pourras le suppr si besoin, je vais verif & open

[nimble egret]

JPPP JAVAIS PRIS LE CODE DUN SITE

j'ai oublié de supp 😭

après j'ai quelque info que quelqu'un m'avait fait

[rustic anvil]

^^

<script src="https://cdn.tailwindcss.com"></script>
je sent que j'vais souffrir

[nimble egret]

dswjdwhqdw

il sert a rien

je l'ai juste tjr pas supp

😭

[rustic anvil]

xD pas grave :p mais c'est drole de voir ça et ensuite des messages "ça march pa" :D je suis puriste ducoup je code tout de zero, et je n'ai jamais de probleme ducoup ^^

moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi,
moi, moi, moi, moi, moi, moi, moi, moi,
moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi, moi,
moi, moi, moi, moi,
moi, moi, moi, moi, moi, moi, moi, moi,
moi, moi, moi, moi,
:D

[nimble egret]

bah si tu veux savoir c'est pour faire un flou derrière mon image parce que je veux pas de shadow

je veux vraiment un blur derrière mon img

[rustic anvil]

ok génial :)

donc tu double une image transpa et tu blur? :)

[nimble egret]

oui 🥲

[rustic anvil]

filter: blur(10px);

ah oui ! gg, excellente astuce

[nimble egret]

je pensais j'allais me faire engueuler mdr

[rustic anvil]

au lieu de faire l'image en dur, et avoir surement un fichier bien plus lourd en png transpa multi alpha
là t'as surement 0 & 255 uniquement en calques alpha compréssé dans ton png, donc Ultra léger :)
ensuite le css, créer le blur, ça ne bouff quasi pas de proc chez les clients :3
(c'est du charabia ce que je raconte ici ou pas?)

[nimble egret]

je t'avoue que c'est un peu chinois mdrr

[rustic anvil]

nan carrément pas, c'est astucieux niveau perf & poids
alors on peut mieux faire niveau perf avec un png qui integre le blur, mais niveau poid ça sera un désastre :)
le compromis est parfait ici.

ow ok. go vocal?

[nimble egret]

d'acc

[gaunt yoke]

prout

[cloud kelp]

force faudrait m'apprendre pcq coder tout de A à Z c'est vrmt vrmt chaud

@rustic anvil à quand une api de compress.jpg ?

j'ai besoin de toiiii @rustic anvil

que faire ?

sachant que le code du background est :

body {
  background-image: url(fond3.jpg);
  height: 100vh;
    background-position: center;
    background-size: cover;
}

[rustic anvil]

sachat ceci, hm oui?

la répétition pose probleme? (oui je suis chatgpt, je devine les probleme avant même qu'on me pose la question)

[cloud kelp]

pardon ?

[cloud kelp]

mdrrr ouais y'a une solution pour que tout soit lisse ?

[rustic anvil]

oui tu peux demander à @nimble egret on vient justement de régler ce genre de soucis sur son site :)
(ça va @nimble egret je ne te met pas trop dans la sauce? haha)

le soucis vient surement du "height" qui n'est pas un "min-height"

[cloud kelp]

donc un "min-height: 100vh" règlera le problème ?

[rustic anvil]

ptet :s
je ne suis ni voyant, ni politique, ducoup ce que je dis doit être pris en tant que "quasi vrai" :) faut tester pour être certain

[cloud kelp]

tu vas devenir ma ref mec haha

[rustic anvil]

j'ai cru mal lire, ouf
en tout cas c'est un plaisir d'aider

[cloud kelp]

comment ça 🤣, t'as cru lire quoi ?

[rustic anvil]

ref=>meuf
xD c'était drole

[cloud kelp]

mdrrrrrr je comprends vu l'heure...

[rustic anvil]

@nimble egret en quelques minutes, j'ai terminé ce que chatGPT n'a pas réussi à faire en une heure malgré des dizaines de précisions

[cloud kelp]

bah putain tu vois vraiment la vie de dev "=>" 🤣

[cloud kelp]

chatgpt tu lui demandes qlq chose il fait l'inverse...

[rustic anvil]

voici un mini jeu pour les PGM
le jeu des 5 carrés (bon y'en a 6, jsuis fatigué, ne m'en voulez pas)
vous devez trouver le vert.
mais si c'est le mauvais alors impossible de tricher en dérapant pour trouver le bon
vu que les autres carrés seront bloqué.
(sauf pour les hack3r qui injectent du code source dans la console olala)

ce code a été généré à 80% par GPT, et le script a été revu car omg impossible de fonctionner correctement

[rustic anvil]

ouai et puis impossible d'accepter ce genre de demande, ma moeuf ne serait pas contente ^^

[nimble egret]

Tant que tu peux le faire sans lui..

[cloud kelp]

[rustic anvil]

owi large :)
from scratch = simple :3
alors que gérer un framework omg la perte de temps
(évolutions difficile.. toussa toussa... erreurs insoluble.. joie)

template = fail
framework = fail
IA GPT = fail
from scratch = long mais fonctionne ♥️

[cloud kelp]

il y a combien de personne comme toi qui : mangent, dorment, chient, VIVENT dev ici ? 🤣

[rustic anvil]

j'ai demandé à gpt d'analyser le code final, il ne m'a pas insulté, mais sa conclusion me fait un peu rire de désespoir :
il comprend, mais n'explique pas, et répète en moins clair ce que je lui ai expliqué et répété pendant une heure :D mdr. bon c'est GPT3.5 on l'excuse. (gratuit)

[rustic anvil]

at evryone, qui passe sa vie à coder ici?
mdr

(avec un petit dezoom de ma part :D un brin d'humour)
en vrai il gere quand même pas mal. c'est appréciable
bon par contre je viens de tomber sur le site "perplexity.ai" et... waw, instantané et assez pertinent

[rustic anvil]

(petit update : structure améliorée, code compréssé, cases visible tant qu'on a pas trouvé la verte, mdr le mini jeu qui reçoit quand même des évolutions xD)

[frosty rock]

Bonjour, j'essaie d'apprendre à utiliser WebStorm mais j'ai un problème. Savez vous comment je peux faire pour que les fichiers .ejs soient supportés ? Merci d'avance pour votre réponse

[tame forge]

Tu installe le plugin EJS ^^

[frosty rock]

Oui mais ça ne marche pas

[tame forge]

Yep

Il est nul

[frosty rock]

J’ai pourtant bien relancé l’ide

[tame forge]

Faut pas s’attendre à de gros changements 😂

[frosty rock]

Bon

Je vais retourner sur VSC

[tame forge]

Malheureusement, tu peux pas faire mieux (à ma connaissance)

[frosty rock]

Ok

Merci quand même

[silver orbit]

bonjour comment on met du css

svp

[rustic anvil]

salut, avec une balise style, un attribut style, ou une balise link stylesheet

[silver orbit]

tu pourrais m'aider en voc

stp

[rustic anvil]

là je suis occupé voc, mais tu peux surement trouver des tutos pour html+css

[vale holly]

Le problème c’est qu’il y a pas grand chose à voir en vocal, il faut que tu suives des tutoriels pour apprendre. Ceux de OpenClassroom sont gratuit et relativement bien

[silver orbit]

Je parlait de m’aider a m’être css c’est tout

[rustic anvil]

peux tu envoyer le code que tu as actuellement et quel css tu voudrais ajouter

[covert verge]

dans le head
<link rel="stylesheet" href="Style.css">

[silver orbit]

merci

[winter charm]

Bonjour je souhaite apprendre le développement web

Qui aurais des technique

Ou des cours / logiciel à me conseiller

Si possible gratuit ou pas chère

[tame forge]

Les cours d’open classe oil sont supers !

[frosty rock]

*Open Classrooms

[winter charm]

Merci

[gaunt yoke]

les OG disent le site du zero

[frosty rock]

J’ai pas connu cette époque malheureusement

[brave jay]

Ah quelle bonne époque 😄

[tame forge]

Oulà

Merci le correcteur 😕

[tame forge]

https://tenor.com/view/muletas-gif-25133704

[hollow gale]

Bonjour est-ce que quelqu'un sait comment faire l'animation du footer comme sur le site d'Openclassrooms ? Exemple sur https://openclassrooms.com/fr/courses/7168871-apprenez-les-bases-du-langage-python/7289556-classez-des-donnees-avec-les-types-de-donnees

[olive wind]

Yop, tu veux parler du footer qui reste fixé au bas de la page quand tu scrolls vers le haut ?

[hollow gale]

Oui, mais cette animation je l'ai déjà fait sur mon site https://fazzer.rf.gd le seul problème c'est la réaction du footer quand on arrive sur le composant en scrollant vers le bas, est-ce que tu sais comment ils ont fait ?

[olive wind]

Ton effet ressemble en tout point à celui d'open classroom, j'arrive pas à comprendre la réaction dont tu parles

@hollow gale

[hollow gale]

scroll jusqu'à la fin de la page et regarde ce qui se passe quand tu rescroll vers le haut

[olive wind]

tu parles du fait que le footer se fixe qu'une fois qu'on arrive à son niveau ?

[hollow gale]

non en fait quand tu es tout en bas et que tu scroll vers le haut, le footer reprend son animation depuis 0 alors qu'en soi vu que tu es en bas de page il y a pas besoin de cette animation vu que le footer est déjà affiché ou en partie affiché

[olive wind]

dacc je vois

Il faudrait avec un petit script js que tu check la hauteur de la page par rapport à la hauteur de ton composant, de façon à ne débuter l'animation que lorque tu es à un certain niveau (la hauteur de ton compsant dans ta page)

je verrais ça comme ça perso

[hollow gale]

@olive wind Mais il se passerait quoi si on scroll vers le haut et qu'il y a la moitié du footer d'affiché ?

[olive wind]

plus techniquement parlant, je ferais une méthode lorsque je scrolle qui vérifie la hauteur de la fenêtre par rapport à celle du footer. Pour ça il faudrait que tu récup ton content / footer, que tu récup le fait de scroller vers le haut et que si le scroll + la hauteur de ta fenêtre est supérieure à la hauteur de ton content tu mets une position fixed. Si au contraire c'est inférieur tu remets la position initiale

[olive wind]

Tu gères ça comment au niveau de ton code ?

sinon tu fait juste en sors d'enlever l'animation qui translate vers le haut quand la hauteur de ta fenêtre est au niveau du bas du footer

dans ton code c'est bizarre, car quand tu scrolls vers le haut une fois que tu es en bas, la fenêtre remonte d'une dizaine de px

c'est ce qui créer cet effet de décalage un peu bizzard

[hollow gale]

avec cette méthode le seul problème est que lorsqu'on scroll depuis le bas de la page ça fait pas un effet fixed, j'aimerais que l'animation commence au niveau de où est le footer, mais pour appliquer ça dans mon code c'est compliqué car ça passe de css position: static; à css position: fixed

[olive wind]

tu pourrais montrer ton bout de code qui gère cette partie ?

je pense que quand tu le passes en absolute il faut que tu redéfinisses sa position

[hollow gale]

oui, mais avant je mets juste à jour le site car j'avais réglé le problème dû au fait que quand le footer passe en "position: absolute" ça raccourci la hauteur de la page et créer donc cet effet

[olive wind]

tu mets à jour le site ? du genre location.reload ?

[hollow gale]

je sais pas à quoi fait référence "location.reload" mais je mets juste les fichiers du site à jour

j'ai une copie sur mon ordinateur

[olive wind]

ah oui tu remets pas à jour le site, location.reload ça permet de recharger ta page (chose qui serait trop lourde pour une simple animation)

[hollow gale]

@olive wind j'ai juste appliqué le changement sur une page donc réfères toi à https://fazzer.rf.gd/chap2.html

et le code js de mon animation: ```javascript
let prevScrollPos = window.pageYOffset;
var isAnimationStopped = false;
function handleScroll() {
var currentScrollPos = window.pageYOffset;
var footer = document.querySelector('.fixed-footer');
if (prevScrollPos > currentScrollPos) {
isAnimationStopped = true;
footer.style.position = 'fixed';
footer.style.bottom = '0';
} else {
isAnimationStopped = false;
footer.style.bottom = '-121px';
animation = setTimeout(function() {
if(isAnimationStopped == false){
footer.style.position = 'static';
}
}, 500);
}
prevScrollPos = currentScrollPos;
}

window.addEventListener('scroll', handleScroll);```

[severe matrix]

salut ! comment on met cette div un peu plus petite et au millieu de la page ?

je sais pas si il y a besoins de code si oui pingez moi

[olive wind]

Essaie de rajouter un truc du genre :
const scrollY = window.scrollY;

Et dans ta condition tu verifies :
if (scrollY + windowHeight < contentHeight)

window height et contentHeight il faut que tu les récup

[olive wind]

Yop tu peux détailler un peu ?

[severe matrix]

ok avec le code ou mes mots

[olive wind]

Mais si tu veux modifier le style d'une div tu vas sans doute avoir à toucher au code

d'abord avec les mots ^^

[severe matrix]

je sais

[winter charm]

Le probleme c'est que je suis mineur

[rustic anvil]

ou des morceaux de cours sur youtube :p c'est accessible normalement

[winter charm]

ok

[severe matrix]

Alors j'ai un problème car j'ai utilisé un tuto pour faire une landing page pour mon site pour mon bot et moi j'ai un gros rectangle et je trouve que sa fait moche ducoup je cherche comment le mettre la photo si dessous et merci et désolé si j'ai prit du temps

et j'ai sa

[olive wind]

tu peux me montrer ton code associé à ta div stp ?

@severe matrix

[severe matrix]

Ok

[hollow gale]

@olive wind pourquoi ceci ne calcule pas bien la différence entre la hauteur de la page et la où on en est dans le scroll: document.body.scrollHeight - window.pageYOffset; (quand je suis en bas de page cette valeur n'est pas égal à 0) ?

[olive wind]

le css principalement

[severe matrix]

CSS ?

Ok

.hero-content_guide {
height: fit-content;

display: flex;
flex-direction: column;
gap: 10px;

padding: 30px;
border-radius: 36px;

background: linear-gradient(to left, #E34646, #155FEF );

}

[olive wind]

Nan en gros le scrollY c'est pour prendre en compte dans la condition le fait que tu scrolles vers le haut

[hollow gale]

oui mais la je cherche juste à calculer le nombre de pixel qu'il reste à scroller sur la page (donc la différence entre la taille de la page et le scroll), sais tu comment faire ?

[olive wind]

Au lieu de donner un nombre défini de pixel tu pourrais un faire un truc dans ce genre je pense :

En gros tu récupères la taille de ton footer avec la variable footerHeight
const footerHeight = footer.clientHeight;
Avant il faut que tu aies récup le footer avec un getElementById

ça va te ressortir la taille de ton footer

ce sera peut-être mieux pour travailler dessus

[olive wind]

Dacc je vois, tu comprends ce que fait ce bout de code ?

En gros tu as la propriété fit-content sur ta div. Cette propriété fait en sorte que la taille de ton container s'adapte à ce qu'il a dedans
Donc pour réduire la taille de tout ça avec cette propriété, tu vas devoir remoduler un peu ta fenêtre. En particulier l'encadré blanc en haut, c'est lui qui fait que ton container est aussi grand

[severe matrix]

Oui alors pour le height sa adapte le contenu flex direction sa le met en colonne écart est de 10 pixels padding jsp quesque sa veut dire en français mais je sais à quoi sa sert le border radius c’est à combien de pixels les bords sont rond et background pas besoins d’expliquer

Ah tu la déjà fait 😂

[severe matrix]

Et comment on fait pour l’encadré blanc ?

[olive wind]

le padding: c'est l'écart qu'il va fixer entre ton contenu et les bord de ton container autour

tout dépend de ton css associé

tu peux me le montrer ?

[severe matrix]

Ok

.hero-guide_secure {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 30px;
border-radius: 36px;
background-color: var(--secondary-color);
}

Je suppose que le 30 of au padding on change ?

[olive wind]

Yesss

C’est ça

[severe matrix]

Ok je le met en cmb ? 10 c’est bon Ou c’est trop petit

J’ai mit 5 même sa a rien change

[hollow gale]

@olive wind Merci pour ton aide, j'ai réussi à régler le problème, mais il reste un seul détail, les composants du footer se décalent quand celui-ci passe de css position: static à css position: fixed est-ce que c'est normal ? https://fazzer.rf.gd/chap2.html

[severe matrix]

Azrom c’est un bon il aide tout le monde en même temps

[olive wind]

Et t’as fait ça comment par curiosité ?
Et si tu mets en position absolute à la place de static ? Ça donne quoi ?

[severe matrix]

Si c’est ton site je le trouve bien je vais m’aider sa comme je suis nul en python

[hollow gale]

en position à la place de static ?

[olive wind]

Yes

[hollow gale]

et sinon pour régler le bug j'ai fait ceci javascript scrollRest = pageHeight - currentScrollPos - window.innerHeight; if(scrollRest > 121){ footer.style.bottom = '-121px'; } else{ footer.style.bottom = -scrollRest + "px"; } en gros si on est assez bas dans la page et que le footer est déjà en partie afficher l'animation commence pas de bottom: -121px mais de la bonne position

[olive wind]

121 c’est la taille de ton footer ?

[hollow gale]

oui

[olive wind]

En format mobile ça fonctionne tout autant ?

Ton footer risque de changer de taille et ça ne suivra plus

Faudrait que tu récupères la taille du footer avec la méthode que je t’ai donné au dessus pour être au niveau responsive

[hollow gale]

j'avais pas pensé à ça, bien joué, pour l'instant je me suis pas attaqué au responsive mais en effet il faudrait que je remplace 121 par la hauteur du footer que je récupèrerais dynamiquement grace au js

[olive wind]

Exactement 😉

[hollow gale]

sinon est-ce que tu sais si passer de "position: static" à "position: fixed" ça change quelque chose en therme de width parce que sur mon footer oui, je me suis dit que c'est peut-être une histoire avec la scrollbar qui serait peut-être pas prise en compte en "position: fixed" mais je sais pas trop

[olive wind]

hmm je ne pense pas que ça devrait y changer quelque chose
Après c'est possible que si, je t'avoue que là dessus il faudrait faire des tests pour voir

[hollow gale]

je sais pas d'où ça vient mais en tout cas en "position: fixed" le footer pert toujours 17px de largeur, j'ai testé entre les différente page, avec différente largeur de page et c'est toujours 17px

[olive wind]

Ok étonnant, tu es sûr que ça ne vient pas d'un conflit avec une autre propriété que tu aurais défini ?

[hollow gale]

j'ai réglé le problème mais ça fait pas très propre d'ajoute/retirer 17px alors que je sais même pas d'où ça vient

[olive wind]

Yep effectivement il doit y avoir plus propre

[hollow gale]

non je suis presque sûr que ça vient du changement de "position"

[olive wind]

après oui si l'endroit où ton composant est static n'est plus le même quand il est en absolu ça créer une diff

[hollow gale]

et en plus si on est sur mobile peut-être que vu qu'il n'y a pas de scrollbar il y a plus le problème et ma solution en cause un autre

[hollow gale]

bah ça passe du conteneur qui a une largeur de 100vw au body qui a aussi une largeur de 100vw

[olive wind]

alors il va falloir penser un media queries inférieur à un certain nombre de px

et appliquer la propriété qu'en dessous de ce media queries

[olive wind]

yes c'est bizarre en effet

[hollow gale]

je pourrais utiliser une class en fait quand le media query est en taille portable, la class change pas la largeur du footer et sinon ça le change

[olive wind]

c'est l'idée oui

tu devrais pouvoir appliquer sans trop de problème

[hollow gale]

mais après comment savoir si l'utilisateur est sur tablette ou sur ordinateur portable, je peux pas savoir et pourtant il y en a un qui a une scrollbar et l'autre pas (toujours en supposant que le problème vient de la scollbar)

ça vient bien de la scrollbar car quand j'utilise l'outil de chrome pour simuler le site sur différent appareil il n'y a pas la scrollbar et ma solution pose problème

[olive wind]

tu peux définir plusieurs média queries, en dessous du format tablette tu appliques telles propriétés puis qu'en tu baisse encore jusqu'au format téléphone tu redimensionnes à nouveau

tu as essayé de cacher la scrollbar directement ?
overflow-x: hidden

[hollow gale]

mais il doit bien y avoir des ordinateurs portable qui la même largeur que des tablettes ?

[olive wind]

peut-être que ça peut te régler le problème plus simplement

[hollow gale]

je parle de la scrollbar de l'axe Y

[olive wind]

ah mybad remplace juste le X par le Y dcp

[hollow gale]

mais si je retire le scrollY ça cause un problème d'accésibilité

il doit forcément y avoir une scrollbar

[olive wind]

bah oui c'est le défaut, c'était simplement pour voir si ça te créait un changement

[hollow gale]

peut-être que je devrais simplement modifier le css de la scrollbar pour qu'elle n'influe pas sur les éléments

[hollow gale]

ah ok

[olive wind]

sinon tu peux mettre un margin-right de 17px pour compenser

peut-être que c'est comme ça que tu as fait d'ailleurs

de ce que je vois ça a l'air plutôt commun de faire ça

[hollow gale]

en fait j'ai juste à trouver comment récupérer la largeur de la scrollbar en js et décaler le footer de cette taille là, comme ça s'il n'y a pas de scroll bar ça décale de 0

c'est bon !

[olive wind]

oui c'est vrai que tu peux aussi faire ça

ah nice !

[hollow gale]

il y a juste à faire window.innerWidth - document.documentElement.clientWidth;

et ça donne la largeur de la scrollbar et c'est bien 17 donc c'est bien ça le problème

[olive wind]

oui tu redimensionnes ta fenêtre sans la scrollbar

bien vu 😉

[hollow gale]

il faut dire ça à chatGPT xd

[olive wind]

il est bien pratique ce truc là mdr

[hollow gale]

je suis d'accord

En tout cas merci beaucoup ! J'étais pas très motivé à m'attaquer à ce problème depuis quelques jours mais ça s'est mieux déroulé que ce que je pensais grâce à ton aide 👌 ||@olive wind||

[tame forge]

Et? C’est gratuit je vois pas le problème 👀

[winter charm]

Mais je peux pas

la connection ne marche pas

[tame forge]

Hein?

Y’a pas besoin de compte

[stable jetty]

j'utilise la typographie tailwind pour formater mon article. Cependant, je trouve que les marges entre un titre et un paragraphe sont trop élevées. Comment puis-je changer cela?
avec prose-base, lg, etc., tous

voici le code:

<div
      v-html="convertedContent"
      class="mt-10 prose max-w-5xl mx-auto prose-a:text-blue-700 hover:prose-a:text-blue-600 lg:prose-lg"
    ></div>

[brave jay]

leading

[stable jetty]

Nan ct pas ça, en gros j'ai fait prose-headings:mt-3

J'ai modifié la valeur comme ça

Mais merci, j'ai bien galéré

[tender coral]

Quelqu'un peut me dire si c'est possible de mettre une bordure sur un <div>, mais en sachant que je lui est mis clip-path: circle(); en CSS (si il le faut je peut même utiliser JS).

[rustic anvil]

essaye
border: TAILLEpx solid #COLOR
ou
box-shadow: 0 0 0 TAILLEpx #COLOR
(en terminant par "inset" ou pas.)

[tender coral]

Pour le premier j'avait déjà essayé et le deuxième sa fait rien. (l'image c'est quand je mets border: 20px solid #fff)

[rustic anvil]

au lieu de clip-path (que je ne connais pas) essaye border-radius: 50%;

[tender coral]

clip-path c'est pour faire des forme mais quand je fais border-radius: 50%; ça fais pas un cercle parfait. C'est pas grave je trouverai un jour une solution.

[rustic anvil]

envoi ton code, ça m'étonne que border-radius ne marche pas, peut être un soucis de structure

[olive wind]

Au lieu de passer par un clip-path: circle(); pour faire ta forme ronde. Tu peux passer par un border-radius : 50; ou quelque chose de ce genre
Tu pourras beaucoup plus simplement faire ta border dessus

ah mb j'avais pas vu que la réponse avait été donnée juste au-dessus o_O

[rustic anvil]

ça arrive souvent ça :D on court-circuite mon message pour dire la même chose ^^ mwahaha

il faudrait utiliser autre chose que p pour mettre un texte centré, car là ça te force des margin ducoup effectivement la structure n'est pas bonne
conseil :
met une div au lieu de p, centre le texte (text-align:center) et centre la div en utilisant flex sur la div principale
là tu pourras faire ce que tu veux avec :)
car p ça sert surtout quand on a pas de css ou qu'on le modifie (margin:0 etc)

[tender coral]

Ok merci beaucoup. Je vais appliquer tes conseils.

[void anvil]

Someone help me? I need to make a flexbox with a gap

[covert verge]

hello, comment je pourrais faire que quand je hover un element, cela m'ouvre un petit menu en bas ? sans use bootstrap ?

[rustic anvil]

en ajoutant une class (classList.add("name") ) via le trigger "onmouseover"

[covert verge]

heu ouais ouais..... je ss telement ces quoi lol. merci je vais check cela

[rustic anvil]

oui j'ai donné les mots clés, soit tu connais, soit tu vas t'informer :) en tout cas t'as les infos principales :3

[covert verge]

ouais merci bien 🙂

aussi question, j<ai un 1er sprint de réalisation, quel serais la meilleur facon pour faire un site responsive ?

j'avais penser faire 3 build de style diffreent
1 pour phone
1 pour tablette
1 pour desktop

[rustic anvil]

ça dépend, t'as le choix, en général aujourd'hui la mode c'est de faire du mobile first, ensuite tablette puis pc
mais bon perso j'arrive pas à suivre, donc je ne saurai te conseiller

[covert verge]

ok, donc ces vraiment de faire un style pour chaque display qui est mieux ?

[rustic anvil]

pas de style juste une class, et oui display none<->block :)

[covert verge]

moi j'avais pensé faire un style avec 3 screen media pour chaque resolution

[rustic anvil]

oui tu peux, il y a autant de façon de coder que de codeurs :p
tant que ça marche, que c'est compatible.. go :)

[covert verge]

Salut,

j'arrive pas à placer les elements de mon ul en justify-content: space-between;

code :

    <header>
        <h1>WebExamen</h1>
        <ul>
            <li>Notes</li>
            <li>Ressources</li>
            <li>Sujet</li>
            <li>Groupe</li>
            <li>Préférences</li>
        </ul>
    </header>

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header > ul {
    display: flex;
    margin: 21.40px;
}
header > ul > li {
    list-style: none;
}

[covert verge]

j'Ai trouver une autre facon avec

    margin: 0;
    padding: 0;

[rustic anvil]

il faut margin les li pas les ul :)

[void anvil]

Salut j’apprends html et je ne sais pas ce que c’est la balise div

[rustic anvil]

salut, ceci est une phrase, au revoir.

la phrase a été balisée par un salut et un au revoir.
une "balise" est un "repere"
tu peux personnalier ton repere (je veux une balise verte clignottante dans l'océan pour prévenir les bateaux)
je veux une balise image sur un nav web pour afficher une suite de pixels
j'ai besoin d'une balise "client" pour structurer mes infos clients

donc en html, une balise, par exemple <span>texte</span> , cette balise span servira à entourer une chose pour la modifier plus tard.
par défaut il y a pas mal de balises géré nativement par les navigateurs, mais tu peux ajouter du style, les faire changer avec du JS aussi... :)

[viscid kettle]

la balise div c'est une une balise de division de contenu tu peux l'utiliser pour faire faire un conteneur qui encadre tes élements par exemple

[void anvil]

conseil ou avis ou suggestions
svp

[rustic anvil]

ça manque de fun
déjà en light theme je n'aime pas dutout (je suis pro-darkmode ouip^^)
et ça manque de couleurs, de design
là c'est très fade comme un mini jeu sur une tablette Vtech pour enfant

(mais ça ne reste que MON avis hein, je ne suis pas omniscient)

[broken oriole]

je rejoins ton avis

[brave jay]

Ah bon, j'en été sur pourtant !

[void anvil]

Hey 👋🏼 Petite question débile en css,
Par exemple quand on à un bloc header, si on veut qu'il prenne un x espace donc on utilise le height et le width mais en fonction des appareils (taille des écrans). Cela ne prendra pas la même place donc comment faire pour prendre à chaque fois la même place ?

[olive wind]

salut !
En css il y a ce qu'on les appelle les requêtes médias (médias queries)
C'est ce qui est utilisé en natif pour adapter les éléments de sa page en fonction de la taille de celle-ci
En gros tu viens dire à ton code si ma fenêtre est inférieure / supérieure à tant de pixels, je veux que cet élément fasse ça
Tu peux trouver pleins de docs super là dessus, le principe est pas bien compliqué 😉

[void anvil]

Yep je connais merci, mais c'est chiant de devoir faire pour toute les tailles d'écrans...

[olive wind]

En natif c'est la solution la plus commune. Après si tu veux commencer à travailler avec des frameworks tu pourras adapter tout ça beaucoup plus facilement

[void anvil]

okey merci

[rustic anvil]

salut, tu peux utiliser width:100vw et/ou height:100vh en natif (sans padding ni margin, ou alors il faut un box-sizing:border-box), ça te sauve la vie :p s'adapte à l'écran quelle que soit sa taille (0px...9999999px)

[wise hamlet]

Citation du message de angelo_yt#0 posté dans #discussion-dev

slt,
j'ais envie de faire un site tt bete qui quand on apuis sur un bouton ça ajoute 1 à un total de click et que ça affiche le nombre de click (tout ça relié a une BDD) qui a des tuto/docu a me conseiller svp

➜ [Voir le message original](#discussion-dev message)

Cité par angelo_yt#0 · Oct 29, 2023, 2:33 PM

[true schooner]

😭

chiant le bot

[rustic anvil]

pourquoi chiant? tu lance une commande donc il réagit :D

ah attends, c'est pas toi qu'à lancé la commande? xD

[true schooner]

nan je m'tais trompé de screen et j'ais suppr le msg

ducoup je voulais renvoyer mais il ma suppr les msg

[void anvil]

Merci je vais tenter ça

[olive wind]

@true schooner
Du coup je te remets ça ici :
Là pour l'incrémentation il va falloir le faire en js
En gros il faut que tu récupères ton bouton en js et que tu ajoutes une méthode qui s'active au click permettant d'incrémenter un compteur

[true schooner]

ok

des exemple? (tuto, autre)

@olive wind ?

[rustic anvil]

voici quelques mots clés pour tes recherches :
document.querySelector
.addEventListener
innerHTML

[true schooner]

ok mrc

[olive wind]

hésite pas si tu galères sur une de ces notions

[true schooner]

ok

[true schooner]

alors... (je suis nul je sais)

[olive wind]

y'a pas de problème bg on est tous passé par là

je peux voir ton html ?

[true schooner]

ok

[olive wind]

en gros ton erreur te dit que tu appliques ton addEventListener sur un élément vide

donc ça sous entend que l'élément n'est pas récupéré comme il faut

[true schooner]

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./index.js" ></script>
    <title>trick or treat</title>
</head>
<body>
    <header></header>
    <div class="midlle">
        <div class="text">
            <h2>Clickez sur le bouton pour récolter des bonbons</h2>
        </div>
        <div class="button">
            <button>Récolter des bonbons</button>
        </div>
    </div>
    <footer>
        <h6>© Angelo 2023 - 2030</h6>
        <h6>Powered by <a href="https://github.com">github</a></h6>
    </footer>
</body>
</html>

[olive wind]

Alors il y a une règle de base quand on utilise un script extérieure, il faut toujours l'importer en bas de sa page html
Là tu l'appelles avant de déclarer ton bouton

Donc ton erreur devrait venir de là

[true schooner]

ok

[olive wind]

Mets le juste en dessous ton footer

[true schooner]

c bon

[olive wind]

plus d'erreur ?

[true schooner]

nan j'essais de modif des truc dans mon js

[olive wind]

tu as toujours la même erreur ?

[true schooner]

nan

pu d'erreur

comment je peux faire pour que quand je click ça ajoute un

car la c juste ça defini click a 1

[olive wind]

fais un console.log(click) dans ton js

[true schooner]

fait

[olive wind]

dans ta méthode ?

[true schooner]

oui

ça renvoi 1

[olive wind]

il n'incrémente pas quand tu cliques sur le bouton ?

si tu appuies ça n'augmente pas ?

[true schooner]

bon après j'ais le pire js regarde

[olive wind]

ah

normal

[true schooner]

const btn = document.querySelector("button")

btn.addEventListener("click", () => {
    let click = 0
    
    click = click + 1

    console.log(click)
})

ça se voi direct

[olive wind]

tu déclarés ton click = 0 dans ta fonction du click

[true schooner]

oui...

[olive wind]

mets le juste au dessus mdr

et ça devrait être bon

[true schooner]

c bon

[olive wind]

après tu n'as plus qu'à l'intégrer à ta page et ce sera good

[true schooner]

maintenant jveux afficher ça au dessus du bouton

avec quoi peu faire ça?

[olive wind]

tu peux te faire une petite balise p au dessus de ton bouton, tu ne mets rien dedans
et dans ton code js tu fais un p.textContent = click;

ou alors faire avec une méthode innerHtml

tu peux trouver une doc dessus

[true schooner]

ok

[olive wind]

les 2 méthodes fonctionnent

[rustic anvil]

alors non, ça c'est sale ^^
il faut addeventlistener load, pour initialiser son script apres le chargement de la page :)

[olive wind]

Pour une simple page comme celle-ci ça suffit '--'

[rustic anvil]

mauvaise pratique :p et copier coller un code source à coté te permet d'avoir une belle structure rapidement, car s'il faut la retaper plus tard bof bof :3

-> fonctions
-> variables vides
-> appeler init, pour set variables
-> jouer avec la page (boutons, etc)

[true schooner]

alors ...

[olive wind]

Je suis en voiture je te réponds juste après

[true schooner]

pdp

[rustic anvil]

....innerHTML = ta variable

ce n'est pas une fonction

p.innerHTML= "valeur : "+click;

[true schooner]

ok mrc

[true schooner]

mtn que j'ais ça comment jpeu mattre le bouton a droite en dessuous et que quand on click dessus ça ajoute le nombre de click (bonbon récolté) a une bdd

ensuite faut que ça recharge la page

[rustic anvil]

(tu as surement un raccourcis pour démarrer/arreter bandi cam)
oui, JS peut envoyer au backend les infos, il vaut mieux mettre un délay :
si spam alors attend 5secondes avant d'envoyer, puis envoi le groupe de changement
bref perfs / opti :)

[true schooner]

des (encore) exemple/tuto/docs ?

[rustic anvil]

init :
score = 0;
memo_time = Date.now();
memo_score= 0;
loop();

nouveauté :
score++;

loop :
if ( memo_score != score && Date.now() > time+5000 ){
fetch_post( score ); // fonction à faire
memo_time= Date.now();
memo_score = score;
}
requestAnimationFrame( loop );
// un truc du genre

(d'ailleurs on est dans le mauvais salon, faudrait aller en JS)

[true schooner]

c vrais

[true schooner]

@olive wind j'ais un problème

https://github.com/AngeloAgius-dev/trick-or-treat/tree/main/src

https://angeloagius-dev.github.io/trick-or-treat/src/index.html

le js ne veux plus

[olive wind]

Tu peux me détailler le problème bg @true schooner

[true schooner]

en gros j'ais hebergé le site sur github et le js ne fonctionne oas pourtant tout est bien

en gros le fichier index.js veux pas

[olive wind]

ça te met quoi comme erreur ?

@true schooner

[true schooner]

rien

regarde le site

[olive wind]

tu dois avoir un pb dans l'arbo

[true schooner]

comment ça?

[olive wind]

Tu n'aurais pas modifié la façon dont sont rangés tes fichiers / dossiers en le mettant sur github ?

[true schooner]

nan

[true schooner]

réglé (ct pas ça)

[brave jay]

le fameux point 😄

j'etait entrain de check

[true schooner]

yep

plus qu'a co a une bdd et ajouter un bouton en plus

[olive wind]

ah j'avais pas eu le temps de mettre mon nez dans ton code sorry bg

[true schooner]

pg

[void anvil]

Bonsoir les gens, comment il faut faire pour créer un effet de vague sur un site ?

Sur un bord de bloc par exemple (une image dans mon cas)

[errant cypress]

https://getwaves.io/

[void anvil]

can anybody help me? Tag me and I'll call you private

[frosty rock]

Private is not allowed here. You can post your problem and wait for someone to reply to you

[frosty rock]

Bonjour, je souhaiterai mettre une vague dans le fond de mon site mais elle apparait trop de fois ? Sauriez vous pourquoi ? Voici le CSS correspondant : css main { color: #82909e; background-color: #25303B; background-image: url(/img/wave.svg); } Merci d'avance pour votre réponse !

[broken oriole]

Je pense tu peux mettre :

background-repeat: no-repeat;

[frosty rock]

Ok

[broken oriole]

Hésite pas à me dire si ça a marcher !

[frosty rock]

Il n' y en a plus qu'un

Mais il est en haut

Ah c'est bon

[broken oriole]

maintenant il te reste juste à le positionner avec background-position, tu as un site qui peut t'expliquer comment ça fonctionne assez facilement :

https://developer.mozilla.org/fr/docs/Web/CSS/background-position

[frosty rock]

Merci

[broken oriole]

pas de soucis!

[rapid patio]

Bonjour Bonjour je suis actuellement en apprentissage du HTML et du CSS sauf que je galère un peut, j'aimerais savoir si quelqu'un a des astuces pour moi des site sur les quels je peut apprendre etc...

Très bonne journée a vous !

[primal verge]

bonjour , jusqu'a maintenant tu apprenais comment ?

[rapid patio]

avec sa
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3

[primal verge]

ok je peux te conseiller de regarder des videos youtubes notament celles de Grafikart ou From Scratch qui sont très bien

Perso j'ai appris grace à sa l'html et la je suis sur le css

[rapid patio]

okay je vais check sa merci !

[primal verge]

pas de problème

[rapid patio]

Bonsoir !!

j'aurais besoin d'aide pour quelques petits problèmes que j'ai dans mon code HTML et CSS et que je n'arrive pas a résoudre

[ornate pike]

Bien sûr, quels sont-ils ?

[rapid patio]

Alors en premier j'aimerais separer un petit peut les texte entouré en rouge de celui en rouge mais je vois pas comment faire sachant qu'ils sont dans le meme "block"

j'aimerais que sa donne sa

[ornate pike]

Tu as un ul en display flex avec les li dedans ?

[rapid patio]

exact !

[ornate pike]

Alors dans le style de ton ul, met en propriété justify-content: flex-start; et ajoute la propriété gap: taille(px,rem,em,vh); par exemple gap: 10px;

Car si je vois sur le screen de l'objectif tout est aligné au début ? Sur la gauche ?

[rapid patio]

la première partie des a gauche et la cloche et le profil sont a droite

    <h1>
    <ul class="nav-anim">
      <li>
        <a href="index.html">Accueil</a>
      </li>
      </li>
       <li><a class='boutique' href="shop.html">Boutique</a>
      </li>
       <li><a href="Vote.html">Vote</a>
      </li>
       <li><a href="rules.html">Règlement</a>
      <li>
       <a href="wiki.html">Wiki</a>
      </li>
      <li><a href="support.html">Support</a>
      </li>
      <li><a href="forum.html">Forum</a>
      </li>
      <li><a href="changelog.html">Changelog</a>
      </li>
      <li class="menu-deroulant">
        <a href="#"></a></script><iconify-icon icon="bi:bell"></iconify-icon>
        <ul class="sous-menu">
          <li>Notifications</li>
        </ul>
      </li>
      <li class="menu-deroulant">
        <a href="#">Nom-joueur</a>
        <ul class="sous-menu">
          <li><a href="#">Mon Profil</a></li>
          <li><a href="#">Mon Skin</a></li>
          <li><a href="#">Mes achats</a></li>
          <li> <img src="IMG/logout.png" alt="Déconnexion" height="15" width="15"><a href="#">Déconnexion</a></li>
        </ul>``

Voici le code html si sa peut aider

[ornate pike]

Ok, alors ce que je te recommanderais, c'est de séparer tes 2 partie, jaune et rouge, par des div

[rapid patio]

oh sa a tout casé

x)

[ornate pike]

Qui sont regroupées dans un ul qui celui ci aura comme propriété justify-content: space-between; cela va faire que tes deux parties seront chacune à droite et gauche. Puis dans la div remettre le display flex avec cette fois ci la propriété gap dedans

[rapid patio]

alors j'pense j'ai fait une gaffe sa a tout cassé x)

esque c'est mieux si je te partage le code avec l'exetension live share sur vs code ?

[ornate pike]

 <nav class="nav-p"> 
    <h1>
<!-- Dans cet ul la propriété justify-content: space-between; -->
    <ul class="nav-anim">
   <!-- Dans cette div display flex et gap-->
    <div>
      <li>
        <a href="index.html">Accueil</a>
      </li>
      </li>
       <li><a class='boutique' href="shop.html">Boutique</a>
      </li>
       <li><a href="Vote.html">Vote</a>
      </li>
       <li><a href="rules.html">Règlement</a>
      <li>
       <a href="wiki.html">Wiki</a>
      </li>
      <li><a href="support.html">Support</a>
      </li>
      <li><a href="forum.html">Forum</a>
      </li>
      <li><a href="changelog.html">Changelog</a>
      </li>
    </div>
    <div>
      <li class="menu-deroulant">
        <a href="#"></a></script><iconify-icon icon="bi:bell"></iconify-icon>
        <ul class="sous-menu">
          <li>Notifications</li>
        </ul>
      </li>
      <li class="menu-deroulant">
        <a href="#">Nom-joueur</a>
        <ul class="sous-menu">
          <li><a href="#">Mon Profil</a></li>
          <li><a href="#">Mon Skin</a></li>
          <li><a href="#">Mes achats</a></li>
          <li> <img src="IMG/logout.png" alt="Déconnexion" height="15" width="15"><a href="#">Déconnexion</a></li>
   </div>
        </ul>```

[rapid patio]

encore pire x) j'pense c moi qui ai fait une betise

[ornate pike]

Pourquoi, ça te donne quoi ?

[ornate pike]

Ah oui, tu as gardé le display flex dans le ul aussi ?

[rapid patio]

Attend 30seconde je regarde sa (c un peut le bazzard dans mon code)

je sais pas si sa peut t'aider mais le CSS sa donne sa

[ornate pike]

Ah oui je vois

[rapid patio]

j'pense je manque d'organisation hehe

[ornate pike]

Dans le ul enlève le flex start

[rapid patio]

sa a rien changé

[ornate pike]

Et ensuite dans les 2 div met display flex alignitems center justify center

[rapid patio]

je peut aller en vocal et stream si sa t'aide

toujours pas sa a tout cassé 0_0

[ornate pike]

Ok oui dans une petite dizaine de minutes je peux venir en voc

Tu as encore du code pour le body ?

Ça peut interférer

[rapid patio]

j'ai tout sa

<body>
<nav class="nav-p">
<h1>

  <nav class="nav-p"> 
    <h1>
<!-- Dans cet ul la propriété justify-content: space-between; -->
    <ul class="nav-anim">
   <!-- Dans cette div display flex et gap-->
    <div>
      <li>
        <a href="index.html">Accueil</a>
      </li>
      </li>
       <li><a class='boutique' href="shop.html">Boutique</a>
      </li>
       <li><a href="Vote.html">Vote</a>
      </li>
       <li><a href="rules.html">Règlement</a>
      <li>
       <a href="wiki.html">Wiki</a>
      </li>
      <li><a href="support.html">Support</a>
      </li>
      <li><a href="forum.html">Forum</a>
      </li>
      <li><a href="changelog.html">Changelog</a>
      </li>
    </div>
    <div>
      <li class="menu-deroulant">
        <a href="#"></a></script><iconify-icon icon="bi:bell"></iconify-icon>
        <ul class="sous-menu">
          <li>Notifications</li>
        </ul>
      </li>
      <li class="menu-deroulant">
        <a href="#">Nom-joueur</a>
        <ul class="sous-menu">
          <li><a href="#">Mon Profil</a></li>
          <li><a href="#">Mon Skin</a></li>
          <li><a href="#">Mes achats</a></li>
          <li> <img src="IMG/logout.png" alt="Déconnexion" height="15" width="15"><a href="#">Déconnexion</a></li>
   </div>
        </ul>

</li></ul></h1></nav>
<p class="welcome">Bienvenue sur le site officiel de Skyria ! Skyria est un serveur
Semi-RP et Skyblock 1.20 !</p>
</body>

[ornate pike]

Alors déjà pourquoi tu as des balises h1 ?

Surtout 2

Avec une double nav

Je crois que t'a un bout de dupliquer

[rapid patio]

alors justement c le second probleme enfaite quand je les enleve sa fait nimporte quoi hehe

[ornate pike]

Hum... Attends on va voir tout ça en voc dans pas longtemps, ça sera plus simple 😅

[rapid patio]

pourtant les balises h2 sont sélectionner nul part

[rapid patio]

je pense oui haha

[rapid patio]

euh j'pense que se soir sa va être compliqué de voc enfaite sa te dérange si on décale sa a demain aprem ?

[ornate pike]

Demain je vais pas pouvoir je vais être dans l'avion une grande partie de la journée, mais là je peux si tu as 5min

[rapid patio]

aller go alors

[covert verge]

tu te casse la tete, tu met un id special au dernier element et du margin rifgt

[rapid patio]

0_0

[ornate pike]

Le souci de ça c'est que tu n'a aucune responsive et adaptation

[covert verge]

oui et non, dans la pratique je suis d'accord avec toi, mais en réaliser, pour un élèments de se type, ça pas vraiment d'impact

[void anvil]

Can someone help me?

website without computer:

and on mobile:

but not all the cards appear, someone help me

my css code

/* Media Queries */
@media screen and (max-width: 1470px) {
  .card-container {
    width: 300px;
  }
  .card:last-child {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 1150px) {
  .card-container {
    flex-direction: column;
    width: 300px;
  }
  .card:nth-child(3) {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 770px) {
  .card-container {
    width: max-content;
  }
  .card:nth-child(2) {
    display: flex;
    flex-direction: column;
  }
}

[covert verge]

flex-wrap

[void anvil]

I don't know where to put it, I don't understand anything about CSS

[brave jay]

@still kelp

[covert verge]

you chose a display flex
juste add flex-wrap : wrap ;
wrap gonna skip to next line

[dawn lake]

hello is there anybody french here ?

I need a piece of code really fast

[frosty rock]

On parle presque tous français ici

[frosty rock]

#poster-une-recherche

[dawn lake]

c'est forcément payant ?

[frosty rock]

Non

Mais les offres gratuites sont moins visionnées

[brave jay]

Mais tu peux tenté en expliquant ton problème ..

[frosty rock]

Aussi

Mais bon vu qu’il demande carrément du code…

[void anvil]

nothing changed on my website

[unborn lynx]

Hey, je suis nouveau sur le serveur,
Et nouveau codeur html, j’essaye de faire un site web mais le problème c’est que j’ai fais ma page de connexion
Mais comment est-ce que je fais pour qu’après que la personne se sois inscrit / connecte sa la transfert sur le vrai site ( je sais pas si vous avez compris ^^´´

J’ai le code de la page de connexion si jamais

[lunar schooner]

Hello j'aurais besoin d'un petit coup de main pour mon site web, je n'arrive pas à integrer mon ancienne backup FTP sur mon nouveau site via le FTP ça me met erreur 403 etc...

[storm folio]

Alors il te faudra une base de donnés le plus simple généralement c'est avec une base MySql pour interagir avec celle ci tu peut utiliser PHP ou sinon utiliser une framework JS le permettant. Pour ce qui est de la parti fonctionnel il y a beaucoup de tutos disponibles sur internet c'est pas très compliqué

[storm folio]

Plus de détail peut être ?

[unborn lynx]

Il est partis dans php pour plus de détail ^^

[storm folio]

J'ai vu oui :p

[unborn lynx]

merci pour ta réponse ^^

[patent igloo]

Hello, je ne sais pas si c'est le bon channel mais j'ai un problème avec mon site quand j'entre le nom de domaine cela m'ouvre une page blanche mais une fois que je met url/index.html cela m'ouvre bien mon site comment je peux faire pour que index.html soit relier directement au nom de domaine et le faire disparaître de mon url comme pour youtube .com et twitch . tv par exemple on ne voit pas index.html ou quelque chose du genre.

[hazy spade]

Il me semble que c'est lié à la configuration de ton hebergeur

Soit via le .htaccess ou directement la configuration via le panel de contrôle de l'hebergeur

[patent igloo]

Je n’est pas de fichier .htaccess et je suis sur cpanel tu sais si je peux configurer directement dessus ?

[empty tartan]

@patent igloo nginx ou apache2

En tout cas c'est le paramètre index qui faut changer

[patent igloo]

apache

[empty tartan]

https://ubiq.co/tech-blog/how-to-change-default-index-page-in-apache/

https://bobcares.com/blog/how-to-change-default-index-page-in-cpanel/

[frosty rock]

Bonjour j’ai un site fait avec Node js (express, ejs et sequelize pour être précis) et j’aimerais savoir comment le mettre en ligne. Auriez vous un bon tuto ou pourriez vous m’expliquer la démarche ? Merci d’avance pour votre réponse

[tame forge]

La démarche est la même que pour n'importe quel programme nodejs :

• tu upload tes fichiers
• tu install les packages
• tu lance le programme (je te conseille d'utiliser pm2 et d'activer le service pour qu'il démarre avec ta machine pm2 startup)
  Mais par contre, tu vas devoir installer un serveur web comme caddy, nginx ou apache2 si tu veux pas accéder à ton site sur 0.0.0.0:0000 👀

[frosty rock]

Ok il faut que je prenne quel type de serveur ?

[tame forge]

perso, je préfère nginx à apache et j'ai jamais testé caddy, mais j'en entend du bien ^^

[frosty rock]

Oui mais il faut un vps ou autre chose ?

[tame forge]

ah x)

Un VPS oui ^^

[frosty rock]

Ok

Merci

[empty tartan]

@frosty rock je te conseil Hetzner couplé avec du cloudflare pour faire ça

Ou tu peux aussi prendre du OVH

[frosty rock]

Ok

[patent igloo]

Super merci désolé je n'avais pas vu le message

[heavy musk]

Il y a pleins de manières différentes pour déployer ton application.

La vraie question n’est pas de savoir comment la déployée mais plutôt quelle méthode vais-je employer pour déployer mon application ?

Quel type de serveur vais-je utiliser ? Ce serveur va-t’il héberger d’autres services ?

Bref sinon la meilleure méthode de déploiement ça reste sous Docker

[frosty rock]

C’est quoi le plus simple pour un débutant ?

[heavy musk]

Faire appel à un professionnel dont c’est le métier ?

[frosty rock]

Et j’ai une autre question est-ce qu’il est possible d’avoir un certificat SSL gratuitement ? Ou est ce le seul moyen d’avoir HTTPS ?

[frosty rock]

Mon seul problème est la mise en ligne c’est la première fois que je le fais

[empty tartan]

@frosty rock tu marque ce que tu veux faire en anglais sur Google et tu trouveras beaucoup de tuto en ligne

[dapper grotto]

https://letsencrypt.org/fr/

[frosty rock]

Ok merci

[dapper grotto]

Np 👌

[heavy musk]

Passe en vocal ce soir

Actuellement je suis en déplacement en professionnel à Paris, je devrais rentrer dans la soirée

[frosty rock]

Non merci c’est bon je vais me débrouiller seul. Je voulais juste pouvoir savoir comment faire et ce que ça allait me coûter. Merci beaucoup pour votre aide

[heavy musk]

Débrouille toi seul alors, je te proposais simplement de te donner des conseils en tant qu’expert dans le domaine

[frosty rock]

En fait le site que je souhaite mettre en ligne n’est même pas fini il me reste quelques bugs à corriger donc j’attends d’avoir fini pour passer réellement à cette étape

[austere lark]

Banned le victor, il apprendra a mieux parler la prochaine fois ...
En vrai ca va, ca doit faire que le 5ème serv de dev où il est ban

[gaunt yoke]

te galère pas avec Docker dès le début, si tu débutes commence avec pm2, step by step

[frosty rock]

Ok

[frosty rock]

Comment tu sais ?

[austere lark]

Tu parles de PM2 le super service partenaire avec Creators Area ?

[austere lark]

C'est mon rôle de savoir ce qui ce passe sur les serv de dev

[frosty rock]

Ça explique tout

[dawn lake]

Bonjour. J'ai un petit souci.

J'ai créé un site Web en html et CSS et Js. Mais comme c'est en local toutes les images ne s'affichent plus. Je ne sais pas qoui faire pour régler le souci. Merci, bonne soirée

Il faut savoir que j'ai transféré le fichier via Google drive

[vale holly]

J’ai pas compris ta question, tu passes de local à hébergement ? Ou l’inverse

[frosty temple]

Hello
Comment peut-on faire pour changer la page par défaut de l'erreur 404 ?

[empty tartan]

Bah déjà tu veux le faire avec quoi

[frosty temple]

?

J'ai pas un très haut niveau en html/css et quasiment aucune connaissance en php/JavaScript.
Mais je dois réaliser un Portfolio.

[empty tartan]

Bah t'a plusieurs moyen genre depuis ton serveur web , ou avec un .htaccess

[frosty temple]

Je pourrais faire un site moche et style 2008 mais je préfèrerai faire quelque chose de mieux :)

[frosty temple]

Je ne sait pas trop quoi te répondre, j'ai une maquette de ce à quoi j'aimerai que ma page error 404 ressemble mais je ne sait pas comment m'y prendre. J'imagine que je dois réaliser la page en html/css mais après ça, aucune idée !

[empty tartan]

Nginx ou apache2 déjà ton serveur ?

[frosty temple]

Aucun serveur pour l'instant

à l'instant T j'ai juste le projet

j'essaye de rassembler un max d'info avant la réalisation

Je pense l'héberger en local, tu me conseillerai quoi ? Nginx ou Apache ?

[empty tartan]

Nginx

[frosty temple]

Pourquoi Nginx ?
Désolé je suis chiant mais comme dit c'est pour un projet donc le max d'info me sera utile si je vais décrocher mon BTS ^^'

[empty tartan]

C'est juste ma préférence

[tame forge]

Tu crée une page web classique. Il faut juste que tu configure ton serveur web pour qu'il redirige les requêtes 404 vers cette page :)

nginx : https://owlhowto.com/how-to-create-a-custom-error-404-page-on-nginx/
apache2 : https://www.digitalocean.com/community/tutorials/how-to-create-a-custom-404-page-in-apache

[storm folio]

Pas besoin de toucher à la config du serveur web ont peut juste faire la redirection avec le .htaccess

[tame forge]

Ah yep aussi x)

[frosty temple]

Nickel, merci 👍

[lethal star]

help

[surreal vault]

Yes ?

[lethal star]

j'ai trois fichiers pour faire une barre de navigation :

[surreal vault]

ok

[lethal star]

j'arrive pas upload

att

index.html:

<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<meta name="Description" content="Description du site"/>
<meta name="author" content="Animatronix" />
</HEAD>
<BODY>
<header>
<nav>
<li class="logo"><img src="./favincon.png"></img></li>
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc2</a></li>
<li class="signup"><a href="#">signup</a></li>
<li class="login"><a href="#" style="color: #fff;">login</a></li>
</ul>
</nav></br></br></br>
<div class="banner"></div>
</header>
</BODY>
</HTML>

puis: style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
nav {
display: inline;
}
.nav {
float: right;
}
.nav li {
display: inline;
}
.nav li a {
text-decoration: none;
font-weight: 500;
font-family: 'Roboto', sans-serif;
color: #313131;
text-align: center;
padding: 15px;
}
.signup {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border: 1px #313131 solid;
border-radius: 20px;
}
.login {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
background-color: blueviolet;
border-radius: 20px;
}
.login a {
color: #fff;
}

voila :3

[surreal vault]

ça fait 2

C'est quoi le soucis ?

[lethal star]

il y a le logo aussi

[surreal vault]

<!DOCTYPE html>
<HTML lang="fr">
    <HEAD>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="./style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Homepage</title>
        <meta name="Description" content="Description du site"/>
        <meta name="author" content="Animatronix" />
    </HEAD>
    <BODY>
        <header>
            <nav>
                <li class="logo"><img src="./favincon.png"></img></li>
                <ul class="nav">
                    <li><a href="#">home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">etc</a></li>
                    <li><a href="#">etc2</a></li>
                    <li class="signup"><a href="#">signup</a></li>
                    <li class="login"><a href="#" style="color: #fff;">login</a></li>
                </ul>
            </nav></br></br></br>
            <div class="banner"></div>
        </header>
    </BODY>
</HTML>```

Déjà

[lethal star]

j'arrivait pas a le faire

[surreal vault]

On fait pas HTML HEAD BODY, on fait <html><head></head><body></body></html>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
nav {
    display: inline;
}
.nav {
    float: right;
}
.nav li {
    display: inline;
}
.nav li a {
    text-decoration: none;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: #313131;
    text-align: center;
    padding: 15px;
}
.signup {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border: 1px #313131 solid;
    border-radius: 20px;
}
.login {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    background-color: blueviolet;
    border-radius: 20px;
}
.login a {
    color: #fff;
}```

[surreal vault]

En gros, retire les majuscules

[lethal star]

tu veut dire qu'on le fait pas en majuscules

[surreal vault]

non

y a que doctype en maj

[lethal star]

ah

je n'arrive jamais a faire une navbar et ca me soule (le css en général)

[feral pier]

Bonjour,
J'ai un gros gros problèmes avec mes extensions en ce moment, dès que je veux télécharger une extensions ça me met ce message d'erreur 😅

Ah c'est bon j'ai réglé le problèmes^^

[somber belfry]

Bonjour, j'essaie de faire un petit site web et je voudrais faire en sorte que ce soit responsive mais j'ai un petit problème... bah c'est pas trop responsive qui pourrais m'indiquer comment améliorer cela ?
mon code ```css
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin-top: 12.5%;
gap: 100px;
padding: 100px 100px;
overflow: auto;
bottom: -2.5%;
background-color: aqua;

.container .card {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 525px;
max-width: 100%;
height: 400px;
background: white;
border-radius: 20px;
transition: 0.5s;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
}```

[storm folio]

Sur le dernier ta du mettre un margin left quelque part , regarde avec l'inspecteur

[eternal ember]

Salut, j'ai une erreur sur mon Oauth2 avec Discord honnêtement je ne comprend pas car ça marchait et d'un seul coup plus rien alors je vois pas d'où ça peut venir si quelqu'un peut m'aider :

<!DOCTYPE html>
<html>
    <head>
        <title>My Discord OAuth2 App</title>
    </head>
    <body>
        <div id="info">Hoi!</div>
<a id="login" style='display: none;' href="lien-oauth2">Identify Yourself</a>
<script>
    window.onload = () => {
        const fragment = new URLSearchParams(window.location.hash.slice(1));
        const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')];

        if (!accessToken) {
            return (document.getElementById('login').style.display = 'block');
        }

        fetch('https://discord.com/api/users/@me', {
            headers: {
                authorization: `${tokenType} ${accessToken}`,
            },
        })
            .then(result => result.json())
            .then(response => {
                const { username, discriminator } = response;
                document.getElementById('info').innerText += ` ${username}#${discriminator}`;
            })
            .catch(console.error);
    };
</script>
    </body>
</html>

L'erreur en question.

[surreal vault]

Hello, la seconde erreur signifie juste qu'il ne trouve pas le font

c'est pas génant

Et si tu veux, tiens, un code que j'ai fais mais qui a jamais servi

https://codepen.io/l0ulou59/pen/RwEqPPy

Il est facile à modifier

[eternal ember]

Alors pourquoi ça ne connecte pas le compte discord ?

[eternal ember]

Sympa.

[feral pier]

Sur ton dernier bloc t'as dû mettre un bon margin-left tu peux regarder si tu cliques sur ton dernier bloc qui te pose problème avec le mode inspecter* puis tu regardes ton CSS voir si y'a pas un élément que tu as rajouté sans faire attention

[somber belfry]

Hmm j'ai bien vérifié et oui il y'a ca

Mais pourtant dans le code il n'y a rien de tel

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body {
    background-color: rgba(44, 47, 51, 1);
    font-family: "Rubik",sans-serif;
}

.container {
    display: flex;
    justify-content: space-evenly;
    background-color: aqua;
}

.card {
    width: 325px;
    height: 300px;
    border-radius: 20px;
    background: rgb(31, 29, 29);
}```

[somber belfry]

Je ne sais pas d'ou viens ce petit rectangle en plus a droite...

J'ai trouvé l'erreur ! Cela proviens de mon HTML... ma div container se fermais avec la balise <div> et non pas </div>

[eternal ember]

Bonjour, quelqu'un sait comment je peux résoudre cette erreur sur Express.js ?

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

[austere lark]

Envoie ton code dans #javascript-typescript

[eternal ember]

Je fais ça 😉

[feral pier]

aah mdr t'as pas fermé le bloc

[frosty temple]

Bonsoir

Comment je pourrais faire pour aligner les carrés de couleur :

J'ai réussi à les mettre en ligne comme ceci mais pas les centrer correctement

Comment est-ce que je peut faire pour que les couleurs soit en dessous du mot Colors ?

[fair cove]

Bonsoir, j'ai un problème depuis quelque temps, je débute en html et css, j'ai un problème qui persiste sur mes class, je n'arrive pas a modifier ma balise "a" même si elle est dans ma class

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Site Alec</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="design.css">
</head>
<body>
<nav>
<h1>Test d'un site</h1>
<div class="navigation">
<a href="index.html">Acceuil</a>
<a href="page_2.html">Indice</a>
<a href="page_3.html">Object</a>
</div>
</nav>
<section>
<article>
<div class="test">
<img href="perso.JPG" alt="illustration">
<a href="Page.html">Lien de l'article</a>
</div>
</article>
</section>

</body>

</html>

body{
background-color:#ECF0F1 ;
}
nav{
background-color: #A9DFBF;
padding: 20px;
margin: -20px;
box-shadow: inset;
}
.navigation{
border-style: solid;
border-color: transparent;
padding: 10px;
color: black;
text-decoration: none;

}
.navigation:hover{
border-color:#7DCEA0 ;
background-color: #7DCEA0 ;
cursor: pointer;
border-radius: 3rem;
}
h1{
text-align: center;
text-decoration: underline;
}
.test{
border-style: solid;
border-color: #B3B6B7;
background-color: #B3B6B7;
border-radius: 3rem;
margin: 30px;
padding: 20px;
text-decoration: none;
color: black;
object-position: left;

}

[brave jay]

Ta classe navigation est sur la div au lieu d’être sur les élément « a »

[fair cove]

je devrais l'écrire comment du coup?

<a class="nom"></a> ?

[brave jay]

Oui

[fair cove]

ok merci

[feral pier]

Alors sur ta <div class="navigation">

Ça peut aussi marcher, cependant dans ton bloc faudra appeler le "a"

Par exemple dans ton CSS tu pourras faire:

.navigation a{}

Mais c'est toujours mieux de mettre la classe avec le a.

[fair cove]

Oui j'avais essayer mais j'avais eu un problème il me semble

[fair cove]

J'avais fais des tests avant d'envoyer ici

[void anvil]

Bonjour, vous savez comment je peux reproduire à peu près ce même style mais j'aimerai écrire NBM à la place sur mon site avec cette police ( j'la kiffe xD )

[void anvil]

J'ai rien dis j'avais oublié notre bon vieux * SVG * x)

[void anvil]

Re, petit problème

mon nbm n'est pas aligné alors que l'ancien logo est bien aligné, vous savez comment je peux le modifier? c'est un fichier svg, dites moi si y'a besoin que j'envoi des informations ou autre

[glass plinth]

@void anvil poste ton code sinon ça va être compliqué

[void anvil]

J'ai trouvé c'est juste mon viewBox qui niq*** tout

[void anvil]

Bonjour, j'ai une question.

J'ai mon logo sur mon site en SVG et j'aimerai qu'il change de couleur ( noir au blanc ou blanc au noir ) en fonction du thème du site quand on clique sur le changement de thème :

<a href="#" class="header__logo">
        <span class="visually-hidden">NBM</span>
        <svg class="logo-svg" width="84" height="27" aria-hidden="true"  xmlns="http://www.w3.org/2000/svg">
          <path d="M29.5,10.35v7.44h-3.4v-7.83c0-1.43-.98-2.32-2.14-2.32-1.4,0-2.29,1.03-2.29,2.41v7.73h-3.4V4.91h3.32v1.5c.54-.89,1.77-1.82,3.45-1.82,3.67,0,4.46,3.03,4.46,5.76Z"/>
          <path d="M32.06-.01h3.4V6.26c.32-.44,1.6-1.67,3.82-1.67,3.69,0,6.11,2.78,6.11,6.77s-2.61,6.75-6.3,6.75c-2.19,0-3.47-1.23-3.82-1.65v1.33h-3.2V-.01Zm6.6,15.12c1.92,0,3.3-1.43,3.3-3.72s-1.33-3.79-3.3-3.79-3.3,1.38-3.3,3.79c0,2.04,1.23,3.72,3.3,3.72Z"/>
          <path d="M65.73,17.79h-3.4v-7.71c0-1.53-.76-2.44-2.02-2.44s-2.09,.91-2.09,2.46v7.68h-3.4v-7.83c0-1.45-.74-2.32-1.99-2.32s-2.09,.91-2.09,2.44v7.71h-3.4V4.91h3.32v1.5c.47-.89,1.6-1.82,3.35-1.82,1.65,0,2.86,.74,3.52,1.92,.76-1.18,2.09-1.92,3.82-1.92,2.93,0,4.38,1.94,4.38,4.7v8.49Z"/>
        </svg>
    </a>

:root {
  --logo-filter-light: brightness(100%);
  --logo-filter-dark: brightness(50%);
}

[color-scheme=light] {
  --clr-neutral-100: var(--clr-neutral-100-light);
  --clr-neutral-200: var(--clr-neutral-200-light);
  --clr-neutral-300: var(--clr-neutral-300-light);
  --clr-primary: var(--clr-primary-light);
}

[color-scheme=dark] {
  --clr-neutral-100: var(--clr-neutral-100-dark);
  --clr-neutral-200: var(--clr-neutral-200-dark);
  --clr-neutral-300: var(--clr-neutral-300-dark);
  --clr-primary: var(--clr-primary-dark);
}

Je vois pas qu'est-ce que je pourrais modifier pour que ça le modifie, dites moi si vous avez besoin de code supplémentaire 🙂

[deft burrow]

à vérifier mais il me semble que tu peux mettre ton css en inline sur les svgs et que ça marche (faut juste cibler les paths etc avec des classes correctement)