c un degrade ?
#html-css
latent grove
latent grove
mrc
civic whale
mrc
(le 2ème te correspondra mieux je pense, sauf que c'est à appliquer sur un bouton et non une box comme representé)
latent grove
moi je fait mes boutons sans buton
background: linear-gradient(left, #f1ce4d, #FFD43B);
ca marche pas
civic whale
background: linear-gradient(left, #f1ce4d 0%, #FFD43B 100%);
civic whale
background: linear-gradient(90deg, #f1ce4d 0%, #FFD43B 100%);
ou
background: linear-gradient(-90deg, #f1ce4d 0%, #FFD43B 100%);
civic whale
Commence par 0%
civic whale
t'as mis en degré?
latent grove
non
civic whale
mets en degré pour voir
latent grove
mais ca doit marcher
latent grove
ca marche en deg mrc
civic whale
😉
c'est pas "left", c'est "to left", mais j'aurais pas pu le savoir puisque j'utilise que des degrés ^^'
https://developer.mozilla.org/fr/docs/Web/CSS/linear-gradient() check la doc au pire !
latent grove
.btn-ajoute {
margin-bottom: 200px;
margin-left: 670px;
margin-top: 50px;
font-size: 20px;
background: linear-gradient(to right, #cea100 0%, #FFD43B 80%);
height: 100%;
border: 6px solid;
border-radius: 30px;
border-top: rgb(255, 255, 255);
border-left: rgb(255, 255, 255);
display: inline-block;
padding: 15px 30px;
color: rgb(90, 82, 82);
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
font-family: cursive, sans-serif;
}
.btn-ajoute:hover {
filter:brightness(1.1);
}
.btn-ajoute:active {
margin-bottom: 200px;
margin-left: 670px;
margin-top: 50px;
font-size: 20px;
background: #FFD43B;
border: 6px solid;
border-radius: 30px;
border-bottom: rgb(90, 82, 82);
border-right: rgb(110, 110, 110);
border-top: rgb(255, 255, 255);
color: gray;
display: inline-block;
border-left: rgb(255, 255, 255);
padding: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
font-family: cursive, sans-serif;
}
comment faire pour que quand j'apui le border-right par mais pas le bottom
latent grove
svp
gaunt yoke
border-right: 0
hollow brook
Salut salut, (je sais pas trop ou poster ma demande) je cherche une maquette pour la page d'accueil de mon portfolio mais je ne trouve rien qui me tape de l'oeuil :/
gaunt yoke
Dribbble?
gaunt yoke
Et bah go
hollow brook
Mais je sais pas trop par quoi remplacé la photo du mec au milieu :/
errant cypress
la tienne bahahahah
hollow brook
quartz thunder
Go chercher un truc complètement différent alors
hollow brook
Tu parles de la photo ou de la maquette ?
gaunt yoke
sans la photo ca rendra pas pareille je te le dis
hollow brook
Ouais j'me doute
quartz thunder
la maquette
hollow brook
la maquette
ok
errant cypress
Hello, vous savez pourquoi mon textarea contient des caractères invisibles ? c'est un textarea simple pourtant...
gaunt yoke
Ou ça invisible
errant cypress
ah bah c'est réglé, c'était les espaces entre l'ouverture de la balise et la fermeture
ivory spear
Bonjour donc je veut debuter sur le développement web qq1 pourrait m orienter sur quel langage choisir et comment l apprendre ( j ai 14 ans et j aimerai en faire mon métier)
sinful nest
Bonjour donc je veut debuter sur le développement web qq1 pourrait m orienter su...
slt
alors si c'est pour faire du développement web, tu dois commencer par HTML et CSS. A noté qu'ils ne sont pas des langages de développement à proprement parlé. Mais le premier sers à faire la structure de tes pages, et les fiches de styles css servent à faire la mise en page.
Je te laisse le cours que j'ai utilisé pour ma part:
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Bon courage et amuse toi bien ^^
ivory spear
slt
alors si c'est pour faire du développement web, tu dois commencer par HTML ...
Merci à toi
toxic vector
civic whale
https://tailwindcss.com
?
visual trellis
bonjour,
j ai codé au site web avec un formulaire mais je n'arrive pas à forcer l utilisateur à rentrer son mail par exemple (le boutton d inscription marche qd meme)
et je voulais savoir si quelqu'un pouvais rapidement me dire ce qu'il manque ou ne va pas
gaunt yoke
Tu veux bloquer le bouton tant que les champs e-mail est pas rempli ?
hollow brook
Je pense que tu cherches ça
https://www.w3schools.com/tags/att_input_required.asp
civic whale
c koa la difference ?
À gauche c'est React, et à droite c'est Vue... à toi de checker sur internet ^^' j'te conseille VueJS si tu débutes
quartz thunder
Moi je conseille de pas bosser sur un framework après 1 jour d'apprentissage ^^'
brave jay
c'est pour apres :p
civic whale
Moi je conseille de pas bosser sur un framework après 1 jour d'apprentissage ^^'
Surtout!
civic whale
c'est pour apres :p
J'ai pas envie d'te décourager, mais "après", c'est dans longtemps... j'espère que t'es vraiment passionné par le dev!
J'te souhaite de réussir en tous cas 🙂 n'hésite pas à venir nous demander des conseils, je suis nouveau aussi (sur le serveur) mais je trouve toujours une petite solution à mes problèmes par ici
dusky skiff
Hey, vous avez pas un truc pour faire des contours moins.... immondes 
https://pic.is-inside.me/oMWAADSB.png
le border radius c'est à vomir
Sur ma maquette j'avais ça
dusky skiff
0.6 ^^
Mais si je met moins de px pas ouf :c
je vais m'en contenter
non c'est vraiment dégueulasse
en fait ça fait un truc aplati
il faudrait que ma forme soit carrée pour que ça fasse un truc propre
royal patio
Avec des
border-radius: 10px;
10 pixels c'est pas mal pour les petits éléments
Le max c'est 20 après effectivement c'est immonde
dusky skiff
Oui mais bon, tan pis
Hey, j'ai bien fait en sorte de faire mon CSS de façon à ce qu'on ne puisse pas modifier la taille des éléments du site en zoomant ! Mais j'ai un problème, on dirait que l'espace entre mes boutons s'obstine à bouger tout seul, j'ai tenté de supprimer le margin, le padding, mais rien y fait, il continue à bouger ! Comment faire ?
.btn {
padding : 0;
margin : 0.6vh;
font-size: 2vh;
font-family: MontserratRegular;
border: none;
border-radius: 3%;
display: inline-block;
line-height: 5vh;
height: 5vh;
width: 12vh;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: #fff;
background-color: #663fda;
text-align: center;
transition: .2s ease-out;
cursor: pointer;
}
<div class="horizontal_center" style="margin-top: 40vh;">
<div class="btn" target="blank_" href="https://gitlab.com/5">Gitlab</div>
<div class="btn" target="blank_" href="https://gitlab.com/5">OOGA</div>
<div class="btn" target="blank_" href="https://gitlab.com/5">BOOGA</div>
</div>
Personne ne sait ?
dusky skiff
Non désolé
dusky skiff
Mais par contre je peux te mettre sur le live share vsc
et là tu vas pouvoir voir par toi même
dusky skiff
et on gère pas ces tailles de font, margin, line-height etc en vh
🤔
Mais du coup, si je zoome, avec les px le texte se zoom, et je veux pas que ça le fasse justement
En fait je veux juste faire en sorte que quand je zoom, rien ne bouge
gaunt yoke
mais dans quel cas on zoom sur un site
dusky skiff
Sinon ça pète tout
gaunt yoke
on test pas son responsive en zoomant
dusky skiff
Je veux pas tester mon responsive xd
Je sais t'inquiètes
Je veux juste que si quelqu'un viens à zoomer le site, ça ne bouge pas
gaunt yoke
bah du coup vh reste une mauvaise solution tout de même part sur du pixelc
car 120 pixel sur un ordi, telephone ou autre ca reste 120pixels
alors que vh c'est en fonction de la taille de l'écran
donc forcément si tu zoomes le vh est réduit ou augmenté
dusky skiff
donc forcément si tu zoomes le vh est réduit ou augmenté
bah non justement le texte bouge pas si on zoom :/
Mais là du coup si je met en px ça broke tout regarde : https://pic.is-inside.me/12gksKBI.gif
Du coup mon réél problème c'est ça : https://pic.is-inside.me/12gksKBI.gif :c
gaunt yoke
je pense que meme dans les meta tu peux mettre le maximum-scale
dusky skiff
je m'étais renseigné et je n'avais pas réussi
gaunt yoke
dans la meta viewport
dusky skiff
dans la meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
J'ai déjà ça perso
dusky skiff
rajoute du coup un maximum-scale=1.0 dans le content
c'est fait, mais ça marche pas, toujours le même problème 😢
Bon pas grave, ça restera comme ça 
Mais sinon j'ai un tout piti problème, je remarque qu'il y a énormément de place à gauche et à droite, tu sais comment faire pour le réduire ( désolé si mes questions paraissent connes mais je début xd ) https://pic.is-inside.me/d2uYf0Uk.png
gaunt yoke
dans la boxe ou en dehors de la boxe ?
civic whale
@dusky skiff, pourquoi tu fais pas ça en flexbox?
Tu aurais réglé tous tes soucis depuis bien longtemps...
dusky skiff
dans la boxe ou en dehors de la boxe ?
J'ai trouvé mais merci ! En fait j'ai fait une erreur idiote
dusky skiff
<@!393378313663676427>, pourquoi tu fais pas ça en flexbox?
Parceque je connais pas
¯_(ツ)_/¯
dusky skiff
Je regarderais merci beaucoup 👍
civic whale
Pas de soucis... et pense à bien mettre tes meta viewport la prochaine fois, @gaunt yoke a raison
Attention aux soucis de compatibilité tout de même
civic whale
Bonjour à tous, j'ai un gros soucis avec mon code,. je m'explique...
J'ai une section hero-banner où dedans j'ai 2 colonnes, dont voici le code CSS:
.row {
margin-left: -28px;
margin-right: -28px;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
.col {
width: 50%;
padding-left: 30px;
padding-right: 30px;
}
}
———————————————————————
J'aimerais cependant pouvoir intégrer une image PNG sur la droite sans pour autant devoir taper 4 000 lignes de sorte à ce que ça soit responsive... je sais que c'est possible avec des flexbox, le bémol est que j'ai peur de devoir modifier TOUT mon code.
Je cherche donc désespérément une solution par ici, dans l'espoir de trouver un(e) génie parmi vous.
⚠️ J'ai aussi tenté quelque chose en créant une nouvelle classe CSS qui s'appelle "mockup" :
.mockup {
display: flex;
height: 100%;
position: absolute;
justify-content: center;
}
Et le tout combiné, ça donne ça:
Si besoin d'informations supplémentaires, n'hésitez pas à me les demander!
Voici le code de la section hero-banner:
.hero-banner {
color: var(--hero-banner__text-color);
width: 100%;
background: transparent;
position: relative;
z-index: 1;
padding: var(--padding);
display: flex;
align-items: center;
.hero-banner__body {
margin-bottom: 50px;
}
&:after {
content: "";
background: var(--hero-banner__background);
z-index: -1;
position: absolute;
top: -100px;
left: 0;
min-height: var(--minHeight);
height: var(--height);
width: 100%;
transform: skewY(-3deg);
pointer-events: none;
}
}
.hero-banner {
position: relative;
display: grid;
align-items: center;
}
.hero-banner__title {
font-size: 2rem;
font-family: "Poppins";
font-weight: 600;
line-height: 1;
strong {
font-weight: 800;
}
}
.hero-banner__text {
p {
font-size: 18px;
font-family: "Poppins";
font-weight: 400;
line-height: 1.2;
strong {
font-weight: 600;
}
}
}```Et si vous voulez l'HTML (JSX) à partir du row, le voici:
<div className="row">
<div className="col">
<div className="hero-banner__title mx-20">
<strong>DUDLE®</strong> Studio
</div>
<div className="hero-banner__text mx-20">
<p>Lorem ipsum dolor sit amet <strong>consectetur</strong> adipisicing elit. Également nous ipsam quae ipsum aperiam <strong>commodi</strong> maiores corrupti nostrum dicta, sed obcaecati, mollitia fugiat totam vero <strong>officia consequuntur</strong>! Puis aussi, voluptate expedita ex harum deserunt!</p>
<p><strong>Faites-nous confiance!</strong></p>
</div>
<div className="hero-banner__buttons">
<Components.Buttons
link="learn-more"
text="En savoir plus"
color="primary"
/>
<Components.Buttons
link="order"
text="Passer une commande"
color="secondary"
/>
</div>
</div>
<div className="col mockup">
<img src={Components.Mockup} />
</div>
</div>
on peut avoir accès au site via un intermédiaire plz
gaunt yoke
Bah le tel est bien aligné 🤔 tu veux qu'il fasse quoi de plus ?
qu'il dépasse sur la partie orange ?
civic whale
qu'il soit plus petit sans forcément bouger de place, mais pas trop petit de sorte à ce qu'il dépasse de la partie orange, oui
gaunt yoke
Déjà pour commencer retouche ton image pour éviter qu'elle ai tout ce contour transparent 😄
quand c'est fait tu me dis je recheck
gaunt yoke
width: 100%;
position: relative;
max-width: 17rem;
transform: translateY(-60px);
``` sur la 2eme colonne position: absolute;
top: 0;
right: 0;
``` sur l'image
void anvil
Salut j'ai un problème, J'ai fais une figure comme ça
Et j'ai mis
transition: all 1s ease;
transform:scale(1.25);
Pour faire grossir l'image sauf que c'est toute la figure qui grossit
gaunt yoke
tu veux que juste l'image grossisse ? c'est un background-image ?
dusky skiff
Alors je t'avoue que je suis vraiment un débutant. Mais en vrai, je pense que c'est parce-que la class appartient pas à l'image mais à la figure
gaunt yoke
tu background-size: xxx%
dusky skiff
Ah bah Enzo le pro est là je laisse tomber 😂
void anvil
x)
gaunt yoke
Par contre oui si tu appliques le scale sur tout l'élement et que ton texte est dans l'élement oui normal que tout grossisse
void anvil
J'ai fais ça
gaunt yoke
okay donc tu passes par le background-image ?
void anvil
oui
gaunt yoke
donc tu peux avoir un
figure {
background-size: 100%;
transition: all 1s ease;
}
figure:hover {
background-size: 150%;
}
essaye pour voir
tu rajoutes a ton code existant
void anvil
donc la pour moi c'est .math à la place de figure?
gaunt yoke
Oui voilà
gaunt yoke
t'as enlevés ton scale hein ?
void anvil
J'ai enlevé mais l'image est toujours très clair
Quand j'ai ma souris dessus elle n'es plus clair
gaunt yoke
t'as pas un filter ou quoi ? 🤔
void anvil
nan 🤷♀️
dusky skiff
oula
void anvil
gaunt yoke
met background-color deja
car en mettant juste background tu ecrases toutes les autres propriété
void anvil
C'est fait
gaunt yoke
t'as toujours le soucis ?
void anvil
oui
gaunt yoke
envoie le lien de ton image
car dans tes 2 screens l'image elle est clair
🤔
Ah mais toi tu veux mettre un overlay par dessus ?
void anvil
Un overlay cet a dire ?
void anvil
non par dessous
void anvil
c'est toi qui m'avais dis une fois de faire ça une fois
gaunt yoke
??
void anvil
att
gaunt yoke
Là ton background-color il va être affiché en gros si t'as pas d'image
ca va etre une espece de placeholder en gros
enfin il sera visible, car il sera tout le temps affiché
gaunt yoke
t'as un filter quelque part c'est sur 😂 sois dans ton code sois t'as une extension chrome ou autre qui modifie les images
mais là c'est pas elle est clair c'est qu'elle est inversé
void anvil
Ah mais j'ai l'option forcer les pages sombres sur opera
gaunt yoke
void anvil
Et j'arrive pas à le retirer génial
gaunt yoke
ça du coup c'est de ton coté haha mais le background-size fonctionnera en tout cas
void anvil
ok et sinon l'image quand j'ai ma souris dessus elle grossit le coté en haut à gauche de l'image
et pas le centre
gaunt yoke
faut que tu background-position: center par exemple
elle va zoomer en gardant le centre
void anvil
Bon finalement je reviens vers vous pcq j'ai retrouver un ancine site que j'avais fais et les images ne sont pas clair
L'image à droite c'est la meme que celle en haut
gaunt yoke
yes et du coup ??
void anvil
et du coup l'image elle est pas éclairé
alors que sur le site ou tu m'as aidé elle l'est
gaunt yoke
T'as pas du tout de filter sur un élément parent ?
void anvil
nn
void anvil
Le lien ?
gaunt yoke
oui si tu veux
void anvil
C'est pas en public, ça va marcher quand meme ?
j'ai pas compris comment tu veux que je t'envoie mon site
quartz thunder
Tu peux utiliser ngrok pour qu’il puisse y avoir accès
gaunt yoke
oui ou tu met sur git ou un zip
civic whale
Gros gros soucis avec mon code:
Ma section ne va pas jusqu'au bout en version mobile
@media (max-width: 1024px) {
.services-banner {
min-height: 100vh;
}
}
ngrok please
civic whale
ngrok please
nevermind ! problème résolu
j'avais un "max-height:100vh;" caché dans mon code
gaunt yoke
civic whale
Ça va il est pas énorme non plus le problème
en vrai non c'est juste un bête truc qui était caché 
on s'y fait à force
strong lynx
en vrai non c'est juste un bête truc qui était caché <:joygun:707539216543776779...
c'est pour le "Gros gros soucis dans mon code" que j'ai dit ça 
civic whale
oui je sais haha tkt j'avais capté :p
void anvil
Bon re @gaunt yoke j'ai trouvé l'erreur, c'est la balise backgroud-size qui rend l'image très clair #html-css message
wise hamletBOT
void anvil
Sauf que si je l'enlève l'image se zoom d'un coup quand elle est en hover 🤔
dusky skiff
Ptdr l'émoji qui fait cliquer
gaunt yoke
Le background zoom seulement c’est impossible qu’il t’ajoute cet effet
cobalt vale
Salut, est-ce que vous sauriez comment je peut faire pour que quand je recherche un pseudo dans l'input il m'affiche seulement la ligne avec le pseudo ? et si possible en js natif merci :)
ivory spear
Qq1 peut m aider enft je veut mettre une image cliquable et après sa affiche l image en plus gros sur une autre page mais sa ne marche pas
ivory spear
J ai essayé et tjr pas 😕
languid gazelle
void anvil
tu veux que ton image s'affiche en gros ? @ivory spear
ivory spear
Oui stp
civic whale
Oui stp
Tu as bien renommé le dossier dans ton explorateur ? ainsi que l'image ?
Et c'est expérience, et compétences
et les class, ainsi que les ID ne prennent pas en compte les espaces... quand tu mets un espace entre un mot et un autre, il prend ça comme une nouvelle déclaration
Donc pense à enlever les espaces dans tes ID
drowsy lichen
Bonsoir je suis entrain de créer un site et j'ai un problème avec la responsive sur mobile avec une page si vous pouvez m'aider je vous remercie beucoup
j'ai fait un codepen pour vous montrer https://codepen.io/jules-fakhouri/pen/poNGLvq
stark rapids
normal, tu utilises des margin en pixel
steady verge
Comment je peux faire pour que la checkbox soit de la hauteur de son parent ? (tailwind)
<div class="max-w-2xl bg-white border-2 p-5 rounded shadow-lg">
<div class="flex">
<input type="checkbox" class="w-full rounded-md border-2 p-5" (click)="onCheck()" [checked]="task.expired" />
<div class="flex flex-col ml-5">
<h4 class="text-xl font-semibold mb-2">{{ task.name | titlecase }}</h4>
<p class="text-gray-800 mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius sequi laboriosam ex! Quidem doloribus nobis, ipsum ullam, deserunt, non ratione minus nisi sit exercitationem in unde voluptas? Veniam, aperiam perferendis!</p>
<div class="flex justify-end mt-5">
<p class="font-light text-sm">{{ task.created_at | date : 'short'}}</p>
</div>
</div>
</div>
</div>```Comment ça de la hauteur de son parent?
drowsy lichen
normal, tu utilises des margin en pixel
Tu me répondais à moi ?
stark rapids
oui
quartz thunder
@steady verge h-full no?
quartz thunder
je test att
<div class="w-full">
<input type="checkbox" class="w-full h-full rounded-md border-2 p-5" (click)="onCheck()" [checked]="task.expired" />
</div>
Vas-y je test ça après, merci
drowsy lichen
oui
Il faut que j'utilise des margin pour l'image car le texte ça fait n'importe quoi en responsive
stark rapids
utilises des valeurs en pourcentage
drowsy lichen
utilises des valeurs en pourcentage
Sur l'image directement j'ai aussi utiliser les media query
stark rapids
.notrehistoire{
display:flex;
align-items:center;
flex-direction:column;
}
mets ca et enleve les margin qui se trouvent dans la div notrehistoire
et rajoute width:une valeur en pourcentage; a ton paragraphe
@drowsy lichen
gaunt yoke
Sur l'image directement j'ai aussi utiliser les media query
t'as juste à mettre dans ton p
color: #ffffff;
margin: auto;
max-width: 33rem;
width: 100%;
et ce sera responsive en mobile sans faire de media query et tu auras un container en desktop
drowsy lichen
@gaunt yoke ça ne change pas a moins que j'ai mal fait
.notrehistoire p{
color: #ffffff;
margin-right: 355px;
text-justify: none;
float: center;
display: flex;
margin: auto;
max-width: 33rem;
width: 100%;
flex-direction: column;
justify-content: center;
margin-left: 308px;
}
Je t’ai dis d’enlever le reste
drowsy lichen
Je t’ai dis d’enlever le reste
j'ai fait comme tu m'a dit ça ne change pas malheureusement
gaunt yoke
Remet sur codepen
drowsy lichen
gaunt yoke
le paragraphe est bon du coup
je t'ai corrigé que ça moi pas le reste
.notrehistoire {
margin: auto;
max-width: 33rem;
width: 100%;
text-align: center;
}
.notrehistoire h1{
color: rgb(255, 255, 255);
}
.notrehistoire img{
width: 100%;
margin-bottom: 12px;
}
.notrehistoire p{
color: #ffffff;
}
voilà met ça comme css pour ta div notre histoire
et ce sera ok en mobile
et en desktop
civic whale
Hello à tous, j'ai un p'tit soucis avec mon code... lorsque j'ai créé ma grille en flexbox (display:flex;), tout fonctionnait super bien jusqu'à ce que je me rende compte d'un truc... et je connais la raison du pourquoi, seulement, j'aurais aimé savoir s'il y avait une autre possibilité afin de remédier à ce petit détail qui me dérange tant:
Tout mon contenu est en "position:absolute;" ce qui fait que ça se met en plein centre de ma page sans prendre en compte la présence du titre (et donc sa taille), ce qui fait que ça crée un effet de décentrage, qui me dérange beaucoup...
Voici un ngrok de mon site afin que vous puissiez voir le code en temps réel
toxic vector
Hello à tous, j'ai un p'tit soucis avec mon code... lorsque j'ai créé ma grille ...
Waw c'est beau
civic whale
Merci beaucoup @toxic vector ! ^^'
gaunt yoke
Pourquoi tu le position absolute ?
j'ai enlevé ton position absolute et du coup le flex du parent et voilà c'est réglé
Ou alors tu veux aligner le discover au reste ?
gaunt yoke
Du parent et aussi le position absolute
civic whale
gaunt yoke
enlève le flex de #discover
civic whale
ah ouais
gaunt yoke
et enleve le position absolute de .grid
deja ca clean ton code et ca évite d'avoir des éléments useless dedans car la vraiment le position absolute 0 intérêts 🤔
mais du coup ct quoi le soucis
gaunt yoke
en hauteur ?
civic whale
en hauteur oui
parce que du coup là ça donne ça
c'est pas très beau
c'est pas du tout homogène à l'image
gaunt yoke
tu veux aligner les 2 blocs ensemble
civic whale
oui surtout
gaunt yoke
bah tu align-items: center
et pour centrer le tout dans ta div #discover
display: flex;
flex-direction: column;
justify-content: center;
ah voilà
mais du coup je trouve ça trop éloigné du titre
att non c bon
j'ai compris pourquoi
gaunt yoke
J'étais entrain de faire un truc dessus pour te l'envoyer mais laisse tombé le live reload des que tu saves je perd mes trucs 
Mais tu devrais mettre ton titre dans la meme section que graphisme etc
civic whale
yes vazy je bouge plus
gaunt yoke
j'aurai plus vu un truc de ce genre
en aérant un peu plus ou autre
mais ca reste plus lisible là de cette manière je trouve
gaunt yoke
ok refresh pas par contre
civic whale
tkt haha
gaunt yoke
.discover
display: flex;
justify-content: center;
align-items: center;
.grid
max-width: 90rem;
width: 100%;
discover-text-zone va dans le deuxieme .discover-item
et tu lui mets ça en css
padding: 0;
display: block;
text-align: left;
margin-bottom: 28px;
transform: translateX(-2px);
ou en tout cas tu clean pour que tu es ce rendu
.discover-title tu enleves tout le css (tu peux meme enlever la div finakement)
civic whale
ah ouais
gaunt yoke
le h1
font-size: 2.8rem;
et dans discover-text-zone t'as enlevé tout le css d'avant ?
gaunt yoke
Non j'ai réecris par dessus donc update
civic whale
ahh d'accord
gaunt yoke
les h1 dans les mb-10
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 1.3rem;
et les p
color: #dad4d4;
line-height: 34px;
max-width: 37rem;
width: 100%;
``` voilaokay cimer ! 🙂 t un génie
c'est un peu bugué x)
ah non oups
att
.discover-title oublié d'enlever
gaunt yoke
gaunt yoke
Ce qui serait sympa c’est que tes formes de gauche tu les sépares en différent svg que tu ferais float
a des vitesses différentes
civic whale
je peux les faire float sans les séparer
en rajoutant un <style> </style> et leur ajouter des animations en @keyframes directement dans le SVG ^^'
Tu penses qu'il y aurait moyen d'espacer un peu plus la section?
Parce qu'en mode tablette ou même un écran un peu plus petit que le mien, c'est collé au top de la section
gaunt yoke
Ah c’est déjà un svg du coup ? Oki cool
civic whale
Yes ! 🙂
gaunt yoke
met un padding à ta section
toxic vector
@gaunt yoke Salut ! Utilises-tu tailwindcss ?
gaunt yoke
Oui por que
toxic vector
Car j'ai tout installé mais ça ne marche pas
toxic vector
Bein j'ai fait l'installation quoi 
civic whale
@toxic vector Tu dois le build toi-même TailwindCSS... c'est pas comme Bootstrap, ou autre
toxic vector
<@!709746309988483102> Tu dois le build toi-même TailwindCSS... c'est pas comme ...
yep je sais
civic whale
Qu'est-ce qui ne fonctionne pas? :/
gaunt yoke
T’es sur quel type de projet
civic whale
met un padding à ta section
thx
gaunt yoke
laravel, react ou autre
toxic vector
T’es sur quel type de projet
Une Login page
gaunt yoke
okay tu fais tout main ?
gaunt yoke
t'as bien install postcss etc ?
Ah non tu peux passer sans
Car il suffit juste de
npx tailwindcss-cli@latest build -o tailwind.css
dans ton projet je viens de le faire et j'ai bien mon:
qui s'est créée
puis tu peux créer ta config tailwind.config.js etc y a normalement tout d'indiquer je viens d'essayer ca marche bien 🤔 tu bloques a quel niveau
toxic vector
puis tu peux créer ta config tailwind.config.js etc y a normalement tout d'indiq...
J'ai tout fait de ça
sauf que au moment ou je veux mettre des class ça change rien
Bon bah c'était mal relié
Je suis juste con 😂
gaunt yoke
Niquel haha
brave jay
Salut ! je cherche a faire en sorte qu'on puisse savoir si mon serveur gmod est online via mon site
small girder
eu oual
je check si j'ai encore le co de
@brave jay
prions pour que ce soit le cas
brave jay
J'ai rien compris 😄
small girder
J'ai rien compris 😄
je recherche le code je te le donne je LAI 😂
brave jay
c'est gentil 🙂
brave jay
merci 🙂
c'est pas ca qu'il me faut car dans le cas qu'il montre il faut que le joueur soit deja co moi je veux que ca ping le serveur
errant cypress
avec gameq lib en php tu peux le savoir
et savoir les autres trucs
mais is online c’est inclus
je peux te l’assurer je l’ai déjà fais
small girder
@gaunt yoke wsh bebouuuu ptite question
if (message.channel.type === "dm") {
if (message.author.bot) return
if (message.content.startsWith("!")) return
channel = bot.channels.cache.get('816601104267477012')
channel.send(message.content).then(async(msg) => {
await msg.react("\✅")
await msg.react("\❌")
await msg.react("\⚠️")
})
}
le code marche oklm
je Mp le bot sa marche
d'autres gens mp le bot sa met Que les message priver sont bloquer
style mon bot la bloquer
une idée ?
wise hamletBOT
Pour envoyer un message avec un code il vous suffit d'entourer votre message de ceci : ```. Ainsi, pour poster votre code dans un message, vous devez faire comme ceci :
```langage
Votre code
```
Et par exemple pour un code en lua :
```lua
print("hello")
```
Le résultat sera le suivant :
Votre code
Et par exemple pour un code en lua :
print("hello")```ta rien vue
wary apex
@small girder Enzo c'est mon bébou
wise hamletBOT
gaunt yoke
acoustic current
du coup j'ai un problème en CSS
Bah explique
void anvil
oui je prend les screens attend
Je veux personnaliser mes titres <h2> avec une border-bottom au lieu d'une text-decoration: underline; car la border bottom est plus personnalisable
sauf que le problème est qu'un titre occupe une trop grande partie horrizontale
du coup ma border-bottom prend toute la largeur
j'ai donc décidé de mettre mes titres sous forme de carré, pour que le border-bottom n'occupe que le texte des <h2>
sauf que maintenant les titres ne sont plus centrés et se mettent à coté des images
gaunt yoke
met juste chaque partie dans un élément block (comme une div ou autre)
et ce sera réglé
gaunt yoke
<div>
titre
texte
image
</div>
<div>
titre
texte
image
</div>
mais ça ne marche pas de mettre une div pour tout les h2 ?
comme ça j'ai juste à faire .question h2
gaunt yoke
Si mais du coup tu as le soucis que tu rencontres actuellement
Ca changera rien a ton css
void anvil
et pourquoi ça fait ça ?
gaunt yoke
Car tu met du inline-block
donc inline
donc les éléments peuvent se mettre sur la meme ligne
alors que les éléments de type block prennent 100% par default
void anvil
comment tu écris du code comme en haut sur discord ?
gaunt yoke
wise hamletBOT
Pour envoyer un message avec un code il vous suffit d'entourer votre message de ceci : ```. Ainsi, pour poster votre code dans un message, vous devez faire comme ceci :
```langage
Votre code
```
Et par exemple pour un code en lua :
```lua
print("hello")
```
Le résultat sera le suivant :
Votre code
Et par exemple pour un code en lua :
print("hello")```<div class="question">
<div class="ptext">
<div class="image">
<h2>Mon titre</h2>
<p>mon paragraphe</p>
<p>ma photo</p>
</div>
</div>
</div>
<div class="question">
<div class="ptext">
<div class="image">
<h2>Mon titre2</h2>
<p>mon paragraphe2</p>
<p>ma photo2</p>
</div>
</div>
</div>
<div class="question">
<div class="ptext">
<div class="image">
<h2>Mon titre3</h2>
<p>mon paragraphe3</p>
<p>ma photo3</p>
</div>
</div>
</div>
comme ça en gros ?
gaunt yoke
<div class="question">
<div class="ptext">
<div class="image">
<h2>Mon titre</h2>
<p>mon paragraphe</p>
<p>ma photo</p>
</div>
<div class="image">
<h2>Mon titre</h2>
<p>mon paragraphe</p>
<p>ma photo</p>
</div>
</div>
</div>
plus logique
void anvil
oui effectivement
et du coup, pour faire un soulignage tu conseils d'utiliser les border-bottom ?
et le text-align center ne marche pas
je le met dans le html ?
gaunt yoke
comme tu veux un border bottom, avec un pseudo element
Non met le sur le parent
sur ta class .image
gaunt yoke
tu veux que tout soit centré ou juste le titre ?
gaunt yoke
du coup faut que ton titre ai un parent a lui tout seul pour que tu text-align center le parent
car tu pourras pas text-align: center sur l'élément de type inline
void anvil
donc une autre div ayant pour seul but un text-align: center; ?
gaunt yoke
par exemple oui
void anvil
<div class="question">
<div class="ptext">
<div class="image">
<div class="centertext">
<h2>Mon titre</h2>
</div>
<p>mon paragraphe</p>
<p>ma photo</p>
</div>
<div class="image">
<h2>Mon titre</h2>
<p>mon paragraphe</p>
<p>ma photo</p>
</div>
</div>
</div>
oui, après tu peux light un peu typiquemet ton "ptext" sert à rien
tu peux mettre le style qu'il y a dessus sur la class question
void anvil
ouais sous forme de .question p
void anvil
quelqu'un sait comment régler ca ?
j'ai mis cette ligne mais ca ne change rien :
background-repeat: none;
Salut, j'ai fais une page avec deux div, une à gauche et une à droite, les deux font la même taille (ils occupent une page) mais il y a une ligne d'un petit pixel de long qui se trouve en dessous de mes div et qui fait apparaître la barre de navigation
Je comprends pas d'ou sort cette ligne
gaunt yoke
Oulala ça sert à quoi tout tes calc pour faire - 0px et tout les margin
gaunt yoke
Pour tester je viens de reproduire rapidement un peu ton rendu sans rentrer dans les détails
ça donnerait ça
ca pourrait meme s'alléger encore, mais voilà en gros sans avoir des margins de tout les sens 🤔
void anvil
ok
Moi mon pb c'était que les balises left_content et right_content mettait du contenu blanc en dessous de la page
gaunt yoke
yes mais avec tout ton style qui est pas forcément utile en juste un screen je pouvais pas plus t'aider que ça
Si tu veux envoie directement ton zip avec le code et on règlera le code que tu as direct
meme si a mon avis ca va revenir quasi au meme que ce que je t'ai envoyé, mais envoie toujours^^
void anvil
ok je vais t'envoyer
et la balise display flex c'est pas mieux de la mettre dans la balise qui regroupe tout ?
.bonjour
void anvil
En plus de ton repeat <@456226577798135808>
yes ca marche merci beaucoup !
gaunt yoke
le display flex agit uniquement que sur le premier enfant
void anvil
ah ok
gaunt yoke
Dans mon cas le parent de mes 2 éléments c'est body donc je le met sur le body
dans ton cas c'est bonjour donc c'est bon ^^
gaunt yoke
yes ca marche merci beaucoup !
top
civic whale
```html
background-repeat: none;
```
background-repeat:no-repeat;
en fait, pour que ton image prenne l'entièreté de ta page, la "bonne" manière de faire (bien qu'il n'y ai pas spécifiquement de bonne manière de faire, chacun fait à sa guise), c'est:
background-image:url('*.jpg/.jpeg/.png/.svg');
background-repeat:no-repeat;
background-size:cover; /* ou background-size:contain; */
background-position:center;
et si tu veux que ton image reste tout le temps la même, même lorsque l'utilisateur défile la page, tu peux ajouter en plus de ce que j'ai écrit:
background-attachment:fixed;
ok parfait ! parce que justement je voulais que ma page soit longue pour ajouter d'autres trucs en dessous merci beaucoup
civic whale
pas de soucis
void anvil
si quelqu'un peut épingler le message de dirty jester, je pense que ca pourrait en aider plus qu'un^^
civic whale
haha non merci c gentil mais c pas forcément très utile, la solution est facilement trouvable sur internet en plus 🙂 c une des bases du CSS ^^
void anvil
d'accord ahah^^
civic whale
après ici ils montrent en uniquement utilisant "background" et pas "background-image" etc comme montré dessous le css demo, ce que je ne te conseille pas car y'a un ordre à suivre et c galère ... autant écrire "background-image", "background-size", etc..., tu te casseras moins la tête que de devoir tout mettre dans l'ordre
ca peut être utile uniquement si tu veux mettre 2 backgrounds, et encore... même ca jte conseillerais pas ^^ ça serait mieux d'utiliser des :before/:after
toxic vector
J'ai fait html/css, je sais pas quoi faire après entre js et php
paske php c'eest quand mêeme très utile
civic whale
J'ai fait html/css, je sais pas quoi faire après entre js et php
Tu ne peux pas directement comparer le JS au PHP, là où j'ai tort c'est qu'il existe à l'heure qu'il est des technologies très avancées et très utiles (que de nombreux piliers de notre siècle utilisent pour leurs sites) telles que React (ou ses dérivés NextJS, ou AfterJS), VueJS (ou NuxtJS qui également en est un dérivé)... cependant, PHP a aussi pas mal avancé niveau tech... bien que je ne te pousserai pas à en faire étant que je n'en suis pas personnellement très fan ^^ je n'en ai jamais fait et ça ne m'intéresse pas d'en faire :/ donc voilà
mais tu verras souvent ce débat "PHP vs. JS" 🙂
j'suis de la team JS perso :p
toxic vector
Dacc, alors le mieux c'est de faire les 2 ?
civic whale
Le mieux est de faire ce qui te chante le plus 😉 regarde les technologies de tes sites favoris et fonce sur ce qui te plaît !
quartz thunder
Tu peux faire uniquement du JS tu t'en sortira très bien étant donné que tu peux faire ton front et ton back en JS aujourd'hui
Donc si tu veux réellement n'apprendre que l'un des deux langages, je pense qu'il est plus judicieux de se pencher sur l'apprentissage du JS que du PHP
civic whale
@quartz thunder a très bien raisonné ce que j'essaie de te dire! 😉
yes... sans vouloir insulter personne ni quoique cesoit, le php meurt à petits feux à l'heure qu'il est
quartz thunder
le php meurt à petits feux à l'heure qu'il est
alors non
civic whale
change my mind ^^
errant cypress
le php meurt 
quartz thunder
Si ce serait en train de mourir, le langage ne serait plus mis à jour et les framework PHP ne serait eux non plus plus mis à jour car ça voudrait dire qu'il n'y aurait plus d'intérêt à bosser sur ces technos car plus personne ne les utiliserait
(ou alors très peu)
errant cypress
quartz thunder
Et même sans parler de mise à jour, regarde des stats des langages les plus utilisés/recherchés ces dernières années tu verras que c'est faux
gaunt yoke
Le php est toujours utilisé, mais surtout dans les grosses boites/grand groupe qui ont trop de risque à changer car trop de boulot/d'argent a dépenser
Par contre dans les boites next gen, oui les stacks utilisés vont bcp plus souvent vers du javascript mais parce que eux peuvent se le permettre
civic whale
Si ce serait en train de mourir, le langage ne serait plus mis à jour et les fra...
c'est bien ce que je dis, je n'ai pas parlé d'utilisation quelconque, mais de son avenir
tu ne peux pas nier que React et Vue sont bien plus utilisés que le PHP en 2021
errant cypress
tu peux pas dire ça maintenant
quartz thunder
Tu compare l'incomparable la par contre
gaunt yoke
tu ne peux pas nier que React et Vue sont bien plus utilisés que le PHP en 2021
c'est juste que les 2 n'ont rien à voir Dirty
civic whale
le NodeJS surtout
gaunt yoke
pareille
Tu choisis ta stack en fonction de ton projet, de ce que ca va demander techniquement
Et au niveau back-end je vois autant d'offres orienté php que nodejs, ça se vaut
toxic vector
Bah go apprendre le js :)))
void anvil
@gaunt yoke tu pourras me corriger ce que j'ai fait depuis
gaunt yoke
yes mais pas ce soir je suis pas là sorry
void anvil
t'inquiète
latent grove
comment on fait le nom de domaine embed
quartz thunder
si tu parle de ça par exemple
c'est avec les meta
tiens un outil pour en générer
stark kelp
Exemple tout con, lorsque je suis en SSL voilà ma police d'écriture :
Lorsque mon certificat SSL est disable
🤦 Des idées ? Je voudrais que ce soit la deuxième police qui apparaisse et pas la première
floral shard
A mon avis pour ta font tu passes par un CDN, et ce CDN accepte que les connexions avec un SSL valide (c'est peut-être pas ça et je dit peut-être du bullshit, mais je vois pas ce que ça peut être mis à pars ça)
acoustic current
C'est ca je pense
Car le fait que tu use leur CDN sans SSL peut potentiellement représenter des failles ou jsp quoi
Mais déjà c'est recommandé de passer en SSL
Fait une redirection avec le HTACCESS
stark kelp
Déjà fait ça :/
gaunt yoke
Bah y en a tout pleins en vrai des framework ui, prend celui que tu trouves le mieux, certains sont plus adaptés en fonction de la techno que tu uses
Si tu es sur du html / css lambda tu peux déjà débuter avec un classique comme Bootstrap
tu cherches du light light ? tu peux utiliser tailwind mais du coup tu auras 0 composants réels de fait juste un mega helper
Ah ca va etre lourd aussi alors tailwind, sauf si tu le purges avec un postCss
Sinon tu peux use Knacss je crois qu'ils ont une grid juste
Juste pense à le Purge alors
parce que sinon ca va etre assez lourd juste pour des grids
https://www.knacss.com/doc.html#grid sinon voilà le knacss qui effectivement propose surtout une grid
thorny scroll
Bonsoir tout le monde. J'aurai besoin de vous. J'aimerai que tout ces div soient centré horizontalement sachant que la valeur du nombre de div ne sera pas toujours 4, voici une image qui pourra peut-être vous inspirer un peu plus :
Merci d'avance
royal patio
Regarde les flexbox en CSS
Concrètement sur le parent des 4(ou plus) div tu lui met les propriétés
.parent{
display: flex;
justify-content: center;
}
```et tes div seront centrer peut importe leurs nombresJe vais essayer ça tout de suite, merci ^^
Et pour que les div soit centrer verticalement par rapport au cadre, je fais comment ?
royal patio
Toujours grâce au flexbox la propriété align-items te permet des les centrer verticalement
Je te conseille css-tricks comme site ils en parent avec brio
Sinon pour la doc pure W3school sont les meilleurs
thorny scroll
Ouais je suis entrain de regarder, merci beaucoup en tout cas
slate cliff
g une question
sur les formulaires en html, comment tu fais pour recup les données ?
stray notch
g une question
sur les formulaires en html, comment tu fais pour recup les donné...
en utilisant du php
slate cliff
ok mais plus précisément
stray notch
avec le php tu vas faire des requêtes SQL
et tu vas communiquer avec ta base de donnée
slate cliff
viens en privé que je t envoie mon code
stray notch
vasy
civic whale
Hello, je suis entrain de taffer sur un site pour un ami qui a son label depuis maintenant bientôt 2 ans et demi, il tient à faire quelque chose de TRÈS minimaliste (étant donné que ce style prime dans le monde underground).
Seulement, j'ai un soucis avec ma barre de navigation (autrement appelée "header")
J'ai un padding dans mon <div class="nav">, et je ne comprend pas pourquoi
.navigation {
position: relative;
padding-top: 10px;
padding-bottom: 10px;
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
width: 100%;
z-index: 2000;
text-transform: uppercase;
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 1rem;
padding-left: 1rem;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
h3 {
font-size: 11px;
font-weight: 400;
}
}
ul {
list-style: none;
display: flex;
li {
display: flex;
padding-left: 14px;
a {
font-size: 11px;
font-weight: 400;
color: #ffffff;
&:hover {
text-decoration: underline;
}
}
}
}
}
gaunt yoke
et tu veux faire quoi enfaite
civic whale
check le <div class="nav"> ... </div>, il a comme un léger "padding-bottom", ce que je ne veux pas car ça crée l'illusion que le contenu de la navbar n'est pas bien centré verticalement
gaunt yoke
c'est le line-height
civic whale
y'a pas de line-height
nvm
j'ai compris
c justement ca le pb
c qu'il n'y a pas de line-height
my life is the biggest joke ever
thorny scroll
Je ne suis pas sûr mais tu devrais mettre : ```js
document.getElementById("Title").innerHTML = "tbo";
Je viens d'aller faire des recherches sur la partie innerHTML et j'ai pu trouver et remplacer le code que j'ai envoyé au dessus. Etant vraiment débutant, c'est la seule chose que je pouvais faire pour essayé d'aider sans être sûr que ça marche
foggy thistle
bonsoir tout le monde, je suis un total débutant et je ne comprends pas pourquoi mon before et after ne fonctionne pas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowers market</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--NAVIGATION-->
<nav>
<ul>
<li><a href="#" class="nav item">Home</a></li>
<li><a href="#" class="nav item">Equipement</a></li>
<li><a href="#" class="nav item">test</a></li>
<li><a href="#" class="nav item">Register</a></li>
</ul>
</nav>
<tscript src="js.js"></tscript>
</body>
</html>
*, ::before, ::after{
}
body {
background-color: #F1F1F1
}
nav {
position: fixed
z-index: relative
width: 100%
height: 70%
}
je vois dans le tuto que je suis que toutes les "vagues" sont en jaune alors que moi elles sont en blanc je ne sais pas si cela à un rapport
merci à vous
gaunt yoke
Les vagues??
quartz thunder
foggy thistle
{}
Ça @Enzo#0001
quartz thunder
ah
foggy thistle
Je sais pas comment ça s'appelle 😂
quartz thunder
accolades
foggy thistle
Oui merci je cherchais le mot 😄
Donc une idée ?
Je ne comprends pas ce que signifie <element ::after>
Je dois passer pour un débile je suppose
gaunt yoke
Bah là vide ça sert à rien, les after/before sont des pseudos éléments
L’explique ça va être compliqué, mais avec un exemple:
Une bulle de message ça va être une div par exemple, avec du texte dedans
Mais pour éviter de refaire un élément block pour faire le petite crochet de la bulle message (pour montrer qui parle) on va le faire avec un pseudo élément
C’est un élément qui n’aura pas d’importance sur la page
Enfin qui n’aura pas d’impact sur x ou y au niveau du placement etc
prime blade
cécé all, vous savez comment faire une mini condition en css?
.link:hover { /* Si .link-active alors ne pas faire .link:hover */
background-color: rgba(0, 0, 0, 0.1);
}
.link-active {
background-color: rgba(0, 0, 0, 0.5);
}
router: {
linkExactActiveClass: 'link-active'
}
hé mercé
gaunt yoke
comment ça
prime blade
Si .link-active alors ne pas faire .link:hover
gaunt yoke
tu peux essayet le :not
gaunt yoke
🤔 du coup c'est pas une condition
dans ce cas la fais pas de important fait juste
.link:hover { /* Si .link-active alors ne pas faire .link:hover */
background-color: rgba(0, 0, 0, 0.1);
}
.link.active {
background-color: rgba(0, 0, 0, 0.5);
}
le :hover prend le dessus avec ça
gaunt yoke
cible le juste mieux
et ca ira
les !important faut les éviter en vrai, meme si ca sauve
prime blade
ah oui?
gaunt yoke
yes ton soucis c'est juste car tu cibles pas assez ton élément
prime blade
comment ça?
prime blade
yep merci
foggy thistle
Enfin qui n’aura pas d’impact sur x ou y au niveau du placement etc
mais du coup je ne comprends pas ce que je dois changer 😅
slim bridge
https://flukeout.github.io/ regarde ça
Je suis passé par là tout le monde passe par là 😂 Mais le pire c'est que c'est vraiment bien CSS Diner
lui aussi est pas mal pour les Flexbox
foggy thistle
je viens de comprendre finalement merci @gaunt yoke
void anvil
Comment j'enlève ?
royal patio
sur webkit
le pseudo element ::scrollbar
sur mozilla je crois qu'il y a une propriété CSS scrollbar
timid cliff
void anvil
merci ^^
void anvil
J'ai une question , je souhaiterais à l'aide d'un text box crée une coloration lorsque qu'un mot spécifié dans le code(html crée par moi) et mis dans le textBox ?
sinful nest
J'ai une question , je souhaiterais à l'aide d'un text box crée une coloration l...
là je vois soit du php ou de la html
royal patio
J'ai une question , je souhaiterais à l'aide d'un text box crée une coloration l...
Une sorte de Wysiwyg
acoustic current
J'ai une question , je souhaiterais à l'aide d'un text box crée une coloration l...
Ca serais plus du #javascript-typescript
Je suis pas un boss en js mais tu dois pouvoir faire un truc avec un évent et une condition
void anvil
Une sorte de Wysiwyg
Oe c sa ^^ , @acoustic current , je vais essayer 👌
royal patio
du coup oui c'est plus du JS
aussi je te conseille d'utiliser des div avec l'attribut content editable pour faciliter la mise en place de balise car les textarea n'interprète pas les balise
void anvil
du coup oui c'est plus du JS
aussi je te conseille d'utiliser des div avec l'att...
ok 👍
ornate rock
Bonjour, j'ai fait un site web en HTML et CSS mais je ne sais pas pourquoi je n'arrive pas à faire des clics droit, coller des trucs dans un input et rentrer U dans un input
hollow brook
Salut salut, je cherche un moyen de faire une petite animation en css sympa avec la fleur en bas du svg
Il ressemble à ça aufait
civic whale
@hollow brook tu peux directement modifier le SVG
Le SVG contient un code avec des paths et via une balise style tu peux créer des animations
hollow brook
Je préfère le faire en css sur la page pas directement dedans
civic whale
Et à partir de ça, tu fais à ta guise...
deft burrow
gaunt yoke
Je préfère le faire en css sur la page pas directement dedans
oui tu peux juste cibler chaque élément et faire des keyframes par ex
civic whale
Je préfère le faire en css sur la page pas directement dedans
Bah alors tu peux déjà te préparer à séparer ton SVG en plusieurs fichiers et les faire ainsi...
hollow brook
oui tu peux juste cibler chaque élément et faire des keyframes par ex
C'est ce que je fais
gaunt yoke
et ça marche pas ?
hollow brook
Mais j'arrive pas à faire l'animation que je veux sur les fleurs
gaunt yoke
tu veux faire quoi du coup comme animation
hollow brook
hmmm
civic whale
Ce n'est pas très clair... tu veux faire quoi comme animation?
hollow brook
Faire comme s'il y avait du vent en gros
civic whale
Je m'en doutais bien... bah tu peux faire ça avec des rotate
gaunt yoke
bah tu peux la faire bouger en X et Y a l'infini
et ouais la rotate aussi
Mais tu auras jamais un rendu mega clean par contre ça c'est clair
civic whale
transform :rotate([value]deg)
Le mieux est de faire ton animation sur un logiciel de montage type After effects ou comme ça... et exporter en webm
ou webp, je sais plus
gaunt yoke
Sinon prend toi des jolies animations là dessus https://lottiefiles.com/
Mais là en css tu pourras pas avoir des animations super fluide ou autre malheureusement tu vas vite te retrouver brider
hollow brook
Je check tout ça
civic whale
parcontre, si tu fais la technique du rotate, pense a bien modifier le transform-origin
va falloir la mettre au bottom center je pense
si tu mets juste bottom il se met directement au centre mais on sait jamais
latent grove
comment je peux mettre un width et un height a une image background en css
lethal depot
comment je peux mettre un width et un height a une image background en css
background-image: url(/img/ton_image.jpg); background-size: cover; height: 500px;
Je ne sais pas si c'est ça ta demande 😅
lethal depot
Met ton image dans le css, se sera plus simple
latent grove
oui mais je veux mettre tu texte au dessus
je peux pas faire une class
ou un float
mais on peut pas le centrer
lethal depot
text-align :center;
latent grove
avec un float ?
lethal depot
Ouais, bah je vois pas trop, déso bg
gaunt yoke
comment je peux mettre un width et un height a une image background en css
tu veux que ton background sur le body prenne tout l'écran ?
gaunt yoke
background-size: cover;
latent grove
super ca marche merci !
lethal depot
... 😭
lethal depot
Du moment que ça marche, c'est le principal
maiden sable
C'est possible de mettrz un site au menu avec une icone comme une application?
copper warren
Bah ducoup c'est surtout toi en quel langage j'ai rien compris à ta demande
quartz thunder
En fait on comprends pas ce que tu veux faire
copper warren
C'est possible de mettrz un site au menu
càd ?
Parce que genre t'as aligner plein de mot mais qui on rien à faire ensemble :/
maiden sable
Ba a lecran d'acceuil
copper warren
Oui et tu veux faire quoi ?
gaunt yoke
en gros tu aimerais avoir un raccourci pour ton site avec un logo ?
comme le fait discord par ex
maiden sable
Ouai
gaunt yoke
Excuse les ils ne comprennent rien
maiden sable
:)
quartz thunder
Excuse les ils ne comprennent rien
c'était pas clair aussi
maiden sable
C'est dur ou pas ?
maiden sable
C'est donc aussi simple que ca
A c'est toi enzo
Vous avez fait comment vos pdp ? :)
gaunt yoke
on les a enregistré sur google puis mis en avatar
civic whale
Quelqu'un sait comment on peut éradiquer entièrement les marges par défaut d'un div ?
J'ai tenté border-box:box-sizing + margin:0 + padding:0 malgré que tout cela soit déjà présent dans mon fichier 'reset.scss', mais sans résultat.
Je tiens à préciser qu'il n'y aucun élément de stylisation sur ce qui est présenté. Juste sur le parent qui est une grille (display:grid), où j'ai mis un gap:1rem (ce qui devrait séparer de manière égalisée mes deux divs).
Mais il semble que l'un soit plus éloignée que l'autre dû à sa marge. Je me demande si ce n'est pas à cause de la taille de mon texte, mais ça reste une hypothèse à écarter pour le moment.
(pour vous aider à éclaircir les choses)
gaunt yoke
C’est pas une marge c’est juste que div est un élément block donc width: 100% de son parent
Si tu le met en display: inline la div devrait s’arrêter au texte comme un span
latent grove
pourquoi des phrases comme ca 👀
civic whale
Si tu le met en display: inline la div devrait s’arrêter au texte comme un span
ça ne marche pas...
civic whale
même quand je transforme mes div en > span
ca marche pas :/
c'est surtout ça (les flèches) qui me dérangent
gaunt yoke
Ah bah c’est ton line height qui fait ça
gaunt yoke
Faut que tu le baisses
dusky skiff
Salut tout le monde, j'ai un léger soucis avec une div ! En gros, https://i.imgur.com/RJGedHf.png il se passe ça
ça passe en dessous
J'ai bien sûr tenté le z-index, mais sans succès !
echo night
Aussi le overflow: visible, mais ca saute le scrolling
dusky skiff
Personne ? :/
gaunt yoke
Enfaite tu pourras pas le faire passer par dessus le parent si il est en overflow hidden, ou alors il faut que le premier enfant de l'élément en overflow hidden soit en position absolute
dusky skiff
@echo night
gaunt yoke
Je viens de rencontrer le problème c'est assez relou j'ai du ajouter les éléments en js directement, sinon dans ton cas essaye de voir si en pseudo-élément ca peut passer à travers le overflow
dusky skiff
Okay merci on va test
gaunt yoke
(::after, ::before mais pas sur)
ouais nan je viens de tester avec les pseudos éléments non plus haha
Mais par contre dans votre cas pourquoi vous mettez la div en overflow: hidden ?
y a pas l'air d'en avoir besoin vous avez pas de scroll horizontal pou autre
dusky skiff
Bah attends, au pire si tu veux on peut te donner l'accès pour que tu vois
gaunt yoke
vasy
gaunt yoke
tu me dis quand je peux
dusky skiff
okay
ah mais je suis bête
ça va pas work vu que t'as pas de serv ou t'es admin ou y'a le bot
gaunt yoke
gaunt yoke
tu peux me screen l'écran exactement please
juste voir si il sert le overflow:hidden 🤔
dusky skiff
ok
echo night
@gaunt yoke Question...Tu sais pourquoi apache est sur-chargé?
Genre...Le dash il charge ultra lentement...
Je reload apache
Et bim tout va ultra rapidement
Et puis 5 sec plus tard
La meme
dusky skiff
gaunt yoke
t'aurais pas une trop grosse consommation qui vient de ton app ou quoi ? 🤔
Oui ok vous voulez une barre à la discord en gros ??
echo night
Nope
echo night
Oui ok vous voulez une barre à la discord en gros ??
Oui xd
dusky skiff
Oui ok vous voulez une barre à la discord en gros ??
Oui
gaunt yoke
Du coup vous pouvez enlevez votre overflow: hidden 🤔
quartz thunder
(je viens pas pour aider mais juste pour dire que c’est une bonne idée de reprendre un peu la présentation de discord, allez salut )
gaunt yoke
🤔
je sais pas du tout ArviX :/ ton vps est costaud niveau RAM etc ?
ou c'est une petite machine avec bcp de projet dessus ?
echo night
je sais pas du tout ArviX :/ ton vps est costaud niveau RAM etc ?
4 Go ram xd
dusky skiff
https://gyazo.com/9c9b34a2eea481fa699aeb0cee9dfb5c
C'est exactement ce qu'on veut faire du coup
gaunt yoke
ouais suffisant normalement
echo night
Nan
gaunt yoke
trop facile
echo night
OUI MAIS IL MANQUE LE TOOLTIP xd
gaunt yoke
okay attend bouge pas bg
dusky skiff
trop facile <:kappa:643454849534394368>
J'ai réglé le problème 😢
Non je rigole 😢 https://i.imgur.com/FfOeokD.png
😭
gaunt yoke
Si vous voulez vraiment votre overflow faut que vous passiez par du JS pour add le tooltip dans ce cas
car y a qu'un moyen (du moins que je connaisse) pour contourner en css le overflow du parent c'est que l'enfant soit en absolute mais bon cacastrophe
c'est rapide en js vous avez juste a créer un élément html et à le déplacer en fonction du rond sur lequel vous vous trouvez
civic whale
Ca part un peu dans tous les sens ici
dusky skiff
civic whale
Pauvre de toi @gaunt yoke ... 
gaunt yoke
???
dusky skiff
J'ai pas compris mais ok
dusky skiff
Je vois juste pas en quoi ça part dans tous les sens
civic whale
ca parle d'apache qui surcharge un vps, puis en même temps ca parle d'un probleme d'overflow, etc... c juste ca
mais c'est normal
c'est un peu à ça que sert la room
dusky skiff
dusky skiff
allez ArviX ! Quand t'as fini le panel je fais un everyone sur BTL
echo night
Mais le pire
C'est que c'est que le dash qui est en pls
Avec apache
Tout le reste est chill
Le pire
Que le vps est aussi trql
dusky skiff
dusky skiff
Quand tout le monde va se co ça va crash
echo night
@gaunt yoke Tu pense que nginx est plus costaud que apache?
Bon
J'ai encore un autre moyen
C'est de caler le dash sur l'autre vps
xd
gaunt yoke
Oui c'est un peu mieux je crois
echo night
Bah non
dusky skiff
bah
echo night
Faut réfléchir...
dusky skiff
Si on peut éviter ce serait bien xd
echo night
Attend
je vais voir un truc
Changer le port du dash
Quelqu'un connait un port costaud?
xd
quartz thunder
Port USB 3.0
latent grove
Comment on fait que pour un truc aparrait que quand on scroll et qu'on arrive dessus avec une petite transition
void anvil
Salut, j'ai fais une page avec deux div, une à gauche et une à droite, les deux ...
Bonjour j'ai continué ça aujourd'hui et j'ai fais ce qui me semble être le plus juste mais je ne sais pas si mon code peut être simplifier
J'ai ça
latent grove
Comment on fait que pour un truc aparrait que quand on scroll et qu'on arrive de...
svp
c'est bon j'ai trouver
void anvil
Hey, pour revenir à ce que j'ai mis plus en haut la barre ne prends pas tout l'espace droit
Et je n'arrive pas à la faire prendre tout l'espace justement
void anvil
c'est du no-code complet
Oe , c wix mais en mieux si j'ai bien compris 
gaunt yoke
Alors je vais te dire oui mais c’est quand même très différents
Mais dans le principe oui
void anvil
Je pense que je vais le use pour faire des models de site web
sinful nest
Je pense que je vais le use pour faire des models de site web <:harold:659821889...
c'est l'un des but ... le no code se veut facile d'utilisation pour sortir des betas de projets
sinful nest
🙂
gaunt yoke
Pas forcément que des bêtas il se veut facile juste pour être utilisé par des gens non développeurs
Bcp de designer et autre passe par ce genre d’outils comme webflow, bubble qui reste simple pour eux
sinful nest
apres c'est dans le sens que cela peut vite etre compliquer de le développer abondament
glass tide
Salut ! Si quelqu'un est dispo j'ai besoin d'aide ! 😄
gaunt yoke
envoie directement ton problème ^^
