text-align center
#html-css
wise cosmos
J’aurais plus dit align-items center plutôt que tout tes machins
Pour l’aligner en X
et justify content center en Y
void anvil
Comment on fait pour envoyer un message sur un serveur discord à partie d'un site ?
wise cosmos
Comment on fait pour envoyer un message sur un serveur discord à partie d'un sit...
Discohook
void anvil
Discohook
OK je viens de voir et moi je parlais pas de ça je voulais dire comment ont fait pour faire un formulaire sur un site qui s'envoie ensuite sur discord
Comme le site g-ca.fr
void anvil
Je sais pas parce que j'ai jamais fait ça
wise cosmos
Bah faut que ton site communique avec Discord quoi…
floral haven
Un webhook suffit
mais bon c'est pas une bonne pratique de mettre le webhook sur ton front
plain haven
oui c vrai
mortal crane
et justify content center en Y
Eux ca ne marche pâs
wise cosmos
bah oui mais dit moi ce que tu veux clairement
En plus je vois que tu as copié du code, je ne connais pas ton HTML donc qui me dit que tu pointes le bon élément?
mortal crane
Ca vous dérangerez que je te montre en voc après ?
wise cosmos
On verra ça
mortal crane
Okok vous êtes dispo vers quelle heure ?
wise cosmos
Je dirais 23h voire avant
plain haven
Okok vous êtes dispo vers quelle heure ?
dsipo bientôt
indigo owl
Je cherche un bon dev
void anvil
Un webhook suffit
mais bon c'est pas une bonne pratique de mettre le webhook sur...
Ouaip c'est vrai parce que il pourrais y avoir des gens qui se servirait du webhook
dense notch
j'ai un problème j'arrive pas a changer la hauteur de ma video sur ma page html
quand je la change il y a des espace qui se créer a droite
surement a cause que on ne peux pas déformer la video
qui a une solution ?
plain haven
qui a une solution ?
en gros tu peux pas agrandir en hauteur sans élargir
dense notch
en gros tu peux pas agrandir en hauteur sans élargir
j'ai essaye cette piste mais il refuse toujours
plain haven
ah
flat pivot
One message removed from a suspended account.
plain haven
One message removed from a suspended account.
tu voudrais que le logo et les ongletssoit centres ?
flat pivot
tu voudrais que le logo et les ongletssoit centres ?
One message removed from a suspended account.
livid iron
Slt les gens j'ai une question pr redimensionner une image est-ce que ya pas un logiciel pr faire ça ou est obligé de faire ça pas à pas genre on change les valeurs Petit à petit
west stirrup
Salut, tu peux redim sur ça https://www.iloveimg.com/resize-image
ou plein d'autres en cherchant resize image sur google
plain haven
One message removed from a suspended account.
tu peux definir une marge sinon
flat pivot
One message removed from a suspended account.
digital swallow
tu a essayer un margin negatif ?
flat pivot
One message removed from a suspended account.
One message removed from a suspended account.
One message removed from a suspended account.
rapid sail
Bravo !
flat pivot
One message removed from a suspended account.
digital swallow
One message removed from a suspended account.
le margin de quoi ?
patent solstice
Que ce que ça veux dire ?
Ca veut dire que tu peux imbriquer les balises HTML
cold fern
D'accord merci @patent solstice
patent solstice
Ta balise div s'ouvre à la ligne 1 et se ferme à la ligne 5. C'est un conteneur
Et dans ton conteneur, t'as des éléments " enfants " qui sont aussi des balises
cold fern
Je commence à apprendre le HTML5 et le css
Dit moi @patent solstice tu pourrai m'apprendre le HTML5
patent solstice
Le mieux c'est d'apprendre de ton côté
Mais si tu as des questions, hésite pas à les poser ici !
On est là pour ça
median stag
Hey ! Quand j'ai voulu voir si mon site fonctionnait sur ios, j'ai pu voir que le css n'était pas présent, alors que si sur Windows, pouquoi ? Comment faire ?
copper warren
Tes propriétés css son compatible sur Safari ?
patent solstice
Fais gaffe aussi de ne pas avoir de Security Policy
median stag
Tes propriétés css son compatible sur Safari ?
C'est à dire ?
median stag
Fais gaffe aussi de ne pas avoir de Security Policy
C'est quoi ?
sturdy solstice
Hello !
J'aimerais reprendre les bases du html / css pour m'entrainer ^^
avez vous un bon tuto ?
est ce que grafikat est bien ?
ou une formation de dev web front qui fait html + css + js + framework js
hollow brook
Grafikart oui je conseille
copper warren
C'est à dire ?
Bah c'est à dire que certaine propriété sont juste pas compatible sur safari donc elle auront juste pas d'effet quoi 🤷♂️
median stag
Bah c'est à dire que certaine propriété sont juste pas compatible sur safari don...
oui mais y'en a aucune
oak prairie
Hello !
J'aimerais reprendre les bases du html / css pour m'entrainer ^^
avez vo...
codeacademy
civic whale
Salut à tous, je ne sais pas si beaucoup d'entre-vous checkez souvent dans #javascript-typescript mais j'ai posté dedans concernant un problème relatif à NuxtJS et la page d'erreur. Si parmi vous se trouve un génie, voici le lien de mon message: #javascript-typescript message merci beaucoup!
wise hamletBOT
Hello à tous, j'ai un petit problème sur NuxtJS concernant la page d'erreur!
Je m'explique… j'ai ma page default.vue qui se trouve dans le dossier layouts qui contient le code suivant:
<template>
<div>
<Navbar />
<div class="container">
<nuxt-child />
</div>
<Footer />
</div>
</template>
J'ai également ma page error.vue qui se trouve dans le même dossier. Celui-ci comporte le code suivant:
<template>
<div>
<h1 v-if="error.statusCode === 404">404 Not Found</h1>
<h1 v-else>An error occured - {{ error.statusCode }}</h1>
</div>
</template>
<script>
export default {
props: ["error"],
layout(context) {
return "error";
},
};
</script>```
Le code de base, en somme…
Seulement, lorsque je me rends sur l'URL `https://localhost:3000/jerozjeroj` (qui devrait me rediriger vers ma page d'erreur avec le code `404`), j'ai mes composants `<Navbar />`, mon `container`, et `<Footer />` qui s'affiche, mais pas mon `h1` avec son code d'erreur.
Ça fonctionne lorsque je renomme `default.vue` en `*.vue`, sauf que mes composants ne s'affichent plus… ce qui n'est pas non plus la solution idéale. Que faire? 
➜ [Voir le message original]([#javascript-typescript message](/guild/223070469148901376/channel/617677968474636298/))
civic whale
Problème résolu! ✅
rapid sail
non non non non et non
ICI
pour le html css
pas openclassroom
openclassroom pas good
bronze crow
bonjour je code un site et je suis arrivé me poser la question comment le rendu donnerai sur mobile et quand j'ai vu le rendu ne rendait pas ce que j'avais fait avez vous des des conseille pour que le rendu pc sois le meme sur un mobile ?
rapid sail
bonjour je code un site et je suis arrivé me poser la question comment le rendu...
Ne pas utiliser px et utilise des % rem et des dimensions adapté
utiliser les media query
je te recommande cette vidéo
plain haven
bonjour je code un site et je suis arrivé me poser la question comment le rendu...
en gros recherche les breakpoint, ou les marges responsive
comme ce que ta donné Lemin
Si tu veux avoir les bases, je te conseille cet article des docs de mdn
rapid sail
je te conseil de voir dans un premier temps la vidéo de grafikart pour apprendre se qu'est le responsive et ses bases puis le liens que ta envoyer Vince sur un plus long terme
plain haven
👍
livid iron
Bonjour j'ai un problème pr redimensionner un tableau si quelqu'un peut m'aider
bronze crow
Ne pas utiliser px et utilise des % rem et des dimensions adapté
Ok et le fait d’utiliser les % ça va faire que sur mobile ça mettra les meme empocher de mes blocs que sur pc ?
rapid sail
Ok et le fait d’utiliser les % ça va faire que sur mobile ça mettra les meme emp...
Regarde la vidéo et les liens tout est explique
bronze crow
Ok merci j’avais paw@vu
charred gate
Bonjour j'ai un problème pr redimensionner un tableau si quelqu'un peut m'aider
Montre ton code et le rendu pour qu’on puisse t’aider
rapid sail
Montre ton code et le rendu pour qu’on puisse t’aider
je pense que c'est mieux pour lui d'apprendre
charred gate
Yes mais juste qu’on l’aide, le but c’est pas de lui donner la réponse mais de l’orienter
Après oui apprendre c’est mieux
rapid sail
on l'a orienter sur de sources simple et courte vince et moi
charred gate
👌
pseudo crater
Bonjour, vous savez comment ça s'appelle lorsque l'on clique sur un bouton et qu'une page s'ouvre et que le fond se met en flou comme un bouton se connecter ? merci
dusky skiff
Un popup ?
pseudo crater
Merci oui c'est ca j'avais un trou de mémoire
Et comment on fait un popup ?
j'ai pas l'idée par ou commencer enfaite
gaunt yoke
Plus une modal que popup avec le flou
pseudo crater
Ah oui comme en javascript ! merci
dusky skiff
gaunt yoke
alors si tu parles de alert() pas vraiment, mais ça s'y apparente un peu
rapid sail
Bonjour, vous savez comment ça s'appelle lorsque l'on clique sur un bouton et qu...
ducoup petit exemple
Html ->
<button onclick="action">cliquez sur le boutton</button>
javascript ->
function action(){
alert("ton message");
divouelementblur = document.getelementbyid("divouautre");
divouelementblur.style.background = "#512515ff";
}
faudra juste modifier les éléments
floral haven
j'ose espérer qu'il parlait bien d'une modal box et non pas du alert js
plain haven
comment héberger uns site sur vercel quand on a un nom de domaine ?
median stag
hey ! est ce que qlq sait pourquoi mon css ne s'affiche pas sur safari, alors qu'il marche sur les autres navigateur web ? merci par avance^^
rapid sail
comment héberger uns site sur vercel quand on a un nom de domaine ?
J'ai reussis a faire un truc similaire si tu veux
plain haven
J'ai reussis a faire un truc similaire si tu veux
oui stp
rapid sail
oui stp
en gros j'ai reussis a faire un lien qui renvoie sur un lien qui prend c'est file d'un github
lien en question
github en question : https://github.com/lemin08/Portfolio
rapid sail
@plain haven tu as reussis ?
plain haven
non
mais je me renseigne
au lieu de payer un dns et un hebergement
juste le nom de domaine
plain haven
nice
rapid sail
mais attend
rapid sail
tu as github student ?
rapid sail
je te conseille il te donne deux nom de domaine
je teste un truc je te dis si sa marche
plain haven
je test
rapid sail
tu as du backend sur ton site ?
rapid sail
ducoup crée un repostory avec tout les fichier de ton site dedans
plain haven
deja fait
rapid sail
ok*
va sur vercel connecte toi avec github et héberge ton site normalement
au final si tu fais bien tout tu auras un lien un peu comme sa : https://portfolio-lemin08.vercel.app/
rapid sail
ok ducoup après avoir fais sa tu va pouvoir modifier le dns
tu va sur ton site -> settings-> domains
(si cela ne marche pas -> -> https://vercel.com/support/articles/why-is-my-vercel-domain-unverified)
plain haven
merci
j'ai regarde github student
avec mon lycee je vais pouvoir le faire
normalement
je vais leur demander
rapid sail
N'hésites pas a me mentionnez en cas de soucis et bonne chance pour github student
rapid sail
Perso mon lycée étais par sur github student mais sa passe avec les documents
plain haven
mais oui
rapid sail
Bonne nuit !
cunning terrace
bonjour, je n'arrive pas à mettre un liseret sur ma page quelqu'un pourrait m'aider svp
silk fractal
Un liseret 🤔 ?
cunning terrace
Oui et à vrai dire je ne sais ps tellement ce que c’est 😅
floral haven
Fait nous un joli paint :3
rapid sail
bonjour, je n'arrive pas à mettre un liseret sur ma page quelqu'un pourrait m'ai...
Des iframes ?
rapid sail
Je ne te recommande vraiment pas OpenClassroom pour apprendre
Je te recommande ces deux cours
Html -> https://grafikart.fr/formations/html
Css -> https://grafikart.fr/formations/css
(si tu souhaites allez plus loin Sass/Scss -> https://grafikart.fr/formations/sass-preprocesseur)
cunning terrace
Ah d’Acc je vois
rapid sail
OpenClassroom a des cours assez obselete et incomplet, des cours plus complet existe voici une liste des cours recommandé si besoin
-> https://learndev-info.github.io/awesome-learning-dev-fr/fr.html
cunning terrace
Merci beaucoup
rapid sail
Pas de soucis, n'hésite pas a revenir sur ce channel en cas de soucis , Bonne chance a toi !
cunning terrace
Je n’hésiterai pas merci 🙂
void anvil
Bonsoir, est ce que quelqu'un saurait expliqué ce phénomène :
j'avais un fichier php, puis un css , avec tout mes codes et ça marchait très bien
mais du jour au lendemain sur ma page, plus aucun CSS, juste du texte brut...
alors que j'ai rien toucher, et que le css est toujours présent dans le fichier
est ce que quelqu'un a déjà eu le problème ? merci d'avance$
drifting crown
Bonsoir, quelle est la différence entre :active et .active en css ?
void anvil
Bonsoir, est ce que quelqu'un saurait expliqué ce phénomène :
j'avais un fichie...
Le code css est dans la page ? Ou dans un fichier externe
void anvil
Bonsoir, quelle est la différence entre :active et .active en css ?
Alors je suis totalement nul en css mais il me semble que .active c'est pour une class
(genre <div class="active"></div>)
silk fractal
ouep exact
le :active c'est un pseudo classe de l'élément sélectionner
exemples d'éléments : <input> | <a>
tu peux clairement et très bien les utiliser pour ces deux là par exemple
void anvil
Le code css est dans la page ? Ou dans un fichier externe
nop dans un fichier externe, mais même en le mettant dans la page avec un <style> ça marche pas, j'y comprends rien
void anvil
nop dans un fichier externe, mais même en le mettant dans la page avec un <style...
Ton site tu l'host en local ou sur un site ? Je m'en rappelle que sur wamp j'avais eu bcp de prob
il est sur un vps
drifting crown
tu peux clairement et très bien les utiliser pour ces deux là par exemple
ah oui je me suis peut être mal exprimer en gros j'ai fais nav:active qui ne marchait pas pcq en gros je l'active depuis mon fichier js mais le nav.active fonctionne
je suppose que c'est pcq je fais la manip depuis js avec classlist.toggle('active')
ahh j'ai compris
le active je pensais que c'etait genre un paramètre obligatoire mais je peux mettre nimporte quoi a la place
donc j'ai confondu avec :active
dapper sandal
Bonsoir à tous !
J'ai une question mais peut-être que je ne suis pas dans le bon channel.
En gros pour un site, nous voudrions faire un effet de slide comme ça : https://circle-website.webflow.io/
Est-ce que vous savez comment faire ce genre de slide ?
Merci d'avance !
void anvil
margin: 0;
padding: 0;
}
grizzled juniper
Bonsoir à tous !
J'ai une question mais peut-être que je ne suis pas dans le bo...
Je ne sais pas si ça pas t'inspirer mais j'ai trouver ça sur codpen: https://codepen.io/isladjan/pen/abdyPBw
earnest chasm
Tu devrais plutôt organiser ton CSS ainsi :
display: block;
margin-left: auto;
margin-right: auto;
}
.container .PageDeFilms1 {
background-image: url('../images/DeadPool_2.jpg');
height: 420px;
width: 310px;
}
.container .PageDeFilms2, .container .PageDeFilms3 {
background-color: black;
height: 5px;
width: 100px;
}``` <div class="PageDeFilms1"></div>
<div class="PageDeFilms2"></div>
<div class="PageDeFilms3"></div>
</div>```@mortal crane
& ensuite tu joues avec les margin pour espacer tes éléments
mortal crane
Merci je vais essayer
ivory nimbus
Pour un site, j'aurais besoin d'afficher une entête html dans une zone modifiable tel que le textarea mais c'est désordonné, peu lisible et assez moche comment faire ?
hollow brook
Je vois pas ce que tu veux dire, tu peux montrer à quoi ça ressemble atm ?
ivory nimbus
je voudrais ca pour faire simple
gaunt yoke
tu veux afficher du code mais éditable ?
ivory nimbus
c'est ca
gaunt yoke
Tu peux sois utiliser des code mirror avec edition sois tu fais un content éditable que tu viens éditer avec highlightjs
Surement d’autre possibilité mais j’ai ces 2 là en tête qui me viennent
ivory nimbus
Merci ^^
void anvil
cc j'ai une question
comment je fais pour que la video en haut a gauche
se play sur toute la partie bleue
?
<video width="960" height="540" poster="" autoplay muted loop playsinline>
<source src="https://cdn.discordapp.com/attachments/947893730604646440/950786729957281822/mlp2.mp4" type="video/mp4" />
<source src="./mlp.webmhd.webm" type="video/webm" />
</video>```( le code )
hollow brook
width="100%"
?
void anvil
```css
width="100%"
```
?
la c'est au milieu
hollow brook
Hein
dusky skiff
Enlève la height de 540 @void anvil
hollow brook
Oui j'allais dire ça
dusky skiff
Ouaip ça vient de ça, faut juste enlever height="540"
floral haven
Don't Ask to ask
mortal crane
Bonsoir j'aurais une questions ?
Dans ce cadre il est possible de modif le type d'écriture (la family)
copper warren
Bonsoir j'aurais une questions ?
Dans ce cadre il est possible de modif le type ...
dans ce cadre ?
La tu montre un box shadow
Si tu veux changer la font tu fais :
font-family : "Lenom";
mortal crane
Oui mrc mais elle ne marchait pas mais j'ai reussi mrc quand meme
void anvil
j'aurais une question ?
pourquoi quand mets une redirection de lien sur mon site grace a un href , sans hebergeur sa me redirige sur le lien en question, mais avec mon hebergeur sa me fais sa
mortal crane
Quelqu'un sait comment on aligne le tout ?
hollow brook
Tu parles tu texte du résume qui revient à la ligne ?
mortal crane
Tu parles tu texte du résume qui revient à la ligne ?
Exact
void anvil
par exemple
sa
tout en haut du site
jveu que sa redirige sur une page insta
et une page yt
dusky skiff
Il faut utiliser href
void anvil
<div class="top-bar-right">
<nav role="navigation" class="menu-block header-menu">
<ul id="menu-social-menu" class="menu menu--social align-middle"><li id="menu-item-205" class="fab fa-youtube menu-item menu-item-type-custom menu-item-object-custom menu-item-205"><a href="https://www.youtube.com/c/MyLittlePonyenfran%C3%A7aischa%C3%AEneofficielle">YouTube</a></li>
<li id="menu-item-206" class="fab fa-instagram menu-item menu-item-type-custom menu-item-object-custom menu-item-206"><a href="https://www.instagram.com/mylittlepony_france/">Instagram</a></li>```c mon code
void anvil
Il faut utiliser href
psk tema ske sa fais quand sa me redirige
au lieu de me rediriger directement sa me mets un lien inconnu
dcp jsuis en erreur 404
Essaye de faire une redirection avec php ou js
mortal crane
Vous savez comment mettre le border juste au tour du texte
void anvil
Y'a sur stackoverflow je pense
mortal crane
Mrc
mortal crane
Tu parles tu texte du résume qui revient à la ligne ?
Du coup?
hollow brook
J'en sais rien pour le coup là
gaunt yoke
Quelqu'un sait comment on aligne le tout ?
c'est parce que tes <ul> ont un margin/padding (je ne sais plus lequel) par défaut
il faudrait que tu le vires, et que tu padding-left: __px l'élément qui contient tout ce texte
mortal crane
Ah mais le pb c'est que ca ne marche pas
gaunt yoke
qu'est ce qui ne marche pas
median stag
hey ! qlq sait comment on suppr le logo yt ?
brave raptor
hey ! qlq sait comment on suppr le logo yt ?
visiblement c'est pas possible, enfin d'après les paramètres qu'ils donnent
plain haven
Ton site c'est mlpfr.com ?
oui mdr
plain haven
hey ! qlq sait comment on suppr le logo yt ?
pas possible
median stag
ah
plain haven
tu peux néanmoins héberger ta video
median stag
ouais ..
ivory nimbus
hey ! qlq sait comment on suppr le logo yt ?
Photoshop ou paint.net, outil gomme et pot blanc
ivory nimbus
Il demande comment faire
median stag
ptdrr
buoyant star
Peut être ton cache aussi !
median stag
Hey ! Je créé un site en ce moment, et j'ai pas trop d'idée de quoi rajouter, je trouve qu'il fait un peu vide, c'est bizzar comme question mais je tente :d
Par exemple un changement de thèmes et etc.
dusky skiff
Hey ! Je créé un site en ce moment, et j'ai pas trop d'idée de quoi rajouter, je...
Avec un aperçu ce serait mieux non ?
Les autres je sais pas mais perso je suis pas devin 
gaunt yoke
C’est pas que c’est bizarre comme question
C’est qu’il y a tout simplement 0 question dans ton message
void anvil
+1
ivory nimbus
Hey ! Je créé un site en ce moment, et j'ai pas trop d'idée de quoi rajouter, je...
Un screen et le but de ton site stp
drifting crown
bonsoir, j'ai une petite question en gros j'ai une connaissance qui veut que je lui fasse un site (ça serait mon premier client on va dire) et en gros il m'a demander 5 pages mais il en veut juste 1 ou il pourrait changer le contenue régulièrement et facilement, ça se fait dans quel format genre ya des trucs spéciaux pour ça ou faut jusque qu'il modifie le html ?
plain haven
bonsoir, j'ai une petite question en gros j'ai une connaissance qui veut que je ...
c'est à dire ?
il voudrait modifier le contenu de une seul pour tout ?
drifting crown
il voudrait modifier le contenu de une seul pour tout ?
non
juste une seule page
mais si il n'y connait rien en css
html**
plain haven
il voudrait juste modifier une page ?
plain haven
c'est logique pourtant
il a qu'à remplacé le texte qu'il veut pas celui qui veut désormais
drifting crown
Daccord mais je voulais juste savoir si ça se fait
drifting crown
au niveau du contact client genre lui dire ouai tu modifie ça etc
plain haven
c'est à dire ?
drifting crown
ou si il y avait d'autre méthode
plain haven
bah non
drifting crown
bah je savais pas si genre quand on a un client lui dire ouai bah si tu veux modifier ton site tu fais ça direct dans le fichier html
plain haven
il doit modifier sont .html
drifting crown
Merci a toi aussi
une autre question j'ai une animation avec div:hover, donc je voudrait que quand j'enleve la souris ça me fasse l'animation a l'envers donc j'ai mis juste dans div l'animation, le problème quand je lance ma page on voit l'animation au début, ya pas un moyen de changer ça ?
weary shore
bonsoir, j'ai une petite question en gros j'ai une connaissance qui veut que je ...
Si tu veux être un peu plus professionnel que lui dire d'aller modifier le fichier directement, tu peux lui faire une page admin en PHP avec un simple formulaire de tout les textes qu'il y'a sur la page qu'il veut modifier, une fois le formulaire envoyé, les textes seront mis à jour dans la base de donnée, et ensuite sur ta page .html (que tu devras transformer en .php) tu récupères tout les textes depuis la base de donnée et tu les affiches, ça va te faire découvrir l'horreur de PHP et le SQL, ce qui est assez cool pour commencer des plus gros trucs
drifting crown
Si tu veux être un peu plus professionnel que lui dire d'aller modifier le fichi...
ah oui je vois c'est pas bête comme truc
steady verge
Bonjour, je souhaite animer mon svg pour faire en sorte que les nuages défilent mais j'y arrive pas correctement
Actuellement les nuages défilent de quelques pixels et l'animation recommence
j'ai fait ceci : ```scss
.bike {
margin-top: -100px;
svg {
position: relative;
#right-wheel, #left-wheel {
animation: wheel 3s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
#cloud2 {
width: 100%;
animation: moveCloud 7s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
}
}
@keyframes moveCloud {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes wheel {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
les nuages sont individuel donc je pourrais faire une animation pour chaque avec un translateX individuel mais j'imagine qu'il y a plus simple
steady verge
pb résolu, j'ai fait comme ceci :```scss
.bike {
margin-top: -100px;
svg {
width: 100%;
#right-wheel, #left-wheel {
animation: wheel 3s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
#cloud2 {
animation: moveCloud 20s infinite linear;
}
#cloud3 {
animation: moveCloud2 20s infinite linear;
}
#cloud4, #cloud5 {
animation: moveCloud3 25s infinite linear;
}
#cloud6 {
animation: moveCloud4 37s infinite linear;
}
}
}
@keyframes moveCloud {
0% {
transform: translateX(90%);
}
100% {
transform: translateX(-30%);
}
}
@keyframes moveCloud2 {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(-75%);
}
}
@keyframes moveCloud3 {
0% {
transform: translateX(25%);
}
100% {
transform: translateX(-90%);
}
}
@keyframes moveCloud4 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes wheel {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
seul truc relou c'est que lorsque la page charge, les nuages partent tous en même temps du même endroit
mais bon c'est pas si grave
plain haven
super ce truc !
plain haven
une autre question j'ai une animation avec div:hover, donc je voudrait que quand...
ok
alors pour ceci il faut faire transition
div {
xyz: xyz;
xyz: xyz;
transition: all .2s ease-in-out;
}```
et
```css
div:hover {
xyz: zyx;
xyz: zyx;
}
en gros le transition permet de définir un temps de transition entre les deux statuts (normal et :hover), ici de 0.2 secondes
le all c'est pour que cela s'applique à tout
et ease-in-out pour que l'animation de sortie de :hover se fasse aussi
j'espères t'avoir aidé ^-^
ivory nimbus
j'ai voulu essayer le code du bouton de téléchargement animé du site https://graphiste.com/blog/animations-css-dynamiser-boutons
sauf que ca ne marche pas, je ne sais pas pourquoi
mon HTML :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22%3E
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<!--
<!doctype HTML>
<html lang="fr"></html>
-->
<head>
<link rel="stylesheet" type="text/css" href="css test.css">
<script src="test js.js"></script>
</head>
<body>
<svg viewBox='0 0 100 50' width='620' height='310' fill='none'>
<circle cx='20'cy='35' r='8.5' fill='#00cffc' class='mainCircle'></circle>
<circle cx='20' cy='35' r='8.05' stroke='#00cffc' stroke-width='.9' fill='url(#gradient)' class='mainCircleFill'></circle>
<rect x='17.5' y='32.5' width='5' height='5' stroke='none' fill='#00cffc' class='rect'></rect>
<path d='M20,39 l3.5,-3.5 l0,0 M20,39 l-3.5,-3.5 l0,0 M20,39 l0,-7.5' stroke='#fff' stroke-linecap='round' stroke-width='.8' class='arrow'></path>
<text x='55' y='36.5' fill='#fff' text-anchor='middle' font-size='5.5' font-family='Roboto' letter-spacing='.2' class='text'>download</text>
<path d='M50,25 h30 a10,10 0 0,1 10,10 a10,10 0 0,1 -10,10 s-30,0 -60,0 a10,10 0 0,1 -10,-10 a10,10 0 0,1 10,-10 h30' stroke='#00cffc' stroke-width='.7' fill='transparent' class='btn'></path>
<circle cx='20' cy='35' r='7.9' fill='#fff' fill-opacity='0' stroke='#fff' stroke-width='1.6' stroke-opacity='0' class='subCircle'></circle>
<circle cx='50' cy='26' r='0' fill='#fff' class='dot'></circle>
<linearGradient id='gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
<stop offset='98%' class='gradient' stop-color='transparent'/>
<stop offset='98%' class='gradient' stop-color='#00afd3'/>
</linearGradient>
</svg>
</body>
</html>
mon CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
overflow: hidden;
background-color: #313636;
display: flex;
align-items: center;
justify-content: center;
}
svg {
margin-bottom: 80px;
}
.btn {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.text {
user-select: none;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
}
.subCircle {
pointer-events: none;
}
.strokeW {
animation: strokeW .6s forwards;
@keyframes strokeW {
to {
stroke-width: 1.16;
}
}
}
Mon JS :
void anvil
Bonsoir, j'ai ces 3 catégories qui sont sur la pages web, je voudrais que quand on clique dessus ça descend jusqu'à la catégorie que l'on clique, un peu comme quand on clique sur la réponse d'un message discord
ivory nimbus
Utilise des id (#unnomdecategorie)
void anvil
Utilise des id (#unnomdecategorie)
Possible d'avoir plus de précision ? j'ai commencer l'html hier soir :c
ivory nimbus
Ça peut attendre demain que je te le dise en MP ?
void anvil
Ça peut attendre demain que je te le dise en MP ?
Aucun soucis j'engage
weak ruin
Il faut que tu attribues un id à l'élément vers le quelle tu veut que ça t'envoie @void anvil
<h1>Ta page</h1>
<p>
Aller directement a : <br />
<a href="#discord">Le Discord</a><br />
<a href="#nous">Qui sommmes nous</a><br />
<a href="#pain">Le pain cest bon</a><br />
</p>
<h2 id="discord">Notre discord</h2>
<p> ton texte </p>
<h2 id="nous">Qui sommes nous ?</h2>
<p> ton texte </p>
<h2 id="pain">pourquoi jaime le pain ?</h2>
<p> ton texte </p>
le discord va tenvoyer vers Notre discord
Qui sommes nous va tenvoyer vers Qui sommes nous ?
et Le pain cest bon va tenvoyer vers pourquoi jaime le pain
❕Il faut que tu mette un # pour définir un id, comme tu peut le voir #discord après le href envoie sur l'autre #discord dans la balise h2
🙂Tu peut copier le code au dessus ( les parties qui t'intéresse) et les ajusté à ton code à toi .
digital swallow
je me permet de poser ma question ici, cela concerne xamp et wamp, quelqu'un a une solution pour resoudre le probleme qui fait qu'il faut toujours renommer le fichier css pour que les modification s'appliquent ?
dusky skiff
Quand tu recharges ta page, fait CTRL + F5
median stag
hey ! est ce que qlq sait comment on fait pour que lorsque qu'on appui sur un texte, ou image, un texte, ou autre chose se copie dans son presse papier ?
summer hare
Salut une idée de pourquoi j'ai des ecarts de marge après mes 3 premier <li></li> mais lorsque je supprime le premier <ul> tout rentre dans l'ordre ou lorsque je met "/ "a mon 1er <ul> ? merci d'avance
tame forge
Salut, comment puis-je faire pour faire disparaître le bleu du "Google" ?
plain haven
Salut, comment puis-je faire pour faire disparaître le bleu du "Google" ?
c simple
floral haven
color: black
tame forge
Super merci !
plain haven
^°^
tame forge
5 ans que j’en ai pas fait, va falloir que je me réhabitue
hearty sequoia
target="blank"
floral haven
_blank
tame forge
Merci
hearty sequoia
ah euh att
plain haven
oui
floral haven
(oui il y a une petite différence)
tame forge
target="blank"
Marche pas :/
tame forge
tu sais <@!692374264476860507> ta aussi le `:hover`
Ah ça me dit quelque chose.
Mais c’est pas pour faire un truc quand la souris passe dessus le :hover ?
plain haven
si
hover -> survoler
en anglais
j'ai fait un tuto dessus stv ^^
avec mon ancien compte ^-^
tame forge
Oui ça je sais, mais je comprends pas le rapport avec ma question.
tame forge
Oui 👍
summer hare
c'est ton css alors
Justement je devais faire sans
cunning terrace
On utilise encore header,footer,article ect… de nos jours !
floral haven
Bah, c'est très recommandé si tu veux structurer ton site pour les moteurs de recherches ^^'
cunning terrace
Ah d’accord merci ^^
dusky skiff
png c'est un format, ça veut pas dire que ton image est forcément transparente. Là il y a un damier derrière ton image
Et pourquoi tu nous fait pas un screen plutôt que de prendre ton écran en photo
cunning terrace
C’est vrai ^^’
honest pier
Bonjour,
Comment on fait pour centrer une image ?
A non en faite c'est bon j'ai trouver. ( J avais oublier un r )😅
woven yarrow
honest pier
La comment on fait pour que le blanc y soit que autour du que code et du texte ?
dusky skiff
Pourquoi est-ce que tu fais une photo de ton écran ?
honest pier
Pcq j ai plus discord sur mon pc
dusky skiff
On voit pas grand chose
honest pier
Et j'ai pas eu le temps de le remettre
dusky skiff
Et ce serait mieux si tu nous donnais ton code aussi 
honest pier
Ok je vais voir ce que je peux faire
je suis debutant il y aura surement des erreurs dans le code
dusky skiff
Si tu veux que le background soit seulement autour du QR code alors tu dois l'appliquer dessus
Là tu as mis dans ta div background-color ton texte
Il suffit de le mettre en dehors
honest pier
mais du coup la couleur je la mets où?
je la mets dans le fichier css mais dans quel partie?
void anvil
Bonsoir, j'aimerais savoir comment crée un site multi-pages, j'ai déjà ma "page principale"
eternal ember
Tu créer d'autres page en html et tu les relies avec une barre de navigation ou autre.
plain haven
nocturne nimbus
Bonjour tout le monde, comment je fais pour voir en direct les modifications que j'apporte sur mon site et ne plus rafraichir ma page à chaque fois ?
austere lark
Bonjour tout le monde, comment je fais pour voir en direct les modifications que...
Sur VSCode ta une extension Live Server
nocturne nimbus
OK ouais je viens de trouver merci BG
summer hare
Sur VSCode ta une extension Live Server
C'est normal que j'ai mon code ouvert sur VScode mais il me dise que j'ai pas de fichier ouvert et quand je veux pour l'ouvrir je vois juste les folders mais pas le .html
ivory nimbus
question con, t'as save ?
austere lark
C'est normal que j'ai mon code ouvert sur VScode mais il me dise que j'ai pas de...
Pas compris 
plain haven
C'est normal que j'ai mon code ouvert sur VScode mais il me dise que j'ai pas de...
bah ouvre le truc
à gauche dans ton workspace
summer hare
Merci pour vos réponse merci juste qu'en faite au lieu d'écrire "ouvrir" pour ouvrir le dossier y avait écrit "add" du coup j'ai pensé que c'était pour créer un new dossier dans mes ficher et vue que je voyais pas le .html. Alors qu'en faite même si je voyais pas mon .html fallait que je 'add' le dossier ou il se trouver. et voila c t reglé enft c t le add et le fait de pas pouvoir selec directe mon .html qui m'avait perturber
plain haven
yo mes compatripotes
En gros je suis en train de faire une maquette
et il faudrait que la timeline se place bien gentiment à droite
(de la roadmap)
est-ce que quelqu'un pourrait-il éclairer ma lanterne svp ?
J'ai réfléchis à la possibilié de ré-utiliser des flexbox
mais il faudrait peut être un container qui a les deux
et pas faire au body
bref
help
west stirrup
ça ?
plain haven
re
en réfléchissant j'ai mis un container qui contient les deux en flexbox
maintenant j'en suis à correctement placer les deux éléments dedeans...
c ça
summer hare
Salut je galère pas mal pour mon code un dev aurait quelque minutes à me consacrer, par rapport a FlexBox. J'arrive pas à utiliser la commande "align-self" lorsque que je l'applique sur l'une des box enfants aucune réaction
patent solstice
Montre ton code et ton soucis 😇
summer hare
Pourquoi le space-between ne reagit pas ?
summer hare
Des utilisateurs de flexbox ici ?
hollow brook
Tu peux montrer le rendu actuel ?
summer hare
Tu peux montrer le rendu actuel ?
J'avais pas vue excuse attend je te montre sa
Je craque ça fait 2 3 jours je suis dessus, à chaque fois j'ai un problème qui se rajoute quand je crois en avoir résolu un
Page non responsive, sa me saoul
hollow brook
Je pense que ta list1 ne peut pas s'etendre et ducoup le space-between n'est pas visible, essaye de mettre un width: 100% sur list1
summer hare
Je pense que ta `list1` ne peut pas s'etendre et ducoup le space-between n'est p...
Ah sa c'est bon c'est réglé j'ai du mettre un 50% mais grâce a toi ta résolu 1 de mes problèmes je me suis dit j'aller voir sa tout à l'heure, c'était qu'ils etaient trop espacer mais du coup c'est bon
Bon là je me suis mit sur ça, une si tu petite flêche mais tant de question ...
J'essaye de placer cette fleche en tant que background qui serai mixé avec un fond qui a sa couleur mais j'arrive pas à la faire sortir du cadre... et quand j'y arrive tous qui est dans le cadre dsc a cause du margin-top
median stag
est ce que qlq pourrait m'aider à herberger mon site web avec 000webhost plz
cunning terrace
Alala openclassroom
plain haven
est ce que qlq pourrait m'aider à herberger mon site web avec 000webhost plz
stuv j'ai dautres manières
(mp)
summer hare
C'est possible de rendre son site responsive sans passer les media queries ?
summer hare
Ah d'accord merci
patent solstice
Enfin tu peux, ça dépend juste de l'architecture de ton site
Parfois de simples flexbox ça passe
summer hare
Enfin tu peux, ça dépend juste de l'architecture de ton site
Ah d'accord me disais aussi car j'ai vue un cv fait de cette manière et il s'adapte à toute les taille mais comment on peut faire cela ? Savoir que ça va l'être ?
summer hare
Et la j'ai fais sa aussi lorsque je réduit ma fenêtre l'image ne suit pas mais lorsque je teste le responsive tout ça a l'aire responsive pourtant j'ai pas utiliser les media queries
et la c'est quand je teste le responsive
tout reste en place mais pas quand je réduit ma fenêtre pk ?
void anvil
Je pense que la console de ce côté là est un peu cassée
Après peut-être que je me trompe
summer hare
Je pense que la console de ce côté là est un peu cassée
C'est noté je met mon code là si sa peut aider
plain haven
yo tout le monde
j'aimerais que dès qu'on arrive sur une page ça lance une musique en arrières plan, un audio en autoplay et qui soit caché, est-ce possible ? et si oui comment svp
merci :)
patent solstice
j'aimerais que dès qu'on arrive sur une page ça lance une musique en arrières pl...
Tu peux mais ça sert à rien, la moitié des navigateurs bloquent automatiquement ce genre de chose
Et c'est plus dans les standards
plain haven
merci
patent solstice
Mais la majorité des navigateurs vont bloquer l'autoplay
plain haven
ok
summer hare
Mais la majorité des navigateurs vont bloquer l'autoplay
Du coup cela foncionne pas ?
digital swallow
bonjour j'aimerais centrer un text, le meme au centre de la page (centrer niveau coté et hauteur) mais je ne me souvien plu comment faire mdrr quelqu'un peut m'aider ? ^^
plain haven
bonjour j'aimerais centrer un text, le meme au centre de la page (centrer niveau...
text-align: center```
et
```css
vertical-align: center;```Merci^^
livid iron
Montre ton code et le rendu pour qu’on puisse t’aider
c pas du code c du reseau en general
livid iron
lol
floral haven
Du réseau ?
livid iron
Du réseau ?
oui adresse ip etc...
floral haven
C'est bien par rapport au redimensionnement de tableau ?
lone comet
Bonjour je suis bloqué avec mon css et j'aurais besoins de votre aide ^^
J'ai une navbar faite de ul et de li et j'applique un li:hover dessus. J'aimerais extraire un des li du hover de sorte à ce qu'il ne se passe rien lorsque je passe ma souris dessus.
Je ne vois pas du tout comment faire
Code css :
li:hover{
border-bottom:solid 6px #210000;
}
Code HTML :
<ul> <li style="float:left"><img src="crown.png"></li> <div class="right-align"> <li><a href="index.html">Home</a></li> <li><a href="royal-family.html">Royal Family</a></li> <li><a href="assets.html">Royal Assets</a></li> <li><a href="Contact.html">Contact Us</a></li> </div> </ul>
C'est le li avec l'image que je souhaiterais bloqué
Merci à vous les gars
rain moat
salut j'ai un soucis j'ai un bouton qui execute un texte en code json via un formulaire qu'on remplit et je souhaite faire un bouton Ajouter qui permet que quand on clique sur le bouton on rajoute du texte collé à l'ancien texte
je sais pas si c'est compréhensible
summer hare
Salut comment je peux faire pour qu'une box s'ajuste automatiquement par rapport au text ?
ex: sans mettre une valeur fixe a width
sterile skiff
ex: sans mettre une valeur fixe a width
Tu peux ne pas mettre de width ou mettre « width: 100% »
summer hare
Tu peux ne pas mettre de width ou mettre « width: 100% »
Mais du coup sa ferai comme sur l'image mais moi je veux que la largeur s'arrête à la fin de mon texte et non qui s'étend sur toute la page comme sur l'image
sterile skiff
Mais du coup sa ferai comme sur l'image mais moi je veux que la largeur s'arrête...
Tu veux appliquer le fond que sur la largeur de ton texte ?
summer hare
Je voudrais que sa ressemble à ça
et non a ça
tu vois le bord y ce situe où ? au niveau du "r" et non au bout de page
raven iris
Peut-être ceci ? https://developer.mozilla.org/fr/docs/Web/CSS/fit-content
Mes cours de CSS datent d'il y a 5 ans et je n'ai plus codé depuis, je suis un peu rouillée. Mais fit-content semble pas trop mal pour ce que tu cherches ^^
summer hare
Peut-être ceci ? https://developer.mozilla.org/fr/docs/Web/CSS/fit-content
Merci c'est gentil je vais voir ça
floral haven
Tu peux simplement jouer avec les display
summer hare
Tu peux simplement jouer avec les display
Je me suis pencher sur ça au final, mais maintenant faut que j'arrive à mettre l'image et le text cote a cote
floral haven
Toujours les display, et pour centrer regarder du côté du vertical-align
summer hare
Toujours les display, et pour centrer regarder du côté du vertical-align
c'est noté merci, la je tente un display: inline-block
void anvil
Hello, qui peut m’envoyer vers des liens qui apprenne comment crée une page de login / registre fonctionnel
barren ledge
Précise quel langage (php, node.js, etc.. )
solid vale
Précise quel langage (php, node.js, etc.. )
xD
void anvil
Html
barren ledge
Bah ça va être compliqué de faire une page de login / registre fonctionnel sans back end (concrètement un langage qui s'occupe pas du visuel, ce qui est laissé au html) 🙃
long axle
exque qu'elle qun serais comment je pourrais faire ca?
void anvil
Bah ça va être compliqué de faire une page de login / registre fonctionnel sans ...
Bah je cherche le code backend justement
deft burrow
Bah je cherche le code backend justement
Justement c'est pas faisable en html
deft burrow
exque qu'elle qun serais comment je pourrais faire ca?
C'est une div avec du padding et pour les coins arrondis c'est avec les borders
void anvil
Ah merde… donc si on switch sur du php c’est faisable
long axle
merci
deft burrow
Une bdd aussi ?
Là il faudra ajouter un système de gestion de base de données donc effectivement toujours pas du html mais pas non plus du php
void anvil
Mais la bdd est pas obligatoire
steady verge
Non une BDD n'est pas obligatoire
mais c'est un must
sauf si tu comptes enregister tes données dans un fichier
mais c'est très moche de faire ça
ou alors tu gardes tout en mémoire dynamique sur ton serveur mais s'il tombe alors tu perds toutes les données
deft burrow
mais c'est très moche de faire ça
C'est surtout pas sécurisé sur un site
void anvil
En mémoire dynamique je pense vouloir faire du coup
steady verge
Donc tu prends le risque de tout perdre lorsque ton serveur va redémarrer
steady verge
- de perdre de la performance plus tu auras de données
void anvil
Je pense que la bd c’est le mieux à faire + plus sécurisé ?
steady verge
oui
void anvil
Bah je pars sur la base de donné alors
floral haven
Renseigne toi bien sur les différentes techno..
patent solstice
Je pense que la bd c’est le mieux à faire + plus sécurisé ?
Ca dépend de tes besoins aussi
Tu peux partir sur un truc beaucoup plus lite en fonction de ça
Si c'est un truc vraiment restreint, pour quelques utilisateurs, sur un projet plutôt " simpliste ", tu peux partir sur du SQLite, ce qui te permettra de pas te faire chier à init un service derrière
Mais attention, ça a a ses limites, donc bien définir ses besoins 😇
floral haven
Autant lui conseiller les bonnes pratiques dès le début...
patent solstice
SQLite n'est pas une mauvaise pratique
floral haven
Ouais si tu prévois de faire un env de dev ^^
void anvil
Je pense partir sur une DB, je suis pas calé en SQL et d’après ce que j’ai entendu ( peur être de l’intox ) c’est assez exploitable l’sql
patent solstice
DB veut dire database
Donc ça veut tout et rien dire
floral haven
Je pense partir sur une DB, je suis pas calé en SQL et d’après ce que j’ai enten...
Mauvaise info
Et si, tu vas devoir faire du SQL
Ne pas utiliser le NoSQL à outrance et juste pas flemme
void anvil
Oke oke je ne savais pas
floral haven
D'où ma phrase de bien se renseigner sur les techno
void anvil
Sauf que maintenant le problème c’est que je suis pas du tout calé en SQL, ni bd, ni php
patent solstice
Il faut apprendre !
floral haven
Y a pas de miracle
patent solstice
C'est sur ce genre de projets que tu vas monter en compétence
void anvil
Yep il faut que j’apprenne, si vous avez des endroit que vous conseillez plus que d’autre je suis preneur
patent solstice
Regarde sur Internet pour apprendre les bases du SQL
Puis après, ne pas avoir peur de pratiquer et de se planter
J'aime beaucoup les cours de OCR pour apprendre les bases de quelque chose : https://openclassrooms.com/fr/courses/4449026-initiez-vous-a-lalgebre-relationnelle-avec-le-langage-sql
Ca te permet de comprendre et d'en suite de pratiquer
void anvil
Oke oke je vais aller continuer de m’informer et commence le SQL, merci à tous pour vos réponses 😉
barren ledge
Surtout que c'est pas des requêtes hyper compliqués que tu vas utiliser pour ton cas
Donc t'inquiètes
long axle
exque quelqun peux me dire comment on fait cette bare de recherche ainci que les trais en bat svp
mortal crane
Bonsoir j'aurais une questions ?
Si j'ai un site que je post et que par exemple j'ai 5 autres .html (accueil, boutique.....) je suis obliger d'avoir 6 nom de domaine ?
floral haven
Si j'ai un site que je post et que par exemple j'ai 5 autres .html (accueil, bou...
Non, tu peux très bien utiliser un système de reverse proxy pour router tes url vers tel ou tel site (réécriture d'url par exemple, etc...)
plain haven
Si j'ai un site que je post et que par exemple j'ai 5 autres .html (accueil, bou...
non xD
tu peux faire
tondns.com
puis tondns.com/boutique
ou encore tondns.com/contact
tu créer juste des dossiers
avec tes pages dedns
renommées index.html dans chaque dossiers
sinful wedge
exque quelqun peux me dire comment on fait cette bare de recherche ainci que les...
Il y a 45 façons de le faire, on peux t'aider si tu fournis un travail de base mais te dire comme ça comment faire reviendrais à le faire à ta place..
tidal zodiac
comment vous faite pour faire un phrase avec 2couleur
floral haven
<span>coucou <span class="class-text-red">en rouge</span></span>
bg j'ai ca
span{
color: aliceblue;
margin-left: 20px;
margin-bottom: 50px;
width: 20px;
}
<span>Dashboard QoS > <span class="class-text-orange">Videoplayer</span></span>
et ca ne me modifie rien
suaf le left et la couleur
ggenre le margin bottom on dirais il s'en fou mdrr
floral haven
tu as créer ta class class-text-orange ?
tidal zodiac
C'est pour ton boulot ?
oui mon stage c chiand
floral haven
oui mon stage c chiand
Stage de dev ?
tidal zodiac
```css
.class-text-orange {
color: orange;
}
```
Par exemple
ca j'ai fais
deso
j'ai oublier d'envoyer
moi je te demande plutot pourquoi mon margin bottom marche pas
floral haven
Tu as regardé dans l'inspecteur ?
floral haven
Passe ta souris dessus et screen pour voir
floral haven
Ah oui les span c'est normal que tu puisses pas faire ce genre de margin top/bottom
Si tu veux vraiment lui mettre un margin y, changes son display inline-block/block
Sinon mets ton span dans une div qui elle aura la margin
tidal zodiac
<div>
<span>Dashboard QoS > <span class="class-text-orange">Videoplayer</span></span>
<p>Dataset range</p>
</div>
comme caa
@floral haven
parce que ca marche pas mdrr
floral haven
bah ta margin faut mettre sur le div maintenant
tidal zodiac
.titre{
}
span{
color: white;
margin-left: 20px;
margin-bottom: 50px;
}
.class-text-orange {
color: orange;
}
p{
margin-bottom: 50px;
color: white;
margin-left: 100px
}
<div class="titre">
<span>Dashboard QoS > <span class="class-text-orange">Videoplayer</span></span>
</div>
@floral haven marche pass
floral haven
???
tidal zodiac
bah j'ai cree une div
floral haven
Oui mais faut mettre la margin dessus maintenant
tidal zodiac
.titre{
margin-bottom: 50px;
margin-left: 20px;
width: 10px;
}
span{
color: white;
}
.class-text-orange {
color: orange;
}
p{
margin-bottom: 50px;
color: white;
margin-left: 100px
}
marche pas
@floral haven
floral haven
Bah de toute évidence si, tu as bien un margin sous ta div
Tu peux le vérifier en plaçant ta souris sur div
timber willow
salut ! j'ai un ptit problème je dois faire du css sans touché au html et en gros j'aimerais arrivé a fusionner deux colonne en une mais je sais pas comment réussir a le faire sans avoir le droit de créer une div mère
floral haven
Avec le code c'est mieux
tidal zodiac
Avec le code c'est mieux
rep
floral haven
Tu peux juste envoyer la partie concerné ? Et si c'est trop gros pour un message discord, le mettre en ligne à la place
timber willow
Tu peux juste envoyer la partie concerné ? Et si c'est trop gros pour un message...
justement c'est le code du formulaire donc c'est la partie concerner apres je peux plus cibler
ah bah c'est toujours trop long :/
floral haven
Bah le content du formulaire osef, c'est juste la partie de mise en page en deux colonnes qui est intéressant dans ton cas
timber willow
Bah le content du formulaire osef, c'est juste la partie de mise en page en deux...
c'est mis en page via bootstrap
floral haven
Non mais peu importe
timber willow
je vais mettre le squelette du form sans le content j'pense
<div class="container-fluid">
<div class="row">
.
.
.
.
.
<form id="contactConso">
.
.
.
.
<div class="col-sm-6">
<div class="row">
<div class="form-group col-sm-6">
.
.
.
</div>
.
.
.
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="form-group col-sm-6">
.
.
.
</div>
.
.
.
</div>
</div>
</form>
</div>
</div>
voila en gros le squelette du form
les deux colonnes sont les <div class =" col-sm-6">
timber willow
en gros je veux que les deux colonnes se superposent comme s'il elles etaient sur une seul colonne
mais j'ai pas le droit de touché au html
floral haven
Enlève le col-sm-6 (qui permet de dire au bloc d'utiliser que 6 unité sur les 12 définit par bootstrap)
timber willow
Enlève le col-sm-6 (qui permet de dire au bloc d'utiliser que 6 unité sur les 12...
justement x) je peux pas du tout touché au code html
sinon j'aurais fais ca facilement
floral haven
C'est du css pas du html ça tombe bien
timber willow
je peux intervenir que via une balise style
en gros j'ai pas le droit de touché le code que je t'ai fournis
juste le modif grace au css via une balise style
floral haven
Alors dans ta balise de style tu vas partir de ton form (en utilisant l'id par exemple), et tu vas dire div enfant direct de prendre toute la taille
timber willow
.container-fluid .row {
display:flex;
flex-wrap:wrap;
flex-direction:column;
}
j'avais fais ca mais ca a pas tout mis en colonne :/
floral haven
Tu dois taper sur form > div
timber willow
oh ok c'était tout con , j'y avais pas forcément pensé merci 😉
mortal crane
Non, tu peux très bien utiliser un système de reverse proxy pour router tes url ...
Ok merci bcp
long axle
bonsoir j'ai besoin daide parce que je ne sais plus quoi faire pour ariver a ce resulta
<nav class="secondary-block">
<h2>
VerFive
</h2>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Try it now</a></li>
</ul>
</nav>
nav ul {
display: flex;
margin-left: 80%;
padding: 1%;
list-style: none;
}
voit ce que j'arive a faire
slim lotus
Augmente le Margin des li deja
long axle
comment on enléve les trai des li est les changer de couleur
floral haven
text-decoration, et color
Par contre il faudrait que tu prennes le temps de faire des recherches sinon tu vas jamais évoluer
long axle
oui je sais
tidal zodiac
salut
on ma expliquuer que avec un display: inline-block; on pouvait coller notre back ground au top pour ensuite ecrire dessus
sauf que je c pas commer le place
timber willow
salut
on ma expliquuer que avec un display: inline-block; on pouvait coller n...
tu cherches a faire quoi exactement ?
tidal zodiac
je ne peux pas modifier le texte en haut
car le fond noir n'est a accrocher
@timber willow
timber willow
le texte est écrit via le html ?
timber willow
.
tidal zodiac
le texte est écrit via le html ?
oui
timber willow
bah normalement le fait que ce soit display ou pas tu peux changer la valeur dans le html
car ton carré noir c'est qu'un background color ?
tidal zodiac
bah apparamment non
timber willow
car ton carré noir c'est qu'un background color ?
.
timber willow
ca ne bouge pas
juste pour les bonne pratique laisse pas un alt sans rien si tu mets un alt il faut faire un alt = "ce que represente l'image"
tidal zodiac
juste pour les bonne pratique laisse pas un alt sans rien si tu mets un alt il f...
okay
timber willow
tu peux ouvrir ta span ?
tidal zodiac
oui pourquoi je pourrai pas
tidal zodiac
timber willow
d'accord et qu'est ce que tu veux changé tout le texte en haut ou just ecelui en orange ?
tidal zodiac
ouii et faire un margin top aussi je pense
timber willow
oui mais si tu utilise margin-top il faudra lui allouer une valeur
et pas juste mettre margin-top
et tu as ta feuille css ?
tidal zodiac
.titre{
padding-top: 100px;
margin-left: 100px;
width: 5px;
}
span{
color: white;
}
.class-text-orange {
color: orange;
}
p{
margin-bottom: 50px;
color: white;
margin-left: 100px
}
img{
width: 80px;
margin-top: 5px;
margin-left: 5px;
float: left;
}
body{
margin: 0px;
}
.fondnoir{
background-color: black;
height: 25ch;
margin: 0;
}
.fondbleu{
background-color: rgba(64, 171, 243, 0.884);
height: 75ch;
margin: 0
}
timber willow
Alors déjà test pour ton .fond noir{
Display : flex;
Flex-wrap:wrap
}
Montre ensuite la disposition de ta page
timber willow
Après faut mettre background-color black
Mais c’est bizarre que du texte est disparu
Ton image tu fais width : 100%
timber willow
Après pour gérer tes texte etc faut que tu change dans les classes css
tidal zodiac
Après pour gérer tes texte etc faut que tu change dans les classes css
mais l'image
ya un problems
vraiment
timber willow
Là je mange j’ai pas trop le temps de me poser dessus je t’aide tout à l’heure
tidal zodiac
okp
tidal zodiac
okay c bon sauf que maintanat
rgarde
.titre{
padding-top: 150px;
margin-left: 25px;
width: 50px;
}
span{
color: white;
}
.class-text-orange {
color: orange;
}
p{
margin-bottom: 50px;
color: white;
margin-left: 100px
}
img{
width: 80px;
margin-top: 5px;
margin-left: 5px;
height: 50%
}
body{
margin: 0px;
}
.fondnoir{
Display : flex;
Flex-wrap:wrap;
background-color: black;
width : 100%;
}
.fondbleu{
background-color: rgba(64, 171, 243, 0.884);
height: 75ch;
margin: 0
}
quand je modifie mon .titre ca modifie le bah du fond noir
timber willow
Tu veux que ce soit ou ?
Centré ?
Par rapport à ton bandeau noir ?
Tu va faire align-items:center à ton .fondnoir
Et si ça marche pas test justify-content:center
timber willow
Mais je comprends pas comment ça tu peux pas le modif tu parles de la taille / position ?
Et ce que je t’ai juste juste avant cnest pour centre ton text / image au centre de ton bandeau noir
tidal zodiac
regarde
.titre{
padding-top: 150px;
margin-left: 25px;
width: 50px;
}
.titre{
padding-top: 50px;
margin-left: 25px;
width: 50px;
}
tu vois se que je veux dire
timber willow
Oui c’est ton padding-top qui fait ça c’est normal
timber willow
Pour que ça se mette en haut ?
timber willow
Alors attend que j’arrive sur mon poste et je voudrais que tu me passe ton code html et css
tidal zodiac
vasy je t'envoie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
<title>Videoplayer</title>
</head>
<body>
<div class="fondnoir">
<img src="image/imagenetgem.jpeg" alt="">
<span class="titre"> Dashboard QoS > <span class="class-text-orange">Videoplayer</span></span>
</div>
<div class="fondbleu">
</div>
<script>
getDataRange()
</script>
</body>
</html>
.titre{
padding-top: px;
margin-left: 25px;
width: 50px;
}
span{
color: white;
}
.class-text-orange {
color: orange;
}
p{
margin-bottom: 50px;
color: white;
margin-left: 100px
}
img{
width: 80px;
margin-top: 5px;
margin-left: 5px;
height: 50%
}
body{
margin: 0px;
}
.fondnoir{
Display : flex;
Flex-wrap:wrap;
background-color: black;
width : 100%;
}
.fondbleu{
background-color: rgba(64, 171, 243, 0.884);
height: 75ch;
margin: 0
}
@timber willow
timber willow
tu peux me passer l'image aussi x)
timber willow
<@!188325154177286145>
.
tidal zodiac
tidal zodiac
merci
tidal zodiac
quoi comment ca
timber willow
c'est le body qui doit comporter le background-color en black
timber willow
bah la place occupé par le rectangle en noir en haut c'est juste qu'il n'y a rien de plus qu'une image et du texte donc ca va prendre l'espace occupé par l'image et le texte
tidal zodiac
okay
timber willow
le daraset range je vais le rajouté en html pour te montrer car j'ai pas ton script js
tidal zodiac
oui tkt
tu me le mettre a la meme taille et le mettre sous le dashborad
tu serais un amour
comme ca
merci beaucoup
@timber willow
timber willow
<@!188325154177286145>
attend je te fait un truc propre
tidal zodiac
merci
timber willow
je te l'ai mis en flex en plus du coup c'est responsive
tidal zodiac
je t'aime je croi
tidal zodiac
mdrrr
timber willow
.titre{
margin-left: 25px;
font-size: 30px;
width: 100%;
}
span{
color: white;
}
.class-text-orange {
color: orange;
}
.texte{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
p{
color: white;
margin-left: 25px;
margin-top:0;
margin-bottom: 0;
}
img{
width: 80px;
margin-top: 5px;
margin-left: 5px;
height: 50%
}
body{
margin: 0px;
background-color: black;
}
.fondnoir{
display : flex;
flex-wrap:wrap;
width : 100%;
}
.fondbleu{
background-color: rgba(64, 171, 243, 0.884);
height: 75ch;
margin-right:20px;
}
c'est ton css ca
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
<title>Videoplayer</title>
</head>
<body>
<div class="fondnoir">
<img src="imagenetgem.jpeg" alt="">
<div class = "texte">
<span class="titre"> Dashboard QoS > <span class="class-text-orange">Videoplayer</span></span>
<p>Dataset Range</p>
</div>
</div>
<div class="fondbleu">
</div>
<script>
getDataRange()
</script>
</body>
</html>
et la ton html
voila
timber willow
bah c'est moi qui l'ai bouger pour que ca ressemble a ton screen
tidal zodiac
ahhh okay
timber willow
mais si tu veux le remettre comme au début enleve le margin-right
tidal zodiac
non mais je te parle en bah
timber willow
ah
car ton fond bleu c'est une div
et que le fond noir c'est le body
donc l'ensemble de ta page
timber willow
si tu veux que ca s'ajoute dans ton carré bleu faut que t'ecrive a l'interieur de ta div fondbleu
sinon ca va aller en dehors
tidal zodiac
okay d'accord merci beaucop
timber willow
pas de soucis
en gros les div voit les comme des boites dans lequel tu y ajoute des element
timber willow
bah la je dois aller taffer x)
timber willow
mais la ce que tu dois faire c'est juste une maquette non fonctionnel ?
tidal zodiac
oui
tidal zodiac
faut que j'apprenne
tidal zodiac
stage
timber willow
ah ok stage en info ?
tidal zodiac
oui
timber willow
2 mois ?
timber willow
hmm
tidal zodiac
je vais avoir besoin de toi mdrr
timber willow
mais ton sujet de stage atm c'est faire une maquette non fonctionnel ?
timber willow
ah ouais chaud si tu as du mal en css x)
timber willow
apres c'est plus facile aussi avec bootstrap
mais tu as pas été formé je penses a bootstrap x)
tidal zodiac
mais tu as pas été formé je penses a bootstrap x)
oui
summer hare
Salut sa vous arrive souvent, au moment de tester le responsive il a énormément zoomer la page, le temps que je fasse ma recherche pour régler sa, il s'était dézoomer tout seul... c'est à cause de quoi si vous savez ? svp
plain haven
yo
J'ai définis un hauteur à mes images
Mais en revanche ça les applatit
quelqu'un aurait-il une solution ? ^^
west stirrup
salut je crois que c’est background cover un truc du genre je suis pas sur du tout mais ça va couper ton image
plain haven
salut je crois que c’est background cover un truc du genre je suis pas sur du to...
c'est object-fit: cover; j'ai retrouvé :)
merchi
summer hare
Bonjour
C'est possible de m'expliquer pourquoi on entoure la balise "a" d'une div, alors qu'on pourrait directement l'utiliser pour faire la carte en lui attribuant une classe ?
Pareil pour les autres comme "H3"
summer hare
Je retente quand même 🥱 J'ai une balise main à laquelle j'ai mis un display: flex mais aucune réaction mais quand je lui attribut une class ça fonctionne pourquoi ça fait sa ?
floral haven
C'est possible de m'expliquer pourquoi on entoure la balise "a" d'une div, alors...
Car c'est de la structure
Div -> Division c'est pour ""compartimenter"" ton code par bloc
Donc au lieu de modifier l'état générique d'un <a>, autant utiliser l'existant et en même temps rester dans une logique de code
En suivant ta logique, demain on pourrait se retrouver avec des li qui seraient directement des buttons, ça n'a plus aucun sens et c'est incompréhensible si chacun fais à ça sauce
Et forcément, tu allourdis ton code pour rien
summer hare
Car c'est de la structure
Div -> Division c'est pour ""compartimenter"" ton cod...
Ah d'accord je comprends chacun son rôle merci pour la réponse
ocean shale
Salut, je viens d'host mon site hier soir et je me retrouve confronté à un soucis en essayant de forcer le protocole HTTPS au lieu de HTTP sur mon site web. En effet, je me retrouve avec un site dupliqué et je ne trouve pas sur internet comment modifier la réecriture pour qu'il ne soit disponible qu'en HTTPS, afin de forcer la connexion sécurisée, peut-on m'aider s'il vous plaît ? Merci d'avance !
(J'ai vu parler de "modifier du code" pour la réecriture, mon site possède déjà des liens relatifs et aucun liens externes donc ça devrait fonctionner ^^')
ocean shale
Car c'est de la structure
Div -> Division c'est pour ""compartimenter"" ton cod...
C'est aussi si il utilise des flex, pour modifier via un parent, sinon le flex ne fonctionnera pas ||dites-moi si je me trompe||
patent solstice
Salut, je viens d'host mon site hier soir et je me retrouve confronté à un souci...
Il faut que tu fasses une redirection dans ton vhost (apache ou nginx) de HTTP à HTTPS
ocean shale
Il faut que tu fasses une redirection dans ton vhost (apache ou nginx) de HTTP à...
Oula, je sais pas du tout comment ça marche, j'host sur OVH Cloud donc je ne sait pas où ça se situe
patent solstice
Oula, je sais pas du tout comment ça marche, j'host sur OVH Cloud donc je ne sai...
T'as un hébergement mutualisé ?
ocean shale
T'as un hébergement mutualisé ?
Oui
floral haven
C'est aussi si il utilise des flex, pour modifier via un parent, sinon le flex n...
J'ai pas très bien compris
patent solstice
Oui
Dans ce cas tu dois rajouter un .htaccess à la racine de ton site
=> https://www.freecodecamp.org/news/how-to-redirect-http-to-https-using-htaccess/
ocean shale
Dans ce cas tu dois rajouter un .htaccess à la racine de ton site
=> https://www...
Je crois l'avoir, je vais essayer de faire ça, merci et désolé ^^'
patent solstice
Pourquoi désolé ?
ocean shale
Bah tu as trouvé un lien et parce que c'est une question un peu bête ^^'
ocean shale
XD oui en tout cas merci, j'ai tout compris !
plain haven
Salut, je viens d'host mon site hier soir et je me retrouve confronté à un souci...
...
lean nova
Bonjour, j'ai un problème sur ma page html qqn peut voc svp ?
dusky skiff
Bonjour, j'ai un problème sur ma page html qqn peut voc svp ?
Hey, pose nous ton problème directement ici 🙂
lean nova
en gros j'ai mit en texte ou chaque caractères sont des span(pour faire un effet en css) sauf que ces caractères s'affichent mal
comme ca
dusky skiff
Quel est ton " effet css " ?
lean nova
justement il est long c'est pour ca que j'aurais privilégié le voc..
dusky skiff
Normalement on ne met pas un span à chaque caractère comme ça 😬
lean nova
mais le css qui agit sur le span c'est ca
dusky skiff
justement il est long c'est pour ca que j'aurais privilégié le voc..
Dans ce cas je ne peux pas t'aider désolé
lean nova
.banner .content2 p{
width: 95%;
height: auto;
display: flex;
justify-content: justify;
color: rgb(216, 216, 216);
font-size: calc(1.2vw + 1.5vh);
}
.banner .content2 p span{
position: relative;
font-size: 40px;
display: flex;
height: auto;
width: 1000%;
justify-content: row;
}
dusky skiff
T'essayes de faire quoi exactement avec une width de 1000% ?
dusky skiff
Qu'est-ce que tu essayes de faire exactement avec ton texte ?
lean nova
et la c'est avec une width de 500%
en gros lors du hover je fais vibrer la lettre
c'est pour ca que j'ai utilisé les span apres si il y a d'autre solution pour faire cet effet je suis preneur
mais je pense pas
dusky skiff
Ça vient de ton display flex je pense
Je dois partir là je t'aide quand je suis chez moi si personne ne l'a déjà fait
lean nova
ok d'accord
dusky skiff
Justify content row ça n'existe pas
Je pense que tu peux enlever le css de ton span et faire que le hover ça pourrait fonctionner
lean nova
oui pardon j'ai oublié de préciser que le css du span ne sert a rien j'ai juste essayer plein de truc pour résoudre le problème
mais ca n'a pas marché
void anvil
Salut, quelqu'un sais faire un bouton en méthode de payment en ethereum fonctionnel ?
hidden owl
Petit soucis du coups, mon typing texte, impossible de le dupliquer pour la partie de Kawai.jar
floral haven
Pour quelle raison ?
floral haven
J'imagine que c'est pas ton code, je me trompe ?
hidden owl
et mon ".js" concernant le typing text ne veut pas se copier
hidden owl
J'imagine que c'est pas ton code, je me trompe ?
non
j'ai vu celui la en free, j'ai pas pris mon temps à en refaire un
D'ou mon erreur, car du coups je ne sais pas comment la résoudre vu que c'est pas mon code :/
floral haven
Dommage pour un dev ^^
Probablement qu'il passe par un id ?
hidden owl
ca c'est pour le text typing
floral haven
Bon dieu des var
hidden owl
hidden owl
Bon dieu des var
😂