Be go on fait dodo est on regarderai ça demain mdr @opaque charm
#html-css
chrome copper
chrome copper
Je vois ce que tu veux dire mes moi je c'est faire que des animation classique pour le moment je reprend les bas j'ai arrêté le html CSS pendant 8mois
Je me rappel des truc mai voilà
@opaque charm
safe citrus
Bonsoir, je suis à la recherche d'une personne pouvant réaliser une boutique en ligne sur Shopify ou autres
C'est pour mon activité de customisation sur tshirt
J'aimerais faire en sorte que mes clients puissent indiquer leurs demande en écrivant et en upload d'image lors de l'achat
J'ai un petit budget pour la création de ce site pas plus de 30€
void anvil
Bonsoir, je suis à la recherche d'une personne pouvant réaliser une boutique en ...
Bonsoir,
Vous pouvez toujours créer une offre sur https://g-ca.fr/offres mais je doute que vous trouverez facilement un développeur répondant à vos critères à ce prix là
Bonne soirée ✌️
void anvil
@gaunt yoke slt comment tu à fais pour faire défiler tes avis client en continue
merci d'avance.
gaunt yoke
j'ai use un package infinite slider je crois
mais tu peux le faire à la main si tu veux aussi
void anvil
Bas justement tu aurais pas un code CSS a me proposer
opaque charm
Ok
low dagger
Extrêmement simple et performant
opaque charm
@void anvil recherche sur Google "Splide"
opaque charm
Moi j'ai découvert une librairie assez cool pour faire apparaître des class en mode fade in des qu'on scroll vers eux
Ultra simple, en 2 lignes de javascript j'avais ce que je voulais
gaunt yoke
Moi j'ai découvert une librairie assez cool pour faire apparaître des class en m...
AOS ?
low dagger
Y a pas tout dessus mais elle est sympa
C'est sûr mais pour mon utilisation ça suffisait et j'ai franchement adoré ! Après j'avais jamais eu l'occasion de tester avant car je travaillais souvent en Angular avec primeng et j'utilisais le composant carousel :p
opaque charm
Mais après pas sûr que Splide a une infinite slider
Nop ya pas je crois
Je viens de regarder et ya pas
gaunt yoke
Yes je me disais aussi
void anvil
@opaque charm @low dagger merci je vais aller voir ca
inner vine
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="d-md-flex d-block flex-row mx-md-auto mx-0 collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link slide-link" href="#navbar"><span>Home</span><span>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link slide-link" href="#"><span>à propos</span><span>à propos</span></a>
</li>
<a class="navbar-brand m-2" href="#"><img src="./assets/Logo S Blanc.png" alt="logo" class="sagby-logo"></a>
<li class="nav-item">
<a class="nav-link slide-link" href="#"><span>projet</span><span>projet</span></a>
</li>
<li class="nav-item">
<a class="nav-link slide-link" href="#"><span>contact</span><span>contact</span></a>
</li>
</ul>
</div>
</div>
</nav>```
Je comprend pas pourquoi le responsive ne marche pas, si quelqu’un pouvais m’aidez svp
low dagger
Peut-être une histoire de z-index sur ton menu responsive ?
void anvil
Il faut nous montrer le CSS de ta page aussi 😉
inner vine
Il faut nous montrer le CSS de ta page aussi 😉
background-image: linear-gradient( #070707, #00000000);
opacity: 90%;
height: 75px;
}
.nav-link{
font-size: 16px;
margin: 3px;
color: #fff!important;
font-weight: 500;
}
.sagby-logo{
height: 30px;
}
.slide-link{
font-family: "Kanit", sans-serif;
text-transform: uppercase;
overflow: hidden;
position: relative;
}
.slide-link span {
padding: 10px;
display: inline-block;
transition: transform 0.3s ease-out;
}
.slide-link span:nth-child(2){
position: absolute;
width: 100%;
text-align: center;
left: 100%;
}
.slide-link:hover span{
transform: translateX(-100%);
}```Le mieux pour ce genre de soucis c’est d’envoyer un git avec ton projet qu’on puisse tester facilement
inner vine
Ok je t'envoie sa
odd heart
Salut, je viens vous demander votre aide car j'aimerais bien pofiner mon html css etcc mais que je n'ai pas d'idée de projet, donc si quelqu'un a une idée je suis preneur merci 🙂
gaunt yoke
https://github.com/Sagbyy/sagby.fr
Hello je viens de regarder ton erreur vient de tes attributs sur ton button
c'est data-bs-toggle et data-bs-target
Ensuite tu auras des erreurs de style lié aux classes:
d-md-flex d-block flex-row mx-md-auto mx-0 sur l'élément #navbarSupportedContent
mais ça je te laisse les fixer
odd heart
@gaunt yokej'aime bcp ton site web
inner vine
Hello je viens de regarder ton erreur vient de tes attributs sur ton button
C'est bon tout est régler je te remercie pour le temps que tu as donner
void anvil
Bonjours j'aimerais diminuée le circle mais je ne trouve pas la ligne cx,cy,r dans mon CSS
void anvil
il est dans ton html
void anvil
il est dans ton html
Il n'ya pas cette ligne dans mon html
quartz thunder
void anvil
elle est sélectionnée en plus
Je vous rassure qu'il n'ya pas cette ligne
j'ai chercher x1000 même dans le js rien à voir
fait un ctrl+f et tu vas sur toute les pages
Oui je c'est
c'est ce que j'ai fait
cherche svg
<circle cx="406" cy="68.5" r="45"/>
<circle cx="55.801" cy="22.977" r="6.531"/>
<circle cx="85.3" cy="197.3" r="44.7"/>
les 3 circle dans le HTML
faut trouver au quel correspond l'image
Aucun de tous
et pour les icons pour les changé ca ce passe comment?
@void anvil
void anvil
Quelqu'un peut m'aidée svp?
brave jay
comment t'a fait pour enregistrer ton memoji ?
inner vine
je me le suis envoyer par mail tout simplement
grand pasture
tu suis un cours
void anvil
Dans ton code tu va voire des i class et tu change par ton icon que tu trouve sur des sites d'icones
Tu repere les icones facilement car c'est des ( fa fas , mdi mdi e.t.c )
void anvil
flat icons aussi si tu veut
void anvil
Ouais aussi
J’ai envoyé FontAwesome car je préfère mais il en existe plein évidemment 💪
void anvil
Salut, je viens vous demander votre aide car j'aimerais bien pofiner mon html cs...
Tu peux en trouver facilement sur le net
À++
dapper cairn
question en css : j'utilise la fonction nth-child(2n+1) et nth-child(2n+0) (ou odd et even), mais j'ai l'impression que ça compte l'élément 0
mes deux premiereres div sont en blanc et seulement la troisième est en bleue
alors que j'aimerais que ça soit 1 sur 2 (comme ça devrait le faire normalement)
steep kite
Salut, j'apprend à me servir de vuejs car je trouve que son utilisation est super. Or, j'aimerai savoir comment faire des redirections, je m'explique : en gros, lorsque l'utilisateur clique sur un button, il est redirigé vers une autre page, le titre est modifié et l'url aussi, mais SANS le .html à la fin, comme sur g-ca.fr par exemple avec le g-ca.fr/tutoriels...
gaunt yoke
Bah oui du coup c’est dans le nom
steep kite
D'accord super merci
void anvil
Après ce n’est pas forcément VueJs à utiliser, tu peux utiliser plein d’autres choses évidemment hein. @steep kite
steep kite
Après ce n’est pas forcément VueJs à utiliser, tu peux utiliser plein d’autres c...
comme routeur ou comme framework ?
void anvil
comme routeur ou comme framework ?
Ce qui concerne les routes se nomme un routeur. Un framework c’est autre chose hein
gaunt yoke
Après ce n’est pas forcément VueJs à utiliser, tu peux utiliser plein d’autres c...
?? Je comprend pas le message
Si il a envie d’utiliser VueJS il a le droit 🧐
void anvil
?? Je comprend pas le message
C’était juste pour dire que les routeurs n’était pas UNIQUEMENT VueJS c’est tout
gaunt yoke
bah oui mais à quoi ça sert de dire ça
void anvil
Si il a envie d’utiliser VueJS il a le droit 🧐
Évidemment et je l’encourage si il souhaite évidemment
gaunt yoke
sur VueJS tu utilises vue router
comme sur react ou tu utilises le routeur de react …. Je comprend pas trop
tu peux le faire à la main ou en utiliser un autre
Mais bon il est dans la doc quoi
void anvil
bah oui mais à quoi ça sert de dire ça
En posant la question, il avait lair de ne pas bien s’y connaître et qu’il croyait que il y avait uniquement VueJS parce que il a entendu je sais pas où. Donc dans le doute j’ai confirmé qu’il n’y avait pas que ça
C’est tout. Il n’y avait pas de mauvaises attentions
gaunt yoke
Salut, j'apprend à me servir de vuejs car je trouve que son utilisation est super.
je vois pas où tu as lu ça mais bon soit
void anvil
Nul part 🤔
steep kite
Ce qui concerne les routes se nomme un routeur. Un framework c’est autre chose h...
Oui mais c'est le premier qui m'est passé par le tête car j'apprend à me servir de vuejs mais j'imagine qu'il en existe d'autres. Et par rapport au framework je pensais que tu me disais que je devais pas forcément utiliser vuejs
mais j'ai capté ce que tu voulais dire x)
gaunt yoke
Dans tous les cas ton choix est bon t’en fais pas
void anvil
Bah voilà même lui a capté ce que je voulais dire
void anvil
Dans tous les cas ton choix est bon t’en fais pas
Et je suis 100% d’accord avec toi. Tu prêches un convaincu Enzo mdrrr
Je n’ai pas dit ça pour son choix mais juste pour lui dire qu’il n’y a pas que VueJS qui permet de faire des routes vu que il débute dans ce domaine
steep kite
re salut, j'aimerai savoir la quelle est la différence entre methods et computed sur vuejs ?
gaunt yoke
une method c'est une fonction que tu vas appeler
une computed c'est une valeur que tu crées en fonction de props, data ou autre
dull crag
Mhhh je pense que tu devrait poser la question dans le salon js non comme c'est du js ?🤔
ripe moth
salut, j'aimerai mettre mon image avec sa taille initiale (faites pas gaffe à l'image c'est juste pour teste) et j'ai essayé widht : 100%; avec vw et avec px
je suis débutant dans ce domaine
limber raptor
Envoie le code de ton image
Mais juste tu veux qu'elle soit en arrière plan en grand ?
void anvil
salut, j'aimerai mettre mon image avec sa taille initiale (faites pas gaffe à l'...
Quel est le but de la manœuvre ?
À++
dapper cairn
salut, j'aimerai mettre mon image avec sa taille initiale (faites pas gaffe à l'...
est-ce que c’est une image en « img src=‘’…’’ » ou bien tu utilises background-image: url() ?
dans le deuxième cas tu peux faire un background-size: cover; et background-position: center; et dans le premier faut qu’on ait ton code
ripe moth
D'accord merci BG et oui j'ai mis en background URL
thorn thicket
en css j'aimerai avoir de l'aide pour le style des barres progress SVP
grand canyon
Bonjour j'ai atuellement un soucis , j'ai un VPS et dessus j'ai un serveur web (nginx) j'ai inclus php sur le serveur web mais quand je vais sur le site sa fait sa
Alors que ya quelque jour sa fonctionné bien :
Problème réglé ✅
ivory spear
Quelqu'un pourrais m'expliquer c'est quoi l'algorithmie en dev web
languid gazelle
Quelqu'un pourrais m'expliquer c'est quoi l'algorithmie en dev web
un algo c'est un système ou procédures qui visent un résultat
par exemple pour trier une array derrière il y a un algo
ivory spear
Okk merci :)
void anvil
Tiens @ivory spear ! https://fr.wikipedia.org/wiki/Algorithme
void anvil
Problème réglé ✅
Tu as fait quoi pour régler ton pb ?
grand canyon
Tu as fait quoi pour régler ton pb ?
on étais juste en train de me DDOS
dapper cairn
Bonjour, j'aimerai que mon text ne dépasse pas la box quelqu'un à une idée ?
il nous faut ton code
subtle beacon
Bonjour, j'aimerai que mon text ne dépasse pas la box quelqu'un à une idée ?
Faudrait faire une flex-box si c'est pas déjà fait. Quand tu crées une box, le texte que tu mets à l'intérieur doit prendre la taille qu'il lui faut
gaunt yoke
Y a pas besoin de flexbox pour ne pas faire dépasser le texte, le texte est censé revenir à la ligne de lui même sauf si ce n'est pas le cas tu peux break words ou vérifier ton white-space
Si tout est normal c'est que de ton côté tu forces des tailles sur ton texte et/ou ta boxe
le plus simple c'est que tu envoies ton code @floral crow
subtle beacon
Y a pas besoin de flexbox pour ne pas faire dépasser le texte, le texte est cens...
Ah mince, j'ai juste pas compris ce qu'il voulait, autant pour moi 😅
void anvil
on étais juste en train de me DDOS
Ah dac xD
grand canyon
Sinon tu fait un retour a la ligne avec <br>
void anvil
Sinon tu fait un retour a la ligne avec `<br>`
Non, je pense qu'il veut garder cette structure et il veut juste que ça dépasse pas
floral crow
Voilà mon CSS:
body {
background-color: #eec212;
/* overflow: hidden; */
}
/* rectangle */
.rectanglebackground {
width: 90%;
margin-left: auto;
border-radius: 50px;
margin-right: auto;
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
padding: 100% 0 0 0 !important;
background: #ffffff;
}
.logo-home {
position: absolute !important;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
}
.logo-home img {
margin-top: 2%;
width: 250px;
height: 250px;
}
.rectanglecontent {
position: absolute !important;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
}
.rectanglecontent p {
font-size: 24px;
margin-top: 20%;
font-family: 'Kanit', sans-serif;
color: rgb(0, 0, 0);
text-align: center;
padding-left: 30px;
padding-right: 30px
}
.box-desc {
position: absolute !important;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
}```Voilà mon body:
<body>
<!-- RECTANGLE -->
<div class="rectanglebackground">
<div class="logo-home">
<img src="images/logo.png">
<div>
<div class="rectanglecontent">
<p>Voluptate minim reprehenderit eu commodo. Occaecat magna cupidatat irure laborum amet reprehenderit id deserunt qui veniam. Eiusmod veniam consequat laborum adipisicing excepteur fugiat ad.</p>
<div>
<!-- BOX DESCRIPTION x3 -->
<div class="box-desc">
<div class="box-desc1">
<p>Voluptate minim reprehenderit eu commodo</p>
</div>
<div class="box-desc2">
<p>Voluptate minim reprehenderit eu commodo</p>
</div>
<div class="box-desc3">
<p>Voluptate minim reprehenderit eu commodo</p>
</div>
</div>
</div>
</body>
c'est fait 😉
void anvil
d'ailleurs, @floral crow et @gaunt yoke, étant "vip", j'ai add cet emoji qui va bien servir je pense
c'est lui 🙂
gaunt yoke
haha
@floral crow sorry pas vu, tu as toujours ton soucis ?
floral crow
haha
<@!135306052789862400> sorry pas vu, tu as toujours ton soucis ?
Oui 😦
gaunt yoke
Okay wait je regarde
Ok déjà premier soucis @floral crow tu as des div mal fermé
regarde
floral crow
Ah oui effectivement 🤦🏻♂️
hoary pumice
<:ltWithCodeBetter:875779098276933632>
GrAv3n
void anvil
no
frozen dagger
Hello quelqu'un sait pq mon image ne veut pas ce load ? (vuejs)
dans ma balise <template> j'ai mit html <img v-bind:src="img" alt="">
puis j'ai fait ça js data () { return { disableList: false, // Faites pas attention à ça img: 'crayon.png' } },
gaunt yoke
oui
montre la structure de ton projet stp
Normalement tu fous tes images dans le dossier assets
frozen dagger
Ouais j'ai fait ça au début, mais marchait pas dcp je me disait que je me trompais dans le path
gaunt yoke
pas au niveau du composant
utilise des liens absolute d'ailleurs
de faire @/assets/xxxx.png
que des ./../../assets/xxxx.png
frozen dagger
Okk merci !
ivory spear
Comment vous trouvez tous vos logos ? Par exemple le settings ou sms
woven pumice
Salut quelqu'un peut me faire un alignement des liste a pusse a droite
<ul id="entête"
<li>accueil</li>
<li>mods</li>
<li>service</li>
<li>suport</li>
lu>
car le CSS et moi sa fait deux
gaunt yoke
là tu as surtout un probleme avec le html
tu fermes aucun <li>
et ton <ul> est mal fermé
woven pumice
Ouai je vais corriger car mon éditeur le comprend
ivory spear
Oula oui
gaunt yoke
Comment vous trouvez tous vos logos ? Par exemple le settings ou sms
flaticon, fontawesome, icones8
materials icons, iconify, et tout pleins d'autres
ivory spear
Mercii
woven pumice
La ses bon ou pas le lu est mal fermer je pensse
woven pumice
Ba je suis sur mobile le temp des vacances donc ses chaut
En tout cas je sais pas comment vous faites ceux qui code sur mobile
ivory spear
Comment on code sur mobile ?
dapper cairn
Comment on code sur mobile ?
JSitor ou Koder sur iPhone
j'ai besoin d'aide pour du responsive en css
quelqu'un dispo ?
gaunt yoke
met ton probleme
dapper cairn
alors j'ai deux card-box sur ma page
comme ça
j'aimerais qu'elle se mette l'une au dessus de l'autre lorsque je passe en max-width 911px
j'envoie le code ^^
le html :
le css
gaunt yoke
envoie un git ce sera plus simple je pense
gaunt wasp
Tu met juste la carte de Twitter en position absolute
dapper cairn
je fais un canvas nth-child 2 dc
gaunt yoke
les absolute il faut vraiment considérer que ca s'utilise vraiment quand tu peux pas faire autrement
gaunt yoke
Quand perdre la position de ton élément est pas un soucis
Essaye juste de jouer avec un transform x sur ta card
gaunt wasp
Nan la position ne sera pas perdu, c'est que tu l'as mal config dans ce cas là....
Faut pas oublier de mettre position: relative; dans le parent, et la position ne sera plus bug
Enfin, du moins, le left:0; et top:0; sera redéfinis sur la superficie du parent
gaunt yoke
Oui mais tu perds quand meme la position de ton élément
Parent relatif ou non tu perds le fait que cet élément ai une importance dans le parent
gaunt yoke
Il peut juste transform
gaunt wasp
Pour éviter qu'il perte sa place
gaunt wasp
Il peut juste transform
Effectivement
gaunt yoke
Si il absolute il va perdre le fait qu'il soit aligner bien comme il faut devoir les aligner lui même
gaunt wasp
?
dapper cairn
du coup xD
@media only screen and (max-width: 911px){
.canvas:nth-child(2) {
position: absolute;
}
}
c'est ça que tu veux que je fasse ?
gaunt yoke
Si il absolute son élément, cet élément ne pas plus forcément être aligné a la 2eme card, pareille si il a mit une size a width: 50%, et qu'il pas le container collé au card mais avec du padding ou autre, elle va légèrement s'agrandir
Donc je te conseille de juste faire un transform: translateX(-24px) par exemple
gaunt wasp
Et pour la centrer tu refait top:50%;
gaunt wasp
Ouep
gaunt yoke
50% + la taille de la boxe ce sera pas aligné
gaunt wasp
Justify-content: centrer ;
gaunt yoke
tu vas devoir calc la size de l'élement avec le top: 50%
le justify fonctionne pas sur un élement absolute
gaunt wasp
Align-item:center;
gaunt yoke
Car ton élement devient indépendant de tout ça
gaunt wasp
?
gaunt yoke
Relative ou non, relative il va juste etre relatif au parent sur le placement
Mais le flex du parent n'agira pas sur un élement absolute
gaunt wasp
@media only screen and (max-width: 911px){
.canvas:nth-child(2) {
po...
Yep, rajoute ensuite align-item:center;
Et repositionne le avec left:0;
Et top:50%;
dapper cairn
btw c'est translateY du coup
gaunt yoke
Y c'est de haut en bas
gaunt wasp
X
gaunt yoke
si tu veux l'afficher sur l'autre ca va etre X
gaunt wasp
translateX
gaunt wasp
Mais le flex du parent n'agira pas sur un élement absolute
Tu t'en fiches du flex, vu qu'il veux le poser au dessus
Justement
Sa risque de le casser
dapper cairn
bah non vu que je veux l'afficher en dessous
gaunt wasp
Non
gaunt yoke
Je te dis juste que le flex ne va pas agir sur l'enfant absolute
gaunt wasp
J'ai pas parler de flex 1 seul seconde
gaunt yoke
Justify-content: centrer ;
^
cette propriété fonctionne sur un container qui est en flex
donc dans la logique... si
gaunt wasp
A yes...
gaunt yoke
Et il pourra pas l'aligner avec top: 50% et left: 50% je préfère prévenir
Mais essaye et tu verras yaelou
tu comprendras pourquoi
dapper cairn
donc ça c'est l'option une
@media only screen and (max-width: 911px){
.canvas{
width: 350px;
height: 350px;
}
.canvas:nth-child(2) {
position: absolute;
align-items: center;
left: 0;
top: 50%;
}
}
donc on est pas exactement là ou on voudrait venir
dapper cairn
je rajoute juste un translateY maintenant ou j'enleve/modifie quelque chose dans le code option 1 ?
gaunt yoke
Précise la prochaine fois ce sera plus simple, car je déconseille fortement l'absolute pour du placement X, car on a pas tous les memes tailles d'écran, donc 50% c'est pas pareille pour tout le monde
Par contre là ce que tu peux faire effectivement vu que tu places en Y, c'est de
position: relative ton parent
De mettre ta deuxieme card en absolute à ce moment la et de left: 0, bottom: 0, et ensuite de venir transformY dessus
Car si tu transformY juste sans le absolute, ce qui fonctionne aussi, tu vas quand meme garder le placement de la bloc en fantome, mais donc si tu as quelque chose en dessous tu auras un énorme espace pas forcément maitrisable
Donc juste à voir en fonction de ton besoin
dapper cairn
j'ai à peu près trouvé un truc qui me convient, qui tient sur tous les appareils
je verrai bien ce que ça donne
gaunt yoke
👌 good luck
jolly mango
Coucou, est-ce que quelqu'un aurait une idée de projet de site à faire pour que je puisse travailler un peux mon html css ?
sinful nest
Coucou, est-ce que quelqu'un aurait une idée de projet de site à faire pour que ...
slt voici une maquette que m'a donné @gaunt yoke si tu veux try
gaunt yoke
ah oui pendant une eval pas bête ça peut te train
jolly mango
Oh sympa
Il dépasse mes capacités pour le moment mais j'y attendrait ce résultat par après
Merci à toi :)
jolly mango
Pour l'instant du basique quoi je vien d'arriver au chapitre flexbox sur openclasserooms
sinful nest
Pour l'instant du basique quoi je vien d'arriver au chapitre flexbox sur opencla...
(c'est pas de moi ^^)
jolly mango
Ah oui
sinful nest
tant qu'on y est https://www.geeksforgeeks.org/top-10-projects-for-beginners-to-practice-html-and-css-skills/
jolly mango
Au moin on ne sera pas a court d'idées hehe
sinful nest
tu as demandé x)
jolly mango
Yep, ça va me servir pour m'entraîner
Le music store et photographe me tenterai bien^^
Je vais te laisser j'ai plus de batterie, un grand merci pour ton aide 😁
sinful nest
np 🙂
stoic tulip
lavish forum
Bonjour, je viens vous solliciter car j'ai un petit soucis de svg avec tailwind css
voila le rendu que j'ai, l'icone est trop grand est elle est coupé
<span class="w-full inline-flex rounded-md shadow-sm">
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out" type="button" aria-label="Se connecter avec Discord">
<svg class="h-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" clip-rule="evenodd"></path>
</svg>
</button>
</span>
</div>```hello
tu parles bien de celui du milieu ?
car j'ai enlevé le h-5 et meme en énorme elle est coupé
tu aurais pas un soucis dans ton svg directement ? et non de css
lavish forum
j'ai récupéré le svg directement sur le site de discord
leur page branding
j'ai essayé avec plusieurs svg de différents sites et j'ai toujours le même problème
gaunt yoke
<svg class="h-5" viewBox="0 0 71 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Discord-Logo-White" transform="translate(0.000000, 0.411745)" fill="red" fill-rule="nonzero">
<path d="M60.1044999,4.48605546 C55.5791999,2.40965546 50.7264999,0.879855461 45.6526999,0.00367546142 C45.5602999,-0.0132345386 45.4679999,0.0290244614 45.4203999,0.113544461 C44.7962999,1.22355546 44.1049999,2.67165546 43.6208999,3.80985546 C38.1636999,2.99285546 32.7344999,2.99285546 27.3891999,3.80985546 C26.9049999,2.64635546 26.1885999,1.22355546 25.5616999,0.113544461 C25.5140999,0.0318444614 25.4217999,-0.0104145386 25.3293999,0.00367546142 C20.2583999,0.877055461 15.4056999,2.40685546 10.8775999,4.48605546 C10.8383999,4.50295546 10.8047999,4.53115546 10.7824999,4.56775546 C1.57794989,18.3191555 -0.94356111,31.7325555 0.29340789,44.9796555 C0.29900489,45.0444555 0.33538589,45.1064555 0.38576089,45.1458555 C6.45865989,49.6056555 12.3412999,52.3131555 18.1146999,54.1077555 C18.2070999,54.1359555 18.3049999,54.1021555 18.3637999,54.0260555 C19.7294999,52.1610555 20.9468999,50.1945555 21.9906999,48.1265555 C22.0522999,48.0054555 21.9934999,47.8617555 21.8675999,47.8138555 C19.9365999,47.0813555 18.0978999,46.1882555 16.3291999,45.1740555 C16.1892999,45.0923555 16.1780999,44.8922555 16.3067999,44.7964555 C16.6789999,44.5175555 17.0512999,44.2273555 17.4066999,43.9343555 C17.4709999,43.8808555 17.5605999,43.8695555 17.6361999,43.9033555 C29.2557999,49.2084555 41.8353999,49.2084555 53.3178999,43.9033555 C53.3934999,43.8667555 53.4830999,43.8780555 53.5501999,43.9315555 C53.9056999,44.2245555 54.2778999,44.5175555 54.6528999,44.7964555 C54.7815999,44.8922555 54.7731999,45.0923555 54.6332999,45.1740555 C52.8645999,46.2079555 51.0258999,47.0813555 49.0920999,47.8110555 C48.9661999,47.8589555 48.9101999,48.0054555 48.9717999,48.1265555 C50.0379999,50.1916555 51.2553999,52.1581555 52.5958999,54.0232555 C52.6518999,54.1021555 52.7525999,54.1359555 52.8449999,54.1077555 C58.6463999,52.3131555 64.5289999,49.6056555 70.6018999,45.1458555 C70.6550999,45.1064555 70.6886999,45.0472555 70.6942999,44.9824555 C72.1746999,29.6673555 68.2146999,16.3639555 60.1967999,4.57055546 C60.1771999,4.53115546 60.1436999,4.50295546 60.1044999,4.48605546 Z M23.7258999,36.9135555 C20.2275999,36.9135555 17.3450999,33.7018555 17.3450999,29.7575555 C17.3450999,25.8132555 20.1716999,22.6015555 23.7258999,22.6015555 C27.3079999,22.6015555 30.1625999,25.8414555 30.1065999,29.7575555 C30.1065999,33.7018555 27.2799999,36.9135555 23.7258999,36.9135555 Z M47.3177999,36.9135555 C43.8195999,36.9135555 40.9370999,33.7018555 40.9370999,29.7575555 C40.9370999,25.8132555 43.7635999,22.6015555 47.3177999,22.6015555 C50.8999999,22.6015555 53.7544999,25.8414555 53.6985999,29.7575555 C53.6985999,33.7018555 50.8999999,36.9135555 47.3177999,36.9135555 Z" id="Shape"></path>
</g>
</g>
</svg>
le svg que je récupère de mon côté
lavish forum
euhm
voila le rendu avec ce que tu ma envoyé
après je me demande si c'est pas un problème avec la viewbox
gaunt yoke
Normalement non tu as pas besoin de la changer
la preuve etant que je l'affiche bien de mon côté avec la meme viewBox, tu vas juste plus cibler ton svg
tu peux m'envoyer ton bloc entier
lavish forum
la preuve etant que je l'affiche bien de mon côté avec la meme viewBox, tu vas j...
Oui mais je viens de voir que je m'était foiré sur la viewbox et que je l'avais laissé en 0 0 20 20
gaunt yoke
Ah oui okay
lavish forum
mais en tout cas merci 🙂
gaunt yoke
no soucis
lavish forum
gaunt yoke
top
odd heart
@lavish forum c'est quoi ton site ? Genre ton projet (simple curiosité)
lavish forum
<@337917064914403329> c'est quoi ton site ? Genre ton projet (simple curiosité)
Salut, grossièrement c'est un projet qui à pour but de simplifier les recherches aux personnes utilisant vinted.
odd heart
Ooh
lavish forum
A la base c'était une app mobile mais la personne avec qui je travaillais n'avais pas les compétences pour maintenir l'app à jour et sans bugs (1500 inscriptions sur l'app) du coup vu quelle était plus mise à jour j'ai du la retirer du google play store. Et la je relance le projet en version web
gaunt yoke
Quel intérêt la connexion github sur vinted ? 
pas mieux de rajouter Google à la place ? Peut être plus approprié à la cible non ?
lavish forum
justement j'ai mis google entre temps 🙂
gaunt yoke
Ah cool c’est mieux yes
lavish forum
c'est dans le template de tailwind ui github 🙂
lavish forum
merci 🙂
Pour le front j'utilise shuffle avec tailwind ui, je sais pas si vous connaissez ?
gaunt yoke
Pour créer des templates
gaunt yoke
Mais pourquoi tu le fais pas toi même direct
enfin ça apporte quoi concrètement jamais utilisé
lavish forum
je suis pas intégrateur, j'ai seulement appris les bases en html css
à la base mon métier c'est webdesigner UI UX
lavish forum
C’est un peu un bootstrap studio
Oui c'est sa mais sa fonctionne avec pas mal de framework css
lavish forum
Ouais c'est développé pour les dev et non pour les designer
gaunt yoke
The #1 visual editor for busy developers.
Ce genre de slogan mdr
Quand ton taff c’est intégrateur je vois pas@comment tu peux être débordé là dessus
lavish forum
yep 😄
et bien c'est un développeur php qui ma montré sa
et lui n'est pas intégrateur sa lui économise du temps
gaunt yoke
oui il est donc pas intégrateur
Mais dans une équipe normalement constitué tu as un intégrateur un dev front et un dev back
Après en projet solo oui c’est pas mal
lavish forum
yep, par exemple pour moi sa me permet de mettre plus de budget dans le dev back
gaunt yoke
Yes
lavish forum
après j'ai des bonnes bases en html css et des qualités d'UI et d'UX designer donc je peux combiner facilement les deux
tulip mural
Bonsoir j'ai un site et j'aimerais que les deux côté montrer sur le dessin soit égaux, et j'aimerais que quand on dézoom la page sa reste a 3 "item" par ranger et non 4,5,6... Merci de votre aide ^^
low dagger
@tulip mural Tu utilises flexbox ? Tu as un code à nous partager ?
tulip mural
Je ne sais pas c'est quoi flexbox ( je viens de débuté faire un site comme ça direct c'est un ptit "défis" mais en même temps j'apprend) et quel parti du code ?
low dagger
La partie où tu gères le style et la sémantique de cette liste d'éléments
tulip mural
low dagger
Flexbox c'est toute la panoplie d'outils liés au display flex
tulip mural
tulip mural
Flexbox c'est toute la panoplie d'outils liés au display flex
et sa permet de faire ce que je demande ?
low dagger
Oui 🙂 Tu utilises déjà flexbox 😉
tulip mural
ah
Mais ma flexbox doit être mal faites car quand je dézoome sa ne cadre pas bien et sa ne garde pas 3 items sur la ranger
low dagger
Tu pourrais mettre une taille de 33.3% sur chaque élément card
tulip mural
dacc
low dagger
Et fais attention aux marges sur les côtés car sinon les éléments vont dépasser et tu n'auras pas tes 3 éléments
tulip mural
Tu pourrais mettre une taille de 33.3% sur chaque élément card
à quel truc fin genre width... ?
tulip mural
Et fais attention aux marges sur les côtés car sinon les éléments vont dépasser ...
dacc
low dagger
à quel truc fin genre width... ?
Oui en largeur évidemment puisque tu veux avoir 3 éléments sur une ligne, tu divises en 3 l'espace disponible
Et les % sont relatifs au parent direct
Donc pour chaque card, elle prendra une largeur de 33.3% de cards
tulip mural
si je met 33.3% en largeur sa donne ça
low dagger
A cause de ta marge à gauche non ?
Imaginons que tu enlèves ta margin left sur une card ?
low dagger
Ils seront pas espacés mais tu auras 3 éléments
tulip mural
mais pour quel soit espacé je pourrais faire comment ?
je pense je vais garder en ligne de 2
Mais j'ai l'impression y a un décalage quand même au niv des marge gauche/droite
low dagger
J'ai fait un exemple rapide, à toi de voir si tu sais l'appliquer dans ton cas 🙂 : https://stackblitz.com/edit/js-ezw9hp?file=style.css
tulip mural
Dacc merci je vais essayer et je verrai
summer crypt
Bonjour c'est ici pour le web ?
tulip mural
oui
summer crypt
ah cool car je veut faire un site web via mtx mais je ne comprend rien
on pourrait m'aidé ?
dusky skiff
quiet yarrow
@tulip mural Il y a une astuce très simple quand tu veux avoir une liste d'éléments enfants d'un conteneur flexbox, avec une marge entre les différents éléments. En résumé :
- Tu définis la marge que tu veux avoir (par exemple
20px), et tu la divises par deux - Tu l'appliques ensuite :
- Sous forme de margin négatif sur le parent (ex :
.parent { margin: -10px; } - Sous forme de padding sur les enfants ( ex :
.enfant { padding: 10px; }
- Sous forme de margin négatif sur le parent (ex :
Et voilà 😄 Attention à faire en sorte que le parent soit bien en width : auto;, afin qu'il puisse déterminer sa largeur en fonction du margin négatif, et il n'y plus qu'à fixer le nombre d'éléments que tu souhaites par ligne en pourcentage (ex : .enfant { width: 25%; }).
Cela fait des années que j'utilise cette façon de faire et je n'ai pas trouvé mieux/plus light à la fois en code (c'est beaucoup plus court à écrire qu'un système avec nth-child ou autre, et donc un poil plus léger en termes de poids pour le CSS) et en lourdeur de rendu (je vois beaucoup utiliser calc, c'est très pratique, mais ça rend tout le rendu plus lourd à calculer pour le navigateur ; alors que ce système à margin négatif/padding permet de déterminer des gaps fixes entre les colonnes (ce qu'on ne peut pas faire sans calc ou un louuuuurd système de position absolute imbriqués dans des paddings autrement)).
Bonus : si tu utilises ensuite align-items : stretch; sur le conteneur parent (lorsque il est en flex-direction: row;, sinon, il faut utiliser justify-content: stretch; pour un parent en flex-direction: column; ), cela te permet d'égaliser la hauteur de tes blocs en fonction du plus grand de chaque ligne (ça donne un rendu plus homogène visuellement ^^ ).
Aussi, si tu fais un site full flexbox (sans grid, attention ^^) ce qui est chouette c'est qu'en théorie il fonctionne même sur des vieux navigateurs (pour ne pas citer IE11 :p ). Par contre une fois ton code produit il faut penser à ajouter les préfixes pour la compatibilité ; tu peux utiliser soit un préprocesseur (ça dépend pas mal de ton projet) comme Gulp, Webpack ou autre, ou alors si tu n'as que du CSS tu peux simplement copier tout ton code là dans un outil comme celui-ci-(qui utilise Autoprefixer) en fin de projet : https://pleeease.iamvdo.me/play/
(Attention à bien conserver ta source quand même, car après c'est beaucoup plus chiant à modifier 😉 )
patent solstice
Ça supporte IE 11 mais il y a beaucoup de soucis dessus pour du full flex
quiet yarrow
Ouais j'avoue, IE11 est un peu casse-tête, mais il y a moyen de tout faire passer dedans avec quelques tricks un peu bizarres mais assez bien renseignés sur les stackoverflow & co (de mémoire, surtout sur les images qui vont nécessiter un conteneur parent (pas plus mal car les OS apple déconnent aussi parfois sans ça ^^ et sur l'utilisation de height/min-height qui est intégré différemment de sur les autres navs compatibles flex)
gaunt yoke
après faut penser a supporter IE11 seulement si c'est dans la cible de votre projet
(pour éviter de s'emmerder pour 3% des visites quoi 
)
quiet yarrow
Oui complètement ^^ Je voulais juste dire qu'une fois que tu es full flex tu peux avoir en tête que si besoin tu es pas loin d'avoir un site ok sur IE11 quoi. 🙂
tulip mural
<@!539855782188023818> Il y a une astuce très simple quand tu veux avoir une lis...
Merci beaucoup de ta réponse, mais j'aimerais juste que les 2 côtés soit égaux car les espaces entre chaque éléments sont déjà égaux et que sa fasse de même quand je dézoome, si c'est ce que tu m'as expliquer alors je n'ai pas compris mal grès la longue explication que tu m'as faites.. :/
quiet yarrow
Pour les espaces sur les côtés c'est un autre problème ^^ Retire ton margin-left sur .card, et ajoute margin: 0 auto; sur .cards 😄
tulip mural
J'ai fais ce que tu m'as dis mais sa donne cela..
quiet yarrow
Alors :
- Retire tout ce qui concerne flex sur .main (pas besoin de créer une colonne flex à priori dans ce cas, un simple display block (donc pas besoin de le préciser car les <section> sont des blocks par défaut) suffit)
- Ajouter une div
.containerautour de .cards avec comme CSSmargin: 0 auto; width: 100%; max-width: 1240px; padding: 0 20px(tu peux changer 1240px par une autre largeur maximale de site, si tu veux par exemple gérer les écrans larges tu peux mettre une valeur en % ou en vw - et le 20px correspondant aux espaces qui limitent le contenu à gauche et à droite sur mobile) - Ajoute
margin: -50px;sur .cards - Ajoute une sous-div
.card-innerdirectement dans les .card, avec comme CSSpadding: 50px - Retire le
width: 300pxsur l'image et remplace parwidth: 90%; height: auto; margin: 0 auto; display: block;
Et si ça ne marche toujours pas, renvoie un screen de ton code pour voir où tu en es 🙂
tulip mural
NinCha es-ce que dans mon .main je retire aussi le flex-direction ducoup ?
quiet yarrow
Oui, tout ça ^^
quiet yarrow
Haha sûrement encore un souci de marge mais on approche, je regarde ça 🙂
tulip mural
tulip mural
Haha sûrement encore un souci de marge mais on approche, je regarde ça 🙂
D'accord pas de soucis
quiet yarrow
il manque un width: 25% ou 50% sur .card, selon si tu en veux 2 ou 4 par ligne
tulip mural
50% pour 2 c'est ça ?
quiet yarrow
yes
tulip mural
quiet yarrow
si tu en mets deux par ligne, aucun problème pour le mobile je pense, par contre si tu en mets 4 par ligne, pense à faire une media query pour en remettre 2 sur mobile
genre :
.card { width 25% }
@media (max-width: 768px) { .card { width: 50% }
tulip mural
Je vais en mettre 2 ^^
j'ai juste mis un width dans cards et sa affiche comme ça maintenant @quiet yarrow
quiet yarrow
Ahah yes, attends je suis en train de refaire ton exemple je t'envoie ça vite 🙂
tulip mural
si tu veux je t'envoie le code en comme ça ```
quiet yarrow
j'ai déjà tout recopié de mon côté :p
quiet yarrow
<section class="main">
<div class="container">
<div class="cards">
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/500">
<h4>Privatisation des spawners</h4>
<h5>7500$</h5>
<p>En fonction des stocks</p>
</div>
</div>
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/500">
<h4>Privatisation des spawners</h4>
<h5>7500$</h5>
<p>En fonction des stocks</p>
</div>
</div>
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/500">
<h4>Privatisation des spawners</h4>
<h5>7500$</h5>
<p>En fonction des stocks avec un texte plus long pour vérifier que les autres blocs prennent bien la même hauteur</p>
</div>
</div>
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/500">
<h4>Privatisation des spawners</h4>
<h5>7500$</h5>
<p>En fonction des stocks</p>
</div>
</div>
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/500">
<h4>Privatisation des spawners</h4>
<h5>7500$</h5>
<p>En fonction des stocks</p>
</div>
</div>
</div>
</div>
</section>
Et pour le CSS
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
}
.main {
/* Garder cet endroit si tu souhaites changer la couleur de la strate de contenu, par ex : */
background: teal;
}
.container {
margin: 0 auto;
padding: 0 20px;
width: 100%;
max-width: 1240px;
}
.cards {
margin: 0 -50px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.card {
padding: 50px;
width: 50%;
}
@media (min-width: 769px) {
.card {
width: 33.33334%;
}
}
@media (min-width: 1200px) {
.card {
width: 25%;
}
}
.card-inner {
border: 0.9px solid black;
padding: 50px;
text-align: center;
overflow: hidden;
border-radius: 20px;
width: 100%;
min-height: 100%;
background: #fff;
}
.card img {
display: block;
margin: 0 auto;
width: 90%;
display: block;
}
D'accord merci ^^
quiet yarrow
Il faudra ajuster les différentes valeurs ^^ Attention surtout au box-sizing: border-box que j'ai appliqué sur * ; il faut prendre l'habitude de l'utiliser car ça peut fausser les calculs de padding / largeur (maintenant, la plupart des frameworks CSS l'utilisent aussi par défaut)
tulip mural
Dacc
quiet yarrow
et tu peux faire la même chose qu'avec la width dans les media queries, même pour ajuster le margin négatif sur .cards et le padding sur .card (comme expliqué dans mon pavé à la base, en gardant bien la même valeur à chaque palier ^^) pour gérer l'espace entre les cartes sur les différents supports
En ajustant les variables ça donne très vite un truc très correct 🙂
tulip mural
Okay, vraiment merci beaucoup pour cette incroyable ^^
Je met le code et je te dis quoi au cas ou j'ai quelque chose
quiet yarrow
Haha je t'en prie, j'ai tellement été aidé aussi que c'est chacun son tour 🙂
tulip mural
sa me met en comme ça 😬
quiet yarrow
Rescreene moi ton code ^^
ah mais c'est pas mal en fait je crois
rajoute quelques éléments
quiet yarrow
Voilà c'est good là 🙂 Plus qu'à ajuster les valeurs
Oui mais regarde si tu réduits la fenêtre
Il va passer à 3 puis 2 par lignes
C'est ce bout de code qui fait ça
tulip mural
Yep je viens de voir, c'est nice ça
quiet yarrow
Et donc il faut faire le même principe pour ajuster la valeur d'espacement à chaque palier
Par exemple là les espaces entre les cartes sont assez grands, donc tu peux remplacer 50px par 20px (lignes 71 et 98 sur ton screen)
tulip mural
ahh ok
et ducoup sa monte la taille des images quand je passe a 20px je trouve ça mieux
quiet yarrow
yep 🙂 tu peux aussi jouer sur le padding interne du .card-inner
tulip mural
Enft je pense, question un peu bête sachant qu'on l'utilise pas mal le padding c'est quoi plus précisement car j'ai jamais très bien compris :/
tulip mural
oui
quiet yarrow
en bleu, c'est le contenu interne de ton élément (par ex du texte)
Ensuite le padding, c'est la zone verte : la marge interne du bloc si on peut dire
ensuite la bordure, en jaune
et ensuite en rouge le margin, l'espace externe autour de l'élément
et c'est juste que ces trois là sont toujours dans cet "ordre"
tulip mural
Mais quand je passe au dessus de chaque élément à part ce lui en bleu sa n'affiche rien sur l'écran (la zone)
quiet yarrow
Mmh j'ai pas compris là ^^
Quand tu survoles un élément avec l'inspecteur, là on voit bien la zone bleue, verte et un trait fin pour la zone jaune ^^
tulip mural
pour ma part je les vois pas, c'est peut-être mon navigateur je vais essayer avec un autre
quiet yarrow
Sous chrome, le raccourci pour activer l'inspection à la souris c'est Ctrl + Shift + C (sur PC en tout cas)
acoustic lion
Bonjour quelqu'un pourrait me dire comment faire en sorte que l'image arrondie que vous voyez reste de la meme taille mais quel ressorte beaucoup au niveau du rendu car elle est très mal ..
copper warren
Bonjour quelqu'un pourrait me dire comment faire en sorte que l'image arrondie q...
C'est à dire ?
lethal depot
met une image de meilleur qualité 
acoustic lion
Oui mais il sagit pas de moi mais des utilisateurs
Et sa fait ca pour toute les images
lethal depot
Verifie si y'a pas une ligne de code qui redimensionne tes images
gaunt yoke
A mon avis c’est l’upload qui te resize l’image de cette manière
acoustic lion
le problème est que si je met en auto le width et height l'image devient deguelasse
gaunt yoke
Essaye juste de mettre 80px en width et height
Voir si en grand elle rend mieux, mais à mon avis le soucis vient de l’upload
gaunt yoke
Essaye object-fit: cover
acoustic lion
bien joué !
acoustic lion
@graceful phoenix j'ai reglé le problème x) ^^ ne te casse pas la tete 😉
Excuse moi ..
graceful phoenix
tkt x)
acoustic lion
oui par contre j'ai un truc problème x) @graceful phoenix en effet tout ces bien mis j'ai rajouter ceci mais :
<div class="service-content mt-5 mb-5 d-flex flex-column align-items-center justify-content-center">
comme tu peux voir les boites ne sont très bien au milieu ..
bronze crow
salut je suis entrain de creer un site pour un serveur discord je suis dans les debuts et jai un petit trou
je code sur sublime text
et je vouais savoir si sur chaque onglet qui feront partis du menu du site je dois mettre
<!DOCTYPE html>
et
<meta charset="utf-8">
patent solstice
Ta meta c'est dans le head
Ça doit être présent sur chaque page
Mais dans ton code, tu peux faire en sorte de l'avoir qu'une fois
T'as un fichier principal avec le squelette de ton site, donc tout ton head, etc ..
Et dans ton body, tu inclus le HTML en fonction de la page sur laquelle se trouve l'utilisateur
C'est l'une des solutions possibles
pale trench
Salut tout le monde, j'ai un petit soucis, lorsque je met en pleine écran certain élément ce mettent en plus gros https://imgur.com/AKQQQbl
Je voudrais garder la taille comme quand je suis en fenêtrer
mais je sais pas trop comment faire cela
bronze crow
T'as un fichier principal avec le squelette de ton site, donc tout ton head, etc...
sa jai pas trop compris du coup jvais le mettre sur toute les page
mais meme doctype je dois le remettre a chaque fois ??
strong lynx
Je voudrais garder la taille comme quand je suis en fenêtrer
Salut, tu as regardé du côté des propriétés max-height et max-width ?
patent solstice
mais meme doctype je dois le remettre a chaque fois ??
Sur une page HTML oui
Mais cela ne veut pas forcément dire que tu dois le C/C sur tous tes fichiers HTML
bronze crow
Sur une page HTML oui
Mais cela ne veut pas forcément dire que tu dois le C/C su...
ah bon mais c'est censé donner l’information que
du html nan ?
gaunt yoke
Salut tout le monde, j'ai un petit soucis, lorsque je met en pleine écran certai...
Tu mets tes images avec quelle unité ?
Si tu la set en % c’est logique sachant que ta fenêtre est plus grande l’image l’est aussi
patent solstice
ah bon mais c'est censé donner l’information que
du html nan ?
Oui mais c'est principalement pour le mode quirks
pale trench
Tu mets tes images avec quelle unité ?
Il y'a que la photo de profil qui est une image le reste sont des svg
pale trench
Salut, tu as regardé du côté des propriétés `max-height` et `max-width` ?
Je vais checker ca
pale trench
il sont en vh
gaunt yoke
si ils en ont pas, set en une
Bah voilà
Le VH est en fonction de la fenêtre c’est donc pas bon
C’est pas une bonne unité
Si ta fenêtre s’agrandit en hauteur ton icône aussi
pale trench
a okay est qu'elle sera la meilleur ?
gaunt yoke
Em de préférence
pale trench
je tester ca merci
gaunt yoke
sinon en PX
pale trench
@gaunt yoke Ca fonctionne Merci
gaunt yoke
Top bon courage pour la suite bg
pale trench
Merci
bronze crow
https://developer.mozilla.org/fr/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
merci jai compris ce qu'etais les deux mode
bronze crow
jai une autre question je voulais savoir si certain dentre vous connaissez le nom de la police de text de ecriture de discord
patent solstice
jai une autre question je voulais savoir si certain dentre vous connaissez le no...
Tu peux taper Discord font sur Internet
quartz thunder
c'est ginto
gaunt yoke
c'est ginto
Moi je les bois
quartz thunder
bronze crow
c'est ginto
oe cest ca mais tu sais comment il faut que je fasse pour la mettre parceque quand je marque police de text ginto html sa me met des lins mais dans c'est liens ya pas ce quil faut mettre dans sublime
gaunt yoke
Bah il te faut récupérer les otf ou autre
Tu auras sûrement pas de lien d’import comme sur Google pour ce genre de front
c’est sûrement une font payante
a vérifier bien sûr
quartz thunder
oui elle est payante
bronze crow
raaa oe et vous connnaissez pas un police qui ressemble a celle la
au pire jvais chercher ce sera mieux
livid zodiac
hey tout le monde j'aurais besoin de quelques avis si possible
patent solstice
hey tout le monde j'aurais besoin de quelques avis si possible
On t'écoute 😀
livid zodiac
Alors voilà je suis pas foufou dans le domaine ui / ux et je souhaiterais avoir de l'aide pour réussir à faire mon portfolio ( des conseils sur des proposition d’interface / couleurs )
mais pour cela il faut que le choix des couleur et leurs emplacement soit parfait
@patent solstice Le problème étant que j'aime mettre du bleu partout et de ce fait j'arrive pas à avoir un point de vue objectif
patent solstice
Je pense que tu auras de meilleurs retours dans la section Graphisme, ça relève pas vraiment du dev
hallow forge
est-ce que y a qqu'un qui utilise .innerhtml
jolly mango
Regarde dans tools
J'étais sur sublime texte mais je ne me rappelle plus du fonctionnement
bronze crow
jolly mango
Attend je vais vite chercher comment enlever
bronze crow
azy merci
bronze crow
ok merci
jolly mango
Pas de soucis
bronze crow
et aussi jai une autre questions 😁
jolly mango
et aussi jai une autre questions 😁
Dit moi^^
bronze crow
entaite si tu veux quand je veux mettre du css sur une parti des lines du code que jai nommer ducoup
<nav id="liens">
dans le css du coup pour juste viser ce bloc il faut que je fasse
a #liens
???
ocean cave
salut, je n'ai pas appris le css mais il sert a qlq chose ? ( je vais l'apprendre comme même si il sert a rien j'ai bien )
jolly mango
Oui logiquement tu fois utiliser le # pour interagir avec ton id
(Je suis débutant donc si je raconte des bêtises c'est normal)
bronze crow
Oui logiquement tu fois utiliser le # pour interagir avec ton id
mais quand je fais ca ca annule tout
jolly mango
Essaie de le faire avec des class
bronze crow
fin javis dit paddingtop popur que sa secarte et des que jai mis le # bah sa les a remis
jolly mango
Tu met la ou tu veux cibler
class="nom que tu veux"
Et dans le css
.nom que tu veux {exemple: ;}
ok je vais essayer
ca marche pas parceque jai plusieur truc a mettre dans clas
jolly mango
Ah ok
Montre le code
Comme ça je peux voir ce que tu veux faire
(Si je dit de la merde je m'excuse)
jolly mango
Donc tu veux changer le Background des liens ?
bronze crow
fin en gros je veux juste savoir comment je fais dans mon onglet serveur.css pour cibler les <a href>
jolly mango
Juste
a{
}```Et si pas tu peux ajouter des class sur chaque lien et cibler la class dans le css
(Fichier html)
<a class="exemple" href="...">
(Fichier css)
a.exemple{
}
Pas de problème 😊
grand pasture
et apres les ecrarter je sais comment faire
Je dirais flex 🙂
bronze crow
Je dirais flex 🙂
ya padding ausis
grand pasture
Mouais
bronze crow
C’est moins bien ?
void anvil
C’est moins bien ?
non c'est juste que du flex c'est plus approprié pour du texte
padding je dirait que ça serait plus pour des ellements ( genre un cube ect )
gaunt yoke
Y a juste aucun rapport entre le padding et le flex surtout
void anvil
Y a juste aucun rapport entre le padding et le flex surtout
ah beh x)
bronze crow
non c'est juste que du flex c'est plus approprié pour du texte
oe
bronze crow
vous connaissez la propriété css a hover pour que au passage de la souris il se passe quleque chose ??
bah la si vous voulez jessaye de mettre une coleur au passage de la souris sauf que la jarrive pas a le mettre sur a. liensmenu
gaunt yoke
a.lienmenu:hover { color: red }
bronze crow
ok mais je crois jai deja essaye sa marcher pas mais attend jvais voir
nan ca marche pas
bronze crow
oui mais le {color:red} il est a la ligne
a ok nn c bon
ok cest bon cetait lespace qui gêné merci
desolé si jvouis embete avec mes question mais chu pas pro je debute 😆 😂
gaunt yoke
pas de soucis 👌 fais surtout gaffe à la relecture, c'est important
au début tu auras bcp d'erreurs sur des ;, { etc...
bronze crow
oui jvais bien relire mais tu vois la si tu mavais pas dit attention a lespace je laurai pas v
vu
gaunt yoke
bronze crow
sur img on peut utiliser border-radius??
gaunt yoke
Bien sur
bronze crow
bah alors sa doit etre moi qui est mal fait un truc alors 😂
mais ya plein de truc jai limprecion ca marche pas
gaunt yoke
montre
bronze crow
ya flex aussi dans le css de a.lienmenu ca marche pas
bronze crow
pas sur l'image
ok jvais essayer
a oui et aussi tavais pas toute la page du css
moi jveux mettre border-radius sur ca
img #menu
gaunt yoke
t'as pas d'image avec l'id menu
gaunt yoke
oui mais donc tu cibles pas bien
si tu veux l'image dans invitation c'est
#invitation img { border-radius: 100px }
et pour mettre un image toute ronde cest
#invitation img { border-radius: 100px }
??
gaunt yoke
toute ronde ca va dépendre de la taille de ton image
il faut qu'elle soit carré de préférence, donc par exemple width: 200px; height: 200px
et tu peux faire border-radius: 50%
sauf si ovale ça te dérange pas
bronze crow
ya flex aussi dans le css de a.lienmenu ca marche pas
et ya ca aussi qui me pose un problme
gaunt yoke
tu veux faire quoi dans ton a ?
bronze crow
les ecarter du coup jutilise flex
gaunt yoke
non tu met une marge si tu veux pousser tes éléments
bronze crow
margin ??
gaunt yoke
oui Margin
bronze crow
a oe c bon
la en gros sa donne ca pour le moment c moche mais cest que le debbbut tu peux voir que limage juste dessus de rejoindre sc7 et collé au menu du haut comment je fais pour le decoler
et aussi jai rajouter un trais gris autour de la div invitation comment je vis pour modifier sa longueur et sa largeur
patent solstice
C'est un margin top sur ton élément
bronze crow
pour decoler limage ou ou elargir le trais??
patent solstice
Pour décoller l'image
Pour pousser ton élément
bronze crow
ok jvais essaye
bronze crow
C'est un margin top sur ton élément
bien vu merci
patent solstice
Tu devrais faire une div pour ton corps de page sur laquelle tu pourrais mettre une marge
Comme ça tu le fais qu'une fois et tu mets tout dans ta div
void anvil
la en gros sa donne ca pour le moment c moche mais cest que le debbbut tu peux v...
Tu débutes dans le web ?
bronze crow
oui fin jai deja suivi des formation gratuite dans le codage html et css mais faire un site xeb de A a Z jamais fait
bronze crow
jai rajouter un trais gris autour de la div invitation comment je vis pour modifier sa longueur et sa largeur
void anvil
oui fin jai deja suivi des formation gratuite dans le codage html et css mais fa...
Dac
jolly mango
Bonjour, j'ai une question, je voulais savoir comment mettre ma barre de navigation au milieux, juste en dessous du sous-titre
2 min j'envoi mon code
gaunt yoke
Margin: auto devrait suffir sur ton élément
Sauf si tu as du flex au parent ou des position absolute
jolly mango
non il me semble que non
je vais tester
non ça ne fonctionne pas
header nav ul li
{
list-style: none;
background-color: #7289da;
height: 40px;
width: 100px;
margin: auto;
box-shadow: 4px 4px 8px #48bef4;
line-height: 40px ;
text-align: center;
}
header nav ul li:hover
{
box-shadow: 4px 4px 8px white;
}
li.liste
{
display: block;
}
a
{
text-decoration: none;
color: black;
}
li.liste:hover
{
background-color: white;
box-shadow: #48bef4;
text-shadow: 7px 7px 8px #48bef4;
}
li.liste
{
display:none;
}
header nav ul li:hover ul li
{
display: block;
}
summer tinsel
https://aprentissage.go.yj.fr/Index.html Possible d'avoir votre avis sur le design global avant que je continue ?
compact rain
Je peux juste dire qu’il rend hyper mal sur téléphone
gaunt yoke
Ah oui complètement cassé sur téléphone :-(
bronze crow
jai rajouter un trais gris autour de la div invitation comment je fait pour modifier sa longueur et sa largeur
bronze crow
ok merci
regarde moi je voudrai que le noir sois en 1px de large
mais quil sois plus pres en alrge que le centre
patent solstice
mais quil sois plus pres en alrge que le centre
J'ai pas tout compris ?
bronze crow
tu vois le trai noir
bah jaimerai plus le raproché de limage du mileu ainsi que lencadré du mileiu
bronze crow
Dans ce cas là, tu rétrécis ta div ?
oui voila c sa
patent solstice
Tu veux la rétrécir en hauteur du coup ?
bronze crow
et en largeur aussi
patent solstice
Tu peux utiliser la propriété display avec inline-block pour ajouter la div au contenu (si c'est ce que tu veux faire
bronze crow
genre je marque juste ca dans le css de la div
bronze crow
ok
livid zodiac
salut j'utiliser boostrap et j'aimerais mettre une icon de font-awesome dans un select option pouvez-vous m'aider ?
summer tinsel
@compact rain @gaunt yoke He oui ! Je sais je n'avais pas encore fait le responsive. Tenez :https://aprentissage.go.yj.fr/Index.html (est ce qu'il y a des choses qui vous génes ou des choses que vous trouvez bien ?)
summer tinsel
salut j'utiliser boostrap et j'aimerais mettre une icon de font-awesome dans un ...
déso j'ai pas commencé BS encore
patent solstice
salut j'utiliser boostrap et j'aimerais mettre une icon de font-awesome dans un ...
Qu'est ce qui bloque ?
lethal depot
Tu importes l'url font-awesome dans le head et tu place une balise <i> avec ton icone
green forum
Hello , j'avais une question quelqu'un aurait déjà ou si connaitrai concernant la création d'un MDT Police ( pour du roleplay )
odd heart
vous me conseillez quoi comme framework html ?
patent solstice
vous me conseillez quoi comme framework html ?
Généralement, pour du HTML pur, j'aime pas utiliser des frameworks, c'est t'es trop limité et je trouve ça chiant
Mais si tu en veux absolument un, Bootstrap est l'un des plus complet
odd heart
ah, car je suis en apprentissage et on m'a dit que j'aurais plus simple avec des frameworks
sinon je reste en html pure
patent solstice
Si tu cherches à apprendre le HTML / CSS, vaut mieux rester sur du basique pour commencer oui
odd heart
d'accord bah je reste sur du basique
jolly mango
Petite question, comment tu apprend le html/css de ton côté? (J'apprends aussi c'est juste par curiosité) @odd heart
odd heart
avec des cours et test en ligne gratuit et en mattant plein de tutos pour savoir comment certaines choses sont faites
et toi @jolly mango
jolly mango
et toi <@!667863968798474276>
La je faisais la formation openclasserooms et un peux de celle de grafikart
Et je regarde aussi des tutoriels en essayant de construire des mini projet pour m'entraîner
empty tartan
Je me demandais, quand je fais du responsive ça marche pour tout les écrans 16/9 car j'ai un 16/9 , mais comment faire pour que le responsive marche aussi pour les écrans 4/3
🤔
Car si on utilise le même code du responsive 16/9 sur du 4/3 on se retrouve sur une interface qui est aplati
patent solstice
Tu codes pas forcément pour un écran précis
Tu codes pour faire en sorte que tes blocs s'adaptent en fonction de l'écran
Par exemple 2 blocs qui sont placés sur l'horizontal, tu vas dire à partir de quelle largeur tu vas placer le bloc en dessous du premier (affichage mobile)
De cette manière, ça s'adapte à tous les écrans
empty tartan
Il faut que je test
Et d'après ça il y a plusieurs type de responsive
Mais la quelle choisir euuh
patent solstice
Le flex c'est niquel !
empty tartan
Et depuis tout ce temps il y a mieux que bootstrap ?
patent solstice
Après on part sur des framework JS genre React, vue, Angular, etc ..
empty tartan
Et tu me conseille quoi pour commencer ?
gaunt yoke
quel rapport avec bootstrap
empty tartan
quel rapport avec bootstrap
Le responsive
gaunt yoke
Tu en as pleins d’autres, Material, Bulma, Element, Semantic en vrai framework UI
et si veux un mega utils/helpers c’est tailWind, mais ça va être à toi de tout créer
empty tartan
et si veux un mega utils/helpers c’est tailWind, mais ça va être à toi de tout c...
ça veut dire quoi un mega utils/helpers
gaunt yoke
Tailwind c’est vraiment que des classes, pour tout
Donc toi avec ces classes tu crées tes éléments
empty tartan
Donc c'est pratique si on s'y connais pas trop en css
gaunt yoke
Le plus pratique ça reste le framework UI
Tailwind faut s’y connaître un peu quand même
empty tartan
Je vais tester Material
empty tartan
Bon c'est grave compliqué à prendre en main Material
Genre jsp ça demande de coder en SASS ou en mixins jsp quoi juste pour pouvoir changer des options par exemple la taille d'une image...
jolly mango
Hello, j'ai réussi a centraliser la barre de navigation, mais comment je fais pour la mettre a l'horizontale ?
jolly mango
```
header nav ul li
{
list-style: none;
background-color: #7289da;
...
son code css est la
gaunt yoke
https://material.io/components/image-lists/web#basic-usage
Non ça c’est pour modifier leur class à eux de bases mais tu peux juste les réécrire comme sur bootstrap
empty tartan
Non ça c’est pour modifier leur class à eux de bases mais tu peux juste les rééc...
ok
Moi je veux juste essayer de faire une interface inventaire ^^
jolly mango
^^
gaunt yoke
Hello, j'ai réussi a centraliser la barre de navigation, mais comment je fais po...
Tu peux display:flex sur ton ul par exemple
gaunt yoke
montre
jolly mango
gaunt yoke
Enlève le display: block de tes li
jolly mango
<header>
<nav>
<ul>
<li><a>Accueil</a>
<ul>
<li class="liste"><a href="compagnie.html" target="blank" title="Compagnie">Compagnie</a></li>
<li class="liste"><a href="localisation.html" target="blank" title="Localisation">Localisation</a></li>
</ul>
</li>
<li><a>Destination</a>
<ul>
<li class="liste"><a href="C:\Users\Enzo\OneDrive\Documents\Projet entrainement\DESTINATION\brésil.html" target="blank" title="bresil">Brésil</a></li>
<li class="liste"><a href="C:\Users\Enzo\OneDrive\Documents\Projet entrainement\DESTINATION\france.html" target="blank" title="France">France</a></li>
<li class="liste"><a href="C:\Users\Enzo\OneDrive\Documents\Projet entrainement\DESTINATION\japon.html" target="blank" title="Japon">Japon</a></li>
<li class="liste"><a href="C:\Users\Enzo\OneDrive\Documents\Projet entrainement\DESTINATION\allemagne.html" target="blank" title="Allemagne">Allemagne</a></li>
<li class="liste"><a href="C:\Users\Enzo\OneDrive\Documents\Projet entrainement\DESTINATION\espagne.html" target="blank" title="Espagne">Espagne</a></li>
</ul>
</li>
<li><a>Tarif</a>
<ul>
<li class="liste"><a href="">000</a></li>
<li class="liste"><a href="">000</a></li>
<li class="liste"><a href="">000</a></li>
<li class="liste"><a href="">000</a></li>
<li class="liste"><a href="">000</a></li>
</ul>
</li>
<li><a href="avis.html">Avis Client</a>
<ul>
</li>
</ul>
<li><a href="contacte.html">Contact</a>
</li>
<ul>
</ul>
</ul>
</nav>
</header>
CSS
header nav ul li
{
list-style: none;
background-color: #7289da;
height: 40px;
width: 100px;
margin: auto;
box-shadow: 4px 4px 8px #48bef4;
line-height: 40px ;
text-align: center;
}
ul
{
display: flex;
justify-content: center;
}
header nav ul li:hover
{
box-shadow: 4px 4px 8px white;
}
a
{
text-decoration: none;
color: black;
}
li.liste:hover
{
background-color: white;
box-shadow: #48bef4;
text-shadow: 7px 7px 8px #48bef4;
}
li.liste
{
display:none;
}
header nav ul li:hover ul li
{
display: block;
}
Tu préfères des screen ? Je me rend compte que c'est dur a lire comme ça
gaunt yoke
non t’inquiete 2monutes je change juste mon billet d’avion svp
jolly mango
Pas de soucis
gaunt yoke
tiens remplace par ca comme style
header nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
header nav ul li {
box-shadow: 4px 4px 8px #48bef4;
padding: 8px 16px;
background-color: #7289da;
}
header nav ul li:hover {
box-shadow: 4px 4px 8px white;
}
header nav ul li a {
text-decoration: none;
color: black;
}
essaye avec ce bout de code
jolly mango
je teste
gaunt yoke
évite sur tes li de foutre des tailles fixes comme tu as fais (height, width) car au moins avec le padding l'élément prendra la taille dont il a besoin
et il ne depassera jamais
et si tu veux une taille minimum, tu ajoutes juste min-width
gaunt yoke
ah oui tu as un sous-menu aussi, donc remet le code au moins de ton .liste my bad
je pensais pas que tu avais un dropdown
gaunt yoke
pour ton dropdown, avoir un truc splus smooth tu peux faire ça
jolly mango
gaunt yoke
.liste {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
transition: .3s linear;
pointer-events: none;
transform: translateY(-100%);
}
nav ul li:hover .liste {
pointer-events: auto;
opacity: 1;
transform: translateY(0);
}
et rajouter sur ton li de base un
poisition: relative
alors je peux pas tester donc c'est vraiment de tête y aura peut etre des modifs a faire
jolly mango
et rajouter sur ton li de base un
poisition: relative
c'est ok, j'ajoute du coup un li tout seul dans le css pour le position: relative;?
gaunt yoke
non tu l'as deja normalement
le nav ul li
header nav ul li {
box-shadow: 4px 4px 8px #48bef4;
padding: 8px 16px;
background-color: #7289da;
}
celui ci
jolly mango
yep c'est ajouté
gaunt yoke
good ?
jolly mango
```css
.liste {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
o...
j'ai ajouté ça en tout en dessous du css
gaunt yoke
oui
gaunt yoke
faut pas que tu laisses les anciens trucs, mais si tu veux envoie en mp
ce sera + simple que d'écrire à l'aveugle
jolly mango
j'envoi mon code css en mp?
gaunt yoke
le projet direct
jolly mango
ah ok attend
gaunt yoke
(réglé)
acoustic lion
bonjour, tout le monde j'ai un problème .. Vous voyez ce background j'aimerai qu'il s'adapte en fonction de la taille de l'écran ..
et je vous dis la vérité j'ai un peut du mal ..
patent solstice
Tu peux utiliser background-size: cover; pour que l'image s'adapte à l'écran
acoustic lion
@patent solstice bah c'est ce que j'ai fait mais sa ne s'applique pas ..
patent solstice
Fais voir ton code ?
acoustic lion
.bg-banner {
background-image: url(../img/valorant1.jpg) ;
height: 100vh;
position: relative;
background-size: cover;
}
et voici l'img
patent solstice
Enlève ton position
acoustic lion
nn sa bouge pas ^^
patent solstice
Un truc comme ça :
banner {
margin: 0;
padding: 0;
background: url(tonimage) no-repeat center fixed;
background-size: cover;
}
Bonjour j'aimerais savoir comment faire pour enlever la border qui entour le form quand on clique dessus
J'ai éssayer :clicked mais bon sa n'a pas marcher x)
patent solstice
J'ai éssayer :clicked mais bon sa n'a pas marcher x)
Tu peux essayer quelque chose du genre :
input:focus {
outline: none;
}```La propriété outline sur none est censé te l'enlever
tulip mural
Exact ! Merci beaucoup !
bronze crow
dites moi je voualais savoir comment je peux faire pour remonter un peu le menu quil y a tout en haut de quelsque pixelms
bronze crow
nan sa marche pas parceque le margin 0 il fait que sa les raproche
mais pas que sa les monte vers le haut
grand pasture
Attends
Tu veux pas coller le menu en haut ?
Tu peux montrer le code html de ton menu ? 🙂
bronze crow
grand pasture
.menu {
display: flex;
justify-content: center;
align-items: center;
}
perso, j'aurai fait un truc dans le genre
bronze crow
dans le manu jmet ca vsy jessaye
bronze crow
alors sa marche sa les fait remonté mais le bandeau se rétrécie et le logo de gauche se met au centre
gaunt yoke
Met du padding sur ton menu bg
bronze crow
et si jenleve le contenu de a.lienmenu sa raprche tout
gaunt yoke
Laisse le contenu de ton a
grand pasture
tu vires juste le margin-top
gaunt yoke
T’enlève juste le margin top qui est dedans
ou alors ton flex en Space-around et non center à toi de voir
bronze crow
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
je regarde apres
grand pasture
Ok 🙂
bronze crow
mais la je dois laisser ce que @grand pasture ma dit et je modifie quoi ??
grand pasture
Dans ton a.lienmenu, tu retires le "margin-top: 10px;"
et pour le reste, je te laisse jouer avec justify-content
bronze crow
ok jai vu a quoi ca sert justify-content mais jarrive pas a mettre lles liens du menu au centre et le logo a gauche
acoustic lion
Bonsoir, quelqu'un serait disponible pour une explication en vocal du positionnement plus approfondie .. Je ne parle pas des propriétes css mais plus tot du vrai positionnement ..
somber sluice
bonsoir quelqu'un peut m'aider svp nginx utilise une image qui n'est meme plus dans le FTP
patent solstice
bonsoir quelqu'un peut m'aider svp nginx utilise une image qui n'est meme plus d...
C'est-à-dire ?
somber sluice
bah enfaite j'ai supprimer une image dans les dossiers de mon site mais je peux encore la voire sur le site
patent solstice
Le cache probablement ?
thorn thicket
odd heart
Vous me co'seillez quoi comme webhoster
patent solstice
Vous me co'seillez quoi comme webhoster
Ca dépend ce que tu recherches comme service ?
OVH ont de bons prix
odd heart
Je peux ni payer avve ma carte ni avec mon Ppl sur ovh
patent solstice
Je peux ni payer avve ma carte ni avec mon Ppl sur ovh
Bah si pourquoi ? Quel est le soucis ?
Je paie toujours avec PayPal sur OVH
odd heart
oui mais mon ppl a pas de carte bleu dessus
patent solstice
Tu veux payer avec quoi ?
odd heart
paypal mais ma balance
patent solstice
paypal mais ma balance
Tu peux payer avec ton solde aussi
odd heart
non faut valider son paypal avec sa carte
patent solstice
Tu peux mettre ton offre directement sur le site de GCA 😇
lofty moon
merci
ocean cave
bonjour, pourquoi sa m'atterris ici, alors que devrait ce télécharger automatiquement ?
<li>mon <a href="image/logo.png" download="logo">logo</a></li>
( fessait pas gaffe au logo x) )
patent solstice
C'est le comportement normal car ton navigateur peut ouvrir les images, faut enregistrer sous ensuite
Pour que ça download vraiment, doit y avoir une manip à faire en +
thorn thicket
Dis comment on pourrait faire une scrollbar personnalisé ?
patent solstice
Dis comment on pourrait faire une scrollbar personnalisé ?
Regarde sur Internet, t'as plein de tuto 😇
patent solstice
bah si je demande ici <:kappaangry:647137606450151424>
thorn thicket
mecrhi
patent solstice
On t'expliquera pas mieux qu'un guide / tuto pour ça, j'ai tapé 2 mots sur google
ocean cave
Pour que ça download vraiment, doit y avoir une manip à faire en +
et est ce que tu sais qu'es qui faut ajouter je suis curieux x)
thorn thicket
https://www.digitalocean.com/community/tutorials/css-scrollbars-fr
C'est carré mrc
bg
va
gaunt yoke
et est ce que tu sais qu'es qui faut ajouter je suis curieux x)
download
Je sais c’est dingue….
ocean cave
😂 bah ce que j'ai mis
ocean cave
<li>mon <a href="image/logo.png" download="logo">logo</a></li>
``` j'ai fais çasa fait la même chose
gaunt yoke
Ça te l’ouvre justesans la dl ?
ocean cave
oui
patent solstice
A mon avis c'est géré par le navigateur ce genre de chose
Un PDF c'est pareil, si ton navigateur a un truc pour le lire, ça le DL pas, ça l'ouvre juste avec le reader
gaunt yoke
t’es bien sûr un navigateur récent )
ocean cave
c'est opera gx
gaunt yoke
ouais mais c’est censé être de l’HTML5 donc à voir si c’est supporté sur ce navigateur
ocean cave
sur chrome sa fait la même
gaunt yoke
Trop bizarre alors
Your link should have an ID to force download:
<a download='website.jpg' id='blablabla' href="https://tinyjpg.com/images/social/website.jpg">
Download
</a>
Essaye sa soluce pour voir
ocean cave
nope tjr pas mais on m'a dit utiliser des fonctions en js ou soit en backfrond x) mais je suis pas a la
gaunt yoke
bah de toute façon ce sera quand même le mieux sachant que tout les navigateurs ne le supporte pas cet attribut
ocean cave
bon bah je vais passer a un autre chapitre vu il y a que ça
patent solstice
Je viens de tester sur Opera GX, avec un PDF et un .jpg, ça fonctionne chez moi
patent solstice
c'est opera gx
J'ai fait un truc comme ça directement :
<a href={myFile} target="_blank" rel="noreferrer" download="CGU">
scenic fiber
qui s'est développé pour faire des modes de paiement ?
patent solstice
qui s'est développé pour faire des modes de paiement ?
Genre avec PayPal ?.
patent solstice
oui
Tu peux demander de l'aide dans le salon adéquat
Avec quelle techno ? Sûrement pas avec du HTML / css
Mais tu peux avec l'API PayPal
patent solstice
<@!178512804347772928>Toi tu code en qu'elle langage ?
Langage* 😏
Je touche un peu à tout
scenic fiber
Langage* 😏
Oui dsl
scenic fiber
Je touche un peu à tout
ok
limber raptor
qui s'est développé pour faire des modes de paiement ?
https://youtu.be/uC3hbrp-nQ0
Tiens pour toi
scenic fiber
https://youtu.be/uC3hbrp-nQ0
Tiens pour toi
Merci
limber raptor
👍
scenic fiber
Bonjour, une personne c'est comment faire des catégories ? (ex: Accueil, Contact, Magasin)
patent solstice
C'est-à-dire catégorie ?
scenic fiber
Par exemple cela
patent solstice
Un menu quoi ?
scenic fiber
Oui voila
patent solstice
T'as appris le HTML depuis hier ?
scenic fiber
j'ai commencé il y a 1 mois mais je fait pas tout les jours