Et en gros, j'ai ça :
let audio = new Audio(`./musics/${random_song}.mp3`)
function slide() {
let slider = document.getElementById('volumeSlider')
return audio.volume = slider.value / 100
}
#html-css
dusky skiff
lapis dock
Ahhh du back end en js x=
gaunt yoke
C’est du front ça
dusky skiff
La fonction slide correspond à ça :
<input id="volume_bar" onclick="slide()" type="range" min="0" max="100" id="volumeSlider">
Ah ouais ?
gaunt yoke
Comment tu get un élément par son id en node
lapis dock
Ahahah oui mais tkt c'est pas grave
dusky skiff
Comment ça Enzo ?
En fait le problème que j'ai, c'est que j'ai fait des recherches, et je trouve que ça
Des audio.volume =
Mais moi ça ne fonctionne pas :/
gaunt yoke
tu fais ça en nodejs ?
dusky skiff
Alors bien sûr quand je faisais ça ça fonctionnait :
<video id="audio_file_1">
<source src="./musics/1.mp3" type="audio/mp3">
</video>
Non
gaunt yoke
oui donc c’est du front alors c’est ce que je voulais dire
gaunt yoke
Euh si tu veux on peut regarder après la je suis pas dispo sorry :(((
lapis dock
Je regarde si tu veux
dusky skiff
Ce serait cool :)
lapis dock
Tu connais git?
dusky skiff
github ?
dusky skiff
Euh 😅
J'ai du PHP aussi
x)
Sinon je demande à mon pote de le faire en PHP si c'est possible
lapis dock
Ok passe mp histoire de pas saturé ici
dusky skiff
Si tu veux
dusky skiff
@gaunt yoke Hey, désolé de te déranger mais j'aurais une rapide question pour toi, il me semble que tu m'avais déjà aidé sur ça, est-ce que tu sais comment enlever ça déjà ? ( j'ai cherché j'ai pas trouvé :/ ) https://i.imgur.com/M2NVAEs.png
Je parle du contour autour quand tu cliques
quartz thunder
Au focus tu fait
outline: none;
willow thunder
Hello !
Je ne sais pas si des gens connaissent la convention BEM ici...
Je suis assez perdu, je développe un application en ReactJS et pour tout bien organiser j'utilise cette convention qu'on retrouve un-peu partout apparament
Mais, je comprends pas comment je fais lorsque j'ai un élement parent d'un élement, encore parent d'un élement...
Exemple:
<div className="root">
<div className="root__header">
<div className="??-avatar"> <!-- Dois-je le nommer root__header-avatar , root__header__avatar ?... -->
</div>
</div>
</div>
"avatar" est un élement parent de l'élément "root__header"
Comment j'suis censé le nommer, ca me parait bizarre: root__header__avatar
On aurait de long nom de classes au final..
gaunt yoke
Hello, le BEM est cool a utiliser niveau lecture mais relou à écrire
Mais logiquement si on suit la logique du BEM, en premier tu as le bloc, en 2 eme l’élément à cibler dans le parent et en 3 eme ce que tu « fais » ce que tu veux modifier
Bloc Élément Modifier BEM
Donc en vrai là tu devrais avoir en premier root-header, puis root-header__avatar puis par exemple root-header__avatar_size mais très relou je trouve
J’utilise aussi la logique du BEM mais pas pour le dernier élément , rien t’empêche de modifier un peu en ajoutant un peu tes propres règles, tant que ça reste propre et garde une certaine logique sur le reste du code
Sorry ça souligne et sur tel je sais pas où sont les guillemets de code, donc tiens un screen du message 🤪
azure dawn
Hello,
Petite question, par pur curiosité :
Si par exemple, on veut faire une application mobile avec flutter, est ce qu'il est mieux de le faire sur VSCode ou Android Studio ?
Je comprends pas trop l'intérêt d'Android Studio
Merci 😉
gaunt yoke
Android Studio va surtout te permettre si je dis pas de bêtise de te transformer ton app en sdk etc
Ou je confond 
azure dawn
C'est quoi sdk ?
gaunt yoke
Ah non pardon je me trompe d'appli celle que je parle c'est celle pour publier ton app my bad ou tu dois mettre ton sdk, la version etc etc
Mais sinon le sdk c'est ce que tu dois envoyer pour ton app
c'est le format demandé
ionic gulch
Bonjour j'ai un petit souci tout con mais j'arrive pas a mettre mon body sur toute la page pour que quoi qu'il arrive mon footer soit en bas de l'écran de l'utilisateur
stray notch
@ionic gulch c'est-à-dire ?
ionic gulch
Bas en gros mon body prend pas la taille de mon écran mais une taille auto par rapport a se que je met dedans et du coup si j'ai rien ou pas grand chose dans ma page le footer se met pas tout en bas et a une zone blanche en dessous
@stray notch
ionic gulch
Box-sizing nop
wise hamletBOT
On dirait bien qu'une mise à jour a eu lieu cette nuit... désormais le channel #front-end devient le channel html-css, donc c'est ici que tu dois poster tes messages concernant un problème sur ce langage (et variantes type: SaSS, Pug, etc..) 
void anvil
Bonjour, je débute en HTLM/CSS et je voulais savoir pour être sûr , lorsque j'utilise l'élément <br> avec <p> est ce que je peux faire comme cela ?
<p> Ici vous allez pouvoir découvrir mes travails en modélisation 3D.
<br>J'utilise notamment le logiciel blender afin de faire celui.</p>
Oui tu peux
void anvil
Okay merci 
void anvil
Et j'aurai une deuxième question, par rapport à un soucis, j'utilise l'attribut src= et alt= et il ne m'affiche pas le texte qui présente l'image, merci
<img src="file:///C:/Users/Samuel/Desktop/Communication/postinsta/etabli2.png" alt="Voici une de mes créations sur le logiciel.">
( juste au cas où j'avais oublié un > mais ça na rien corrigé )
gaunt yoke
le alt ne s'affiche que si l'image ne s'affiche pas (car url down ou autre)
void anvil
l'url de mon image est juste le chemin sur mon ordi
gaunt yoke
Comme je t'ai dis le alt c'est un text alternatif en gros
Sois il affiche ton image, sois ton alt, ou par exemple pour les personnes aveugles ca permet de leur expliquer dequoi parle l'image
Ou si de notre côté l'image est morte, ca affichera le alt
void anvil
ah ok, je viens de comprendre
ionic gulch
body{
margin:0;
font-family:arial, sans-serif;
box-sizing: content-box;
}
j'ai tout mis dans le body et pourtant mon footer n'est pas en bas de la page
et jcp pk il me dit que c'est html
@void anvil comme on se retrouve mdr
sullen scroll
body {
margin: 0;
padding: 0;
font-family: arial, sans-serif;
box-sizing: border-box;
}
Parce que la dans ton code tu mettais que la marge a 0
sullen scroll
Essaye avec ça (j'ai edit mon message code)
ionic gulch
nop toujours pas
sullen scroll
Screen ?
sullen scroll
code stp
ionic gulch
body{
margin: 0;
padding: 0;
font-family: arial, sans-serif;
box-sizing: border-box;
}
.contenu{
padding: 3%;
}
.pied-de-page{
background: grey;
left:0;
bottom:0;
width:100%;
padding-top:20px;
padding-bottom:20px;
font-size: 20px;
}
sullen scroll
.pied-de-page{
background: grey;
left:0;
bottom:0;
width:100%;
...
Enleve les padding
ionic gulch
sullen scroll
Ta enlever les padding-top et padding-bottom ?
ionic gulch
oui regarde le cadre gris
en gros il me met l'espace autour de mes éléments du footer
sullen scroll
Ok remet les
ionic gulch
c'est déjà fais mdr
sullen scroll
Envoie moi un screen du code html et css stp
ionic gulch
<div class="pied-de-page">
<div class="pied-de-page-element">
<div class="pied-de-page-element-gauche">
suivez-nous </br>
<a target="_blank" href="https://twitter.com/home?lang=fr"><i class="fab fa-twitter"></i></a>
<a target="_blank" href="https://www.facebook.com/"><i class="fab fa-facebook-square"></i></a>
<a target="_blank" href="https://www.invisionapp.com/"><i class="fab fa-invision"></i></a>
<a target="_blank" href="https://www.twitch.tv/"><i class="fab fa-twitch"></i></a>
<a target="_blank" href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a>
</div>
<div class="pied-de-page-element-droite">
Pour plus d'information
<div class="contact-button">
<a href="index.php?page=contact">Contactez-nous</a>
</div>
</div>
</div>
</div>
.pied-de-page{
background: grey;
left:0;
bottom:0;
width:100%;
padding-top:20px;
padding-bottom:20px;
font-size: 20px;
}
xDD
ionic gulch
pour faire chacun de mes éléments
sullen scroll
Fait un footer et apres mes tout tes éléments
ionic gulch
je touche pas aux balises de html dans mes css j'ai tout le temps peur de faire de la merde
ils sont dans un footer
<footer>
<?php include('footer.php'); ?> <!-- mettre le pied de page sur le site -->
</footer>
dans une autre page
sullen scroll
Je ne comprend pas la xD
ionic gulch
shit pg mdr merci quand même
sullen scroll
De rien
sullen scroll
Bvv
gaunt yoke
Très mauvaise idée le absolute sur un footer
Quand tu auras une page plus longue tu auras des soucis
Il faut juste te faire un layout avec 2 élément, un <main> avec tout ton html dedans et le 2eme ton footer
Ensuite tu peux juste jouer avec des min height et calc ou avec flex
ionic gulch
tu peux me montrer un exemple niveau code sur l'architecture que ça aura par se que ouai ça ma fais nimp absolute stp @gaunt yoke
gaunt yoke
Je peux te faire ça mais pas tout de suite par contre
ionic gulch
oui oui merci
gaunt yoke
Voilà un exemple si ton main est court, ton footer touchera le bas
Et si tu as bcp de contenu comme dans l'exemple, ton footer se placera juste après le main
<body>
<main>
main content
</main>
<footer>
Mon footer
</footer>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
min-height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
background-color: red;
width: 100%;
}
footer {
width: 100%;
background-color: black;
color: white;
text-align: center;
}
C'est une possibilité parmis d'autre
tu n'es pas obligé de faire le flex sur le body, tu peux aussi de faire un élément parent, comme ca tu pourras te créer différent "layout"
void anvil
@ionic gulch hello 🖐️ , ouai 🙂 je voulais apprendre le htlm pour un but précis 🙂 et en plus j'ai l'impression de kiffer
ionic gulch
Merci @gaunt yoke je vais étudier le truc
ionic gulch
je comprend toujours pas pourquoi quand je suis sur mon affichage téléphone le footer n'est pas tout en bas
foggy lagoon
@ionic gulch utilise les grilles pour placé tes éléments
Et pour la taille du contenu de ta page tu met min(100vh, auto) (100vh moins la taille du footer et du header/navbar).
Ca prendra la taille la plus petite entre 100vh et une taille auto selon le contenu de ta page, comme ça si le contenu ne va pas jusqu'en bas ça prendra la valeur 100vh qui représente 100% de la taille de la page et donc ton footer sera obligatoirement en bas.
void anvil
Bonjour j'aimerai faire un truc simple quand je vais sur mon site une vidéo ce start en full screen comment faire svp
onyx minnow
Heyo! J'ai une éval à rendre d'ici quelques heures. Dans le projet je ne peux pas utiliser des divs
Ce qui fait que j'utilise des fieldset. Mais ceux de base sont vraiment moches. Qqun a une idée pour les rendre plus jolis ?
Genre vraiment moche
gaunt yoke
A part le custom en css y a pas trop de solution
onyx minnow
Ouais c'était juste pour le test ça 😛
En soi quelque chose de simple mais beau, je suis preneur de tout !
errant cypress
pour ton fieldset ?
onyx minnow
Yes
gaunt yoke
Regarde sur dribbble pour avoir un peu d’inspiration 
onyx minnow
J'ai pas encore tellement d'expérience en CSS pour ça je suis encore un peu perdu :S
gaunt yoke
C’est en forgeant qu’on devient forgeron ! 
gaunt yoke
Yes actuellement et de plus en plus les grids css
onyx minnow
Ok merci merci
golden juniper
Bonsoir quelqu'un pourrait m'expliquer comment on crée un "bandeau de navigation" comme ça
abstract raven
Bonsoir , j’ai une idée de projet , je voudrais crée un site web dans lequel il y a des teste : culture g , géo , grammaire etc etc
gaunt yoke
Bonsoir quelqu'un pourrait m'expliquer comment on crée un "bandeau de navigation...
Tu veux savoir quoi exactement ?
gaunt yoke
Bonsoir , j’ai une idée de projet , je voudrais crée un site web dans lequel il ...
#demande-de-dev en détaillant bien ta demande plz
golden juniper
Comment on "déssine" ou crée une barre comme ça
gaunt yoke
là pour le coup ce sont des bases tu peux regarder rapidement des tutos pour comprendre les bases du css et de l’html
golden juniper
( je suis la forma open class room, il me l'on pas appris )
deft burrow
c'est un <nav>, et je suis certain qu'ils le mentionnent à un moment donné
le nom classique c'est une navbar
là ça a l'air d'être du bootstrap
golden juniper
thx
dusty arch
salut, j'ai une question, j'ai envie de faire une cellule d'un tableau qui fasse width="400" height="101" mais quand je fait ça : <td> width="400" height="101" </td> la case ce met bien dans mon navigateur mais quand je vérifie mon code sur validator.w3 il est marqué que c'est obselete. Merci d'avance
deft burrow
si tu fais <td> width="400" height="101" </td> tu devrais faire <td width="400" height="101">contenu</td> à la place
dusty arch
ah oui je me suis trompé quand j'ai écris le message
mais si je ne veut rien mettre dedans je fait un ?
c'est parce que j'ai ça sur le w3
et mon code est comme ça
little depot
dusty arch
mercii
void anvil
@golden juniper CSS `.navbar .navbar-nav .nav-item .nav-link:link, .navbar .navbar-nav .nav-item .nav-link:visited{
color: rgb(255, 255, 255);
margin-right: 30px;
font-family: Montserrat;
font-size: 20px;
}
.navbar .navbar-nav .nav-item .nav-link:hover{
transition: .5s;
color: rgb(42, 42, 42);
}
.navbar .navbar-nav .nav-item .nav-link:hover, .navbar .navbar-nav .nav-item .nav-link:active{
color: rgb(255, 255, 255);
margin-right: 20px;
border-bottom: 2px solid rgb(255, 255, 255);
}
.navbar .navbar-nav .navbar-brand{
color: rgb(255, 255, 255);
} `
HTML il faut juste tu rajoute le lien de bootstrap et aprs tu mest ce code en html <nav class="navbar navbar-expand-lg navbar-light "> <a class="navbar-brand" style="color: rgb(255, 255, 255); font-family: Oswald; font-size: 50px; margin-left: 20px;" href="#">Meuble</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item "> <a class="nav-link" href="#">Home </a> </li> <li class="nav-item"> <a s class="nav-link" href="#">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link " href="#" >Contact</a> </li> </ul> </div> </nav> en gros sa c'est une navbar bootstrap que j'ai modif pour les debutant et je l'ai rendu plus esthétique ^^
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")```
eager trellis
👀
void anvil
comment je peux faire en sorte que les cards sois pas coller a coter des autres genre exemple 5px d'espacement
Tu peux essayer le padding-right ou left
onyx minnow
Oui margin-right
frank elk
Ah
void anvil
Bonjour j'ai besoin d'aide avec la boutique Ge extension, voici se qu'elle m'affiche
onyx minnow
Bonjour j'ai besoin d'aide avec la boutique Ge extension, voici se qu'elle m'aff...
ça t'affiche cela durant l'installation ?
void anvil
oui je l'ai re instaler j'ai le meme message
onyx minnow
Hum ça à l'air d'être un problème venant de la base de donnée
Tu as bien entré les bons identifiants
?
quartz thunder
l’erreur ce serait pas ça si il avait pas entrer les bon id
go ticket support sur gmodstore @void anvil
void anvil
ok
deft burrow
gaunt yoke
Yes les balises open graph
void anvil
Sa sert a quoi @media svp (mentionnez)
deft burrow
@void anvil http://letmegooglethat.com/?q=les+media+queries
dawn agate
Salut, vous avez des documentations pour le HTML et CSS svp merci
gaunt yoke
bwarrff ça dépend ce que tu recherches exactement mais si tu débutes vraiment tu peux regarder pour le moment codecademy ou openclassroom
Pour avoir de bonne base pour commencer à aller plus loin ensuite
dawn agate
ok merci
void anvil
je recommande codecademy c'est ludique et on prend vite le rythme 
stark axle
https://www.learndev.info/fr => @void anvil
void anvil
je parle que de mes expériences personnelles et j'avais jamais entendu parler de ce site
barren sundial
salut, comment on change ceci ?
tien tien j'ai une question a propos de ca
<meta property="og:title" content="Acceuil - SP Developpement" />
<meta property="og:description" content="SP Développement est un serveur sur l'informatique plus particulierement sur le developpement, des salons aides sont à dispositions. Des giveways, animations sont souvent realiser, gagne des bots, sites internet, hebergement grace a SP Développement ! Rejoint nous des maintenant !" />
<meta property="og:url" content="https://spdeveloppement.tk/index.html" />
<meta property="og:url" content="https://spdeveloppement.tk/" /
j'ai mis ca mais regarder
ah bah nan c bon
wild rock
Salut ! Je suis entrain de suivre un tuto et à ce moment là : https://youtu.be/6hCGTJCo_Uo?t=3200
Quand je met : css flex-wrap: wrap; et que je rétréci la fenêtre, les images ne se mettent pas les unes au dessus des autres comme elles devraient...
Quelqu'un sait pourquoi ? Merci d'avance
errant cypress
https://flexboxfroggy.com/#fr je te conseille de suivre ceci 🙂
wild rock
Merci
wild rock
@errant cypress J'ai fini les exercices, et même avec ça je n'arrive pas à trouver d'où vient le problème...
gaunt yoke
tu peux m'envoyer ton truc @wild rock ?
gaunt yoke
Je regarde juste après quand je suis sur ordi
wild rock
C'est bon j'ai trouvé, c'est juste que la min-width était à 30px et du coup ça se rétrécissait juste
gaunt yoke
Ah bah good
Sorry je suis en vac donc très peu sûr l’ordi 😦 mais nickel mieux de trouver par soit même
wild rock
Ouais pas de problème 😉
acoustic lion
bonjour, bonsoir je souhaite savoir comment sa se passe si je souhaite faire un systeme pour qu'il y est ecrit sur mon son site changer de background - integree le lien url de votre image et quand je met entrer sa change limage exemple du body quel sorte de code vais-je devoir utiliser
gaunt yoke
Du javascript
languid cypress
Salut , j'ai une question . Comment je peut faire en sorte que lorsque l'utilisateur clique sur un lien cela lui fasse télécharger un fichier ?
gaunt yoke
Tu rajoutes un attribut download à ton élément <à>
languid cypress
Quoi comme attribut ?
gaunt yoke
je viens de te le donner plus haut
languid cypress
ah ok 🙂
Entre les guillemet je met le fichier ? ( que j'ai mis dans mon code c ça ? )
gaunt yoke
Regarde comment ça fonctionne, c’est juste un attribut download à vide, le lien tu le laisses dans un href
void anvil
Yo y'a des développeurs web qui ont PhpStorm ?
void anvil
Y'a pas un plugin pour lire le bootstrap comme le CSS @slim bridge ?
slim bridge
euh si surment faut regarder
void anvil
Bah j'ai regardé mais y'en a pas xD
slim bridge
après php storm c'est pas vraiment ça son point fort
c'est vraiment bien quand tu fais du php avec laravel et tout mais bon après pour les extensions atom ou vs code hein
void anvil
Je vais essayer de regarder sur VS code
slim bridge
oui sur vs code tu trouveras à coup sur
mais php storm y'a pas trop de choix niveau extension quoi
slim bridge
yep mais honnêtement si tu es sur du php pure vscode fait parfaitement le taff
mais quand tu passes sur un framework la phpstorm c'est le top
errant cypress
laravel je le fais sur vscode aussi 🙂
et y a pleins de trucs pour les snippets etc sur vs code pour laravel etc donc c'est nickel
slim bridge
oui aprer vs code fait le taff pour tout hein
errant cypress
ouep
slim bridge
voila aprer perso flemme de changer d'ide pour gagner quelques seconde
errant cypress
mddr la même
gaunt yoke
Comment ça lire du bootstrap
gaunt yoke
Ça c’est juste qu’il est minifié quoi
Mais t’es pas censé modifie le fichier source de bootstrap, mais directement sur ta feuille de style appliquer tes modifications, ou à la limiter changer dans une config mais en tout cas pas éditer le fichier source lol
proven sorrel
Patiente
gaunt yoke
http et https ?
tough jolt
Nan du coup c'est plus sécuriser et non sécuriser
void anvil
mais explique concrètement ce que tu veux sinon c'est compliqué de t'aider 😭 🤣
quasi adder
Salut les gars, j'ai un soucis très bête
J'ai un espacement en haut (en blanc)
En enlevant la nav, ça le retire
Donc du coup ça vient de la nav, j'hésitais à ajouter un margin top mais je voulais être sur
gaunt yoke
ui
hexed jewel
padding: 0; dans body
gaunt yoke
Il l’aurait aussi sur les côtés si c’était le padding du body
quasi adder
même chose
gaunt yoke
logiquement sauf si il envoie pas tout son écran
quasi adder
là j'ai envoyé tout le code
gaunt yoke
Et ton rendu visuellement c’est le dernier avec le bleu ou celui d’avant
gaunt yoke
html, body { margin: 0; padding: 0 } au lieu de juste body pour voir
gaunt yoke
void anvil
Bonjour, j'ai un problème. Quand j'écris un texte, il y a genre un grand espace entre les mots et ce n'est pas très beau à voir. Pouvez-vous m'aider ?
que veux-tu dire
je dois faire text-align: justify ?
Oui
D'accord je vais essayer.
Oh merci beaucoup!
Après comment les rendre plus droit
Genre, tous alignés?
ça fera plus propre
D'accord merci. Après on peut faire comme ça? Comme les ajuster tous à la même longueur de ligne:
xD Mais ça va espacer grandement les mots entre eux. Désolé pour le dérangement
void anvil
si tu veux que sa fasses des beaux rectangles il faut mettre le justify c pour sa que sa fais des espaces , sa les fait automatiquement pour faire un beau cube
eternal jay
Ou sinon tu fais un simple <br> pour chaque ligne ?
void anvil
si tu veux que sa fasses des beaux rectangles il faut mettre le justify c pour s...
D'accord mais les espacements sont très dérangeants et pas beaux si je veux justifier les texte :/
void anvil
Bah dans ce cas ne te plains pas 😂
void anvil
bonjour,
j'utilise boostrap seulement j'ai du mal j'arrive pas a faire en sorte que le bouton connexion sois a une position precise dans la div ( en gros je voudrais qu'il sois a droite )
void anvil
Bah dans ce cas ne te plains pas 😂
Un petit peu de respect s'il te plait.
Un simple ''il n'y a pas d'autres solutions'' je pense que sera plus propre 🙂
Ce n'est pas méchant 
gaunt yoke
D'accord mais les espacements sont très dérangeants et pas beaux si je veux just...
Mais enfaite dans tout les cas en fonction de la taille de l’écran ton placement des textes sera différent sauf si tu le bloques donc t’occupes pas trop de ça
void anvil
Mais enfaite dans tout les cas en fonction de la taille de l’écran ton placement...
D'accord. Donc je dois dans ce cas mettre en text-align: right ?
gaunt yoke
Non, sois tu gauche soit justify
Fin à droite ça n’aurait pas de sens visuellement, tu aurais quand même ce soucis
Tu peux sinon mettre des sauts de lignes manuellement pour gérer toi même tes espaces.. mais encore une fois en fonction de la taille de l’écran, la taille de ta colonne variera et donc le placement des mots aussi
donc là tu t’occupes vraiment de détail quoi 😛
languid cypress
Comment je peut ajouté une icone a mon site internet?
eternal jay
Tu fais <img src=« leliensdetonimage »>
void anvil
Ça dépend après y'a le shortcut
eternal jay
Ah mais je parlais si il souhaitait l’afficher sur son body
Et pour la réduire de taille tu peux jouer avec le width
img{
width: 20%;
}
wild rock
Salut ! J'ai un petit problème, j'ai fais des "divider" pour séparer mes différentes sections avec un svg, tout ce passe bien mais quand je fais défiler, la barre de navigation (en position fixed) passe derrière mes "divider"... Explication en images :
gaunt yoke
z-index
wild rock
Waw, trop fastoche en fait, et tu peux m'expliquer pourquoi le z-index n'est pas bon de base ?
gaunt yoke
parce que c’est du cascading ton html, du coup le premier élément dans ton html passera derrière celui qui le suit, et ainsi de suite
Donc le z-index sert justement à changer la position de chaque élément (position avant/arrière)
wild rock
Haa d'accord merci beaucoup, mais du coup, pourquoi la navbar ne passe pas derrière le header ?
wild rock
<body>
<nav class="dark transparent bg-wetasphalt"> <!-- Class : left around sticky -->
<input type="checkbox" id="burger">
<label for="burger" class="burgerbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo big">Logo</label> <!-- Can set an image : <img src="images/logo.png"> or change text size with .big -->
<ul>
<li class="-active"><a class="active a" href="#" onclick="uncheckBurger()">Home</a></li> <!-- Class : active a/b or li active -->
<li><a href="#features-grid" onclick="uncheckBurger()">Services</a></li>
<li><a href="#more-info" onclick="uncheckBurger()">More</a></li>
<li><a href="#" onclick="uncheckBurger()">Contact</a></li>
</ul>
</nav>
<header class="first-section bg-image">
<div class="texts">
<h1 class="title">The better website of the world.</h1>
<h2 class="subtitle">This is the description of the website.</h2>
</div>
<svg class="divider white header" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill-opacity="1" d="M0,96L30,122.7C60,149,120,203,180,213.3C240,224,300,192,360,186.7C420,181,480,203,540,186.7C600,171,660,117,720,106.7C780,96,840,128,900,154.7C960,181,1020,203,1080,197.3C1140,192,1200,160,1260,122.7C1320,85,1380,43,1410,21.3L1440,0L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path></svg>
</header>
</body>```Ils sont dans le body
gaunt yoke
Ah bah je sais pas 
tu as peut être des positions sur tes svg qui font que du coup t’es éléments passe au dessus
wild rock
D'accord ! On va dire ça ^^ D'ailleurs les ::before passent devant tout aussi 😄
gaunt yoke
ah oui mais tu as une position absolute sur tes pseudos éléments nop ?
en fonction de ce que tu veux faire
wild rock
Ah oui
gaunt yoke
donc c’est peut être pour ça
void anvil
Pour faire une deuxième page faut cree un deuxième dossier ou fichier ?
eternal jay
Fichier
void anvil
Ok merci
J'ai un problème jai encore rien mis comme css et mon font est en orange et quand je vais des margins le orange s'agrandit
eternal jay
Bah oui c’est normal pour les margin et t’a mit à t’a div admin un bg orange ?
C’est pour ça que y’a un fond orange je comprend peut être pas t’a question ?
void anvil
Ba je veut que la dernière div soit séparée @eternal jay
void anvil
C'est bon j'ai trouver
J'ai mis toutes les mêmes div elles sont toutes collées à part la dernière c'est pas normal
quartz thunder
retire le data= « « ligne 46
slim bridge
alors je sais pas si j'ai louper un truc mais tu devs sur téléphone ou quoi ? 😮
void anvil
Ouai j'avais réussi deja merci
void anvil
alors je sais pas si j'ai louper un truc mais tu devs sur téléphone ou quoi ? 😮
Oui pourquoi ?
Scpk l'application si ta besoin
slim bridge
bah c'est pas commun c'est tout 😂
void anvil
C'est trop long d'attendre
slim bridge
bah en tout bon courage sur mobile
slim bridge
display : flex;
sur la div qui entour l'image et le boutton
et tu ajuste avec un
line-height: 50px;
ou sinon
<p><img src="" alt="" />Bla bla bla</p>
```et
```css
img {
vertical-align:middle;
}
enfin je suis pas sur d'avoir capter exactement donc voila ça c'est pour les aligner verticalement
sinon si c'est les centre tu fais juste des justify-content : center;
gaunt yoke
Mais sinon si c'est juste centrer le bouton comme demandé
Comment je peux faire pour aligner bien le bouton sur tel et pc
un text-align: center suffit
c'est un élément inline
brave jay
faire ca sur tel 😮
void anvil
Mais sinon si c'est juste centrer le bouton comme demandé
> Comment je peux fair...
Deja essayé
void anvil
sur la div qui entour l'image et le boutton
C'est pas une div c'est des border
void anvil
Quelqu'un peut m'expliquer les médias query svp
deft burrow
storm acorn
Salut, quelqu'un peut-il m'aider pour trouver une solution à mon problème de taille de cartes sachant que j'ai regardé du coté de la propriété max-height (mh) de Bootstrap et que je ne trouve pas vraiment de soluce :
Lien vers le site : https://d1andyou.space/
void anvil
Pourquoi ça me met rien quand je met
background-image: url ('https://cdn.discordapp.com/attachments/772900123990687754/789861451287625738/PicsArt_12-19-03.26.12.jpg');
gaunt yoke
Tu met une taille à ton élément ?
void anvil
Tu parle a qui ?
gaunt yoke
Toi
cunning steppe
J'aimerais fais bien faire du html seul soucis mon clavier ne dispose pas du signe "Plus grand que et plus petit que".... Vous savez si il y a un autre moyen 😢 Merci ❤️
gaunt yoke
Tu mets un background image mais ton élément a t il des enfants ou une taille ? Car si c’est un élément vide ton image apparaît mais malheureusement en 0 par 0
ou vérifie qu’il soit bien cibler ton élément
prend un clavier virtuel @cunning steppe
T’as un clavier quoi? QWERTY?
gaunt yoke
tu dois avoir le raccourcis je pense normalement c’est en bas à gauche de base
ALT 60 et ALT 62 mais relou
Sinon tu te fais un macro
cunning steppe
Ouai pas bete
Merci 🙂
La macro me fait faire ça : ♠ (Y'a un emoji pour ceux qui ont discord en noir)
Du coup je vais utiliser ALT 60 et ALT 62 manuellement
gaunt yoke
okay si c'est pour le boddy pas besoin de width car tu as des élements dedans,
Par contre le width ne se met pas du tout ici pour info
met juste simplement:
background-image: url(https://cdn.discordapp.com/attachments/772900123990687754/789861451287625738/PicsArt_12-19-03.26.12.jpg);
ah ui mais tu as pas mis le url je viens de voir
du coup met juste ma ligne ca devrait etre okay
void anvil
Salut à tous, j'ai une question je sais pas comment m'y prendre pour faire un système de rangement de fichier si quelqu'un à un tuyau je suis preneur. Merci !
void anvil
Pourquoi le média query fonctionne pas. J'ai fait un test pour que le bouton se met en rouge sur pc mais il se met pas
void anvil
A ok
Non ca marche pas
Deja est-ce que si jessaie en mettant version pour ordi sur un tel ca fonctionne ?
eternal jay
Yoo , j'ai une question après recherche je trouve toujours pas 😦 savez vous comment on peut faire pour que quand on click sur l'image elle s'affiche en grande ?
gaunt yoke
tu veux le faire en css ou en js
eternal jay
le plus simple ?
gaunt yoke
en js vu que tes images ne seront pas tjrs les memes
eternal jay
Mais dcp je fais une condition ?
gaunt yoke
tu appelles une fonction au onClick
de ton élément
tu as 2 manières de faire soit via l'html avec l'attribut onClick du coup, sois en ajoutant un event a ton élément html
(document.querySelectorAll('.className').addEventListener('click'.....)
eternal jay
jpense je vais faire un onclick avec une condition mais je dois dire quoi pour qu'il ouvre l'image en plus gros ?
gaunt yoke
dans ton élément que tu cliques tu auras un élément img dedans tu viens récupérer le src de celui-ci
cunning steppe
Solut, je suis entrain de débuter, et j'ai fais une "square"et j'aimerais qu'il se colle a droite de la page mais il y a un espace (encadrer en rouge) comment puis-je faire ? 🙂 Voici mon code je sais pas si c'est une bonne façon de procéder :
/* html */
<div id="BoxTranslucide"> </div>
#BoxTranslucide
{
width: 50px;
height: 100px;
background-color: rgba(44, 62, 80,0.7);
background-size: cover;
}
html, body { margin: 0 }
cunning steppe
Thx =()
jaunty solstice
Pourquoi le média query fonctionne pas. J'ai fait un test pour que le bouton se ...
C’est Spck editor non ?
halcyon loom
salut, je sais que cette notion est vraiment basique mais comment on fait pour cibler l'image pour laquelle on souhaite arranger le width ainsi que le length ?
halcyon loom
merci beaucoup
eternal jay
yoo, j'ai un prbl savez vous comment je peux faire pour que le background ne soit pas collé ?
gaunt yoke
tu peux mettre un margin-bottom a ton élément pour pousser ce qu'il y a en dessous par exemple
ou mettre un padding-bottom a ton body, as u want
eternal jay
vu que j'ai mis 0 au margin et padding a mon body je vais essayer avec margin bottom merci ^^
gaunt yoke
tu peux quand meme mettre un padding-bottom a ton body si tu l'écris juste après
ou faire un padding: 0 0 24px 0;
par ex
void anvil
Pourquoi le média query fonctionne pas. J'ai fait un test pour que le bouton se ...
J'ai toujour besoin daide svp
warped compass
Pourquoi le média query fonctionne pas. J'ai fait un test pour que le bouton se ...
Hey, si tu as mit une couleur de base il se peux que cela ne fonctionne pas. Tu peux essayer d’enlever la couleur par défaut et de mettre rouge sur pc et d’une autre couleur pour mobile
void anvil
Non yen avais pas
cunning steppe
ta oublié ";" non ?
wintry umbra
@void anvil tu codes sur mobile?
wintry umbra
ca doit etre compliqué
void anvil
Nan ça va
wintry umbra
branche un clavier ca peut t'aider
void anvil
Non c'est bon
cunning steppe
Si tu mets le ";" à la ligne 102 sa fais rien ? 🤔
cunning steppe
Je pourrais pas t'aider alors ahah 🙂
wintry umbra
Merci Nizou
derien
gaunt yoke
Pas bien écrit ta média query
@media screen and (max-width: 1280px) and (min-width: 480px)
void anvil
A oui
void anvil
@media screen and (max-width: 1280px) and (min-width: 480px)
Pourquoi cette taille ca me l'affiche pour pc ?
void anvil
Tu codes sur téléphone ?
si il envoie des screens sur téléphone je me demande quelle est la réponse 🤓
wild forum
Sale eu,
J'ai transformé toutes les dimensions en pt et en px vers des dimensions en vh, sur ma superposition de vidéo en voiture. 😋
void anvil
Comment on aligne des images sur une ligne ?
void anvil
Tu codes sur téléphone ?
Non je code sur pc 😑
wintry umbra
<@456226577798135808> tu codes sur mobile?
.
wintry umbra
bah dit pas nimp alor
void anvil
Ta deja vu un pc avec un écran comme ça ?
wintry umbra
bref
gaunt yoke
En quoi ça change quelque chose au code qu’il soit sur tablette, pc ou sa machine à café ?
que je sache tu l’as jamais aidé à part pour dire « branche un clavier » donc ce genre de réflexion et spam Ping aussi en répondant à ces messages par des . c’est stop
halcyon loom
Mdr Nizou en sueur
void anvil
Comment on aligne des images sur une ligne ?
Sinon quelqu'un pourrais m'aider
gaunt yoke
Comment on aligne des images sur une ligne ?
Sinon la balise img de base est en type inline, elles devraient donc s’aligner automatiquement, sauf si elles ont pas de place pour se place l’une après les autres ou qu’elles sont dans des éléments block
Tu peux donc utiliser flex pour les aligner ou les grids css
gaunt yoke
https://flexboxfroggy.com/#fr tu peux suivre ce jeu/exercice pour comprendre comment s’utilise flex
void anvil
bonjour, connaissez vous par hasard un bon IDE web gratuit svp ?
wintry umbra
bonjour, connaissez vous par hasard un bon IDE web gratuit svp ?
Visual Studio Code
est le meilleur
brave jay
tu as d'autres lien comme ca Enzo ? 😮
gaunt yoke
@brave jay
Pour les grids: https://codepip.com/games/grid-garden/
Un deuxième jeu en flex: http://www.flexboxdefense.com
strong lynx
Bonjour, est-ce que c'est une bonne chose de prendre ça:
https://fr.fiverr.com/ui_helen/design-photoshop-psd-web-template-or-psd-website-design-ui-ux-design-mobile-app-916b?context_referrer=logged_in_homepage&source=cold_start_and_rnc&ref_ctx_id=e3e2fa50-2a6e-4348-b9d6-235e130e89bb&context=recommendation&pckg_id=1&pos=4&context_alg=nodes&seller_online=true
gaunt yoke
Bah ça dépend ton besoin ??
brave jay
ouah ca coute super cher ! 😮
void anvil
Chepas mais t'as pas moyen de trouver pour gratos sur https://colorlib.com
eternal jay
C’est pour quel utilisation ? Parsque 100 euros pour une seul page ça fait chère qd même @strong lynx
strong lynx
@gaunt yoke Enfait c'est la logique qui me parait bizzare la, c a dire que le 1 er nous donne une psd et la le deuxieme permet de le convertir en page web. est-ce que c'est fiable/est-ce que ça marche réellement de faire comme ça ?
eternal jay
Oui
C’est à dire que le premier te fais la maquette
Et le deuxième ce sert de la maquette pour la mettre en web
strong lynx
Ok donc ça parait fiable dans l'idée ?
eternal jay
Oui je vois pas de problème
Après ça fait chère la page mais bon si tu veux un taff de qualité je pense qu’il sera au rdv pour ce prix là
quartz thunder
C'est comme ça ça que ça marche: ta un designer et après derrière ta un intégrateur
gaunt yoke
Bah oui pilot c’est le bon sens
Et ceux qui disent c’est chère allô les gens faut bien qui vivent y a rien de chère à avoir une page à 100€
Par contre @strong lynx trouves toi un mec qui peut faire les 2 car certains designers ont la fâcheuses tendances à rendre des maquettes difficilement intégrable car ils n’ont pas la technique
Tu peux facilement trouver un mec qui design et derrière qui intègre
strong lynx
Yes merci je vais regarder ça tranquillement^^
eager trellis
Hello, j’aimerais commencer en web donc je me suis renseigné et si je je me trompe pas le mieux est de commencer par maitriser html/css puis javascript ? Merci (;
halcyon loom
javascript est extrêmement limité en web mais oui html/css c'est bien mais tu devrais plutôt commencer par html/css puis après dévier vers le php
@eager trellis
gaunt yoke
javascript est extrêmement limité en web
jamais entendu une connerie pareille
je veux bien que tu m'expliques ou javascript est limité pour le web, enfin surtout "extrêmement"
halcyon loom
je me trompe ?
gaunt yoke
à toi de me dire pourquoi javascript est extrêmement limiter du coup
halcyon loom
ahh autant pour moi on m'a tjrs dit que le javascript était était limité pour le web
gaunt yoke
Hello, j’aimerais commencer en web donc je me suis renseigné et si je je me trom...
Oui, déjà commencer par la structure html, puis css c'est cool, ca fait parti des bases super importantes
Puis ensuite tu peux dévier sur du javascript et/ou du php en fonction de ce qui va te plaire
eager trellis
@halcyon loom @gaunt yoke Okeyyy merci, on peut utiliser du php en frontend ou c’est plus pour le back ?
gaunt yoke
Le php c'est un langage coté serveur donc pour du back
le javascript peut-être utilisé pour les 2
mais du coup ton back en javascript c'est ce qu'on va appeler du node.js
eager trellis
Ok cool ça mais j’imagine donc qu’il faut d’abord bien gérer l’interface pour passer a du back ou pas spécialement ?
gaunt yoke
Tu peux très faire du php directement, c'est sur, maintenant je pense que ca peut etre cool aussi pour toi d'avoir les bases en structuration html/css
Que tu puisses aussi avancer sur tes projets solo sans être bloqué par X ou Y
eager trellis
Bah la je suis plutôt bon en python donc ca se rapproche plus de js non ?
halcyon loom
oui oui
eager trellis
Ok cool
quartz thunder
Bah la je suis plutôt bon en python donc ca se rapproche plus de js non ?
bof hein
ça se rapproche pas plus du js que du php en tout cas
halcyon loom
mais tu verras pour moi le html/css c'est le language le plus simple hhh
dawn agate
On est pas tous comme toi
halcyon loom
mdrrr
void anvil
Hello, j’aimerais commencer en web donc je me suis renseigné et si je je me trom...
Alors comme moi, tu peux commencer en HTML et CSS. Avec les connaissances des 2 langages de programmation, tu pourras te lancer sur Javascript pour optimiser ton site avec des fonctionnalités plus fascinantes et souvent utiles. Pour les informations de ton site, cookies, serveur, ect. Tu pourras te lancer sur PHP mais ça va être un peu long pour l'apprendre 🙂
eager trellis
Alors comme moi, tu peux commencer en HTML et CSS. Avec les connaissances des 2 ...
Cool merci, j’ai du temps mdr
toxic vector
unborn merlin
Si tu veux, il y a Grafikart qui fait de très bonne formation vidéo sur youtube, tu as HTML/CSS/JS et autres (pour sa formation javascript, le cours n'est pas complètement à
jour, il n'intègre pas la syntaxe ECMAScript 2016) 😉
hollow brook
Euh yo je comprend pas ce qu'il se passe sur mon loading screen, sur mon chromium c'est super mais le awesomium est cassé
chilly anvil
tu utilises du CSS / HTML pas supporté par Awesomium
tough jolt
Un peu plus sympa, mais le bouton collection fait bizarre
void anvil
Les emojis sont déconseillé
mais chacun son goût
Je trouve ça les emojis dans un site professionnel trop sorti du thème professionnel
et ça ne donne pas envie de continue, je ne sais pas si j'étais clair
acoustic tinsel
Il y a pas encore de chan pour partager, mais si quelqu'un veux, j'ai du faire un système de double navbar avec la seconde navbar qui déborde sur le caroussel.
Tout fonctionne avec Bootstrap mais si jamais voilà un lien :
-> https://www.mediafire.com/file/kush0djm29ih1hx/Arena-Meet.7z/file
acoustic lion
Bonjour exucsew moi je souhaite caler le text a droit et une image a gauche et je n'arrive pas a trouver la bonne manip pour faire un code de ce genre
tame forge
Bonjour, je souhaiterai créer un système de connexion avec Discord. Je souhaiterai que mon compte ai toutes les permissions. Quelqu’un aurai un tuto sur le site du serveur ou un vidéo sur YouTube bien ?
worldly flume
tu veux parler de l'authentification ?
pour récuper les infos d'un user discord @tame forge
C'est assez simple en verité
pour quasiment tout les sites c:
- 1 un lien ou tu redirige le client avec un callback
https://discord.com/api/oauth2/authorize - 2 le callback qui recupere le "code" pour récuperer un token
https://discord.com/api/oauth2/token - 3 le token et ensuite utilisé pour récuperer des informations
DiscordAPi --> /users/@me - 4 Ensuite tu utilise régulièrement le refresh_token pour actualisé le token dans la db
https://discord.com/api/oauth2/token ( c le même lien que pour les tokens)
tame forge
pour récuper les infos d'un user discord <@!692374264476860507>
Ok. Et comment je l’intègre à mon script ?
worldly flume
Bas en gros quand tu a le token de la personne ensuite tu utilise le token pour faire les requetes
En le rajoutant sur le header authorization
tame forge
Ok
void anvil
Faut mettre pu dans les liens hiver visited etc...
acoustic lion
bonosoir, excusez moi j'aimerai savoir si quelqu'un serait disponible pour mexpliquer le systeme de grid de bootstrap car je ne comprend riennnn
si c'est possibl emerciiiiiiiiii
eternal jay
Tu as 12 colónes avec bootsrapp essaye de voir dans la doc (très bien fournis) le fonctionnement des row des container, je t’aurais bien aidé mais je vais dormir mais si tu veux pourquoi pas demain 😉
acoustic lion
oui demain j'aimerai pour te montrer un petit exemple ou au pire regarde
@eternal jay
je veux justr que le text soit bien placee a gauche et l'image a droit
et si je me trompe pas le systeme de colonne est fait piur cela cependant je n'y comprend rien
<div class="container">
<div class="row justify-content-lg-center">
<div class="float-left col-lg-5 w-md-100" style="z-index: 1;">
<h4>Lorem Impsum</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa doloribus, cumque voluptatibus quas facere maiores dolores harum! Quas tenetur laborum necessitatibus dicta, tempora maxime. Laborum maxime enim nesciunt voluptatem cum?</p>
</div>
<img width="560" height="485" src="./img/b1.jpg" class="img-home float-right mt-5 col-lg-7" style="z-index: 2;">
</div>
</div>
Juste comment ça s’appelle ce genre d’icône qui permet de monter ou descendre dans une page ?
gaunt yoke
Back to top @eternal jay
eternal jay
C’est avec du jquery non ?
gaunt yoke
Tu peux le faire en js ou alors simplement avec une ancre en html
eternal jay
Yes mais vu que je veux faire une animation avec un scrolldown vaut mieux que je le fasse en jquerry ?
gaunt yoke
Comment ça une animation de scrollDown
quartz thunder
j’imagine qu’il veux que le bouton apparaisse au scroll
mais du coup tu peux quand même faire sans jquery spy
si c’est ça
gaunt yoke
Ahhh
Oui il peut faire sans jQuery, en js juste
Mais sinon oui spy tu met un évent au scroll, et si pour toi le Y est assez haut tu peux faire apparaître ton élément
Et bon du coup autant le faire en js aussi to back to top
Au moins tu as tout au même endroit
eternal jay
Yesss okay merci !!
gaunt yoke
tu veux que quoi reste fixe
eternal jay
le carousel
gaunt yoke
tu veux qu'il reste fixe tout en haut quand tu commences a scroller ?
gaunt yoke
Mais pourquoi tu dezoom/zoom ?
eternal jay
Jspp on m'a dit un jours que c'était pour savoir si ton site était bien addapter
j'ai jamais vraiment compris pq
gaunt yoke
Bah alors oui et non, normalement effectivement c'est pas censé passer l'un au dessus de l'autre mais tu testes pas le responsive avec le dezoom et zoom
tu peux le tester via l'outil de google qui est dans la console:
eternal jay
Yess c'est ce que je fais
mais je comprenais pas pourquoi
il ne restait pas static c'est a cause de bootstrapp ?
gaunt yoke
Je pense que c'est pas ton carousel le probleme mais la div au dessus
c'est clairement elle ou le texte est plus centré ni rien quand tu dezoom
eternal jay
Le texte c'est les medias queries
gaunt yoke
il est online ton site ?
gaunt yoke
ah zut
eternal jay
je vais tester sans la div
enfin section* que j'avais créer
sans la div c'est bien fixe
gaunt yoke
si tu veux tu peux m'envoyer ton truc et je peux regarder en vidéo compliqué de comprendre pourquoi
eternal jay
Yess
gaunt yoke
Niquel gg
eternal jay
❤️
void anvil
Bonjour, je suis encore novice dans le développement html css, j'ai voulu faire un header mais j'ai quelques problèmes
gaunt yoke
tu déclares des id avec # et tu utilises des class
gaunt yoke
Oui
limber raptor
comment ça coller au haut de la page ? qu'est-ce que ça te met (en rendu) ?
latent grove
ba ya toujour un espace entre les bords de la page et ce que tu met dedans
limber raptor
met ça en haut de ton css :
* {
margin: 0;
padding: 0;
}
ça élimine l'espacement 😉
limber raptor
essaye ce que je t'ai envoyer
latent grove
ca fonctionne merci !
limber raptor
avec plaisir 😉
latent grove
ca veut dire quoi l'etoile
limber raptor
comment ça ?
latent grove
ca marche pour enlever tout less bords ?
latent grove
ok cool mrc
limber raptor
logiquement oui c'est fait pour
void anvil
Bonjour je n'arrive pas à superposer le texte "histoire" sur mon image
limber raptor
Yop, tu as plusieurs manières pour régler ça
déjà tu peux mettre ton image en position: absolute;
en css
limber raptor
Non
met pas l'image en absolute
mais le "products__frame"
mais vus que tu utilise figure
gaunt yoke
Sinon autant mettre ton image via un background-image et éviter le position absolute pour ça
limber raptor
tu peux utiliser le figcaption non ?
void anvil
J'ai mis figure car je compte mettre plusieurs images cliquables
les une a coter des autres
ah na c'est section
gaunt yoke
<figure class="product__frame" style="--image: url('ici')">
<p class="product__title">Le texte</p>
</figure>
.product__frame {
--image: url('default url image');
background-image: var(--image);
background-size: cover;
width: 490px;
height: 290px;
}
.product__frame .product__title { color: white; text-decoration: none; }
par exemple
void anvil
ok
gaunt yoke
Sinon si tu passes par une img, tu vas devoir avoir un parent qui devra etre en position relative, et ton image en absolute, donc ajouter du style et un élément html supplémentaire, alors que tu peux juste passer par le bckg-image dans ce cas
void anvil
ah
gaunt yoke
https://nostalgic-css.github.io/NES.css beau travail ❤️
Pour ceux qui voudraient faire un site/app avec un style retro gaming, vous avez cette lib ui basé sur le style de la NES ^^
void anvil
J'ai un écran asser grand et quand je mets ma page en plein écran mon site s'affiche comme ça
Sauf que moi je veux que ça soit au centre
et pas vers la gauche
et je crois qu'il y a une histoire de reponsive
gaunt yoke
center s'utilise plus, deprecated
limber raptor
ah ouai ?
gaunt yoke
yes
limber raptor
ah ok c'est bon a saoir 😄
gaunt yoke
margin: auto devrait faire le taff
void anvil
je lemet ou le margin
latent grove
Comment je peux faire que quand l'hover s'active le texte reste fixer sur le bouton svp
void anvil
Comment on rajoute une bordure à un texte svp
gaunt yoke
avec un text-shadow
void anvil
ok merci
et d'ailleurs pour centrer mes images j'ai pas réussi avec le margin auto du coup j'ai mis <center> dans le html @gaunt yoke
gaunt yoke
utilise les grids alors ou flex mais c'est une balise deprecated donc pas ouf de l'utiliser surtout pendant un apprentissage
latent grove
moi j'ai toujour besoin d'aide svp
void anvil
Petite question je debute en web et je me suis demander si faire plusieur media comme sa c'etait opti ou sa impacter l'optimisation etc... car je veux faire du responsive voici mon code
/* Bouton login */
@media (width <= 1117px) {
.container-fluid a.login{
text-decoration: none;
color: #fff;
margin-left: 10px;
padding: 5px;
position: absolute;
left: 85%;
top: 10px;
}
}
@media (width <= 895px) {
.container-fluid a.login{
text-decoration: none;
color: #fff;
margin-left: 10px;
padding: 5px;
position: absolute;
left: 83%;
top: 10px;
}
}
@media (width <= 793px) {
.container-fluid a.login{
text-decoration: none;
color: #fff;
margin-left: 10px;
padding: 5px;
position: absolute;
left: 78%;
top: 10px;
}
}
Non tu peux par contre tu n'auras pas besoin de tout répéter a chaque fois, car le code que tu vas déclarer ici:
@media (width <= 1117px) {
.container-fluid a.login{
text-decoration: none;
color: #fff;
margin-left: 10px;
padding: 5px;
position: absolute;
left: 85%;
top: 10px;
}
}
et quasi identique aux autres, et celui ci sera interprété aussi par les ecrans plus petit, donc pour les autres media query seulement mettre l'élément qui change, et la si je dis pas de connerie:
c'est juste le left: 83%;
après je t'avoue que je suis pas sur que la manière donc tu places ton bouton soit responsive si tu es obligé entre 200px de taille d'écran de changer le left etc, c'est que tu as du merdé quelque part, mais ça c'est un autre sujet
Par contre oui niveau optimisation (pour que ton fichier css soit moins lourd) ne déclare pas 15 fois tes media querys identique, tout ce qui doit changer si width <= 1117px tu le mets dans le meme bloc, ne déclare pas cet élément 15 fois pour a chaque fois changer un seul élément
Je sais pas si je suis clair
void anvil
j'ai pas super compris
car si je fait que 1 code bah sa le changera de place 1 fois et après je devrais le rechanger de place bah enfaite j'ai beaucoup de mal avec le positionnement et le responsive
gaunt yoke
@media (width <= 1117px) {
.container-fluid a.login{
text-decoration: none;
color: #fff;
margin-left: 10px;
padding: 5px;
position: absolute;
left: 85%;
top: 10px;
}
}
@media (width <= 895px) {
.container-fluid a.login{
left: 83%;
}
}
@media (width <= 793px) {
.container-fluid a.login{
left: 78%;
}
}
ahh ok
gaunt yoke
En gros tu peux juste faire ça deja pour ton probleme, et si le a.login est déja déclaré plus haut, tu peux meme faire ça
@media (width <= 1117px) {
.container-fluid a.login{
left: 85%;
}
}
@media (width <= 895px) {
.container-fluid a.login{
left: 83%;
}
}
@media (width <= 793px) {
.container-fluid a.login{
left: 78%;
}
}
Et niveau opti ce que je te disais c'est que si tu veux rechanger un élément pour les ecrans inférieur a 1117px, recrée pas un @media, remet le dans le meme comme ceci
@media (width <= 1117px) {
.container-fluid a.login{
left: 85%;
}
.element { color: red }
}
@media (width <= 895px) {
.container-fluid a.login{
left: 83%;
}
}
@media (width <= 793px) {
.container-fluid a.login{
left: 78%;
}
}
ok et comment sa c'est pas vraiment responsive ? car moi je fait comme sa mais si sa se trouve c'est beaucoup plus simple ?
fin je le fait surement mal
gaunt yoke
Tu peux screen ta page actuelle ? que je vois ou est placé ton bouton please
gaunt yoke
ok et le bouton .login c'est "Se connecter" ?
void anvil
oui
gaunt yoke
Donc oui c'est clairement pas bon de le placer en position absolute avec un left: xx%
c'est pas responsive
void anvil
ah comment je pourrais faire ?
gaunt yoke
En gros ta navbar, pour t'aider rapidement, en ayant un code fonctionnel sur desktop/mobile/tablette, tu peux juste faire:
<nav class="navigation">
<div class="navigation-left-side">
<a href="#" class="logo">Reco training</a>
<p>Entrainements</p>
</div>
<a href="#" class="login">Se connecter</a>
</nav>
.navigation {
width: 100%;
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: green;
}
.navigation a { text-decoration: none }
.navigation .navigation-left-side { color: white }
.navigation .navigation-left-side .logo {
color: white;
font-size: 1.4rem;
margin-right: 8px;
font-weight: bold;
}
.navigation .login {
color: green;
border-radius: 6px;
background-color: white;
padding: 6px 12px;
}
tu auras beau réduire ton navigateur le bouton se connecter restera a droite naturellement
j'ai pas testé j'ai directement écris ici donc il y aura peut etre des coquilles
void anvil
ok je test sa ?
gaunt yoke
Yes vasy met l'html et met mon css au bon endroit et tu me diras
void anvil
gaunt yoke
.navigation {
width: 100%;
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: green;
}
.navigation a { text-decoration: none }
.navigation .navigation-left-side { color: white; display: flex; align-items: center }
.navigation .navigation-left-side .logo {
color: white;
font-size: 1.4rem;
margin-right: 8px;
font-weight: bold;
}
.navigation .login {
color: green;
border-radius: 6px;
background-color: white;
padding: 6px 12px;
}
reprend ce css
void anvil
gaunt yoke
voila niquel, maintenant sur le p de gauche tu mets un margin: 0 et ce sera good
void anvil
ok
gaunt yoke
mais la réduis ta fenetre tout restera positionné au bon endroit
void anvil
oui mais le entrainements c'etait un bouton
void anvil
mais ducoup je fait comment pour que sa sois fixer au bon endroit pas obligatoirement a droite
void anvil
bah le entrainement a coter du titre etc...
mais par la suite si je veux changer
genre comment sa marche en gros
gaunt yoke
Ah bah tu changes les positions en flex moi j'ai respecté ce que tu avais envoyé en image
Si tu veux comprendre flex:
https://flexboxfroggy.com/#fr
ca t'aidera a placer tes éléments etc
void anvil
ok je vais regarder merci
latent grove
toujour besoin
gaunt yoke
toujour besoin
Quel est ton soucis
latent grove
jai fait une transiton au bouton le border left qui grandit en width mais le texte se deplace a gauche aussi du coup
gaunt yoke
Tu peux me montrer un screen du rendu en hover et le code de ton button stp
latent grove
.btn-ajoute {
margin-left: 690px;
margin-top: 100px;
background: linear-gradient(to bottom right, #FFD43B, #b89c00 );
height: 50px;
width: 150px;
font-size: 20px;
font-family: 'Franklin Gothic Medium', sans-serif;
border-radius: 100px;
border: solid;
transition: 2s;
border-color: #FFD43B;
}
.btn-ajoute:hover {
border-left-width: 39mm;
background: linear-gradient(to bottom right, #FFD43B, #b89c00 );
background: #FFD43B;
}
Oula c’est pas bon du tout tout ça, tu cherches à faire quoi exactement avec ton bouton? Qu’il soit juste plus grand au hover ?
latent grove
le border left s'agrandit pour faire un effet styler et le backgroud qui change
mais jsp pk jai fais 2 background
azure dawn
Yop !
Excusez moi de vous déranger juste pour ça mais une petite question, les #tab3 dans les urls par example, ça s'appelle comment svp ? (pour une histoire de compatibilité avec nginx)
Merci !
gaunt yoke
hash
azure dawn
Merci 🙂
strange fractal
salut, mon menu "tabs" ne veut pas être ouvert/active par défaut à l'ouverture de mon plugin, quelqu'un voit pourquoi ?
.tab {
overflow: hidden;
color: #444;
}
.tab button {
margin-top: 84px;
float: left;
border: none;
outline: none;
color: #f2f2f2;
margin-right: -5px;
margin-left: 4px;
width: 100%;
cursor: pointer;
transition: 0.3s;
}
.tab button:hover{
background-color: #ddd;
color: black;
}
.tab button.active {
background-color: #4CAF50;
}
.tabcontent {
display: none;
border-top: none;
}
<body>
<div id="background" class="background">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Visage')" id="defaultOpen" style="width:32%">Retouche</button>
<button class="tablinks" onclick="openCity(event, 'Masques')" style="width:32%">Masques</button>
<button class="tablinks" onclick="openCity(event, 'Effects')" style="width:32%"><img src="img/Bokeh.png" /></button>
</div>
<div id="Visage" class="tabcontent">
<button class="accordion active" ><img src="img/accordionpeau.png" /></button>
<div class="panel">
<div class="btn-group" style="width:100%">
<button id="LissageIA" style="width:40%"></button>
<button id="BasedeTeint" style="width:40%"></button>
</div>
....
....
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
potent linden
Bonjour j'ai une question 🙂
J'aimerai aligné parfaitement mes textes des 3 div en dessous de ma page quelqu'un pourrait il m'aidé ?
Ce sont des div en display grid
shut sentinel
Bonjour, je suis un élève en classe de terminale et j'ai besoin de trouver une voie pour mon futur. J'adore coder et je veux savoir si je pourrai compter sur le développement en tant que backdoor ou si vraiment je dois foncer dedans. Est-il possible de suivre un cursus de license et d'apprendre l'html en parallèle ? Si vous avez de l’expérience je suis preneur de tout avis..
errant cypress
Salut, ce sont des métiers d’avenirs, tu n’auras aucun problème à trouver un boulot là-dedans si tu vas en école d’ingé ou autre, même en faisant une formation sur openclassrooms, si ça te plais vraiment fonce !
shut sentinel
Et tu penses qu'il est jouable de continuer une autre étude à coté ou bien je dois m'y consacrer entierement ? Merci de me consacrer de ton temps !
errant cypress
Ça dépend où tu veux finir ^^, après voilà si t’es en prépa, t’auras pas le temps, puis le développement ( en général), demande pas mal de temps
tout dépend de ton projet, le mieux restant logiquement de s’y consacrer entièrement, mais c’est à toi de voir
shut sentinel
Je vois, merci alors je vais continuer à y réflechir
copper warren
Bonjour, je suis un élève en classe de terminale et j'ai besoin de trouver une v...
@shut sentinel tu sais déjà ce que tu voudrais faire comme métier dans le dev ? ( si jamais t'as des questions par rapport à la licence d'informatique je peux te répondre )
shut sentinel
<@!536311183221981209> tu sais déjà ce que tu voudrais faire comme métier dans l...
J'en connais pas assez pour te dire j'ai pas eu le temps de me renseigner mais jsuis vraiment ouvert à la discussion
copper warren
@shut sentinel bah mp si t'as des questions
languid cypress
Comment fait on pour centrer une div en css , je ne me souvien plus :/
limber raptor
margin: auto;
.parent {
display: flex;
justify-content: center;
align-items: center;
}```
```html
<div class="parent">
<div class="child"> <!-- div centered -->
</div>
</div>```Pour en savoir plus sur les flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
void anvil
Salut ! J'ai un petit problème, j'ai fais ça
Et je veux que le "Texte right" soit à coté de la bordure noire mais j'y arrive pas
J'ai fais ça
errant cypress
pourquoi des h3 dans des button ??
void anvil
Jsp 🤷♀️ j'ai trouvé que <p> était trop petit
errant cypress
mais tu peux faire <button>Test</button>
void anvil
Ouais
errant tinsel
J'aimerais bien faire des rectangles qui montrent les services genre comme sur mtx, comment je peux faire? J'utilise ça pour faire une animation de grossissement, je peux le faire sur tout ce qu'il y a dans le rectangle quand on passe la souris dessus?
gaunt yoke
c'est quoi l'effet sur mtx ?
errant tinsel
Y a pas d'effet mais ce que je veux faire c'est le rectangle avec le prix et les infos
Mais pour l'effet je vais juste le mettre sur un bouton
gaunt yoke
Mais sinon pour répondre à ta question si tu appliques le scale au parent, tout les enfants (éléments) situés dedans seront aussi grossis oui
errant tinsel
Ok, mais du coup comme je fais le rectangle?
gaunt yoke
C’est une div qui contient tout avec les propriétés suivante : background-color, border-radius, padding, et box-shadow
ensuite tu leurs set les valeurs que tu veux
errant tinsel
Bien vu j'y avait pas pensé
Merci
Et pour aligner deux box comment je peux faire?
gaunt yoke
Les grids ou flex
hollow reef
Hey salut petite question je voudrais savoir comment faire pour que quand on clique sur un mot exemple milieu page ça nous mette au milieu de la page? Merci
<li><a href="#">Milieu page</a></li> Il faut remplacer le # par quoi svp! Merci beaucoup 
gaunt yoke
une encre
tu mets un id a la div ou tu veux que ca scroll par exemple id="toto" et tu feras un href="#toto"
hollow reef
tu mets un id a la div ou tu veux que ca scroll par exemple id="toto" et tu fera...
<id="toto"> comme çà?
hollow reef
<li><a href="#toto">tot</a></li>
j'ai fait comme cela hélas ça ne bouge pas dans l'url en haut il y a bien le #toto mais ça bouge pas
gaunt yoke
tu l'as mis ou le id="toto" ?
gaunt yoke
Bah faut que cet id soit sur la div ou tu veux qu'il arrive
hollow reef
même en étant dans une div rien ne ce passe
Ok
erreur de ma part
j'ai réussi
J'avais mit comme ça sans intégré a la bonne div
merci beaucoup de ton aide
gaunt yoke
👌
winged sapphire
yo j'arrive pas à mettre c'est trois text à la même ligne du titre.
comment je peux faire ?
steady verge
display flex
gaunt yoke
Oui
winged sapphire
Y'a pas
gaunt yoke
dequoi y a pas
winged sapphire
gaunt yoke
winged sapphire
Ah
voilà !
fallait mettre "display: inline-block;"
merci
aussi
pour les espacer faut faire comment
?
espacer le titre et les trois text
gaunt yoke
des margins
twin lake
Sa débute fort mdr
sinful nest
x)
hoary pumice
Salut quelqu'un aurait le code pour edit le title de façon stylé genre lettre par lettre etc?
J'avais vu ça sur plusieurs sites mais j'ai aucune idée de quoi chercher
void anvil
<head>
<title>Mon super Titre !</title>
</head>
Ah !
Pour que les lettres apparaissent une par une ?
C'est en JS sa il me semble
gaunt yoke
document.title =
et ensuite tu peux faire un interval pour afficher lettre par lettre
void anvil
Salut ! J'arrive pas à mettre du contenu à droite de la bordure noir , j'ai mis display: flex; et justify-content: right; mais ça ne marche pas
unborn merlin
balance ton html et css (la partie concerné)
unborn merlin
hello tout le monde, j'aimerai faire cette animation http://jsbin.com/radadoviyo/1/edit?html,css,output (trait qui commence depuis le milieu et qui s'allonge des 2 côtés, je l'avais fais ya un ptit peu de temps mais plus moyen de me rappeler o_O), merci pour l'aide 🙂
gaunt yoke
Ça c’est ton code du coup que tu as actuellement ? Car si non tu as la solution dans l’onglet css
unborn merlin
nop c'est pas mon code mais j'ai trouvé ce que je voulais, merci quand même 😉
molten dagger
Bonjour, je rentre en formation développeur web au mois de Mars et je suis à la recherche d'idées de petits sites webs simples à faire pour m'entraîner avant d'entrer en formation, si vous avez des idées n'hésitez pas à me les donner, merci beaucoup
zealous vine
Bonjour j’ai ces espaces trop grands entre les mots j’ai justifié mon texte en css est ce que qqn aurait la solution pour que ces espaces diss paraisse ( a l’école nous appelons ça des lézardes ) merci d’avance
gaunt yoke
Bonjour, je rentre en formation développeur web au mois de Mars et je suis à la ...
Essaye simplement de reproduire des sites existants
gaunt yoke
Bonjour j’ai ces espaces trop grands entre les mots j’ai justifié mon texte en c...
tu peux essayer de cheat avec le word-spacing si tu veux
zealous vine
D’accord merci
acoustic lion
bonjour je cherche quelqu'un qui pourrait maider sur responsive car je galere beaucoup j'ai consulter beaucoup de video mais je galere toujours
zealous vine
bonjour je pourrais t'aider si tu veux
void anvil
Salut ! je n'arrive pas à mettre mes boutons cote a cote
Ou alors quand j'y arrive, les boutons ne sont plus au centre
J'ai mis
display: block;
margin: auto;
errant cypress
inline-flex je crois en display
void spear
hey j'aurai besoin d'aide sur un script php/html c'est pour un projet personnel j'ai quelque soucis pour afficher mes proposition dans une liste deroulante
uncut juniper
Bonsoir, quelqu'un sait comment enlever ça ( les contours en blanc ) dans une image 1920x1080 en html ?
gaunt yoke
Bonsoir, quelqu'un sait comment enlever ça ( les contours en blanc ) dans une im...
Les contours blanc ? 🤔
stark rapids
Overflow:hidden;
Dans le css
Et si tu veux juste enlever le scroll du bas c'est overflow-x: hidden ;
gaunt yoke
Ah c’est le scroll le contour blanc autant pour moi
uncut juniper
Ah c’est le scroll le contour blanc autant pour moi <:kappo:649342986571874315>
Ouais je sais pas comment ça s’appel vraiment mais bon 
uncut juniper
Overflow:hidden;
Ok merci
void anvil
Bonjour j'ai utilisé une balise float mettre 2 div cote a cote, mais je n'arrive pas à mettre du contenu en bas ce qui fait que mes div sont superposé
void anvil
Ah oui ça marche, merci beaucoup @gaunt yoke
void anvil
Hey re bonjour, je n'arrive pas à collé mes deux div, si je mets un margin-right au dessus de 602, la div ce retrouve en dessous
void anvil
Ah bah j'ai trouvé
potent linden
Salut c'est quoi l'editeur de texte utilisé sur https://g-ca.fr/ ?
errant cypress
wut
gaunt yoke
Salut c'est quoi l'editeur de texte utilisé sur https://g-ca.fr/ ?
CKEditor
potent linden
@gaunt yoke Merci bien
acoustic lion
Bonjour, j'ai un probleme je ne comprend pas pourquoi dans mes 2 input type=''radio" lors de la selection d'un input il ne se decoche pas automatiquement lors de la selection d'une autre radio
gaunt yoke
@acoustic lion il faut qu'ils aient le meme attribut name c'est le cas ?
hollow brook
Salut, je cherche à récupérer en css les dimensions d'un objet dans son propre selecteur
echo night
Hey les gars, est-ce que quelqu'un pourrais m'aider...ou me dire comment récupérer l'ip publique du client (en Js) sans passer par un service tiers
J'ai cherché tout internet sans succès
Svp... 
gaunt yoke
Côté client ou côté serveur ?
echo night
Client
Pour récup sa propre ip publique quoi....
Le mieux...Sans Nodejs xd
Ouf...je me suis fail de salon
gaunt yoke
Tiens t’as un bon thread ici sur ce que tu peux use https://stackoverflow.com/questions/391979/how-to-get-clients-ip-address-using-javascript
C’est assez simple en plus tu as tout
echo night
Oui et non...Car j'ai pas envie de passer par un service tiers
Une api dans le cas ici
gaunt yoke
Côté client du coup je serais pas
echo night
nope
unborn merlin
hello j'ai un ptit soucis, mon menu de navigation responsive fait un gros débordement sur ma page comme ceci, vous savez comment faire ? (j'ai essayé les overflow-x:hidden ) mais sans résultat
voici le ptit schéma pour vous montrer
gaunt yoke
on a un lien pour tester ? pour voir un peu le code actuel car j'ai des idées pour régler mais adapter la réponse en fonction de ton code actuel
unborn merlin
ah bah, je viens de réussir à trouver un stackoverflow avec la réponse
Solution : appliquer un overflow-x:hidden sur l'html et le body à la fois :
html, body{ overflow-x: hidden }
merci quand même pour ton aide
gaunt yoke
nickel alors
latent grove
qui connais des effets styler pour des bouttons
genre avec hover ca fait tourner le border autout
civic whale
genre avec hover ca fait tourner le border autout
En vrai, un simple `filter:brightness(1.1);" sur le hover suffit amplement
Ça rend pas toujours très joli avec toutes les couleurs, perso avec du bleu, ça marche de mon côté
civic whale
C'est un "filtre" qui va simplement te permettre d'augmenter la luminosité de ton bouton, ce qui va en gros engendrer un éclaircissement sur celui-ci.
latent grove
et pour les bords ou autre tu connais des trucs?
civic whale
civic whale
et pour les bords ou autre tu connais des trucs?
Mmmhhh... en vrai, non.
Mais je peux chercher une solu' sur internet si ça t'chante!
latent grove
deja chercher
latent grove
https://gyazo.com/567099fd702013de74c0593646d7f395
comment tu fait pour un seul cote