#html-css

1 messages · Page 11 of 1

crude sphinx
#

Tu peux voc ?

rustic anvil
#

ouip

wild stump
#

utilise une grille

void anvil
#

Bonsoir,

#

Je débute totalement en html et je n'arrive à faire apparaître l'image sur la page pouvez-vous me dire si il ya une erreur ? Merci d'avance

Capture_decran_2024-05-29_225957.png comment_inserer_une_image.png
misty lotus
olive wind
void anvil
#

@olive wind @misty lotus Merci pour vos réponses !
Je vais faire comme vous avez dit

tame forge
#

Ah mince ça avait été déjà dit kapp

tame forge
void anvil
quartz tusk
void anvil
#

Salut j’aurais besoin d’aide

#

Voilà il y a une erreur toujours pas trouvé

#

Mais dans mon sidenav il y a les catégories et je voudrais rajouter des sous catégorie En mode accordéon

void anvil
#

Bon désolé mais ChatGPT est plus rapide

storm folio
#

après par pitié télécharge discord sur ton pc et fait des capture

brave jay
storm folio
brave jay
#

Ah oui pardon

storm folio
#

tu avait un <menu> (??) avant le <head>?

storm folio
# void anvil

Après pour faire un acordéon ducoup c'est comme chatGPT à fait mais tu doit utiliser des Listes donc <ul> pour unordered list donc une liste à puce et <ol> donc une liste ordonée sois une liste avec des chiffres 1,2,3....
Pour crée un élement dans une liste il faut utiliser l'élement <li>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

MDN Web Docs
: The Ordered List element - HTML: HyperText Markup Language | MDN

The HTML element represents an ordered list of items — typically rendered as a numbered list.

MDN Web Docs
: The Unordered List element - HTML: HyperText Markup Language | MDN

The HTML element represents an unordered list of items, typically rendered as a bulleted list.

MDN Web Docs
: The List Item element - HTML: HyperText Markup Language | MDN

The HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (), an unordered list (), or a menu (). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or let...

storm folio
void anvil
storm folio
#

Apprend les bases du HTML avec des cours comme sur W3School , Codecademy et OpenClassroom , tout ceux que je viens de citer sont gratuit

storm folio
void anvil
storm folio
void anvil
storm folio
void anvil
#

Et je regarderai c’est pour faire différentes page mais je sais pas comment on utilise les lien hypertexte

storm folio
#

si tu veux pas trop prendre de temps W3School ou Codecademy c'est sympa

void anvil
#

Pour lier une catégorie a une autre page

storm folio
#

dans l'élement a tu doit mettre un argument href sois la où tu veut aller

#

après tu peut utiliser un autre argument target si tu veut que ça s'ouvre dans le même onglet , un autre etc..
_self : le contexte de navigation actuel. (Par défaut)
_blank : généralement un nouvel onglet, mais les utilisateurs peuvent configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
_parent : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme _self.
_top : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme _self.

void anvil
#

Oui à la place du # ça je sais mais quand je le fait ça me dit page indisponible

storm folio
#

bah faut que la page existe

void anvil
#

Oui elle existe mais elle est sur mon ordinateur

#

Normalement en mettant le chemin d’accès ça devrait fonctionner

storm folio
#

par exemple j'ai :
index.html
AutrePage.html

depuis index.html pour aller à la deuxième je fais <a href="AutrePage.html"></a> Car ils sont dans le même dossier

#

https://www.w3schools.com/html/html_links.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

void anvil
#

Ok moi je mettais le chemin d’accès complet

storm folio
#

en théorie tu peut mais ça fonctionnera que sur ton ordinateur

#

il faut mettre des chemins relatifs la plus part du temps

void anvil
#

Ok ça marche

olive heron
#

C'est horrible X)

south hound
#

je recherche des gens pour m'aider sur un projet d'applicaton web de centralisation des notes

runic python
tame forge
#

Atom Material Icons

olive heron
#

Moi Codesanbox 🤩

#

Je gagne le concours

tame forge
#

gngngng

olive heron
tame forge
#

Et puis atom existe sur WebStorm

austere lark
#

La blague étais sympa Nolhan mais je vois déjà la team 1er degré arriver donc j’ai delete KaPOP

olive heron
#

Chit

olive heron
#

Je pense que Nolhan râle un peu par contre kappathugs

tame forge
#

T'as quoi à perdre de toutes façons ? Maintenant que Figma existe harold

tame forge
olive heron
#

Attend deux min je Check sur le site 😂😂😂

tame forge
brave jay
olive heron
#

Et bim !

south hound
brave jay
#

Hack the box c’est le meilleur !

runic python
olive heron
#

De quoi ?

brave jay
#

Theme

#

😄

olive heron
tame forge
#

Et puis moi c'est un pack d'icones

#

Sinon, le theme c'est one dark

tame forge
brave jay
#

Je me suis fait chier a le refaire sur webstorm aussi 😄

dusky skiff
#

Tous ceux qui disent le contraire sont des rageux

tame forge
#

Yep

#

Et il existe sur webstorm, donc ça le rend encore meilleur kapp

mighty vault
#

Bonjour, bonjour.

J'ai une petite galère sur mon projet, où j'utilise TailWind, impossible de coller le footer au pied de page.

Mon RootLayout :

import Footer from "./layout/Footer";
import Header from "./layout/Header";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen p-12 md:py-12 md:px-56">
      <Header />
      <div className="py-10">{children}</div>
      <Footer />
    </div>
  );
}
#

Et mon footer :

 return (
    <footer className="bg-black-100 mt-auto absolute flex flex-col items-center left-0 w-full text-center p-16 pt-8 rounded-tl-[64px] rounded-tr-[64px]">
      <Image
        src={"/images/footer-radial.svg"}
        className="absolute top-0 left-0 w-full h-full z-10"
        alt="logo"
        width={132}
        height={22}
      />
      <Image src={"/images/logo-w.svg"} alt="logo" width={132} height={22} />
      <div className="container mx-auto pt-2 z-20">
        <ul className="flex text-white flex-wrap justify-center">
          {navigationItems.map((item, index) => (
            <li key={index} className="m-2">
              <Link href={item.path}>{item.label}</Link>
            </li>
          ))}
        </ul>
      </div>
      <hr className="h-px w-full my-2 bg-white border-0 z-20" />
      <div className="flex justify-center md:justify-between md:pt-3 md:items-center md:w-full">
        <div className="flex justify-between md:w-3/12 space-x-3 md:pt-0 pt-3 z-20">
          <input
            type="email"
            placeholder="ex: thomas.durand@awarld.fr"
            className="bg-white text-center w-full px-2 py-3 md:py-2 rounded-lg"
          />
          <button className="bg-orange-900 text-white px-5 py-2 rounded-lg">
            {t("global.register")}
          </button>
        </div>
        <div className="absolute md:relative bottom-0 md:pb-0 pb-5">
          <span className="text-white relative">
            &copy; 2024 - {t("footer.all-rights-reserved")}
          </span>
        </div>
      </div>
    </footer>
  );
#

Et malheureusement impossible d'y coller mon footer, je suis preneur de toute aide 😉
Merci !

mighty vault
#

Trouvé ! C'était le h-screen sur un élément qui faisait de la merde

rustic anvil
#

ah bah j'allais le dire
non pas dutout, je ne connais que trop peu ce genre de chose
le h-screen est un equivalent de la mesure vh ?

mighty vault
#

Exactement, c'est équivalent à un 100vh

bright flower
#

Bonjour/Bonsoir je début d'en le développement de site web et afin d'apprendre et d'acquérir plus de connaissances en création de site web ( html, css, Javascript) j'ai comme projet (entrainement que je me suis donné) de créer un site web sur lequel on peut jouer au "baccalauréat" ou "Petit Bac". Pour cela il faut que je créer un tableau a chaque fois que l'utilisateur click sur un bouton qui a comme id="NewGame" ce bouton doit créer une partie et donc un tableau avec toutes les colonnes du jeux, sauf que je ne sais pas comment créer un tableau au quel on peut modifier les cases ( en entrant nos réponse).

#

je vous remercie pour votre aide.

#

(@ moi merciii)

rustic anvil
#

salut,
tu peux créer tes cases, puis en javascript tu memorise toutes tes cases avec let toutes= document.querySelectorAll('td')
ducoup tu peux remplir tes cases unes à unes par exemple : toutes[14].innerText= "ok";

bright flower
#

ok merci je teste ça ce soir

storm folio
storm folio
bright flower
#

merci pour ton aide

storm folio
#

Pas de soucis

rustic anvil
#

tiens nous au courant de ton projet :D

bright flower
hollow peak
tame forge
lost rover
#

bonjour quand je fais npm i discordjs/Commando sur la vidéo

#

7:03 / 32:14

Créer un bot Discord MUSIC avec Node.JS FACILEMENT - 01 - Lire une vidéo sur YouTube

#

sa marche pas

fierce shard
burnt thunder
#

Salut,
j’ai besoin d’aide, pour aucune raison mes polices ne s’affichent plus alors qu’avant elle s’afficher sans problème.

rustic anvil
#

salut, la console F12 -> réseau montre quoi quand tu maj+F5 (ou shift F5)

burnt thunder
rustic anvil
#

ok, et dans le réseau ça charge l'url avec un 404 c'est bien ça?

burnt thunder
#

ouai

rustic anvil
#

le site est peut être down,
tu peux clic droit ouvrir dans un nouvel onglet le ttf ? pour voir s'il affiche aussi 404
et ensuite aller à la racine du domaine pour voir si le site existe et est dispo

burnt thunder
#

oui il est encore dispo

rustic anvil
#

ok, hm je vois "16.2kb" donc il arrive à recup des infos o_o malgré le 404
est-ce que quand tu ouvre un onglet avec le lien ttf ça propose d'enregistrer un fichier ?

burnt thunder
#

non

rustic anvil
#

ah? je peux avoir ton fichier Sculpt.css ? je vais voir si jpeux avoir le ttf de mon coté

burnt thunder
#

yes je t'envoie

arctic olive
#

hello, est ce qu'il y a une propriéter pour enpêcher le fais de pouvoir copy/paste ou enregistrer les images de notre site ?

tame forge
#

non

runic python
#

Non, ce serait trop facile sinon kapp

brave jay
#

Après tu peux désactivé le clic droit avec js

rustic anvil
#

ou mettre une div transpa qui fait la taille de l'image par dessus, le clic droit proposera alors rien d'interessant pour l'utilisateur :3

spice imp
#

Rien n'empêchera l'utilisateur de télécharger s'il si un connais un tout petit peu, F12 -> Réseau -> Recharger la page, plus qu'a récupérer l'image charger

rustic anvil
#

s'il s'y connait, effectivement il n'y a aucune limite, comme une serrure de maison ou une sécurité réseau.
par contre y'a moyen de le ralentir voir de le décourager :3

spice imp
#

Ah oui totalement, un utilisateur qui n'a pas connaissance de cette outils ce dira juste qu'il ne peut pas la télécharger

rustic anvil
#

ouip, il la verra à l'écran, et ... n'aura pas grand accés
il faudra DL toute la page, ou alors F12->réseau->F5 :3 mais fo etr 1télijen

spice imp
#

Qu'elle bonheur de connaître une chose qui change la vie mdr

rustic anvil
#

oh oui.
parfois F12 déclenche du script qui bloque la page, donc téléchargement de la page
parfois la page ne peut être téléchargée donc ctrl+u + telechargement manuel de chaque fichier.
parfois pas possible ou trop long, donc... injection javascript
parfois l'injection est impossible car domaine différent donc injection en local...
xD bref y'a toujours une solution :)

spice imp
#

C'est ça 😂

loud jetty
#

Bonjour voilà j'aimerais mettre une image de fond comme dans l'exemplece ici : sauf que je n'arrive pas à le faire mon image est coupée où bien n'apparait pas dans certains cas voici mon HTML : et mon CSS :

image.png 📎 message.txt 📎 message.txt image.png
void anvil
#

@loud jetty

# 
body {
    font-family: 'Poppins', sans-serif;
    color: white;
}

.background-image {
    background-image: url('../imgs/R4_PNG.png') !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

mais à mon avis t'as juste besoin de faire un truc comme ça

loud jetty
#

J'ai déjà essayer sa fais la même choses :/ Je penses que ses parce que les artistes sont des blocs et que sa passe en dessous

void anvil
#

et c'est normal que ton truc marche pas y'a plein de problème, déjà t'as des élément qui sortent de la page

#

et ensuite t'as un élément coloré au dessus de ton body

#

"main-content"

#

ya pas que ça tout tes container on une couleur

#

c'est pour ça

#

enlève la couleur de tes élément pas dessus ton fond et ça marchera

#

enlève juste les couleurs de fond

loud jetty
#

OK donc je dois retirer les background color ?

void anvil
#

pas de tout

#

juste de ce que je t'ai envoyée

loud jetty
#

de membres et container

#

t'es vraiment un boss sa fais 1h je galère x)

void anvil
#

x)

loud jetty
#

C'est pour un site de merch pour un groupe de rap c'est la présentation du collectif

void anvil
#

okay

loud jetty
#

Alors euh sa fonctionne toujours pas x) tien je te redonne l'HTML et le CSS je penses pas avoir fais d'erreurs dans ce que tu m'a dis :

📎 message.txt 📎 message.txt
void anvil
#

bah moi pourtant ça marche

#

ça te donne quoi

#

fais voir

#

@loud jetty

loud jetty
#

Pourtant j'ai donner le bon chemin c'est très bizarre

image.png
void anvil
#

ton image existe ?

loud jetty
#

Oui

void anvil
#

et porte le bon nom ?

loud jetty
void anvil
#

ah mé

#

y'a du transparent

#

donc ça fait blanc sur blanc x))))

#

att 2s je te dis comment fix

loud jetty
#

Oui mes j'ai changer la couleur du background pour voir justement et même la couleur ne se change pas

#

celle du body

void anvil
#

body {
font-family: 'Poppins', sans-serif;
background-color: #0f0f0f;
}

#

background color

#

pas color

#

c'est pas pareil

#

color c'est pour du text

loud jetty
#

OK d'accord merci du tips ^^ désoler pour les erreurs de débutant je suis pas encore hyper à l'aise x)

#

OK top sa fonctionne !! dernière questions si je veux régler la taille en largeur et longueur comment je peux parce que la elle est un peux trop grosse

void anvil
#

.background-image {
background-image: url('../imgs/R4_PNG.png') !important;
background-size: 75vh;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

#

comme ça

#

faut juste changer background-size et mettre en no-repeat

#

voilà

loud jetty
void anvil
#

^^'

loud jetty
#

et si, je veux descendre l'image on vas utiliser un top ?

void anvil
#

nop

#

tu vas utiliser background-position

#

@loud jetty

loud jetty
#

Ok parce que j'ai utilisé top et ensuite j'ai essayer avec paddin-top mes j'ai compris vu que ses un background on utiliseras que background

void anvil
#

bah enfaite top, padding margin ça s'applique à tout l'élément et son contenue

#

background-blabla ça s'applique au background seuleemnt

#

.background-image {
background-image: url('../imgs/R4_PNG.png') !important;
background-size: 75vh;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 25%;
}

#

voilà

#

les pourcentages c'est la position relative par rapport à la taille de ton élément

#

donc 50% c'est au milieu

#

0% c'est le bord gauche / haut

#

la valeur 1 c'est la taille sur l'axe X (width) et la valeur 2 c'est l'axe Y (height)

#

@loud jetty

loud jetty
#

OK top sa marche superbe bien merci énormément ^^

void anvil
#

derien ^^'

loud jetty
mossy hawk
#

Bonjour je besoin d'aide pour mon projet

Capture_decran_2024-06-18_141313.png Capture_decran_2024-06-18_141412.png Capture_decran_2024-06-18_142904.png
#

je ne peux pas bien positionne

loud jetty
#

Bonjour voila j'aimerais pouvoir positioner mes articles au centre de la pages et les baisser un petit peux parce que ses cacher pars la navbar vous auriez une solutions ? voici l'HTML et le CSS :

📎 message.txt 📎 tt.txt image.png
tame forge
loud jetty
tame forge
loud jetty
tame forge
#

J’ai pas lu ton code, donc faut que tu replace par la bonne classe ^^

loud jetty
#

Alors j'arrive à le déplacer en bas de la navbar mes pas à le mettre au centre

#

@tame forge

tame forge
#

Applique un margin: auto à ta section

#

Je sais pas comment ça se fait en bootstrap

void anvil
#

y'a pas plus simple

#

tu appliques ça au parent de tes boites

loud jetty
#

Alors oui sa marche mes il ne veux pas se déplacer au centre

void anvil
#

bizarre, envois ton code actuel, je regarde

loud jetty
#

Parce que comme tu vois c'est coller à gauche

void anvil
#

ouaip, je regarde ça

loud jetty
#

Pas de soucis merci énormement 🙌🏽

void anvil
#

c'est bizarre j'ai pas du tout le même rendu que toi

#

j'obtiens ça perso ^^'

loud jetty
#

Essaie avec ce CSS sa devrais mieux marcher ^^ (je t'es donner seulement celui de cette page pour pas te perdre)

void anvil
#

okay nice

loud jetty
#

dis moi si ses good comme sa

void anvil
#

@loud jetty

#

c'est bon

#

c'est fix

#

le problème c'est que ton parent n'avait pas de taille

#

et les fils pas de taille minimal (je l'ai mise à 30 % mais tu pourras la changer si tu veux)

loud jetty
#

OK superbe merci beaucoup t'es un boss

sage ocean
#

Yo les gens je fais du Angular et je voudrais que le footer sois visible partout sauf sur la page erreur 404, si quelqu'un a une idée sensé qui est optimisé je prends. Perso j'ai essayé d'appliquer au footer display none quand on est sur la page footer mais comme je le fais pas sur le component du footer directement mais directement sur le component de l'erreur 404 le CSS n'arrive pas à récupérer le footer pour lui appliquer un effet.

runic python
#

Tu peux utiliser des directives d'angular basées sur la route active aussi directement

#

Tu as ngIf aussi pour conditionner ton affichage

sage ocean
#

mais en vrai merci pour l'info 👍

runic python
#

Mais c'est très minime

sage ocean
runic python
#

De rien 😉

loud jetty
#

Bonjour j'ai fais aucune modifications à mon programme mes mon CSS ne veux pas se mettre à jour le lien vers le styles est good et quand je ctrl F5 sa fais rien aussi avec MAJ + relancer la page

runic python
loud jetty
runic python
#

Je suis au boulot, ça va être compliqué le vocal, envoi des screens

loud jetty
#

est-ce que je passe cette ligne tout en haut ?

runic python
#

envoie ton code

loud jetty
#

J'au suppprimée la ligne qui était pas au bonne endroit

#

Il m'affiche aucune erreur maintenant

runic python
#

et ton css n'est pas pris en compte ?

loud jetty
void anvil
#

tu peux afficher dans le devtool de ton navigateur les éléments pour les quels le css ne s'applique pas ?

runic python
loud jetty
#

regarde exemple voici la couleur qui est censée être pour le footer

image.png
runic python
#

C'est son fichier je crois qui n'est pas pris en compte

loud jetty
#

et c'est sa :

image.png
void anvil
#

la couleur n'est pas override par une propriétée ?

#

si tu met !important à la fin de ton background color ça change rien ?

loud jetty
#

Alors oui la sa change

void anvil
#

car la propriété était override

#

tout simplement

loud jetty
#

Mes exemple un truc con je peux pas changer la positions du gros bloc ou ya les disques

#

en gros je viens de tester si je mes !important il vas me le faire

#

mes si je dois faire sa à chaque fois c'est galère

void anvil
#

car tu as des propriété écrites en double

#

c'est dû au fait que tu leurs donne plusieurs class

#

qui change les même propriétés

loud jetty
#

On peux créer un CSS différent pour chaque page ?

runic python
#

Oui c'est possible

loud jetty
#

En vrais je pourrais faire sa pour éviter les confusions parce que bon la le CSS fais beaucoup de lignes et si je dois créer à chaque fois une nouvel classe sa va être compliquée non ?

#

Je sais pas ce que vous en pensez

void anvil
loud jetty
#

HA

void anvil
#

tu peux avoir aussi plusieurs css pour une seule page

#

tu fais un css avec tout les trucs en commun que tu charge dans toutes les pages et un css pour chaque page pour les trucs spécifiques que tu charge que dans la page qui a besoin

#

ça fait que tu aurais un common.css, page0.css, page1.css, etc...

#

ce qui est plus propre

loud jetty
#

Ok donc imaginons pour ma navbar et le footer je lui fais un CSS que j'applique à tout et ensuite pour les choses spécifique exemple la page nos produits je lui fais un CSS spécifique à lui

#

Mes comment je fais pour lui appliquer deux styles CSS ?

void anvil
#

?

#

comment ça?

loud jetty
#

Bas vu que j'ai deux fichier différent un pour une page spécifiquement et un autre pour la navbar et footer que je dois appliquer partout

void anvil
#

je vois pas le problème

# 
<head>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page0.css">
  <link rel="stylesheet" href="navbar.css">
  <link rel="stylesheet" href="blabla.css">
</head>
loud jetty
#

OK d'accord je pensais que c'était pas possible

void anvil
#

bah si

#

sinon créer une balise link n'aurait pas de sens si elle était unique à l'usage

#

surtout pour un langage aussi générique que html

loud jetty
#

Ok ok ok désoler pour les questions stupide ^^

runic python
loud jetty
runic python
#

Sincèrement, je peux pas tout lire mais regarde avec l'inspecter l'élément, tu auras probablement des réponses

void anvil
#

ségmente bien ton code

#

structure le de sorte à ce qu'il soit simple

loud jetty
#

Oui exactement merci

leaden stirrup
#

Salut les gars ! Est-ce que qqun de chaud en CSS pourrait me donner un coup de main ? Je suis entrain de créer un petit jeu et j'aurai besoin d'animer la transition d'un historique.

Actuellement j'ai ce code :

<template>
  <div class="flex items-center p-2">
    <div class="flex justify-center items-center space-x-2">
      <div class="result-wrapper">
        <div
          v-for="(round, index) in histories"
          :key="round.id"
          class="rounded-lg font-medium px-4 py-2 result-container"
          :class="[
            round.targetMultiplier <= round.actualMultiplier
              ? 'bg-green text-purply-800'
              : 'bg-purply-300 text-white',
          ]"
        >
          <Text>{{ Number(round.actualMultiplier).toFixed(2) }}</Text>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.result-wrapper {
  display: flex;
  margin-left: auto;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.4rem;
  overflow: hidden;
}

.result-container {
  position: relative;
}

.result-container:first-of-type {
  animation: last-result-animation 0.5s ease-in;
}

@keyframes last-result-animation {
  0% {
    margin-right: -60px;
    margin-top: 0;
  }

  to {
    margin-right: unset;
    margin-top: 0;
  }
}

.result-container:nth-of-type(6) {
  opacity: 0;
  transition: result-container-fadeOut 0.5s ease-out;
}

@keyframes result-container-fadeOut {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
</style>```

et le résultat voulu serait similaire à celui-ci.

Actuellement le code fonctionne que pour la première entrée d'un historique. A partir de 2 entrées dans la liste l'animation ne fonctionne plus du tout. Si vous avez des idées je suis preneur ^^. Merci d'avance à tous le monde
#

Et voici ce que j'ai actuellement :

void anvil
leaden stirrup
void anvil
# leaden stirrup

le css me donne pas le même resultat que toi x), moi l'animation est smooth par rapport à toi

#

c'est bizarre ^^'

leaden stirrup
#

comment ca ?

#

alors j'utilise vue

#

montre ?

void anvil
# 
@keyframes last-result-animation {
    0% {
      transform: translateX(60px);
      margin-top: 0;
    }
  
    to {
      transform: translateX(0px);
      margin-top: 0;
    }
  }

si tu utilise transform ça donne quoi ?

#

@leaden stirrup

leaden stirrup
#

je vais test 30s je lance tout

leaden stirrup
void anvil
#

bizarre

leaden stirrup
#

ca fonctionne juste comme sur ma vidéo

#

premier truc ca fonctionne mais pas pour les prochains

void anvil
#

ouaip bah aucune idée, désolée, ce genre d'animation je le fais jamais en css mais en javascript

#

@leaden stirrup

leaden stirrup
#

ah merde

#

pas grave merci quand même $$

brave jay
#

Alors déjà on évite de modifier le margin mais plutôt translate

#

et on a pas tout le code donc on va pas pouvoir trop t'aider :/

rustic anvil
#

ou alors ajouter l'element et déplacer la liste en JS puis détruire le premier element hors de vue si y'en a trop.

safe aspen
#

je te conseil GSAP ou framer-motion pour tes animations,
le css c'est bien pour 20% des animations ( et encore je suis gentil, pour des trucs basiques..) tu est obligé de surcharger ton code avec des ID, Class et css uniquement pour de l'animation, comme tu utilises Vue tu peut utiliser le JSX pour rendre ton code plus clair, maintenable et pro. Aprés si c'est pour de l'entrainement ou une initiation aux animations le css ça passe large 🙂

#

pour ton animation en css , tu fais juste :

<template>
  <div class="flex items-center p-2">
    <div class="flex justify-center items-center space-x-2">
      <div class="result-wrapper animate-slide">
        <div
          v-for="(round, index) in histories"
          :key="round.id"
          class="rounded-lg font-medium px-4 py-2 result-container"
          :class="[
            round.targetMultiplier <= round.actualMultiplier
              ? 'bg-green text-purply-800'
              : 'bg-purply-300 text-white',
          ]"
        >
          <Text>{{ Number(round.actualMultiplier).toFixed(2) }}</Text>
        </div>
      </div>
    </div>
  </div>
</template>

CSS: ```
@keyframes slide {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}

.result-wrapper {
display: flex;
animation: slide 5s linear infinite; // a modifier la durée pour avoir ce dont tu veux et suivant la taille du conteneur parent
}

#

par contre je vois pas comment avoir cet effet de fadeOut avec l'opacité sans se prendre la tête de ouf en css, peut être avec un bg transparent en gradiant sur les 2 côtés 🤔 a voir

rustic anvil
#

(ou alors en javascript ez ez :p)
les animation en css c'est bien lorsqu'il y a un element à faire apparaitre ou disparaitre ou une boucle d'animation
mais là c'est apparition + décallage + disparition et suppression lorsque longue liste :s pwah

safe aspen
leaden stirrup
#

tu as test ?

void anvil
leaden stirrup
rustic anvil
safe aspen
#

Perso j'utilise Windows, avec windows + shift + s pour screen une portion ^^ je voudrai un truc aussi simple (plugin par exemple) ^^

rocky pond
rustic anvil
#

tellement pratique, moi c'est ctrl+alt+shift+R :D mais bon.. linux :s)

tame forge
#

CTRL + SHIFT + S sur Windows fait parfaitement le taf

#

Ah nan my bad on est pas sur la même chose x)

#

Mais sinon y’a obs 🤷‍♂️

safe aspen
#

ah purée j'avais pas vu , tu utilises Gyazo merci du coup pour l'info x)

#

c'est trop pratique x)

robust obsidian
#

Sur WIndows c Win + Shift + R

tame forge
#

OMG

#

Je connaissais pas celui là

#

Merci !

hollow hawk
#

Bonjour,

J'avoue ne pas trop savoir ou poser cette question haha.
Une amie de ma mère m'a demandée l'autre jour si je pouvais lui faire un site "simple" (one page, avec présentation de la personne, présentation du métier, éventuel prix (sans pay wall)), et information de contact/contact form.
Elle m'a demandée une fourchette de prix. Comme c'était la première fois qu'on me posais cette question j'ai été un peu dépourvu.

J'ai mis ici une suite de préstation type. Mais j'avoue ne pas être sur des prix (étant donné que je ne suis pas un pro), et surtout est ce que certaines presations type peuvent etre mises ensemble plutot, au lieu d'en faire deux (je prend par exemple l'intégration web/développement web et le responsive design).

Je prendrais avec grand plaisir toute critique sur des prix, ou revoir certaines prestations type.
Merci!

PS: J'ai par exemple pas l'intention d'utiliser la prestation inegration api par exemple

image.png
rustic anvil
#

salut, selon le temps que ça prend tu peux compter à l'heure,
et si t'es à 30€ de l'heure par exemple, pour un site "simple" (sans ajout abusif du client forceur)
alors tu peux le faire en quelques dizaines d'heures, ducoup oui ça serait 500 à 1500€
ensuite c'est selon tes compétences, si tu garde le site en main (entretient, ajouts futurs), le contact avec le client etc, le prix peut beaucoup varier :)

hollow hawk
rustic anvil
#

en général tu compte le matériel s'il y a vente ou location, le temps pour conception et développement, et un forfait optionnel pour des retouches etc, car parfois tu peux avoir 3 fois plus de temps en retouches qu'en création selon cahier des charges :p

tame forge
fierce shard
#

Salut !
J'ai un problème avec un boutton en HTML/Js.
Quand je le clique, il recharge la page. Or, la fonction qu'il éxecute n'est pas sensé le faire. Le problème ne vient pas de cette dernière d'ailleurs, car éxecutée dans la console, elle marche bien.

<form>Please write this code to check if you are a human.<div class="text">Z{@,PXm?/£6L!H?K7Br[</div><input type="text" id="input"><br><button onclick="test()">Verify</button></form>
rustic anvil
#

retire les balises form, et verifie que la fonction test va chercher la donnée de "#input" :)

fierce shard
#

Ah, oui, merci !

feral mist
green ravine
#

Bonjour, j'ai récemment déployé un projet Symfony en ligne sauf que le css est cassé sous certain IOS. En gros j'ia moi même un iPhone et le site fonctionne très bien mais chez d'autres personnes le css du site semble cassé, rien ne s'affiche bien. Adresse : http://mariol.fr/ . Merci d'avance pour votre aide.

robust obsidian
robust obsidian
green ravine
#

Bonjour, oui c'est que depuis j'ai commencé à implémenté l'envoie de mail et j'ai maintenant ce message d'erreur que je n'ai pas en local

robust obsidian
#

😩

green ravine
#

Mince tant pis je devrais y arrivé 🙂 , et sinon concernant le problème de css ?

#

En gros au format mobile il fonctionne très bien, sauf sous certains iphones

robust obsidian
green ravine
#

Certains éléments

robust obsidian
green ravine
#

ok merci j'ai compris

#

il faut les bons préfixes ?

#

-webkit ?

robust obsidian
#

en gros sur MDN en bas de chaque explication de mot-clé, il y a la prise en charge de celui-ci pour chaque navigateur, et appareil

green ravine
#

merci beaucoup c'est gentil je vais regarder ça

robust obsidian
green ravine
#

aie

#

Le site est re-disponible si jamais

robust obsidian
#

@green ravine C pas que sur iOS que le CSS ne fonctionne pas

green ravine
#

oula ? Vous êtes sur quoi ?

robust obsidian
#

firefox

robust obsidian
green ravine
#

Tu peux réessayer tu as peut être essayé au moment ou je téléverser les bon fichiers css ?

#

ET tu as quel os ?

robust obsidian
robust obsidian
green ravine
#

Je le supprime on vas essayé

robust obsidian
#

ok tu me dis quand c bon 😉

green ravine
#

🙂

#

@robust obsidian c'est bon

#

je viens de tester avec un emulateur toujours le même problème

runic python
#

Ton app doit encore être dans l'env en dev pas en prod

#
  • après composer install --no-dev
robust obsidian
safe aspen
#

d'ailleurs en regardant la console de ton site, je vois que les assets ( c'est a dire tout le css que tu as mis dans le dossier /assets) renvoie une 404, pour debugguer facilement mais de maniere malpropre tu peut mettre tout tes fichiers en 404 dans ton dossier /public, ou bien si tu ne l'as pas déja fait n'hésites pas a refaire un ```npm run build
//ou
yarn run build
// voir peut etre
<link rel="stylesheet" href="{{ asset('css/style.css') }}"> // dans ton base.html.twig

suivant ton gestionnaire de package front sur ton serveur de prod
#

(oups pardon j'ai @ la mauvaise personne ^^ ) @green ravine

green ravine
#

Oui c'est normal le 404 j'aissaye de passer par asset mapper pour compiler mon style j'espère que ça réglera mon probleme. Et actuelement j'ssaye en local donc c'est normal pour les 404. Sauf que quand je fait php bin/console asset-map:compile j'ai ce message :

safe aspen
#

fais voir ton fichier webpack.config.js

#

et hésite pas a vider le cache SF ```
rm -rf node_modules/
rm -f yarn.lock package-lock.json
yarn install

ou

npm install
php bin/console cache:clear --env=dev

green ravine
#

Je pense que c à cause du fichier entrypoints je suis en train de le paramétrer

safe aspen
#

normalement ce n'est pas a toi de le configurer mais a webpack (suivant ta version de SF)

green ravine
#

ah ok

#

parceque cela ne l'a même pas crée

safe aspen
#

ahh, normalement il se génère via la commande : ```
yarn encore dev

ou

npm run encore dev

green ravine
#

PS C:\wamp64\www\ville-mariol> yarn encore dev
yarn run v1.22.22
$ C:\wamp64\www\ville-mariol\node_modules.bin\encore dev
Running webpack ...

Error: Cannot find module '@babel/preset-env'
Require stack:

  • C:\wamp64\www\ville-mariol\node_modules@symfony\webpack-encore\lib\loaders\babel.js
  • C:\wamp64\www\ville-mariol\node_modules@symfony\webpack-encore\lib\config-generator.js
  • C:\wamp64\www\ville-mariol\node_modules@symfony\webpack-encore\index.js
  • C:\wamp64\www\ville-mariol\webpack.config.js
  • C:\wamp64\www\ville-mariol\node_modules\webpack-cli\lib\webpack-cli.js
  • C:\wamp64\www\ville-mariol\node_modules\webpack-cli\lib\bootstrap.js
  • C:\wamp64\www\ville-mariol\node_modules\webpack-cli\bin\cli.js
  • C:\wamp64\www\ville-mariol\node_modules\webpack\bin\webpack.js
  • C:\wamp64\www\ville-mariol\node_modules@symfony\webpack-encore\bin\encore.js
#

parce que dans mon dossier public j'ai un dossier asset créer par webpack je suppose et dedans j'ai un fichier : entrypoint.app.json

safe aspen
#

faut installer yarn add @babel/preset-env

#

tu as bien fait le yarn / npm install ?

green ravine
#

ok super oui c bon ça l'a créer

#

{
"entrypoints": {
"app": {
"js": [
"/build/runtime.js",
"/build/app.js"
],
"css": [
"/build/app.css"
]
}
}
}

#

maintenant je dois le paramétrer pour mettre les bons fichier css et js ?

#

En tout cas merci pour ton aide

safe aspen
#

okay nice comme tu vois mainteant ton css dans le dossier asset sera compilé dans le dossier /build/app.css (et pareil pour le JS)

#

tu peut tester normalement et ça devrait refonctionner

green ravine
#

Oui ça fonctionne, mais ducoup comment ça marche ? comment il sait quells fichier je récupére ?

#

en gros j'ai ça dans mon twig de base

#

je dois supprimer les <link> et <script> ?

safe aspen
#

en gros tout ce qui est entre ```
{{ asset('cheminduku') }}

sera compilé en un unique fichier CSS et JS, cela generera une URL
green ravine
#

donc je laisse tout comme ça ? et je doit mettre
{{ encore_entry_link_tags('app') }} dans tous mes template ?

safe aspen
#

a toi de voir, si ces du JS et du CSS utilisé partout dans l'application vaut mieux le mettre dans ton base.html.twig, sinon tu peut generer les URL avec la fonction twig depuis n'importe quel fichier twig {{ asset('chemin') }} pour compiler et gagner en perf

#

tu as bien fait ```npm run build
// ou
yarn run build

green ravine
#

att je suis vraiment désolé mais je suis un peu perdu, en gros de base j'ai : <link rel="stylesheet" href="{{ asset('styles/inc/header.css') }}?v={{ random() }}"> et je fait ça pour tous les fichiers css de mon projet, donc maintenant ces fichiers la seront bien compilé ?

#

oui j'ai fait yarn run build

#

ah non pardon j'ai fait yarn encore build

safe aspen
#

déso j'ai un peu de mal a t"aider ça fait 2 ans que j'ai pas touché a du SF et j'etais sous SF 5 ^^'

green ravine
#

Tu m'aide déjà énormémant tkt

safe aspen
#

atta on va créer un fil pour eviter de hard flood

green ravine
#

ok ça roule

scarlet kettle
#

slt, j'ai fait ça
<img srcset="
img/resized/large/1400/vos-besoins-1400.webp 1400w,
img/resized/large/1000/vos-besoins-1000.webp 1000w,
img/resized/large/700/vos-besoins-700.webp 700w,
img/resized/large/400/vos-besoins-400.webp 400w"
src="img/large/vos-besoins.webp" alt="Vos besoins" class="home-cards__image">
pour faire des images responsives mais je sais pas pourquoi ça prend toujours l'image la plus grosse peu importe la taille de l'écran

young yoke
#

Tu fais un CSS

scarlet kettle
#

on peut faire des images responsives en css ?

young yoke
#

Moi à t'a place je définirais ma taille d'image en %

scarlet kettle
#

non c'est pas ça le problème

young yoke
#

Responsive ça veut dire que la taille s'adapte à l'écran en gros donc je comprend pas

#

Et l'emplacement

scarlet kettle
#

en gros j'ai deja defini la taille en css mais le truc c est que imaginons j ai une image qui fait 3000px de width bah meme si avec le css je lui dit qu'elle fait que 100px de width, ça va quand même charger cette image de 3000px de width alors qu'on a pas besoin de chager d'aussi grosses images pour tous les écrans

scarlet kettle
young yoke
#

Tu peux me montrer ce que ça donne sur ton site stp ou pas ?

scarlet kettle
#

en gros là j'ai défini le style de l'image comme tu dis en fixant sa taille

#

mais le site lui, meme si là l'image à l'affichage ne fait que 500px de width, il a chargé une image qui en fait 1500 à la base

young yoke
#

Ah ok bah en vrai change l'image sur psd

scarlet kettle
#

c est quoi psd ?

young yoke
#

Photoshop

scarlet kettle
#

j'ai déjà mes différents formats d'image pour les types d'écrans

#

je peux pas mettre une seule image universelle

#

il y a trop de différence entre mobile et desktop

#

et du coup srcset est censé gérer ça

#

mais là ça marche pas

young yoke
#

Ah ok c'est bourbiers de fou

scarlet kettle
#

bah dans les tutos le truc srcset marche nickel et ça se fait en 2 minutes

#

mais là il me prend toujours la plus grande image

young yoke
#

Pour moi quand tu parlais de respectives je pensait tu voulais adapter l'image en fonction de l'écran

scarlet kettle
#

moi aussi quand on m'en a parlé la premiere fois j'avais pas compris

rustic anvil
# 
body {
  background-image: url('image_max.jpg');
}

@media (max-width: 700px) {
  body {
    background-image: url('image_min.jpg');
  }
}

un truc du genre

#

avec autant de medias que tu désire de taille.

safe aspen
# scarlet kettle slt, j'ai fait ça <img srcset=" img/resized/large/1400/...

en fait je pense qu'il te manque simplement l'attribut HTML sizes :

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

source :https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

MDN Web Docs
Images adaptatives - Apprendre le développement web | MDN

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain...

#

pas besoin d'allez bidouiller les media query en CSS, ton code est déja bien avec des balises <img> sans t'embeter a refacto ton code pour les mettre en background dans des divs

scarlet kettle
scarlet kettle
#

ça fonctionne pas. en fait j'ai regardé cette vidéo:
https://www.youtube.com/watch?v=N-aiPrb1rOM&t=371s

et lui, avec seulement
<img srcset="
img/resized/large/1400/nous-choisir-1400.webp 1400w,
img/resized/large/1000/nous-choisir-1000.webp 1000w,
img/resized/large/700/nous-choisir-700.webp 700w,
img/resized/large/400/nous-choisir-400.webp 400w"
src="img/large/nous-choisir.webp" alt="Nous choisir"
class="home-cards__image">
il se passe deja des choses mais moi il se passe rien ça prend toujours l image la plus grande

YouTube
Grafikart.fr
Tutoriel HTML: Images responsives

Article ► https://grafikart.fr/tutoriels/images-responsive-1152
Abonnez-vous ► https://bit.ly/GrafikartSubscribe

Dans ce tutoriel je vous propose de découvrir comment utiliser les images responsives en HTML

Soutenez Grafikart:
Dev...

▶ Play video
#

actuellement j'ai ça comme code:
<img
srcset="
img/resized/large/400/nous-choisir-400.webp 400w,
img/resized/large/700/nous-choisir-700.webp 700w,
img/resized/large/1000/nous-choisir-1000.webp 1000w,
img/resized/large/1400/nous-choisir-1400.webp 1400w"
sizes="
(max-width: 600px) 400px,
(max-width: 1024px) 700px,
(max-width: 1500px) 1000px,
1400px"
src="img/large/nous-choisir.webp"
alt="Nous choisir"
class="home-cards__image">

j'ai regardé sur la doc de mozilla ça m'a l'air bien, j'ai demandé à chat gpt et corriger mais ça marche toujours pas

scarlet kettle
#

OK, je viens de trouver le problème. Pour ceux que ça intéresse, en fait c'est pas un problème de code, le code que j'ai envoyé est correct c'est juste que ça prend pas en compte le changement de taille d'écran quand on la modifie depuis l'outil de développement du navigateur. Mais si on réduit vraiment la fenêtre nous même ça marche

fallen jewel
#

salut quelqu'un peut m'aider en voc pour mettre 2 bouton cote a cote svp ?

safe aspen
fallen jewel
safe aspen
#

Si tu galères n'hésite pas

fallen jewel
rocky pond
rocky pond
safe aspen
#

@rocky pond plaît til ?

brave jay
indigo tiger
#

Salut

robust obsidian
#

Et ? si c ça créer une demande

steep thorn
#

salut j'ai un probleme, j'essaye de crée un site qui me permet d'afficher mon profil discord et lorsque je veux afficher l'activité tout marche mais je n'arrive pas a afficher l'icon de la rich presence

raw hamlet
#

Hello,
En ce moment, j'essaie d'améliorer le site (réalisé en stage) que j'ai mis en ligne, mais il me reste une partie du responsive que j'arrive pas à faire.
J'ai un dropdown-menu Bootstrap,. EN desktop, il est bien mais quand je veux le modifier pour la version tablette/mobile, les modifications ne se font pas.
J'ai mis un overflow : scroll ou simplement un display : none des images mais ça ne réagit pas alors qua dans la console ç marche.
Merci de votre aide

#

https://maisoncosy57.fr/

Maison Cosy

Venez découvrir notre institut de beauté basé à Rombas avec une large sélection de soins de beauté, y compris les soins visage, mains et pieds et corps. Profitez des meilleurs soins réalisés par des esthéticiennes de qualité.

safe aspen
outer juniper
#

Bonjour,
Est-ce que vous savez d'où vient la transparence en hover de la classe dropdown-menu de Bootstrap ?

J'aimerais la retirer sauf que je ne vois pas la propriété qui agit.
j'ai essayé de forcer le fond blanc avec opacity: 100%; puis background-color: white; mais il y est toujours.

Voici le code html :

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle text-black" href="#" role="button" data-bs-toggle="dropdown"aria-expanded="false">
  <i class="bi bi-pencil-square pe-1" alt="Icone de modification"></i>
  Modification projet
  </a>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" href="/voir-points">
      <i class="bi bi-geo-alt-fill"></i>
      Modifier points de suivi
      </a>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <a class="dropdown-item" href="/modification_capteur/">
      <i class="bi bi-broadcast"></i>
      Editer les concentrations
      </a>
    </li>
  </ul>
</li>

.dropdown-menu:hover {
    background-color: white; // le css que j'ai essayé
}
image.png image.png
safe aspen
outer juniper
#

On va faire avec, je ne vois rien du tout...

image.png
safe aspen
#

Tu peut faire un sandbox de ton projet pour qu'on puisse test ? ^^

#

Ou un lien déployé

raw hamlet
safe aspen
#

ahh ben pourtant même sur mon telephone (galaxy zfold) ça fonctionne , par contre faut juste slide dans le wrapper blanc

raw hamlet
#

Merci à toi, ou peut-être parce que j'ai un iphone 12 mini, et que la largeur est tellement petite que ça na fonctionne pas ?

safe aspen
raw hamlet
#

Merci beaucoup @safe aspen , on va dire que j'ai déjà un peu amélioré le responsive par rapport à avant hahhaaaa

safe aspen
#

ben écoute de rien ^^ hésite pas si tu as d'autres soucis 🙂

raw hamlet
#

oui, je cherche un job en dev webb

#

haha

#

je plaisante

#

merci à toi !

outer juniper
safe aspen
#

genre quand tu déploie ton app sur le net

steady gazelle
#

slt ces quoi le site ou j'ai des template avec le code html css et java script d'un objet une scroll bar par exemple j'ai perdu le site

dire tiger
outer juniper
outer juniper
hollow peak
#

Hello ! J'ai un soucis ,
à chaque fois que j'ajoute un élément à mon component tout se déplace vers le haut comme si il y avait une limite de height sur la page j'utilise tailwind et je commence à penser que c'est mon mask derrière qui agit comme un background alors que je ne veut pas, voici mon layout :

import { fontregular } from '../ui/fonts';

import { fontregular } from '../ui/fonts';

export default function RootLayout({ children }) {
    return (
        <div className={`${fontregular.className} antialiased w-full h-full`}>
            {children}
        </div>
    );
}

et le mask à l'arrière :

import Image from 'next/image'

export default function BackgroundMask() {
    return (
        <div className="absolute inset-0 z-0">
        <Image
            alt="Mask"
            src="/svg/backgroundMask.svg"
            quality={100}
            width={2000}
            height={2000}
            className="objet-cover"
        />
        </div>
    )
}
image.png
safe aspen
#

Hello, c'est pa4ce que ton mask svg est en position absolute je pense , en absolute c'est comme si l'élément n'existait pas dans le layout de la page

hollow peak
dawn lake
#

Salut ! Vous auriez une idée de projet pour un debutant en html ? pas trop ambitieux ? merci (Je ne connais pas de js)

robust obsidian
twin pond
#

bonjour je me demander si c'était pas possible de faire un fichier page dans mon fichier templtates pour pas que se sois bien rangé et comment faire pour que cela fonctionne si possible. Je vous donne la disposition de mes fichier.

image.png
ashen falcon
twin pond
#

je sais pas tres bien expilique mais en gros je voudrai que c'est 3 page soit dans le même ficher parce qu'elle doivent interagire entre elle mais je n'y arrive pas

ashen falcon
twin pond
#

merde c'est pas le bon desoler

ashen falcon
twin pond
#

mais je pense que la metode que je veux faire n'est pas la bonne

ashen falcon
#

Tu veux navigué ? Donc tu veux juste changer de page ?

#

@twin pond

twin pond
#

oui

ashen falcon
#

Tu ne peux pas juste utiliser un <a href="./page/page1.html"> ?

twin pond
#

si c'est que je voulais faire je suis con desole de tavoir derange

ashen falcon
#

Pas de soucis ! Temps que ça fonctionne je suis content d'avoir pu t'aider ! 😁

twin pond
#

rebonjour je ne comprend pas pourquoi le lien que je fais pour que je puisse changer de page ne fonctionne pas a chaque fois que je veux le faire ça me fais des erreur

olive wind
twin pond
#

je n'ai pas encore faire toute les pages parce que je veux les route soit deja faite

olive wind
# twin pond voila

Tu peux expliquer concrètement ce que tu veux faire ? Genre l'objectif de ton site ?
Les boutons preview et next doivent servir à quoi ?

twin pond
#

Le but c'est que l'on puisse bouge entre les classement mais je n'arrive pas à le faire en js donc je voulais le faire avec des a mais je me suis rendu compte que je ne pourrai pas faks d'animation après donc je ne sais pas comment faire je suis pomé

#

@olive wind

brave jay
twin pond
#

C'est juste pour les route

#

Je débute dans le domaine et on m'a appris comme ça mais je me suis pas renseigné plus que ça

brave jay
#

d'accord, mais a part ca tu n'as aucun interet a utilisé python ?

#

en vrai je suis motivé je vais t'aider 😉

#

tu veux faire quoi exactement

brave jay
twin pond
#

A désolé j'ai pas vu

twin pond
# brave jay tu veux faire quoi exactement

En faite on est plusieurs à faire le site moi je dois faire tout se qui est leaderboard et donc se que je dois fais c'est fais 4 leaderboard que j'ai déjà fais et après je dois pouvoir naviguer entre les 4 en appuient sur next et preview avec une animation quand je change de leaderboard

brave jay
#

ok

#

laisse moi 10 minutes 😉

brave jay
#

telecharge liveserver c'est une extension vscode

brave jay
twin pond
tame forge
twin pond
#

j'ai vu je suis allais voir

brave jay
twin pond
#

oui mêrci

brave jay
twin pond
sterile vault
#

salut, je découvre les favicons, et j'ai 2-3 problème ( sauf que un deux n'a pas de rapport ) :

  • absence de l'icon sur la navigateur quand je suis en local, alors que présente en ligne
  • abscence de l'image "besty.png" dans la version en ligne, alors que bien presente en local
sterile vault
# sterile vault salut, je découvre les favicons, et j'ai 2-3 problème ( sauf que un deux n'a pas...

si ça peut aider, voila mon code html ( grande partie venant de snox) : <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Developer Web Student for AI learners and cyber security" />

    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    
    <link rel="stylesheet" href="/assets/css/style.css" />
    <title>Besty - Developer</title>
</head>

<body>
<header>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#skills">Compétences</a></li>
<li><a href="#projects">Projets</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
    <section id="home">
        <div class="container">
            <div class="background"></div>
            <div class="head-container">
                <img src="/assets/img/besty.png" alt="Besty" class="background-image" />
                <div class="text">
                    <h1>Hi, I'm Besty</h1>
                    <p>A <span id="dynamic-text"></span> developer</p>
                </div>
            </div>
        </div>
    </section>

    <script src="https://kit.fontawesome.com/c0bd8faac8.js" crossorigin="anonymous"></script>
#

<script src="/assets/js/index.js"></script>
</body>

</html>

twin pond
sterile vault
#

j'avoue merci

#

j'ai plus mon pc portable et mon snippets et pas sur celui la donc j'ai tout refait a la main vite fais c'est la galere mdrr

#

j'ai corriger pour les favicon, mais je comprend pas du tout pour l'image principal

sterile vault
#

j'ai rien dit c'est good merci

jade dagger
#

Salut la team je peine à faire mon site web

#

il ya t'il qqun qui serait d'accord de m'aider

#

je travaille uniquement le back end, je n'ai pas assez de connaissance pour le reste !

safe aspen
jade dagger
#

Je vien de commencez il y'a qque mois jamais fait de code avant ca mise a part un peu de python

jade dagger
#

Je design mon site si on peut dire cela comme ca

runic python
#

Le design quand tu as peu d'idées, c'est compliqué

thin merlin
#

Hello j'ai un problème car mes <br> ne fonctionne pas

#

Quelqu'un peux m'aider svp

zenith thicket
thin merlin
storm violet
#

Mdn doc html br

sterile vault
#

Salut, j'aurais besoin d'aide en css, en gros je travail avec fullPage.js pour les transition, qui rendent top sur pc, mon problem, c'est que sur tel, il y a genre 50px ou plus de scroll normal, et je vois pas comment regler ( je galere plus en css que js php ect mdrr )
voila une vidéo si ça peut vous aider a comprendre :

#

( je suis entrain de faire le site donc normal qu’il soit moche encore )

zenith thicket
# sterile vault

Je sais pas ce que tu utilises en css mais essaye 100vh pour prendre toute ma hauteur ça s'adaptera à la taille de l'écran

sterile vault
#

@media (max-width: 768px) {
body {
height: 100vh;
}

nav ul {
    flex-direction: column;
    align-items: center;
}

nav ul li {
    margin: 10px 0;
}

.background-image {
    width: 100%;
    height: auto;
    bottom: 100px;
    object-fit: contain;
}

.text h1 {
    font-size: 2em;
    position: relative;
    top: -50px;
}

.text p {
    font-size: 1.5em;
    top: 120px;
}

}

#

ça change rien

zenith thicket
#

100% ça prend 100% du container parent et si le container parent ne prend pas plus que 100vh ça sera plus grand

#

Attds je regarde

sterile vault
zenith thicket
#

Essaye sur ton pc d'aller dans les dev tools et de mettre en mode mobile (responsive) puis tu sélectionne l'élément qui dépasse en hauteur et tu me le dit

sterile vault
#

ça doit venir de l'image le bug

zenith thicket
sterile vault
#

pour la version mobile : .background-image {
width: 100%;
height: auto;
bottom: 100px;
object-fit: contain;
}

et en general : .background-image {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 35%;
height: auto;
object-fit: contain;
z-index: 5;
}

zenith thicket
#

Je pense que le absolute pose problème c'était le seul moyen de bien placer l'image ?

sterile vault
#

en supprimant le absolute :

image.png
#

j'ai modif : .background-image {

bottom: 0;
display: block;
justify-content: center;
width: 35%;
height: auto;
object-fit: contain;
z-index: 5;

}

#

mais elle se colle plus en bas

zenith thicket
#

Enfait je comprends pas vraiment où tu veux la placer

sterile vault
#

je voudrais la mettre comme ceci :

image.png
zenith thicket
#

D'accord

#

Alors bottom 0 il faut le mettre avec absolute en normale mais laisse bottom 0 en responsive la tu as mis 100px ça donne quoi

sterile vault
#

C’était pour le coller au bas de la page car sinon ça fait bouger aussi la phrase « A… développer »

IMG_8166.jpg
zenith thicket
#

C'est comme ça que tu veux après il faut régler le texte mais l'image doit être collé en bas non ?

sterile vault
#

oui je trouve ça plus clean vue que l'image est coupé au niveau de son baassin ça fait moche

zenith thicket
#

Après le texte il faut le recaler

sterile vault
zenith thicket
#

Je vois pas le problème ducoup il y a juste le texte qui n'est plus derrière la tete

sterile vault
#

oui non, ça ce n'est pas mon probleme, au debut c'est sur mobile ou j'avais un un scroll qui casse l'animation je peux scroll au sein même d'une Page
Genre je peux scroll sans changer de page sur genre 20px

zenith thicket
#

Oui je vois

#

Dans les dev tools tu l'as ce décalage ?

zenith thicket
sterile vault
#

on voit que l'image est pas coller

zenith thicket
#

Tu as un repo github avec le code ?

#

Ou tu peux charger le fichier css dans discord

sterile vault
zenith thicket
sterile vault
zenith thicket
sterile vault
zenith thicket
zenith thicket
#

Comme la width de 100% qui rend pas très beau de temps en temps

sterile vault
#

et tu as trouvé le probleme du scroll ?

zenith thicket
#

Oui le bottom 100px

sterile vault
zenith thicket
#

Tkt

sterile vault
#

je peux te poser une derniere question ?

zenith thicket
#

Oui bien sûr

sterile vault
#

pour bien apprendre niveau css, hormis dev 120 site tu conseil quoi pour apprendre ?

zenith thicket
#

Ça va te paraître débile mais l'entrainement tu prends par exemple des projets css stylé sur codepen tu gardes comme exemple tu copies seulemnt le html et tu essayes de refaire.

sterile vault
#

oh ok ok merci je vois

#

merci beaucoup

sterile vault
#

car sur tel l'image est pile ou je veux la mais j'ai toujours le scroll

zenith thicket
#

C'est pour mettre des commentaires donc le code ne les prends pas en compte supprime la ligne

#

Ah oe moi je l'ai plus

#

Tu as actualisé la prod ?

#

Ah oui je vois je vais regarder comment on peut regler ça

#

essaye sur la section acceuil de mettre un max-width: 100vh;

sterile vault
zenith thicket
#

pardon max-height

sterile vault
#

car je viens de test sur duckduckgo et je n'ai pas le problmem du scorll

zenith thicket
#

Ah

#

Ok

sterile vault
#

merci bcp pour ton aides c'est pile comme je veux

storm violet
#

Si ça marche pas selon tous les navigateur c’est que tu as tag la mauvaise div

#

Ou le mauvais élément chronium corrige et tolère par default les petites erreur de tag

lone hound
#

ww

sterile vault
sterile vault
storm violet
#

J’ai un projet fullscroll en css only j’avais une erreur sur Mozilla et safari ça prenait le scroll que sur une petite partie de la div et pas la
Page entière

La pour moi tu doit avoir le même problème

Ton scroll fonctionne mais il est pas tag sur la page entière

#

Après ton code fonctionne donc quand ça fonctionne il ne faut pas toucher xD je te donne juste une information par expérience kapp

brave jay
storm violet
sterile vault
storm violet
sterile vault
# storm violet De rien

Donc tu pense faudrait que je reprenne tout mon html et bien regarder tout en lien avec le css

storm violet
#

Pour moi le problème viens du fait que tu est mis le css sur un enfant et non sur un parent ça expliquerais pourquoi sur Google ça fonctionne et pas sur les autre navigateur hors chronium qui sont plus stricte

C’est personnellement le problème que j’avais eu

#

Vue que ton script js de scroll fonctionne bien

sterile vault
#

Oh ok ok je vois

#

Merci beaucoup

storm violet
#

Pas de soucis

storm violet
#

tien j'avais zapper que j'avais mis en ligne mon site fullscroll

#

il ressemble a rien mais la fonctionnalité de fullscroll est présente

sterile vault
#

J’avoue c’est super stylé

storm violet
#

c'est un projet qui date qui seras jamais fini je voulait faire un site fullscroll en css only

quasi cave
storm violet
#

scroll snap mandatory attend je te sort la doc

#

le meilleur c'est que ca marche sur téléphone aussi tu as juste a slide un coups c'est un bel effet

quasi cave
storm violet
# quasi cave Je note c’est sympa

J’ai découvert ça en faisant des recherche par curiosité et j’ai fait un mini projet dessus fonctionnel je trouve ça incroyable de pouvoir donner un petit coups de scroll sur la souris et que la page change automatiquement pour le client ça simplifie tous et ça dynamise tous

#

C’est le principe des carousels mais sur une page complète en grossomerdo

quasi cave
frosty prawn
#

Yo je voudrais créer un site internet sauf que je m'y connais pas en code et je veux vrm apprendre depuis longtemps

storm violet
#

Openclassroom mdn html doc YouTube freecodecamp

frosty prawn
#

Pas compris

storm violet
#

Je t’ai donner des sites pour te former zzz

#

Tu as dit vouloir apprendre

frosty prawn
#

A un tel point que j'utilise chatgpt pour

storm violet
#

Lire un doc reproduire à la main le tuto

#

Utilise pas l’ia si tu veut apprendre kapp

#

Lache moi l’ia et va écrire les tutos et faire tes test à la mains sur ton vs code

signal plover
frosty prawn
storm violet
#

Si tu abandonne au premiers obstacle abandonne le dev

Le no code c’est pas du dev…

frosty prawn
#

Avec mon propre lien et tou

signal plover
frosty prawn
signal plover
#

toujours dans le negatif

storm violet
#

Vs code mdn html doc et au charbon

signal plover
storm violet
signal plover
frosty prawn
signal plover
#

pour éviter que tu te balade de tuto en tuto sans rien apprendre le site il regroupe l'entiéreté d'un parcours excellent pour mieux maitriser l'html/css

signal plover
frosty prawn
signal plover
#

hmmm c'est toujours un peu dur au debut

frosty prawn
storm violet
#

Mdn html doc 🙃

signal plover
storm violet
#

C’est pas un site pour débutant ta roadmap

#

Il faut quelque notion avant kapp

frosty prawn
frosty prawn
signal plover
signal plover
frosty prawn
signal plover
storm violet
signal plover
#

baaah regarde t'a le site roadmap il te donne plein d'outils avec un chemin prédefini avec des branches optionnelles pour avancer dans le dev front-end (html au debut ducoup=

signal plover
#

pourquoi tu va à la fin du roadmap starf

storm violet
# frosty prawn Bah en gros ça m'a stresse que je m'y connais rien alors que je suis passionné d...

https://developer.mozilla.org/fr/docs/Web/HTML

MDN Web Docs
HTML (HyperText Markup Language) | MDN

HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript).

frosty prawn
storm violet
storm violet
# frosty prawn C'est quoi

Un site très simple pour t’apprendre l’html si tu as des questions je reste disponible pour éviter que tu bloque utilise pas l’ia réécris le code et fait tes test si tu bloque envoie un message mais avant d’envoyer test de résoudre ton problème par toi même

#

Et écoute pas l’autre dégénéré kapp

frosty prawn
signal plover
storm violet
signal plover
frosty prawn
#

Mais un truc aussi

storm violet
frosty prawn
#

J'aimerais d'essayer de comprendre un fichier htll

signal plover
frosty prawn
#

Htll

#

HTML

signal plover
#

yup

#

c'est là toute la structure de ton site, aprés y a le css pour donner du style (couleure, bordure etc..) à ton html et le js pour la logique mais ils sont tous optionnels, le html est obligatoire ducoup

storm violet
#

Tu parle de css et js il bloque sur l’html kapp

frosty prawn
storm violet
#

C’est comme lui dire d’utiliser reactjs avec next js en backend en faisant du ts + tailwindcss kapp

signal plover
#

ptdrrr il compare la difference entre html/css et html/react

#

impossible d'aider avec toi dans les parages

frosty prawn
#

Dcp

storm violet
#

Tu l’aide pas tu le perturbe mais np je te laisse le former kapp

signal plover
#

t'a pleins de tutos ducoup pour comprendre comment créer & modifier un fichier html

signal plover
frosty prawn
signal plover
signal plover
#

aaaah tu sais pas créer un fichier .html tu veux jte montre ?

storm violet
frosty prawn
frosty prawn
storm violet
#

Tu prend ton vscode

#

Tu créer un fichier index.html

signal plover
storm violet
#

Depuis vscode aurait était une meilleure pratique kapp

signal plover
#

aprés oui, vu que tu va coder en html autant commencer par installer un editeur de code (visual studio code le meilleur)

storm violet
#

Le meilleur ça reste le bloc note Windows xp kapp

signal plover
storm violet
#

Oublie pas de lui donner les plugins vscode

frosty prawn
signal plover
#

deja qu'il créé un fichier on verra les extensions aprés non? ¯_(ツ)_/¯

storm violet
#

Les snippets html css et js sont important non?

storm violet
#

Et par pitié dev avec le mode dark pas en flash blanc horrible

frosty prawn
frosty prawn
storm violet
#

Nice c’est mieux en dark

#

J’ai pas le pc à côté pour les extensions en gros tu prend html Et css Intellisence prettier

frosty prawn
storm violet
#

@signal plover

signal plover
#

?

storm violet
#

Pour répondre à ton message dans #discussion-graphisme

signal plover
#

mais le rapport entre la discussion là bas et ici ptdrr?

storm violet
#

Bah ta la réponse ouvre les yeux je peut pas faire plus

signal plover
#

t'a juste mélange les 2 discus mdrr c'est pas grave hein je mord pas

storm violet
#

Ouvre les yeux j’ai juré

signal plover
#

ils sont ouverts 👁️👁️

storm violet
brave jay
#

Heureusement que je prépare un tuto html avec comme premier chapitre vscode 😄

#

Par contre il va falloir être un peu plus détente car la c’est un peu violent

signal plover
#

reel 😔

midnight gorge
#

Salut !

signal plover
#

coucouu

plain haven
wraith vigil
#

comment centré une image svp

void anvil
wraith vigil
#

ca marche pas

signal plover
#

centrer un arriere plan

#

centrer une <img> dans un bloc?

wraith vigil
#

genre comment dire placer une image simple au centre de la page

signal plover
#

normallement ```html
<div class="container">
<img src="..."/>
</div>

```css
.container {
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100vw;
  height: 100vh;
}
wraith vigil
#

avec css c ca ?

signal plover
#

yup

#

demande ce que fait chaque ligne et j't'explique

#

aprés c'est en supposant que c'est le seul contenu ce html de ton <body></body>

wraith vigil
#

oui

# 
    background-color: rgb(90, 85, 83);
    letter-spacing: 4px;
    text-align: center;
    font-size: larger;
    text-shadow: 3px 4px 20px #00000042;
    color: orangered;
    
}
h4{
    color: black;
}
body{
    background-color: rgb(53, 51, 50);
    color: aliceblue;
}```
#

ca donne ca

#

jsp je debute css

storm violet
#

Margin auto ?

wraith vigil
#

? je debute le codage je comprend r dutout

storm violet
#

En gros dans une div tu peut faire mx-auto ( margin x x x x ) je sait plus quelle value changer mais tu as x et y et en plaçant le x en auto ça centre

#

Si tu auto x et y ça centre sur les 2 axes

wraith vigil
#

je crois je suis con

storm violet
#

Regarde ça peut t’aider

wraith vigil
#

merci

storm violet
#

Je fait plus de css basique j’utilise tailwindcss pour centrer ma div dans mon container j’écris juste mx-auto

wraith vigil
#

ah

#

bon bah au pire c'est pas très grave

storm violet
#

Je t’ai envoyer le lien de la doc pour le faire en css pur

wraith vigil
#

je vais voir ça

storm violet
#

En gros tu fait un div-container

#

Un div dedans tu met ton img

#

Et dans ta 2 eme div tu met margin ( sur l’axe x ) en auto

wraith vigil
#

euuuh oe

storm violet
#

margin 0 auto 0 auto en gros

wraith vigil
#

bah au pire je vais regarder tiktok car je comprend pas trop

storm violet
#

TikTok kapp

wraith vigil
#

mais je peu centré en html non ?

storm violet
#

Html c’est ton architecture

#

CSS c’est ton style

#

Tu donne du style à ton archi

wraith vigil
#

ah ok

signal plover
#

html c'est le squelette du site & "css" c'est le maquillage du site si tu prefere mdrrrr

#

css c'est pour rendre les trucs beaux, les positionner, les animer

#

le html c'est pour mettre les elements tout court, les textes etc

wraith vigil
signal plover
#

ptdrrr on sait jamais

storm violet
#

Bimo explique mieux que moi

#

Tu centre en css avec un simple mx-auto

#

Mx-auto = margin 0 auto 0 auto

signal plover
#

tu parle chinois pour lui 😭

wraith vigil
#

OUI

signal plover
#

jpense pas qu'il sait encore ce que c'est margin, ni ce que ça fait de le rendre auto no pourquoi y a 4 valeurs differentes aprés margin

signal plover
storm violet
signal plover
#

c'est + facile à dire pr nous en tant qu'habitués jpense

#

moi quand je débutant les sites comme mdn c'était beaucoup trop d'infos jme reperait pas mdrrr

#

mtn jarrive à lire en diagonale

wraith vigil
signal plover
storm violet
#

Désolé j’ai du mal

wraith vigil
signal plover
#

c'est moins fun au debut

wraith vigil
signal plover
#

mais ça aide dcp à petit à petit taméliorer pr faire cque tu veux

#

ah la tu suis un tuto html/css ?

wraith vigil
#

oui

signal plover
#

send send

#

que je juge

wraith vigil
#

vsy att

storm violet
#

On est tous passer par la

wraith vigil
#

je tiens a dire avant que je le comprend très bien perso

#

https://youtu.be/68oSyuKVjeU?si=IrYKuWLkvxhmWhO-

YouTube
From Scratch - Le développement Web de zéro
[Cours HTML] Apprendre HTML de zéro (tuto débutant 2024)

0:00 - Intro
1:10 - Téléchargement VS Code
2:46 - Structure HTML
11:41 - Plugins
17:33 - Balise Head
28:16 - Header
36:40 - Main
38:42 - Images
43:40 - Tableaux
52:33 - Les liens
58:10 - Vidéos
1:03:00 - Les formulaires
1:24:15 - Footer
1:27:36 - Conclusion

⚡️Le cours terminé : https://github.com/JustFS/mastering-front-end/blob/660cbd35f8842f91...

▶ Play video
#

https://youtu.be/iSWjmVcfQGg?si=f6Cdo4yZR56uIaqB

YouTube
From Scratch - Le développement Web de zéro
[Tuto débutant CSS] Apprendre CSS de zéro [cours 1/2]

👉 Indispensable pour suivre ce cours, connaitre HTML : https://youtu.be/qsbkZ7gIKnc

0:00 - Intro & Mise en place
7:21 - Les textes
39:12 - Background
46:01 - Les boites (boxes)
1:11:00 - Flexbox
1:21:02 - Grid
1:51:10 - Position absolute
2:02:02 - Le responsive
2:15:35 - Débug & Conclusion

🌱 La 2ème partie de ce cours (et bien plus) se situe ...

▶ Play video
storm violet
#

Essaye gravenilvec openclassroom freecodecamp

wraith vigil
#

mais frr

storm violet
#

Ce sont de belle référence graphikart aussi

wraith vigil
#

je vais peter un cable

storm violet
#

???

wraith vigil
#

je comprend rien a ce que tu me dit

storm violet
#

Je te donne simplement des youtubeurs références kapp

wraith vigil
#

ah ok

storm violet
#

Y’a rien à comprendre

rose knot
#

Salut à tous j'ai recemment télécharger mon site (nocode) en html css js car ça devenait compliquer de faire certaines choses donc voici mon soucis je suis débutant et donc même après quelques recherches infructueuses ou mal faites... Je cherche à savoir si c'est possible via un bouton de modifier le texte de mon site en variation entre englais et arabe merci d'avance !

robust obsidian
rose knot
robust obsidian
storm violet
finite radish
#

Hello ! J'ai un petit souci en css, vous savez la partie contact, en general ya le form et les infos a côté, d'habitude pour els aligner j'utilise les flexbox mais pour une raison que je comprend pas, cette fois si ça veut juste pas donc si qlq pourrait m'aider ce serait sympa ^^

#

(Me ping svp)

zenith thicket
finite radish
#

jpeut t'envoyer le zip au pire

finite radish
zenith thicket
finite radish
toxic root
#

bonjour j'apprendre tous doucements le html css et je suis a la recherche d'une solution pour faire un lineare grdient pour mon site web pour mettre le la coleur du texte en dorée merci de votr compréhension

robust obsidian
toxic root
storm violet
robust obsidian
storm violet
#

Bah oui 😂😂

languid pasture
shrewd marlin
#

j'aime l'effet de blur sur la barre verticale

languid pasture
languid pasture
#

Salut les gars j'eassye de faire un Slider mais je vais pas vous cachez je rencontre toujours de problèmes meme quand j'utilise des méthodes différents vous aurez un tuto ou un doc pour apprendre svp

storm violet
#

Slider js on mouse event

#

Test avec ça mon poulet

languid pasture
storm violet
#

De rien myman

rose knot
#

Bonsoir tout le monde je viens de passer du NoCode aux code html css js (j'ai quelque base mais sans plus) j'aimerais si possible avoir l'aide de quelqu'un qui s'y connait pour savoir ou je dois positionner mon code pour qu'il marche je suis dispo pour vocal biensur !

glossy jackal
hard wyvern
#

Bonjour tout le monde, j'espère que vous aller bien. Je voulais vous demander si quelqu'un pouvait m'aider pour un projet d'école. En gros j'ai fait une maquette pour un site et il y a un éléments qui me pose problème et j'arrive pas à trouver de solution.
J'essaye de reproduire ceci, c'est un titre pour une section.
Edit : J'ai oublié de préciser c'est pour site web donc en HTML et CSS

Capture_decran_2024-08-08_120427.png
brave jay
#

Je te laisse chercher comment faire le css car si c'est un projet d'ecole c'est que tu es sensé apprendre les choses tout seul 😉

#

Si tu as un souci n'hesite pas 😉

hard wyvern
#

Oh merci et oui je vais essayer de me débrouiller merci pour ton aide 😉

#

Juste pour être sur que je sois dans la bonne voie, la div au dessus et en dessous représente les lignes sur le côté du h1 ?
Mon idée de base c'était de faire une ligne qui raye le texte mais jouer sur le background color du texte qui est de la même couleur que le fond du site pour donner l'impression que la ligne se sépare

storm violet
#

tu peut faire

<div>
    <div><span></span></div>
    <div><h1></h1></div>
    <div><span></span></div>
</div>
hard wyvern
#

Je vais essayer de trouver les méthodes pour les deux solutions mais du coup cette méthode rien à voir avec ce que j'ai dit plus haut ?

#

Merci 😊

brave jay
#

ta solution est potentiellement moins bonne

#

ou alors j'arrive pas a comprendre

hard wyvern
#

Ah mince en voulant refaire des recherches je suis tombé sur ça :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div class="line"></div>
<div class="textbox">
<div class="text">This is my Title</div>
</div>
</div>
</body>

</html>

.floatClear {
clear: both;
}
#wrapper {
text-align: center;
position: relative;
}
#wrapper .line {
border-bottom: 2px solid red;
position: absolute;
width: 100%;
top: 15px;
}
#wrapper .textbox {
position: absolute;
width: 100%;
}
#wrapper .textbox .text {
background-color: white;
margin: 0px auto;
padding: 0px 10px;
text-align: center;
display: inline;
font-size: 24px;
}

#

En fait je me rends compte de l'erreur du code ci-dessous le background color risque d'empiéter sur les autres éléments

storm violet
#

@hard wyvern tu peut voc 2 minute ?

hard wyvern
storm violet
#

je suis dans le vocal @hard wyvern

hard wyvern
#

@storm violet Je te remercie j'ai réussi c'est tout bon

Capture_decran_2024-08-08_164035.png
storm violet
#

eh bah parfait gg !

void anvil
#

Salut, je commence le html css (j’ai déjà quelques bases en html) et j’ai déjà un problème… En fait ma page « Delbot » ne s’affiche pas sur mon téléphone dés que j’essaie de l’ouvrir sur mon téléphone il met « Cannot GET /Delbot » pourtant sur mon pc aucun problème et le dossier Delbot existe bien. Quelqu’un aurais une idée de pourquoi ?

storm violet
#

L’hébergement ?

dull dome
#

si tu n'utilises pas de serveur tu ne pourra pas y accéder.

dusky sonnet
#

Salut, j'ai commencé HTML et CSS il y a 1 semaine et j'ai un problème : je n'arrive jamais à aligner l'image au même niveau que mon texte et mon titre.

#

mon probleme

1.PNG
#

je veux ce résultat

2.PNG
dull dome
# dusky sonnet mon probleme

le mieux dans t'on cas c'est de faire une div qui rassemble t'on titre est t'on image est d'ajouter ce style à cette div

align-items: center;
display: flex;
flex-wrap: wrap; /*Pour le responsive*/
dusky sonnet
#

bon, je code trop dans le desorde je pense, peut etre a cause des paddings que marche pas

dull dome
#

montre moi ta structure html pour t'on texte est t'on image

dusky sonnet
#

je te montre ce que moi j'ai fais de base

dull dome
#

asy

dusky sonnet
#

mais le plus gros soucis c le css

dull dome
#

ok alors mes la div left est la div button-page1 dans une meme div

#

est mes le style que je t'es passer sur header

dusky sonnet
#

comme ca ?

dull dome
#

oui mais il faut fermer les div

#

<div></div>

dusky sonnet
#

mdrrr oue je viens de voir

#

ca fait la meme chose

#

tu veux que je te montre mon css ?

dull dome
#

ouaip

#

est le resultat

dusky sonnet
#

vzy mais tu vas rigoler vu comment c le bordel

dull dome
# 
header {
  align-items: center;
  display: flex;
  flex-wrap: wrap; /*Pour le responsive*/
}
dusky sonnet
dull dome
#

fait voir la structure du html

dusky sonnet
dull dome
#

oui mais jsp si ce que tu as fait est ok

#

au pire si tu veux viens vocal ce sera plus simple pour t'expliquer

dusky sonnet
#

vzy

void anvil
#

Salut quand on va sur mon site web le css ne se charge pas /: quelqu'un aurais une idée? Si vous avez besoin de quelques chose pingez moi.