Genre en tous je doit avoir 24h apprentissage
#html-css
scenic fiber
patent solstice
T'as une bonne idée de comment faire ce genre de chose ici : https://www.w3schools.com/howto/howto_js_topnav.asp
scenic fiber
Ok merci, je regarde cela
scenic fiber
T'as une bonne idée de comment faire ce genre de chose ici : https://www.w3schoo...
l'étape 1 fonctionne, mais l'étape 2 de mettre du CSS ne fonctionne pas
thorn thicket
Bonjourrr j'aimerai faire des séparations de div custom un peu sur g-ca.Fr
jsp faire alors j'aurais besoins d'aide ^^'
patent solstice
Bonjourrr j'aimerai faire des séparations de div custom un peu sur g-ca.Fr
C'est-à-dire des séparations de div custom ?
scenic fiber
l'étape 1 fonctionne, mais l'étape 2 de mettre du CSS ne fonctionne pas
@patent solstice ??
patent solstice
" Ca ne fonctionne pas " ça m'aide pas non plus
scenic fiber
Regarde je t'envoie se que ça me fait
La première étape fonctionne, mais la deuxième rien ne se mais en couleur
gaunt yoke
Faut mettre tout ça dans une balise ou un fichier style
scenic fiber
c'est à dire ?
gaunt yoke
<style>code</style> ou dans un fichier .css
scenic fiber
<style>code</style> ou dans un fichier .css
ok merci
thorn thicket
C'est-à-dire des séparations de div custom ?
comment sur g-ca.fr
scenic fiber
Ya beaucoup de div quand même
Moi ?
patent solstice
Non Duboujnou
scenic fiber
Ok
gaunt yoke
Il parle des sections un peu en diagonale
C’est une div ou un pseudo élément à toi de voir avec un transform dessus
Tu peux juste clique droit dessus pour voir le code
thorn thicket
Tu peux juste clique droit dessus pour voir le code
:/
gaunt yoke
??
scenic fiber
Encore besoin d'aide 🤣
Est ce que quelqu'un c'est faire un menu d'inscription et de connexion avec la base de donné ?
gaunt yoke
Là du coup ce sera pas de l’html css
scenic fiber
Là du coup ce sera pas de l’html css
C'est quoi ?
gaunt yoke
Ça peut être en JS, PHP ou autre
scenic fiber
Ok
scenic fiber
Ça peut être en JS, PHP ou autre
Et on peux mélanger du HTML/CSS avec du PHP par exemple ?
gaunt yoke
Bien sûr
bronze crow
Salut tout le monde esque vous pouvez me dire comment décaler le logo du menu je vous envoie mon cade css pour que vous voyez
scenic fiber
Salut, est ce que vous pouvez me dire comment faire pour que la barre noire et des arrondie à la place d'angle droit ?
scenic fiber
=> https://developer.mozilla.org/fr/docs/Web/CSS/border-radius
Ok je test
Mais il faut que je le place ou dans mes lignes de code ? @patent solstice
patent solstice
Dans ton css
patent solstice
Tu devrais apprendre comment fonctionne le HTML / CSS avant de te lancer dans ton projet 😦
scenic fiber
Je c'est comment ça fonctionne 🤣 Mais je ne comprend pas tous se que tu me dit
patent solstice
La preuve que non, car tu te connais pas l'architecture générale d'un fichier HTML et d'un fichier CSS
scenic fiber
Si, c'est juste que je ne comprend pas se que tu me dit
c'est bon j'ai compris je viens de réussir
patent solstice
Si tu cherches un dev, tu peux faire la demande directement sur le site de g-ca ^^
void anvil
je cherche ici en priorité
patent solstice
Ici c'est plutôt des salons pour de l'aide
gaunt yoke
Tu veux de l’aide ou tu veux un mec pour bosser pour toi @void anvil
void anvil
bosser
bronze crow
Salut tout le monde esque vous pouvez me dire comment décaler le logo du menu je...
Vous pouvez m’aidez ??
scenic fiber
Vous pouvez m’aidez ??
J'ai le même soucis que toi
royal patio
Vous pouvez m’aidez ??
essaie le justify-content: space-aroud ou justify-content: space-between
bronze crow
essaie le `justify-content: space-aroud` ou `justify-content: space-between`
Jvais tester
scenic fiber
essaie le `justify-content: space-aroud` ou `justify-content: space-between`
Et pour déplacer un texte ?
bronze crow
NORMALEMENT TU FAIS
margin-left
ou
margin-right je crois
royal patio
Et pour déplacer un texte ?
text-align sinon
bronze crow
oui ya sa aussi
bronze crow
`text-align` sinon
comment tu fais pour mettre le text en encadrer ??
royal patio
comment tu fais pour mettre le text en encadrer ??
avec border: solid 2px black par exemple
à toi de définir ce que tu met après border
bronze crow
nn maisq sur discord ??
bronze crow
essaie le `justify-content: space-aroud` ou `justify-content: space-between`
alors jai essayer mais si tu veux quand je le met sa decale tout
nn ca marche pas jai essayer partout
royal patio
nn maisq sur discord ??
ah
avec les accent grave `
bronze crow
mais enfaite si tu veux jai deja mis du justify-content dè coup cest pour sa sa marche pas
royal patio
après ce que tu dois faire c'est un peu plus complexe
je te conseille de mettre le texte que tu veux garder au centre dans une div
cette div tu la met en justify-content: center et sur la div contenant cette div et le logo il te faut un justify-content: space-around je conseille
le souci c'est que ça bloquera le texte à droite
le dernier conseil c'est d'ajouter une div en plus après le texte pour qu'il soit centrer automatiquement
sinon il y a les grids mais je maitrise pas trop
le html ressemblerait à ça
<style>
#menu{
justify-content: space-around;
/* et tout ce dont tu asa besoin */
}
#menu nav{
justify-content: center;
/* et tout ce dont tu as besoin */
}
</style>
<header id="menu">
<img …>
<nav>
<a …>
<a …>
<a …>
</nav>
<div></div>
</header>
et petit tips
pour les gros bloc de code c'est avec 3 accent grave et tu peux même mettre le nom du langage
comme ça
```html
ton code html
```
bronze crow
pas compris le petit tips ??
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")```C’est ça le tips
stone raptor
Bonjour, j'ai un petit problème avec Visual Studio Code, quand je veux faire une balise, je marque la balise par exemple une balise paragraphe et quand je clique sur entrer au lieu de faire ça: <p></p> ça me fait ça: <p j'ai tout essayé mais rien n'a marché
Mais par contre avec le css il n'y a pas ce problème
pearl forge
@thorn thicket C'est quelque chose comme ça que tu cherchais ? https://getwaves.io/
thorn thicket
<@812075167344885792> C'est quelque chose comme ça que tu cherchais ? https://ge...
oui merci ^^
TROP c'est incroyable
pearl forge
👍 c'est très pratique !
scenic fiber
Qui peux m'aider pour que l'Accueil, le magasin et le contact soit au milieu ?
quartz thunder
Tu dois utiliser la propriété justify-content avec pour valeur center
à l'endroit où ta mis display: flex;
scenic fiber
à l'endroit où ta mis `display: flex;`
j'ai pas mis display: flex;
quartz thunder
ta fait comment pour que tes éléments soit alignés comme ça?
scenic fiber
J'ai trouvé c'est bon merci
scenic fiber
ta fait comment pour que tes éléments soit alignés comme ça?
non ça ne fonctionne pas au final
Tiens mon CSS et HTML
pearl forge
@scenic fiber Les balises font et center ne sont plus standard !
scenic fiber
Ah oui je c'est tkt pas, je veux juste pouvoir déplace le ACCUEIL/MAGASIN/CONTACT au milieu
pearl forge
Dans .topnav tu ajoutes text-align: center;
scenic fiber
Dans .topnav tu ajoutes text-align: center;
Tu veux que je le mette ou car ça ne fonctionne pas ?
pearl forge
Tu as un .topnav dans ton css. Tu dois faire
.topnav{
/* Reste de ton code ici */
text-align:center;
}
ça ne fonctionne pas
pearl forge
Ah ! Je viens de voir que tu as mis float: left dans .topnav a
pearl forge
Dans ce cas enlève aussi display:block dans .topnav a
pearl forge
Et en mettant display:inline-block à la place de display:block ça donne quoi ?
pearl forge
Enleve le float. Ça fait sortir les éléments du flux "normal".
pearl forge
Bizarre tout ça ! 🤔
scenic fiber
oui bizarre
pearl forge
Remets moi ton code
quartz thunder
Retire tes float partout
Ensuite met un display: flex; sur topnav
et ajoute justify-content: center;
sur topnav aussi
pearl forge
Oui, essaie de retiré les float.
scenic fiber
et ajoute justify-content: center;
merci mec
T'es le boss je suis dessus depuis hier
@quartz thunder@pearl forgeun des deux est ce que vous pouvez me dire comment faire pour mettre un logo sur la barre ?
pearl forge
Utilise un framework CSS c'est plus simple.
Materialize et Semantic UI sont excellent par exemple.
gaunt yoke
A mon avis avant de passer au framework css qu’il apprenne les bases
Car là il les a pas
scenic fiber
Utilise un framework CSS c'est plus simple.
Materialize et Semantic UI sont exce...
Le logo je les déjà c'est juste que je n'arrive pas à mettre le logo sur la barre à gauche
fresh sparrow
gaunt yoke
@void anvil me semble t’avoir déjà dit hier avant que tu leaves de mettre ta demande sur le site please
Ce sera publié dans #demande-de-dev et sur les discords abonnés donc tu auras en plus + de visibilité
pearl forge
@fresh sparrow 😆
acoustic lion
@scenic fiber si tu veux un conseil ! informe toi sur les flexbox, grid etc.. car les floats sont toujours utilisés mais c'est un peut dépasser quoi.. et pour une bonne barre de nav on utilise pas les floats mais les flex ce que je te recommande ..
scenic fiber
Ok
patent solstice
Donne ton soucis 😇
thorn thicket
alors
j'ai fait une wave et un div de la même couleur
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="red" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,224C384,224,480,256,576,240C672,224,768,160,864,144C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div class="red"></div>```et ça ne stick pas
;-;
pouvez-vous m'aider svp ?
@patent solstice tu connais ?
limber raptor
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: translateY(2px);">
<path fill="red" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,224C384,224,480,256,576,240C672,224,768,160,864,144C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div class="red"></div>
@thorn thicket
tu augmentes ou pas le translatey
suivant comment ça rend
thorn thicket
?
merci
et j'ai un autre problème
j'arrive pas à aligner l'image avec le teste en haut
void anvil
Utilise tu flex box ?
acoustic lion
BONJOUR j'utilsie actuellement boostrap et j'ai un probleme avec ma navbar
elle est position fixed avec la classe de boostrap : fixed-top
cependant elle cache le contenue moi j'aimerai qu'il y a une certaine espace et j'ai l'impression que cest les classes de boostrap qui provoque se problème
car en règle général si on fait cela sans boostrap le contenue ne devrait pas etre cacher normalement
enfin peut etre que je dis n'importe quoi mais si quelqu'un aurait une solution sa serait cool ^^
gaunt yoke
C’est le problème du fixed c’est qu’il devient indépendant au niveau de la page et donc des autres éléments
Passe par un position sticky
scenic fiber
Oui
autumn escarp
Ces possible de venir mp ?
gaunt yoke
Non c'est ici
scenic fiber
C'est ici sinon les salons ne servent à rien
autumn escarp
D’accord mais vous pouvez venir dans les salin vocal
violet berry
L'hyperText: c'est la chose qui va vous permettre de passer d'un document à l'autre par un système de liens, basé sur le fonctionnement d'internet.
Markup: désigne le type de langage informatique descriptif.
Language: Qu'il à son propre langage.
C'est ça ou pas ? si nan vous pouvez me corriger svp
royal patio
L'hyperText: c'est la chose qui va vous permettre de passer d'un document à l'au...
pour l'hyper text
c'est tout ce qui est rapport avec le HTML (HyperTextMarkupLanguage) et HTTP (HyperTextTransfertProtocol)
Markup c'est un "langage" de balisage décrivant effectivement son contenu (HTLM, MarkDown, Latex pour les anciens)
Langugage c'est effectivement pour dire que c'est un langage de programmation même si ça peut être remis en question
violet berry
pour l'hyper text
c'est tout ce qui est rapport avec le HTML (HyperTextMarkupLan...
Merci beaucoup !! ^^
scenic fiber
bonjour, Est ce que une personne c'est comment mettre la barre de recherche à droite ?
fresh sparrow
rajoute un input text
scenic fiber
Non fonctionne pas
fresh sparrow
non mais
pour avoir la barre de recherche
tu met un input flex
puis si t'as envie de l'avoir a la position que tu veux
petit coup de flexbox et c'est reglé
acoustic lion
Bonjour quelqu'un serait disponible pour m'aider sur la taille de mon texte pour qu'il soit responsive
je me suis documenté pendant 3 jours je n'y arrive pas ..
patent solstice
Bonjour quelqu'un serait disponible pour m'aider sur la taille de mon texte pour...
Explique ton soucis 😁
acoustic lion
@patent solsticeactuellement mon soucis est que j'aimerai rendre texte bien responsive et le probleme c'est que sur internet on me parle de unité de mesure que je connais pas du tt vwmin un truc dans ce genre
et le probleme c'est que en appliquant ce que je vois sur internet il y a des cas sur mon projet qui ne sont pas bien adapté
patent solstice
Un texte responsive, c'est-à-dire ? 🧐
acoustic lion
un texte qui se diminue ou qui augmente de taille en fonction de l'écran
patent solstice
Haaaa
gaunt yoke
c'est une très mauvaise idée
utilise des mesures en rem, em ou px
Puis tu fais des medias query sur tes classes de size pour diminuer en fonction d'une certaille taille
Sinon tu vas te retrouver dans des cas ou c'est minuscule et d'autre ou c'est juste énorme
acoustic lion
ah bah oui je l'ai est oublié eux
patent solstice
T'as un exemple là : https://www.w3schools.com/howto/howto_css_responsive_text.asp
acoustic lion
enfaite je sais plus si c'est sur gca ou un autre mais quelqu'un m'avais recommendé d'arreté d'utiliser les px ou quoi et que les vh .. etait mieux
acoustic lion
T'as un exemple là : https://www.w3schools.com/howto/howto_css_responsive_text.a...
je check ça
gaunt yoke
enfaite je sais plus si c'est sur gca ou un autre mais quelqu'un m'avais recomme...
les vw/vh c'est en fonction de l'appareil du coup
c'est vraiment pas une bonne idée pour ce genre d'élément car tu as du coup aucun réel controle de la taille
gaunt yoke
Em oui c'est le mieux
acoustic lion
ok
acoustic lion
oui bien sur
tout ce qui concerne la typo
Sa marche nickel Et aussi deuxieme petit problème voilà il y a quelque jour j'ai demandé sur gca que ma navbar en fixed-top (class de boostrap) prenez le dessure sur par exemple la premiere section de ma page ce qui cacher le top de cette section enzo tu m'as donc dit d'utilisé le position: sticky ce qui est meilleur cependant maintenant pour par exemple le mobile voici le resultat : la section continue un : height: 100vh .. et je souhaite que l'on voit tout sont contenue directement sans scroll (quelle prenne vraiment tout l'écran)
je sais pas si vous vouez ce que je veux dire
gaunt yoke
Après bon là ton exemple est pas bon y a aucun appareil de cette taille
acoustic lion
ah 😐
gaunt yoke
vu le peux d'infos je vois pas sur quel appareil mobil ca peut ne pas rentrer, après quand c'est trop grand et que ca dépasse tu peux juste diminuer ton texte en mobile (sois par le nb de caractères, soit apr la font-size)
acoustic lion
https://bens0806.github.io/wearevalorant/ des avis ? ^^ surtout sur le reponsive sa m'interesserai et le design ducoup ^^
ce n'est pas finis je précise ^^
gaunt yoke
En mobile ça manque bcp d’espacement que ce soit entre tes éléments ou tes interlignes
gaunt yoke
C’est sympa !
acoustic lion
🙂
ocean cave
body{
background-image: url(../../image/téléchargé.jpg);
}
``` salut est ce que qlq peut régler le problème pour plus que l'image ce répète ?background-repeat: no-repeat
ocean cave
merci !
autumn escarp
slt dsl de vous déranger j'ai un petit problème dans mon code Css Htlm
sa ressemble a sa
mais sa doit ressembler a sa ?
slim bridge
Cette digue est l'âme
slim bridge
Les sous titres sur le screen
autumn escarp
???
errant tinsel
C'est bien css-tricks?
patent solstice
C'est bien css-tricks?
Pratique oui
ocean cave
p> a{
color: darkgreen;
text-decoration: none;
}
p a{
color: blueviolet;
}
``` salut qu'elle est la diff entre p> a et p a ?Ca veut dire que ton style s'applique uniquement aux balises <a> qui se trouve dans tes balises <p>
Et le p a {}, ça veut dire un style qui s'applique non seulement à tes paragraphes mais aussi tes liens
ocean cave
Et le `p a {}`, ça veut dire un style qui s'applique non seulement à tes paragra...
pourtant sa a changé que le <a> x)
patent solstice
Pour quel style ?
ocean cave
p a{}
gaunt yoke
Non la différence c’est que p a
Va sélectionner toutes les balises a de ton p
Alors que le p > a va sélectionner seulement les enfants de p
gaunt yoke
(Le direct children)
donc en gros @ocean cave
p > a =
<p><a>toto</a></p>
Mais pas
<p><strong><a>toto</a></strong></p>
Trop relou sur tel d’écrire des balises bordel
ocean cave
donc si j'ai compris p a va sélectionner la balise a dans p et p> vaaa euhh je vais relire le cours
ok donc si j'ai bien compris
p a = va sélectionner a dans p
body > a = va sélectionner que a en premier
@gaunt yoke je pense que je bug un peu sur >
enft je vois pas qu'es qui veut dire par "E > F Sélectionne les éléments F enfants directs des éléments E"
gaunt yoke
je suis sur pc plus simple
En gros
p a {} va selectionner tout les tags a dans ton element p
le
p > a {}
va venir selectionner que les enfants de premier niveau
tel que
<p>
<a>link</a> <!-- pris en compte -->
<span>
<a> link 2 </a> <!-- pas pris en compte -->
</span>
</p>
parce que le a dans span est pas un enfant direct de p
si tu préfères c'est un petit enfant, compare ca a une famille
p est le père, il agit que sur ces enfants, pas sur ces petits enfants
span est le père de a, p est le grand père du a dans span
ocean cave
mmmmmh j'ai capté je pense je vais faire un text
<ul>
<li>salut</li>
<li>salut <a href="#">test</a></li>
<li>mmmmh</li>
<p>
encore une liste
<ul>
<li>salut encore une fois</li>
<li>resalut</li>
</ul>
</p>
</ul>
``` pourtant là il sélectionne tout les ul même dans p ( j'ai mis `ul > li` )<pre>
salut a toi
<p>il va devenir vert</p>
<ul>
<p>une liste</p>
<li>test</li>
</ul>
</pre>
</p>
``` donc en conclusion `pre > p` va sélectionner que p qui est dans pre et il va ignorer où il y a un autre "parent"et si on fait pre p{} il va sélectionner tout les p qui se trouve
@gaunt yoke
gaunt yoke
exact
ocean cave
lets gooo
void anvil
Salut! est ce que quelqu'un sait comment faire un background-attachment: fixed; mais pour une div qui ne contient pas d'image svp ?
pas d'image de background
patent solstice
C'est quoi ton besoin exactement ?
void anvil
En gros j'ai ça
Et je veux faire en sorte que quand je descend vers le bas le header descend avec
patent solstice
Fais un menu hamburger 
void anvil
Fais un menu hamburger <:kappo2:712047659745017862>
C'est quoi ?
gaunt yoke
C'est quoi ?
une blague de dev 
gaunt yoke
position static top 0 ???
position sticky ou fixed
gaunt yoke
une blague de dev <:kappa:643454849534394368>
en mobile les 3 petites barres pour ouvrir le menu = burger menu
void anvil
Salut j'ai encore un p'tit pb, j'ai ça
Et la ou y'a marquer burger cheeze j'aimerais mettre en content Cheeze
donc j'ai fais
.menu_all:nth-child(2){ content: 'Cheeze'; }
Mais ça ne marche pas
void anvil
gaunt yoke
t'as pas un after ou before dans ton css ?
void anvil
euh non
gaunt yoke
voilà
Fais en sorte que ton after content soit relié à une variable css
Que tu viens éditer dans ton html
void anvil
Salut je voudrais apprendre le html/css pour faire des pages web
pouvez-vous m'aider svp ??
gaunt yoke
Oui bien sur tu as besoin d'aide sur quoi
gaunt yoke
Pour commencer tu devrais suivre de petit tutoriels ou cours like codecademy pour débuter c'est très bien
void anvil
dacord mais je doit faaire quoi
gaunt yoke
thorn thicket
tu as OpenClassroom aussi je crois
et mes tutos ^^
@void anvil https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
tulip mural
Bonjour j'aimerais savoir comment mettre ce texte en une autre couleur car je trouve pas comment faire dans un input
patent solstice
Bonjour j'aimerais savoir comment mettre ce texte en une autre couleur car je tr...
T'as juste à utiliser color
patent solstice
Non juste :
input {
color: red;
}```Tu veux faire du paralax ? (ou j'ai r capter)
void anvil
Si tu arrives à bien comprendre l'anglais oralement il y à la chaine youtube FreeCodeCamp @void anvil
void anvil
Tu veux faire du paralax ? (ou j'ai r capter)
J'ai déjà régler ce pb la ^^
void anvil
Fais en sorte que ton after content soit relié à une variable css
J'ai pas compris
void anvil
J'ai déjà régler ce pb la ^^
Ça marche 😉
thorn thicket
hey
sur un site j'ai fait un nav avec des liens vers d'autres partiess du site (basique)
et j'aimerai que quand on scroll la page la barre reste fixe en haut
please help
copper warren
Tu met ta navbar en position : sticky
copper warren
ui
thorn thicket
ça ne marche pas
:/
nav{
position: sticky;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-bottom: 5px solid rgb(0, 117, 226);
}```T'es sur quel navigateur ?
thorn thicket
position: -webkit-sticky
nope
copper warren
idk alors
clever belfry
Salut faut le mettre certe en position sticky mais aussi faut lui mettre un top de par exemple de 10
.tonElem {
position: sticky;
top: 10px;
}
top 0 plutot
clever belfry
Si y veut le coller tout en haut oui
void anvil
top: 0;```merci les copains
thorn thicket
Autre problème :
sur mon site (en construction v2) pour le bouton "About Me" j'aimerai que cela scroll sur le div (ça marche) mais que le scroll s'arrête un peu avant pour voir la vague
svp help
ocean cave
salut, j'ai une question id sert a utiliser sur un élément une seul fois et classe on peut le mettre plusieurs fois sur un élément ?
ou c'est moi qui a pas compris
lethal depot
un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
une classe peut caractériser plusieurs objets (identiques ou non)
ocean cave
genre si je met ```
<h1 id="colortitle">titre</h1>
<h1 id="colortitle">titre</h1>
je remplace les 2 id par classe
lethal depot
Oui
ocean cave
ahhhh okk je vois merci !
thorn thicket
et moi ;-;
gaunt yoke
https://me.duboujnou.repl.co/
Quand tu fais un site essaye au moins de changer le texte dedans quoi
« I m brique au bob »
Non toi tu es Duboujnou 
gaunt yoke
Ça change rien à ce que je viens de dire
Mais si tu veux pas le gérer en JS et que ça scroll au dessus de la vague, tu met ton ID target au dessus de la vague
Tout simplement
thorn thicket
mais justement 
lethal depot
What's the matter ?
thorn thicket
beaucoup trop de truc
gaunt yoke
Je peux pas plus t’aider
juste à mettre l’ID cible un peu plus haut dans ton DOM
histoire que ça scroll a cet endroit qui sera au dessus de la vague
thorn thicket
oui bah je ne sais pas faire ça ||quel honte 
||
ocean cave
<ul>
<li class="bleu">ici</li>
<li>c'est la</li>
<li class="rouge">france</li>
</ul>
``` pourquoi là, il se colore pas quand j'utilise li ?
ocean cave
#bleu{
color: blue;
}
#rouge{
color: red;
}
Mais tu n’as rien à faire à part mettre ton id plus haut…. Je comprend pas
C’est de l’HTML
lethal depot
Pour les classes on utilises des points
thorn thicket
Mais tu n’as rien à faire à part mettre ton id plus haut…. Je comprend pas
mon id je l'ai mis sur ma vague mais c'est trop haut
lethal depot
#id et .classe
ocean cave
c'est vrai je me suis pas concentré ......
gaunt yoke
Bah met ton Id plus haut c’est ce que je te dis
thorn thicket
plus bas* ?
gaunt yoke
non tu veux voir la vague
ocean cave
je le savais mais j'étais pas attentive
lethal depot
tqt
gaunt yoke
Enfin je sais pas où elle est ta vague
Mais met le à un endroit où ce sera bon
Plus haut plus bas j’en sais rien juste en fonction de où tu veux
thorn thicket
<h1 class="title">Duboujnou</h1>
<h2 class="subtitle">French FullStack Developer</h2>
<a href="#about"><button class="browse">About me</button></a>
</div>
<svg id="svg_blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: translateY(1em);">
<path fill="#444c4b" fill-opacity="1" d="M0,256L60,245.3C120,235,240,213,360,218.7C480,224,600,256,720,261.3C840,267,960,245,1080,218.7C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
<div class="informations" id="informations">
<br>
<h1 class="informations1" id="informations1">About me</h1>
<p class="informationsp">oups</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: translateY(-1.2em);">
<path fill="#444c4b" fill-opacity="1" d="M0,256L60,245.3C120,235,240,213,360,218.7C480,224,600,256,720,261.3C840,267,960,245,1080,218.7C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path></svg>```Je suis sur téléphone donc je vois rein
Rien
Mais t’as jsute à changer ton Id de target de place
Je peux pas + t’aider
lethal depot
Tu réduis la marge de ton svg avec ton texte 🤷♂️
copper warren
Avec des z-index il me semble que c'est ça la propriété
thorn thicket
Avec des z-index il me semble que c'est ça la propriété
j'ai essayé mais sans succès
thorn thicket
Tu réduis la marge de ton svg avec ton texte 🤷♂️
après cela crée un bloc qui n'est pas de la bonne couleur
fierce nacelle
Bonjour, je voudrai savoir, comment je peux réduire la taille des textes, des divs... en css ? Par exemple si la personne à une résolution jusqu'à 1400*800 le font-size est 18, si c'est jusqu'à 1900*1080 ça met 20 (en CSS).
pearl forge
Salut, il faut utiliser les médias queries.
halcyon mauve
Sur Firefox, Chrome et la plupart des explorateurs tu as dans la catégorie "outils de développement" un outil qui se nomme "vue adaptative", il te permet de simuler un écran de plus grande ou plus petite taille que le tien
fierce nacelle
J'utilise Brave...
Par contre c'est normal si les images leur tailles change pas poutant j'utilise width et height @halcyon mauve.
Ah non c'est juste moi qui suis débile x).
void anvil
Salut je n'arrive pas a mettre mon image au centre de ma div
thorn thicket
Sur Firefox, Chrome et la plupart des explorateurs tu as dans la catégorie "outi...
tiens une vielle connaissance...
void anvil
```css
margin-left: auto;
margin-right: auto;
```
ça ne change rien
void anvil
est ce que je peux t'envoyer mon code sous format zip ?
fierce nacelle
Bah regarde sous github.
thorn thicket
Peut-on m'aider ?
fierce nacelle
On peut n'aider sans le contexte et le code, l'erreur...
void anvil
Salut ! J'ai fais un p'tit site web et voici le résultat
Maintenant si je rajoute d'autres "cartes" avec des pays ça va les rajouter à coter et ceux à l'infini vu que j'ai mis display: flex;
Donc est ce que sa veut dire que toutes les 4 cartes je dois metttre une div qui sépare les éléments 4 par 4 ? OU y'a une méthode plus simple
fierce nacelle
Tu peux très bien faire un saut de ligne.
valid hazel
je viens d'apprendre que les div ça sert à rien
thorn thicket
half obsidian
Bien joué !
thorn thicket
Sauf que le texte passe en dessous de la vague, le site se déstructure sur téléphone, au zoom tout se décolle...
||ouné bordèl||
half obsidian
Il n'y a pas un problème ?
half obsidian
Je suis sur PC ;-;
limber raptor
je viens d'apprendre que les div ça sert à rien
brave jay
salut, je cherche a faire un border box vers l'interieur avec tailwindcss quelqu'un peut maider ?
gaunt yoke
avec tailwind tu auras rien de base pour mettre un border intérieur, ou alors tu peux extends ta config pour le créer toi
sinon tu peux aussi le faire via un box-shadow inset
brave jay
dacc j'ai essayer mais pour les images ca ne marche pas :/
quaint dove
tu as bien mis la class sur ton image ?
brave jay
ahah oui
quaint dove
tu as des screens?
brave jay
quaint dove
et ton code ?
quaint dove
ton border-inset à t-il déjà une class prédéfinit ?
gaunt yoke
Non le inset fonctionne si tu as de la transparence
ce que tu peux faire c'est mettre ton image en background-image et mettre ton shadow sur cette div
gaunt yoke
on peut plus check le lien est off
thorn thicket
je sais et c incomprhéensible
thorn thicket
on peut plus check le lien est off
https://bis.duboujnou.repl.co/ avec ça
gaunt yoke
ouais bah logique
ta structure c'est pas ça quoi
c'est un peu n'imp
Ton texte est cut a cause de ta vague qui passe par dessus
thorn thicket
Ton texte est cut a cause de ta vague qui passe par dessus
j'avais compris mais c'est ce problème que j'essaye de résoudre
gaunt yoke
Bah ton transform tout simplement
thorn thicket
OK
Les gens
Aussi, comment faire pour que la vague soit en dessous du reste ?
svp
gaunt yoke
Je t’ai répondus juste avant
thorn thicket
Je n'ai pas compris dsl
gaunt yoke
Tu enlèves ton transform sur la vague
C’est le problème quand on copie on comprend pas le code après 😋
thorn thicket
C’est le problème quand on copie on comprend pas le code après 😋
éOui
thorn thicket
C’est le problème quand on copie on comprend pas le code après 😋
Mais non !
ça c moi qui l'ai rajouté
Car sinon la vague n'est pas collée
thorn thicket
C’est le problème quand on copie on comprend pas le code après 😋
As-tu une autre solution ?
gaunt yoke
Tu enlèves ton transform sur la vague
Je t’ai répondus juste au dessus…..
C’est pour ça que ton texte n’apparaît pas en entier
thorn thicket
Je t’ai répondus juste au dessus…..
MAIs
gaunt yoke
Le svg passe au dessus
thorn thicket
C’est pour ça que ton texte n’apparaît pas en entier
Certes mais après les svg n'est pas coller
gaunt yoke
il l’était très bien de mon côté en l’enlevant
Surtout que tu as mis 1.6rem c’est beaucoup
Généralement le svg dépasse d’1 ou 2 PX
thorn thicket
Faut arrêter de me retourner le cerveau ici
gaunt yoke
Je sais pas ce que tu comprend pas
ta vague a un transforme de 1.2em et quelques
Donc tu l’as remontes de quasi 18px voir +
t’as besoin de la remonté autant ?
thorn thicket
ok
gaunt yoke
sinon c’est que t’as merde un truc
thorn thicket
sinon c’est que t’as merde un truc
sur
sûr*
Merci pour tout
👍
dsl mauvais emoji ❣️
J'ai une autres problème, j'aimerai que ce soit le fond de mon nav qui ait une opacité réduite, et non le texte et les animations avec, mais je n'y parviens pas
pls help
fresh sparrow
demande a qq de dev ton site a ta place
tu gagneras du temps
@gaunt yoke propre le portfolio j'aime bcp les choix de couleurs
gaunt yoke
J'ai une autres problème, j'aimerai que ce soit le fond de mon nav qui ait une o...
T’as mis opacity ?
Joue juste avec le rgba
gaunt yoke
<@!452475691410128906> propre le portfolio j'aime bcp les choix de couleurs
Merci 🤩
thorn thicket
T’as mis opacity ?
ok
thorn thicket
demande a qq de dev ton site a ta place
je suis pauvre
gaunt yoke
backdrop filter
thorn thicket
?
fresh sparrow
Merci 🤩
c'est toi qui a crée les images ?:
Va falloir que je me mette au photoshop et a illustrator aussi de mon coté vu comme c'est beau
thorn thicket
xd
slim bridge
Nn c'est moi car il a pas assez de talent tu d'en doute bien...
gaunt yoke
Ça oui
gaunt yoke
Ça non ressources 3D
fresh sparrow
Ça non ressources 3D
three js / webgl ?
fresh sparrow
okey
thorn thicket
svp j'aimerais mettre une div au centre de la page mais le text-align ne marche pas
et je n'arrive pas à régler le translateX
.projects {
margin-top: 30px;
text-align: center;
align-items: center;
transform: translateX(100%);
height: 380px;
width: 380px;
background-color: #35495e;
}
attendez
En gros j'aimerais faire des boîtes responsibes (comme les tutos sur https://g-ca.fr/tutoriels)
svp
help
little depot
Essaye avec un margin left et right en auto
thorn thicket
?
ionic radish
@thorn thicket il te dit de faire :
margin-left: auto;
margin-right: auto;
tough jolt
https://bis.duboujnou.repl.co/
Sa ressemble beaucoup à celui de @quartz thunder
fresh sparrow
https://bis.duboujnou.repl.co/
le a depasse a droite
ce qui gache le coté responsive de ton site
thorn thicket
ce qui gache le coté responsive de ton site
MAIS ya pas de esponsive
ça me casse les c****
fresh sparrow
😭
brave jay
Je comprend pas t’es dev fullstack ?
gaunt yoke
Foule staque
tough jolt
Je comprend pas t’es dev fullstack ?
askip depuis 2 ans en plus
quartz thunder
Sa ressemble beaucoup à celui de <@!307531336388968458>
y a juste la nav et j'ai rien inventé 🤔
thorn thicket
J'avais une q
J'aimerais que le tout soit aligné au centre :
text-align: center;```avec
gaunt yoke
y a juste la nav et j'ai rien inventé 🤔
Non je te rassure la première version qu’il avait envoyé y avait même encore ton nom 
thorn thicket
body {
text-align: center;
}```ah top!
thorn thicket
ainsi tout est aligné au centre
mais j'aimerais que cela s'applique à tout (body) sauf à une chose
est-ce possible ?
gaunt yoke
Cible juste l’élément que tu veux pas text align center et met lui text align initial ou left
thorn thicket
Cible juste l’élément que tu veux pas text align center et met lui text align in...
marche pas
gaunt yoke
t’as fais quoi actuellement montre
thorn thicket
body{
margin: 20px 30px;
}```nav {
font-family: 'raleway';
backdrop-filter: blur(8px);
background: #000;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 2%;
position: fixed;
z-index: 100;
width: 400px;
border-radius: 30px;
height: 5%;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}```La c’est ton body qui a un margin juste
thorn thicket
oui
gaunt yoke
Si tu veux que tout les éléments ai ce truc du met juste *
thorn thicket
et si je dis qu'il faut align à droite, cela n'a aucun effet
gaunt yoke
*{}
Parce que text align c’est pour les éléments inline
Pas block
Tu ferais mieux de réviser les bases du css avant de vouloir faire ton site
gaunt yoke
Tu y arrivera mieux
thorn thicket
mais en gros j'aimerai que ça soit à droite
gaunt yoke
Oui ça j’ai compris après sans voir quoi je peux pas inventer
Attend je suis sur tel quand je serai chez moi
thorn thicket
Merci
fresh sparrow
j'ai envie de me faire un portfolio
mais j'ai tellement peu d'inspiration
j'imagine mettre ma chambre en 3d via three.js dans la section about mais mise a part ça
need inspiration
montrez moi vos portfolios que je m'inspire
@gaunt yoke petite question
les avatars c'est toi qui les crées ?
quartz thunder
c'est son memoji
gaunt yoke
yes memoji
Si t’as pas d’iPhone y a un truc chez Samsung très cool aussi que @floral shard a utilisé c’est artmoji un truc comme ça
Tu peux sortir des gifs etc
floral shard
Yep ! les AR Emoji de Samsung sont vraiment top ! Compliqué à généré au début mais super cool
fresh sparrow
okey merci !
void anvil
salut , si quelqu'un pourrai passé en mp pour m'aidé , j'ai quelque petites chose a réglé , surtout a comprendre , ca sera plus facile en partage , merci d'avance !
void anvil
j'en ai plusieurs enfaite 😅
gaunt yoke
tu peux utiliser des libs d'icons comme fontawesome, materialicons
void anvil
euuh , qui veux dire ? 😭
void anvil
mercii
void anvil
salut exusé moi du dérengement mais comment on insert un gif en arrière plan
gaunt yoke
comme une image
void anvil
avec le css ?
gaunt yoke
oui par ex
void anvil
et genre dans le css c'était quoi le truc qui fallais tapé déjà ?
gaunt yoke
background-image
sterile skiff
j'ai fait une erreur 😭
Ça marche pas ?
compact rain
Non, et une simple recherche Google permettrait de résoudre le problème 🙂
compact rain
Je pense que ça a déjà dû dit être maintes et maintes fois ici (le contraire m'étonnerait) mais bon.
Bien que GCA soit un serveur d'entraide communautaire, ça ne vous dispense pas de faire des recherches avant de poser votre question... Nous ne sommes pas là pour vous mâcher le travail, mais pour vous accompagner une fois que vous avez fait les premières démarches de recherche.
Ensuite, apprendre sur le tas est une superbe méthode (dont je suis un grand adapte de cette méthode), mais cela ne dispense pas de faire quelques recherches sur la syntaxe et les bases du langage utilisé.
thorn thicket
Je pense que ça a déjà dû dit être maintes et maintes fois ici (le contraire m'é...
Je me sens visé
compact rain
Je sais pas, on n'a pas encore eu l'occasion de discuter ahah
empty tartan
Vous me conseillez quoi pour faire du bon responsive sur du Vue.js ? Car pour l'instant j'utilise le view scale avec les valeurs vh et vw
void anvil
Vous me conseillez quoi pour faire du bon responsive sur du Vue.js ? Car pour l'...
#javascript-typescript c’est peut être mieux de demander ici
gaunt yoke
Vous me conseillez quoi pour faire du bon responsive sur du Vue.js ? Car pour l'...
quel rapport avec Vue.js
tu utilises des media query comme sur n'importe quelle autre projet je comprend pas la question
ou les classes qui te sont fournis par ton framework ui
du coup pour faire du bon responsive ce que je te conseille c'est d'être bon en html/css déjà tout simplement :/
empty tartan
ah dac x)
copper warren
du coup pour faire du bon responsive ce que je te conseille c'est d'être bon en ...
C'est pas pour rien que c'est la première choses qu'on nous apprend en LP dev Web 
D'ailleurs Vue.js c'est le dernier truc du semestre normalement
Faut juste faire les choses dans l'ordre 👍
empty tartan
Et bah Vue.js c'est cro bien
patent solstice
J'aime bien le style !
Mais je trouve que l'input texte à droite fait un peu pitié avec le reste de l'interface
Ca fait un vieux truc sur une interface assez moderne
fast onyx
je prend compte mercii
scenic fiber
Mais je trouve que l'input texte à droite fait un peu pitié avec le reste de l'i...
Je suis du même avis
ocean cave
salut comment on fais pour que il y a pas de soulignement sous le texte ( c'est un bouton ) ? ```css
.stylebutton{
border: none;
color: white;
text-decoration: none;
}
.stylebutton:hover{
color:lightgrey;
opacity: 75%;
transition-duration: 1s;
}
gaunt yoke
text-decoration: none
ocean cave
je l'ai fais x)
gaunt yoke
t'as un button avec un a dedans ?
ocean cave
oui
gaunt yoke
.stylebutton a
le text-decoration: none
mais fais l'inverse
met ton button dans ton a, pour que tout le bouton soit cliquable
ocean cave
ah oui effectivement sa marche
ocean cave
salut qu'elle est la différence entre .css et .scss
patent solstice
salut qu'elle est la différence entre .css et .scss
J'aurais dû mal à mieux expliquer 😂
C'est une manière différente de clair et d'être en quelque sorte plus efface sur la manière de faire
Avec des variables, etc..
gaunt yoke
le scss est un pré-processeur CSS
Donc comme le dit Calypso ça te permet d’être plus efficace, rapide mais aussi de pouvoir faire du « js » in css, via des fonctions, mixins etc
Mais attention le .scss n’est pas lisible par ton navigateur, dans aucun cas
Tu dois donc ensuite le transformer en css
fast onyx
Mais du coup puisque c'est pas lisible par le navigateur ça sert a quoi ?
Parce que perso ouais sur aucun naviguateur quand je fait du scss bah ça marche pas
Vous connaissez un naviguateur avec le quel le scss marche ?
gaunt yoke
Non aucun je viens de te le dire, ton navigateur part du principe qu'il est bête
Il ne comprend pas le react.js etc etc tout est compilé pour le rendre compréhensible pour le navigateur
Idem pour le Scss
Mais sur de petits projet ça te servira quasi jamais, mais sur des sites entier ça devient assez pratique
Et pour ceux qui veulent développer des composants ou autre ça l'est encore plus
Maintenant si tu veux juste l'utiliser pour faire des variables, ça sert à rien
Pars sur des variables css ce sera mieux 👍
fast onyx
Okay merci
thorn thicket
Alors
J'aimerai que ma nav disparaisse quand l'écran devient trop petit (responsive pour tel), et comme j'ai mis à width: 400px;
@media all and (max-width:1024px){
nav {
position: hidden;
}
}```et ||cmm par hasard|| ça marche pas
hollow brook
Tu devrais remplacer
position: hidden;
par
display: none;
merci bg
slender crest
bonsoir j'ai un petit problème :
@media all and (max-width:1024px) {
p.droits{
font-size: 10px;
}
}
je fais ça et pourtant ça ne fonctionne pas
hollow brook
On manque d'infos là
slender crest
On manque d'infos là
ça ne réduis pas la taiille de mon texte en vue smartphone
hollow brook
J'ai testé le code de mon côte et... sa fonctionne
void anvil
salut j'ai un petit problème, j'ai fais ce code
Et donc ça me donne ça
Le problème c'est que si je veux mettre du contenu en plus, celui ci s'ajoute en dessous du header et pas en dessous de l'image de fond
lethal depot
Et donc ça me donne ça
si tu pouvais modif ta phrase pour qu'on puisse savoir lequel est en dessous et lequel est en dessus ^^
void anvil
Voila et donc moi ce que je veux c'est que le lorem impusum sois en dessous de l'image
mais j'y arrive po
lethal depot
tu ne déclares pas ton image sur ton body est normalement c'est bon
sterile skiff
envoie nous ton code avec, sinon c'est compliqué 😉
acoustic lion
Bonjour, il s'agit d'un devoir que j'ai fait qui est autour de valorant .. C'est purement faux il n'y pas du temps de communauté en ce nom que j'ai pu créer ou autre (Il est existe une mais je n'en suit pas le propriétaires 😂) https://bens0806.github.io/wearevalorant/index.html
Des avis sur le responsive, design, ec.. ^^
silent jungle
Bonjour, il s'agit d'un devoir que j'ai fait qui est autour de valorant .. C'est...
On dirait le projet qu'avait fait Bob et Enzo j'crois
acoustic lion
Oe il m'a dit qu'il avait un projet se nommant WeAreValorant 😂 ^^
Mais bon je sais pas si c'était le même concept ..
acoustic current
Bonjour, il s'agit d'un devoir que j'ai fait qui est autour de valorant .. C'est...
Propre mais maybe penser à changer le logo de base du dropdown BS pour faire plus "unique"
C'est con mais j'ai même pas eu besoin de regarder dans le code pour voir que c'était fait avec BS ^^
Ca fait toujours plus pro ce genre de détails
void anvil
@sterile skiff J'ai envoyé ici #html-css message
wise hamletBOT
Clique sur [📝](#html-css message) pour accéder au message
salut j'ai un petit problème, j'ai fais ce code
sterile skiff
<@!286546597448253440> J'ai envoyé ici https://discord.com/channels/223070469148...
Tu l'as modifié depuis ? Il est ou ton lorem ?
sur ton html
acoustic lion
Propre mais maybe penser à changer le logo de base du dropdown BS pour faire plu...
ahh okk je fais ça ! 😉 merci du conseil ^^
acoustic current
ahh okk je fais ça ! 😉 merci du conseil ^^
Tkt ! Tu est en quoi niveau études ?
acoustic lion
Bah enfaite je fais mes études à l'étrangers et comme le programme est assez facile je me suis dit pourquoi pas faire en parallèle un programme dans une école france mais genre à distant sur mon ordinateur .. Du coup je me suis inscrit chez studi - digital campus live
acoustic lion
si ta besoin hesite pas
void anvil
Bonjour , la j'ai 2 box , les unes dans l'autre , ce que je veux sa serrai que la 2e box sorte de la box 1 et qu'elle descende de qu'elle que centimetre .
J'utilise flex box . Merci
acoustic lion
il s'agit d'une liste ordonnées ..
sterile skiff
Bonjour , la j'ai 2 box , les unes dans l'autre , ce que je veux sa serrai que l...
comment ça ?
void anvil
En gros les div se rentre dedans et je veux que la 2e soit en bas de la 1e
sterile skiff
En gros les div se rentre dedans et je veux que la 2e soit en bas de la 1e
Je regarde demain
ocean cave
il s'agit d'une liste ordonnées ..
oui je sais j'étais pas attentif
ocean cave
salut, je n'ai tjr pas compris se qui faits inherit, revert, unset et initial qlq peut m'expliquer 😅
strong lynx
Tiens @ocean cave ce tuto ne peut pas t'aider ? https://la-cascade.io/css-initial-inherit-unset-et-revert/
ocean cave
Tiens <@!746117604569251890> ce tuto ne peut pas t'aider ? https://la-cascade.io...
genre si j'ai compris pour initial, il va colorier par la tout la zone de border par exemple ou un autre que j'ai vu qu'il fluoté un texte du début jusqu'à la fin sans que il fluote le vide
strong lynx
initial ça reprend juste la valeur "initiale" de l'élement pour telle propriété
ocean cave
après j'ai l'impression que revert fait la même a par si c'est moi qui c'est pas l'utiliser
a non
my bad
enfaite sa fait la même chose mais son défaut c'est qu'on peut changer la taille par exemple
c'est bien ça ?
void anvil
Je regarde demain
Ducoup
sterile skiff
Ducoup
J’ai zappé ^^
Envoie moi ton fichier code en mp, comme ça je modifie tout suite
plain haven
Bojnour !
J'aimerais faire un système de contact sur mon site, mais je ne sais pas quels outils je pourrais utiliser afin d'en faire un
Est-ce que quelqu'un pourrait-il m'aider svp ?
^^
wet aurora
hello @plain haven ! si tu es pas très alaise avec tout se qui est système de mail etc je veux te retrouver un petit script en php, tu en as déjà fait un peu ?
en gros dans ton form en POST tu auras juste à amener vers ce script PHP:
$to = 'tonmail@gmail.com';
$subject = 'Contact';
$message = '
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
</head>
<body>
<ul>
<li>name: ' . $_POST['name'] . '</li>
<li>email: ' . $_POST['email'] . '</li>
<li>description: ' . $_POST['description'] . '</li>
</ul>
</body>
</html>
';
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-Type: text/html; charset=UTF-8';
$headers[] = 'From: Formulaire de contact <noreply@tondomaine.fr>';
mail($to, $subject, $message, implode("\r\n", $headers));
Si tu as des questions hésites pas ! 🙂
errant cypress
#php dans ce cas-là 
plain haven
hello <@!723977420364840970> ! si tu es pas très alaise avec tout se qui est sy...
merci !
alors j'ai créer mon contact.php
et mon form :
<form action="contact.php" class="contact__form">
<input type="text" placeholder="Name" class="contact__input">
<input type="mail" placeholder="Email" class="contact__input">
<textarea name="" id="" cols="0" rows="10" class="contact__input"></textarea>
<input type="button" value="Send" class="contact__button button">
</form>```action="contact.php" c'est bien ça ?
et j'aimerais faire un petit message du style : "sended"
(envoyé avec succès quoi)
j'avais lu qqpart cmmt faire mais j'ai oublié vu que j'en fais vrmt pas souvent du php
errant cypress
fais un try { // le mailer } catch (Exception $e) { // error }
wet aurora
si jamais tu as besoin de plus d'aide hésite pas à me mp 🙂 on regardera ça ensemble @plain haven
errant cypress
il faudra aussi des name="ton_name" pour récupérer les datas dans ton $_POST
gaunt yoke
@raven cape sur le site directement https://g-ca.fr/offres
ionic radish
```html
<form action="contact.php" class="contact__form">
...
@plain haven non c pas ça mais je peut t'expliquer
ionic radish
@plain haven
En gros ce que tu doit faire c ça :
<form action="/contact.php" method="POST">
<input type="text" name="text">
<input type="mail" name="mail">
<textarea name="" id="" cols="0" rows="10" class="contact__input"></textarea>
<input type="button" type="submit">
</form>
Explication de l'option method="POST" : Dans cette option tu peut mettre soit GET soit POST.
GETest une méthode qui implimante la variables et la valeur de la variable dans l'url
POSTest la méthode qui permet de ne pas laisser visibles cette variable et son contenu dans l'url
Explication de l'option name="mail" : Dans cette option tu va mettre le nom de ta variable.
Ensuite pour récuperer le contenu de cette variables tu a juste a faire
$_POST['text']
$_POST['mail']
ou si tu a mis method="GET"
$_GET['text']
$_GET['mail']
Explication des variables $_POST et $_GET : ce sont des tableaux qui contiennent des tableaux (tu peux le voir en utilisant la fonction vardump($_POST) ou vardump($_GET)) qui ont comme clé le nom de ta variables (exemple ci-dessous) et comme valeur le contenu de ta variable.
Exemple (résultat commun d'un var_dump()) :
$_POST = [
"mail" => "mail@mail.com"
]
J'espère que ce petit message t'aura aidé. (n'hésite pas a me mentionner si tu comprend pas)
unkempt cloak
Bonjour,
Je sui débutante, et je vais faire ma première intégration de ma maquette en HTML/CSS responsive.
Je suis déjà coincé au niveau de mon header. Je ne vois pas comment créer ce trait blanc qui contournera le logo et le header (cf photo) en html/CSS. Je sèche. Peut-être l'importer en image ?. Si quelqu'un a des idées, je suis toute ouïe ! 🙂
Merci !
plain haven
<@!723977420364840970>
En gros ce que tu doit faire c ça :
```html
<form action...
euh
je ne comprends pas tout
<form action="./contact.php" method="POST" class="contact__form">
<input type="text" placeholder="Name" class="contact__input" name="name">
<input type="mail" placeholder="Email" class="contact__input" name="email">
<textarea id="" cols="0" rows="10" class="contact__input" name="description"></textarea>
<input type="submit" name="sendform" value="Send" class="contact__button button">
</form>```c'est mon form
if(isset($_POST['sendform'])) {
$to = 'contactezvince@gmail.com';
$subject = 'Contact';
$message = '
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
</head>
<body>
<ul>
<li>name: ' . $_POST['name'] . '</li>
<li>email: ' . $_POST['email'] . '</li>
<li>description: ' . $_POST['description'] . '</li>
</ul>
</body>
</html>
';
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-Type: text/html; charset=UTF-8';
$headers[] = 'From: Formulaire de contact <noreply@tondomaine.fr>';
mail($to, $subject, $message, implode("\r\n", $headers));
}
en submit il me semble que tu peux pas mettre de input mais plutot un btn
au pire met ton projet sur github @plain haven comme ca je peux le voir pk la des portions de code c dure d'en sortir quelque chose
plain haven
ionic radish
perfect je vais regarder ca merci
plain haven
merciiii à toi
ionic radish
woooow
je t'avoue que je pensé que la fonction mail etait beaucoup plus simple que ca
plain haven
?
steel citrus
J'ai debut mais je dirais avec des border et des div
sterile skiff
Bonjour,
Je sui débutante, et je vais faire ma première intégration de ma maquet...
C'est comme l'a dit @steel citrus, tu prends ou créé une div qui englobe ces éléments, puis du peu ajouter au niveau du css :
border: 1px solid white;
}```Holla les amis j'aurais une petite question je suppose que cela est possible mais pour etre sur je dispose d'un site wordpress et j'aimerai savoir si un utilisateur se connect a mon site il se register ect il se cree un compte en gros y'a t'il moyen que si j'ai un site a coté en html aucun rapport avec wordpress qu'il se login avec c'est identifiant de wordpress si je relie la meme base de donner
en fessant en sorte que le login ou register de se site la soit sur le meme sql ect 🙂 jsp si je me suis fait comprendre :/
sterile skiff
en fessant en sorte que le login ou register de se site la soit sur le meme sql ...
bien sur, si c'est la meme base de données, il n'y a pas de soucis normalement
void anvil
D'accord alors j'ai trouver c'est l'api rest mais je trouve sa ultra chaud agga
Ahha*
tepid yew
Bonsoir
j'effectue un site rapide en boostrap
Mon problème c'est que quand je change la resolution de mon pc par exemple
certaines image
ne se verront plus
ou seront décalé
dans mon code css j'ai utilisé des position fixed
en px
je pense que du coup je dois rendre mon site responsive?
tepid yew
hum ok
je débute du coup je decouvre un peu tout
au debut j'avais utilisé des position relative
mais je ne reussissais pas a mettre deux div sur une meme ligne par exemple
car je les ai transformer en display block
@gaunt yoke
je vais partager mon
code
gaunt yoke
Pour aligner des divs sur une meme ligne tu peux utiliser les col- de bootstrap et/ou flex
tepid yew
mon code est trop long grr...
voila mon css
en gris j'ai fait un site sur les politique au niveau des sondage
une page se presente comme ça par exemple
frosty temple
j'adore ton site 🤣
tepid yew
et du coup chaque truc son un display block
@gaunt yoke
donc 4 display block
sur cette page par exemple
tepid yew
je sais meme ce qu'est un framework
je debute juste en css et html
je cherche simplement a les positioné comme ça
du coup je pensais que le mieux etait d'utiliser des postion fixed
au debut j'avais utiliser des positions relative
mais c'etais la merde
j'ai essayer des float
delicate igloo
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Tous que ta a faire , c'est de lire leurs doc et de renommé les class
Je l'explique mal mais utilise ça
tepid yew
mais ça allez pas comme je voulais
delicate igloo
au debut j'avais utiliser des positions relative
Mais ton problème c'est quoi ?
Le responsive ?
tepid yew
bah
la en soit
mon site est parfait
tout est placé correctement ..
sauf
que quand je vais changer de resolution je vais te montrer
delicate igloo
Ton problème c'est le responsive ok
errant cypress
faut implémenter les media queries
tepid yew
ça donne ça
@errant cypressbonsoir je peux garder mes position fixed ou je dois changer tout mes code css la ?
delicate igloo
faut implémenter les media queries
Mais il l'a fait (x
errant cypress
je suis pas du tout dév front je pourrais pas plus t’aider
j’ai pas look son code
delicate igloo
Il dit qu'il utilise boostrap donc il c'est déjà occupé de ça normalement
errant cypress
je lui dis au cas-où ça mange pas de pain
tepid yew
les .melanchon ... sont les class correspondant au logo des partie ...
frosty temple
comment on montre son code comme tu le fais ?
delicate igloo
Mon code css
Passe ton code html
errant cypress
melenchon* 
delicate igloo
frosty temple
sa me flinque de rire 🤣
tepid yew
Oui pourquoi?
header c'est la tete du site non?
apres le body c'est le milieu
et le footer le bas non?
delicate igloo
Ferme me head avant ta nav
Le*
Et commence le
Après l'ouverture de la balise html
delicate igloo
Bah c'est comme ça , tu met pas le code dans me header
Tu le fou dans me body
Et dans le head
Ta les média querie
delicate igloo
j'effectue un site rapide en boostrap
Et tu nous parle de boostrap mais y a pas de boostrap 👀
tepid yew
deja est ce que le faite que j'ai utiliser des position fixed va poser probleme ?
ah c'est scratch ça s'apelle j'ai fail?
delicate igloo
Non
Ça s'appelle boostrap mais y a pas boostrap dans ton code
Vue que tu le Link pas
tepid yew
Non mais j'ai fail j'ai melanger scratch et boostrap je crois
un site from scratch c'est ce que j'ai fait la?
Genre juste du code
@delicate igloo
c'est ça que je voulais dire quoi
gaunt yoke
un site from scratch c'est ce que j'ai fait la?
from scratch c'est à partir de rien
tepid yew
ok donc c'est ce que j'ai fait
merci enzo
c'est ca que je voulais dire quoi
désolée
delicate igloo
Euh oe , mais nous parle pas de boostrap (x
Donc ton problème c'est le responsive ?
Si oui , go use boostrap ou un autre framework du genre :
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Et le temps que t'apprends bien , tu laisse ton site en attente ou tu te test sur ce dernier
Et un framework c'est un ensemble de code css , qui va en gros te demander de renommé la class de ta balise pour pouvoir effectué les opérations à ta place
Ça te fais gagner du temps et le meilleur c'est que ça gère le responsive 
tepid yew
@delicate iglooje dois le rendre demain x)
delicate igloo
Ahhhhhh
tepid yew
merci de nous envoyer en format zip un site web complet from scratch, ou en utilisant bootstrap/materialize.
Le sujet est libre, mais nous aimerions voir certaines fonctionnalités dans ce site :
Header avec un menu
Insertion d'une ou plusieurs images
Relier les pages entre elles avec des liens
la consigne c'etais ça
j'ai un header
j'ai des images
delicate igloo
Ah ah la
tepid yew
et j'ai mes relier
pages*
juste que si la personne qui check mon site sur une autre resolution bah les images vont etre coupé ou autre comme sur le screen plus haut
quand moi je change de resolution qupo
quoi
je cherchais simplement a faire que mon site soit correct dans toute les resolution sans faire un truc de fou
delicate igloo
Il te demande pas de responsive donc tu met pas de responsive
En vraie c embêtant mais si tu c'est pas responsive, évite pour le moment
tepid yew
ouai je sais juste ça me chier que le truc s'adapte pas
je cherchais a faire un truc correct tu vois
même si il me le demande pas
car la les images sont coupé et tout c'est relou
je laisse tout comme ça et je touche a rien du coup?
delicate igloo
Bah , oe, mais essaie de t'entraîner au responsive, pcq le problème avec ce truc c que ça rentre pas en 1j 
tepid yew
j'avais 4/5 jours pour faire le site
donc bon..
au moins je vous ai fait rire avec mon site
merci en tous cas
frosty temple
Comment tu fais pour afficher ton code comme ça N
tepid yew
@frosty templetu depose juste ton fichier dans le canal
frosty temple
oki merci
timid mist
Salut comment on vise une balise en CSS avec un attribut et une valeur spécifique, sans passer par une classe ou un ID ?
Je sais pas si c'est possible en fait 😅
Mais par exemple, demander à mon CSS que toutes mes balises 'a' dont l'attribut 'href' est vide (ou ne mène nul part) soit colorées en rouge, pour justement signifier que ces liens sont vides
Passer par une classe serait pénible car il faudrait à chaque fois en attribuer une à un lien, puis l'enlever si finalement on met un lien
Voilà j'espère que c'est théoriquement possible, merci d'avance et bonne journée
delicate igloo
Dans le css , au lieu de mettre la classe tu mets "a" pour sélectionner tt les balise "a"
mais pour les href vide jsp
timid mist
Il y a peut-être un raccourci, genre les classes faut les select avec balise.class, et l'id c'est balise#id mais href jsp
J'ai trouvé !
a[href=lien voulu]
Enfin c'est un peu plus compliqué mais j'ai trouvé ça sur w3schools
Yes ça marche
a[href=""] {
voilà bon bah merci quand même
delicate igloo
ok niquel
timid mist
Est-ce possible de cibler un élément hiérarchiquement au dessus lorsque un élément enfant est :hover ?
par exemple je veux que quand le a:hover, le li (qui est parent du a) soit coloré
timid mist
En css ?
gaunt yoke
oui
timid mist
Marche pas