html-css

[eternal ember]

Bonjour, tu as des balises meta qui permettes de faire cela une pour Discord et une autre utilisé pour Twitter Facebook enfin pour les réseaux

Voilà un exemple
Les balises avec og: marchent sur discord et l'autre avec twitter sur twitter et le reste c'est pour la recherche google avec la description.

[stiff osprey]

Bonjour tout le monde, je rentre bientôt en formation Web Mobile 400h .. je m'entraine déjà en HTML CSS j'ai une question, faut t'il crée plusieurs CSS pour différentes pages que nous disposons ?

[eternal ember]

Perso j'aime bien faire 1 ou 2 CSS par page après ça dépend de ce que je fais comme contenue mais c'est bien je pense de bien ranger son CSS pour bien se retrouver après...

[stiff osprey]

D'accord merci @eternal ember je vais essayer ça je crée un CV web pour le présenter lors de mon entretient lundi

comment je fait pour modifier l'autre page si "header" est le même ? je comprend pas

[eternal ember]

J'ai pas compris ce que tu veux dire.

Parce que le header tu peux le modifier mais si c'est le même tu peux réutiliser le même CSS.

[wicked marsh]

Tu peux créer des fichiers CSS qui seront utilisées par toutes les pages et d'autres qui seront spécifiques à chaques pages

Par exemple si ton header est le même sur toutes tes pages tu mettras ton CSS dans master.css qui sera référencer partout et si tu veux créer un élément spécifique à une page tu pourras le mettre dans element-x.css ou page-x.css qui sera référencer seulement là où tu l'utilise

[stiff osprey]

Merci @wicked marsh je crois comprendre je vais tester ça si j'y arrive je suis vraiment débutant :)

[wicked marsh]

Ça marche, si jamais t'as encore besoin d'aide tu peux me contacter en mp j'essayerais de t'aider :)

[honest salmon]

Je dirais même un css par composant

Header/Footer/Btn ect...

[dull crag]

Yo, y'a t-il des intégrateur Web, je ne sais pas si ça se dit mais je pense que oui, c'est pour quelqu'un d'extérieur à ce discord donc je ne fait pas de demande de dev, c'est rémunéré et tout et bien expliqué et il y'a des maquettes.

[wicked marsh]

Oui !

[dull crag]

Désoler, j'ai oublié de prévenir une personne m'a déjà contacté, merci quand même 😉

[old shadow]

enleve ton position static

Et tu mets position absolute ^^

Puis pour les width prévilige les %

[viscid copper]

Oki

Je vais essayer

[peak kettle]

Salut tout le monde, j'aurai besoin d'aide je voudrais que les dates soient sur la même ligne, les paragraphes aussi, c'est décaler à cause des titres qui n'ont pas le même nombre de caractères comment je pourrais faire ? Merci à vous.

[mild canyon]

Je pense que ce que tu peux faire c'est mettre tout les titre dans une meme div pareil pour le texte et pareil pour les dates

[peak kettle]

Ok merci de ta réponse je vais test ça 😄

[old shadow]

Alors ça marche

[wicked marsh]

Sinon tu peux spécifier la taille des divs pour qu'elles faces toutes la même taille et tu les mets en display: flex; ensuite tu spécifie la taille des divs des titres pour qu'elles aient aussi la même taille et les dates tu les mets en bas avec un align-self: end

[void anvil]

Bonjour à tous,

J'aimerai savoir si des personnes sont déjà passées par Udemy en faisant les cours payants pour se former ?
Et avoir suivi une formation avec un diplôme à la clé.
J'ai pas trop confiance aux avis trouvés sur google ...

[steep tartan]

Qq sais comment je peut mettre le lien href de la meme police decriture que "Nos helicoptere" svp

J'ai reussi a changé un truque deja

Mais cest tjr pas ce que je recherche

[steep tartan]

Nouveau probleme

Mon href marche pas

[wicked marsh]

il ne faut pas mettre de # devant ton lien href

le # sert juste à rediriger vers un élément avec un certain id dans la page

[steep tartan]

Je taime mec

[dusty copper]

Bonjour, petit problème j'utiliser font awesomes pour avoir mes icons seulement j'ai mis un icon dans un button et mon text se centre pas

          <ul>
            <li class="active"><a href="#"><i class="fa-regular fa-square-plus fa-2x"></i> test</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Get in Touch</a></li>
          </ul>

ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 5px 15px;
    opacity: 0.7;
    
}

li {
    display: flex;
    flex-direction: row;
    align-items: center;
    
}

.active{
    display: grid;
    padding: 8px 5px ;
    background-color: #008037;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

(C quand je change la taille de l'icon en mettant fa-2x)

[old shadow]

@dusty copper ta classe Active pourquoi mettre en Grid ?

Puis même ton Ul pourquoi flex direction : row ?

Renseigne toi sur les flexbox

[dusty sorrel]

Il faut respecter la convention de nommage

J'ai l'impression d'être la seul à la respecter mdr 😂 😭

[mild lintel]

Bonjour à tous, j'ai une petite question je sais comment faire un bouton qui dirige vers une autre page web, mais je ne sais pas si il est possible de faire diriger le bouton vers une hauteur de page (par exemple faire dérouler instantanément du bouton jusqu'au footer plus bas mais sur la même page), je ne sais pas si c'est clair !
Merci d'avance pour vos réponses ! 😁

[eternal ember]

Il suffit de rediriger vers l'id de ta balise div pour remonter ou voir même descendre.

[mild lintel]

Merci bcp pour ta réponse, je redirige avec href ou c'est une autre méthode dans ce cas la?

[eternal ember]

Il me semble que c'est href.

Et l'id ce précise avec un # au cas où.

[mild lintel]

Super ca fonctionne merci à toi

[eternal ember]

De rien ;)

[cunning terrace]

Quand je met en display flex mon main ça décale tout mon nav comment je peux faire ?

[spiral phoenix]

Salut, savez vous comment je peux faire un texte avec effet de glow animé genre en fade un peu

Il est fort près du texte et au plus il s’éloigne au plus la puissance du glow diminue

[brave jay]

j'ai pas bien compris la question ?

tu veux une animation avec la sourie ?

[spiral phoenix]

Non en gros un texte avec un effet néon dessus

[brave jay]

https://codepen.io/FelixRilling/pen/oNNLMb

[viscid copper]

Bon ceux qui ont besoin d’aide n’hésitez pas a m ping j ai tout le temps de repondre maintenant

[sage ether]

<!-- Cookie Consent by https://www.FreePrivacyPolicy.com -->
<script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/4.0.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"interstitial","consent_type":"implied","palette":"dark","language":"fr","page_load_consent_levels":["strictly-necessary","functionality","tracking","targeting"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"CosmPerf","open_preferences_center_selector":"#ouvrir_mes_préférences"});
});```

[zealous sleet]

Bonjour, je cherche un websmaster, n'hésitez pas à me contacter si en connaissez un ou vous en êtes un directement, merci !

[topaz sphinx]

oui ?

[peak kettle]

Salut tout le monde j'aurai besoin d'aide, j'aimerais augmenter la taille de la bordure en-dessous de chaque élément (accueil...) pour qu'elle prenne toute la largeur du header (du carré rouge), j'ai essayé pas mal de chose mais je bloque, merci 😄

[old shadow]

@peak kettle Salut envoie ton code css et html stp

Mais sinon essaie margin

[old shadow]

tu peux faire dans ton css une margin

[past marlin]

Pourquoi un margin ?

Padding a la limite

[past marlin]

Si je comprend bien ce que tu veux faire, il faudrait que entre chaque texte, tu mettes un div en width : 100%, et en pointillé

[peak kettle]

C'est bon j'ai réussi merci pour votre aide

[dusty sorrel]

il faut respecte la convention, les standards, la cémentique, et l'indentation

[mint ibex]

bonsoir

car il est tard

j'ai une div "container4" et j'aimerais quelle bouge en fonction de la class "box" et que donc elle ne puisse pas en sortir mais je n'y arrive pas

j'ai essayer plein de chose mais jamais réussie

https://github.com/Chikage04/scan tout le code est ici

[iron stone]

https://tsukasadh.github.io/restaurant/

Un avis ^^

Je l'ai pas adapté pour tel

Donc regarder plus pour ordi

[forest echo]

Pourtant le plus important c’est la version mobile 😉

[mental sorrel]

cherche un dev web j'ai un probléme avec mon site

[forest echo]

Y’a plein de personnes compétentes ici donc je pense que tu peux détailler ton problème avec des screens et ton code.

[mental sorrel]

sa me dis que j'ai pas les perm de créer un dosier dans le home de mon site web

[forest echo]

Je te conseille d’aller dans #configuration pour ça

[vital vapor]

j'ai une question comment je peux reduire la taille de quand je passe ma souris dessus car c'est légèrement gros mdr

[drifting crown]

Quelqu'un est calé en animation avec tailwind css ? J'essaye d'en créer une mais ya rien qui marche pourtant c'est le code proposé par tailwind

[small basalt]

T'as mis du padding à fond c'est normal, tu peux créer une sous-div qui contient le texte mais bon le padding que t'as mis c'est pas terrible mdr

[viscid copper]

Le responsive est un peu cassé

[iron stone]

Yep j'ai vu

Je sais pas comment faire

https://tsukasadh.github.io/restaurant-/

Voici la v2

[forest echo]

Ouais c’est toujours pas ça…

Je sais pas comment tu gères ça, mais tu peux faire comme ça :

@media screen and (min-width: 900px) {

Propriété css qui changent pour la version mobile

}

[mint ibex]

Est-ce que c'est dangereux d'héberger un site sur github ?

[dense notch]

ton site c'est un protfolio ?

[hexed wolf]

Si c'est du html+css, je vois pas ce qui pourrait t'arriver... En revanche, s'il y a d'autres langages, à voir ce que ça dit et comment fonctionne la sécu de GitHub..

[fervent nova]

GitHub est détenu par Microsoft donc je pense que niveau sécu c'est ok. Après tout dépends de tes besoins, tu as beaucoup de services de ce type qui sont souvent mieux la plupart du temps que cela soit en rapidité ou tout simplement car ils sont plus compatible avec ton langage, je vais prendre l'exemple de Vercel pour tout ce qui est React/Svelte/Vue (bref framework JS) tu as Heroku pour le PHP et Netlify pour quasiment tout. Pour ce qui est de la sécurité (Quand même la question) voilà des exemples

**Vercel **-> Meta / Uber / Auth0 (Service de loggin utilisé par des entreprises style AMD et Pfyser) / McDo / ...

Heroku -> Litchart / SHIFT

Netlify -> Riot Games / Unilever (Le U que tu vois sur tout ce que tu achètes au supermarché) / Etherum

Pour ce qui est de GitHub osef ils ont pas besoin 😉
En espérant avoir aidé !

[forest echo]

Je crois que tu peux masquer des fichiers sur github en changeant leurs extensions mais je sais pas ce que c’est

[mint ibex]

Merci a vs

[floral shard]

Hello !

J'ai un petit pb de css, en gros, j'ai ma div .foo qui est en overflow scroll, une div .bar qui contient du style et une autre div baz qui est en absolute et qui sors de la div .foo
Vue que mon grand parent est en overflow scroll (ce qui est obligatoire dans mon cas) comment faire pour que ma div .baz ne soit pas trigger par le overflow de .foo ?

e.g:

<div class="foo" style="overflow-y: scroll;">
  <div class="bar">
    <div class="baz" style="position: absolute; top: -150px; left: -150px;">

    </div>
  </div>
</div>

[cunning terrace]

Je n'arrive pas a faire de responsive, quelqu'un pourais m'aider ?

[small basalt]

Quel est le problème ?

[cunning terrace]

déjà je ne sais pas si mon css et bon et puis même je n’arrive pas à organiser les choses

est*

[small basalt]

Ton code veut dire qu'en dessous de 667px de hauteur et 375px de large, ton header sera en colonne, ce qui est le cas.

Si tu débutes je te conseille de ne pas utiliser à la fois hauteur et largeur, juste largeur ça devrait suffir. Je te conseillerais aussi de faire ton site en mobile first, c'est à dire d'abord de le coder en format vertical et puis mettre au fur et à mesure des media queries min-width pour les écrans plus grands. Mais bon à ce que je vois tu as déjà beaucoup de lignes de code donc ça serait le bazar de changer maintenant

[cunning terrace]

oui je vois

mais sinon les medias queries fonctionne comme tu css normal ?

[small basalt]

oui

[cunning terrace]

d’accord merci beaucoup

[void anvil]

quelqu'un pourrait m'expliquer FlexBox

J'ai du mal à tout comprendre

[wicked marsh]

Perso c'est avec ce site que j'ai appris
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Je pense pas être capable de mieux expliquer

[void anvil]

https://flexbox.help/ cela pourra peut être t'aider à y voir plus clair

[hybrid crown]

impossible de mettre une image dans mon header

[past marlin]

Met le chemin vers l'image entre guillemets

[willow pollen]

Voici 2 options pour ton background

[hybrid crown]

je vous remercie tout les 2

[jaunty estuary]

https://codepen.io/suez/pen/rLGvxr

bonjour, j'aimerais faire une implémention de ce style pour une galery d'image mais je ne connais pas le scss et je sais pas si c'est obligatoire

[fervent nova]

Hey hey ! Petite question, vous êtes plus Tailwind, Sass ou Scss ?

[tame star]

c'est pas la meme chose Tailwind et Scss et SASS || Scss c'est la meme lib

c'est pas vraiment comparable

apres si la personne veut quelque chose "d'innovant" on le fait a la main. Sinon les boîtes on tendance a pencher vers du Tailwind en ce moment (la stack tailwind react express / fastify)

[fervent nova]

ok ok

[tame star]

quand je dit react je regroupe les lib qui charge coter serveur comme nextJs

[fervent nova]

techniquement nextjs c'est du react

[tame star]

oui mais je prefere quand meme preciser, car sur linkedin tu tombe sur peu d'offre Vuejs mais plus sur du NuxtJs

d'ailleurs je me demande s'il y a des boîte qui cherche des devs stylus 🤔

[fervent nova]

sûrement

[copper warren]

Si tu cherches du nuxt tu cherches du vue. En soit c'est les même offres

[tame star]

oui mais si tu cherche du vue tu ne cherche pas forcement du nuxt (meme si c'est globalement la meme chose)

[copper warren]

C'est complètement si tu fais de vue de pas chercher du nuxt vu que c'est littéralement Vue mais en version simplifié genre pas de routing des modules fait pour l'auth etc...

[tame star]

je suis d'accord

[wicked marsh]

T'as écris width: 800x et pas width: 800px

[void anvil]

Bonjour, comment puis-je faire un bouton rond avec une icône font awesone ?

[willow pollen]

Avec un " border-radius: 50% " , il faut que le padding dans le bouton soit bien identique autour de l'icone

[void anvil]

Merci, et comment je mets une icône font awesone ?

[willow pollen]

Soit tu télécharge l'icone,
ou sinon tu peux utiliser le code HTML comme ceci, mais il faut alors ajouter le "link href" dans le head de ton fichier html

Je suis en plein apprentissage du CSS aussi, donc si quelqu'un voit que je dit de la "merde", ne pas hésiter a me corriger 👍

[brisk forum]

quand vous partagé votre code svp partagé le en text pas en screen c'est plus propre Svp```html
<button>
<i class="fab fa-twitter"></i>
</button>
<button>
<i class="fab fa-facebook-f"></i>
</button>

[errant tinsel]

Hello, petit soucis avec mon site. La popup au dessus est sensée rester la et le reste derrière doit défiler. Sur pc aucun problème, sur Android j'ai pas vérifié mais sur iPhone, on dirait que la barre de recherche est comme en absolute donc quand j'arrive au bout de ma liste, ça scroll encore jusqu'a faire disparaitre la popup

C'est pas super clair dit comme ça

[brisk forum]

Hello @errant tinsel peut on avoir votre code css ?

[void anvil]

Merci de votre aide !

[errant tinsel]

J’utilise TailwindCSS

[dusty sorrel]

il faut néanmoins respecter la convention de nommage (WW3C), la sémentique, l'indentation, les standards, et la TGO (Théorie général des organisation)

[brisk forum]

hey re autre problèlme dire que aujourd'hui n'es pas mon jour vous pouvez le voir ici dans mes sous menu il y a un problème voici le code css https://bin.readthedocs.fr/rturee.css

[willow pollen]

Tu parles du sous-menu qui passe derrière ton titre ?
Si c'est ca, je pense qu'il faut mettre un "z-index: 1" a ton sous-menu

[brisk forum]

j'ai essayé mais sa fait nimporte quoi

[mighty vault]

Bonjour à tous 🤙,

Je viens vers vous, pas pour un problème, mais j'ai besoin d'être éclairé.
J'ai terminé mes études, et je finis d'ici quelques semaines mon alternance, je suis dans à la recherche d'un CDI, et j'ai vu beaucoup d'annonces pour du fullstack. Je me débrouille correctement en backend, et j'ai les bases du frontend, mais j'ai énormément de lacune sur cette partie.

Je pense ne connaître qu'une petite partie, et le responsive me terrifie complètement.

Est-ce que vous auriez de bonnes formations à conseiller ou des sources, des liens que je pourrais aller voir pour m'améliorer sur cette partie ?

Merci beaucoup pour votre aide à tous ! 🤩

[forest echo]

Moi aussi au début j’avais un peu peur du responsive mais ce lien m’a vraiment aidé

Flex box : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid : https://css-tricks.com/snippets/css/complete-guide-grid/

[void anvil]

Yop ! Tu n'as pas à être terrifié par le responsive, c'est pas forcément la partie la plus amusante je te l'accorde mais ce n'est en vérité pas si compliqué, il y a effectivement les liens de @forest echo qui vont t'aider mais il va aussi falloir te renseigner sur les media queries qui sont extrêmement importants et pas si compliqués qu'ils n'y paraissent. Ils te permettent en gros de définir ce qui se passe si jamais tu es à partir ou jusqu'à telle ou telle résolution alors ça fait le code présent dans ton/tes media. Ils ont d'autres fonctionnalités en css mais pour l'instant intéresses-toi d'abord à ça :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries
Si jamais tu as des questions n'hésite pas à me ping et bonne chance à toi !

[raw ice]

Bonjour

J'ai un petit site avec une page .html, pour le moment sans code serveur. Quelqu'un a développé un prototype d'écran de connexion (à nouveau sans code serveur) séparément, avec son propre .html. L'écran de connexion est un cadre contenant des champs et un bouton. Il y a donc un .html pour le site principal et un .html pour l'écran de connexion.
Lorsque je clique sur le lien "connexion", je voudrais que le cadre de l'écran de connexion s'affiche à l'intérieur du site principal, par-dessus le contenu, au lieu que le lien mène vers la page de connexion séparée.

[void anvil]

Salut ! Il faut que tu intègres directement ton code de connexion dans ton code principal, après pour cela il va falloir que tu définisses l'action permettant d'afficher ce menu (via un button par exemple que tu déclenches en javascript ou si tu préfères avec du css) et après il faut que tu mettes ton menu de connexion dans une position fixed et le center pour qu'il ne bouge plus. Si tu as encore besoin d'aide n'hésite pas à me ping. Bonne chance !

[raw ice]

Bonjour @void anvil voici le ping d'aide

J'e ne c'est pas faire vraiment de site web le message vient d'une personne qui a voulue m'aider sauve que la personne devais aller dormir. J'ai rien compris de ce que tu a dit, tu disponible vocal pour m'expliquer et que je puisse le faire avec toi ?

[void anvil]

Alors je suis désolé mais je ne suis pas vraiment disponnible en vocal pour l'instant, est-ce que ton code est public ou bien il est privé ?

[raw ice]

Privé

Public c'est que tous le monde a accès ?

[void anvil]

Non c'est juste savoir si tu souhaites garder absolument ton code privé ou si tu es d'accord de me le partager afin que je t'aides.

[raw ice]

Je veux bien te le partager du moment que tu le donne a personne et que a la fin tu ne le garde pas

[raw ice]

C'est bon pour toi ?

[void anvil]

Ouaip, juste je fins quelque chose et je suis à toi 😉

[raw ice]

Ok

[void anvil]

Je te laisse m'envoyer en mp 🙂

[raw ice]

Désolé j’avais pas vue ton message

[void anvil]

Pas de soucis !

[raw ice]

Bonjour, Une personne serais m'aider a relier mon site a un phpMyAdmin et faire un sorte que la création d'un compte fonctionne correctement.

[void anvil]

Si c'est dans le système redirige toi plutôt vers #php.

[raw ice]

A oui merci

[raw ice]

J'ai réussis pour le menu de connexion

[void anvil]

Super ! Bien joué à toi 😉

[dusty copper]

Salut j'ai mis un border sur mes bouton en hover le probleme est lorsque je passe ma souris dessus les autres boutons ce deplace un peu c possible de regler sa ?

[void anvil]

Bonjour, comment puis-je faire des boutons qui quand tu clique du texte apparaît et quand tu clique sur un autre bouton le texte disparaît puis un nouveau texte arrive ? Je ne sais pas si j'ai était très clair.

[void anvil]

Salut ! Tu peux utiliser un box-shadow au lieu de border, c'est la méthode que j'utilise personnellement :

.ton-element:hover {
  box-shadow: 0px 0px 0px 2px red inset;
}

Tu as juste à modifier la 4ème valeur 2px et la couleur qui est ici red.
Si tu as d'autres questions n'hésite pas !

[void anvil]

Salut ! En gros voici le principe (ce n'est pas la seule méthode et pas forcément la plus propre mais ça fonctionne) :

<button type="button" id="showFirstText" onclick="$('#firstText').css('display', 'block'); $('#secondText').css('display', 'none');">First Text</button>
<button type="button" id="showSecondText" onclick="$('#firstText').css('display', 'none'); $('#secondText').css('display', 'block');">Second Text</button>

<p id="firstText" style="color: red; display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p id="secondText" style="color: green; display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

Si tu n'as pas compris ou si jamais tu as des questions n'hésite pas !

[void anvil]

Merci de ton aide, je vais tester ça :)

[cerulean vortex]

bonjour, quand vous faites un site internet, vous l'hébergez où ? je cherche un maximum de renseignement

[void anvil]

On l'heberge sur un hebergeur Web, si tu veux je peux te donner des liens d'hebergeur pour te donner une idée.

Un hebergeur Web utilise un panel (comme Cpanel ou Plesk pour les plus connus)

Pour information

Après je ne suis pas trop un pro donc je ne sais pas tout et peut être que je dis des bêtises

[strange quest]

Il y a quelques hébergeurs gratuit de qualité si tu veux juste faire des tests, t'entrainer etc. (000webhost, hostinger etc.). Tout dépends ce que tu veux héberger comme site

Après il y a des hébergeurs payants qui s'adapte à ce que tu as besoin et des technologies que tu utilisent pour créer ton site. Il faut d'abord savoir à quoi sert ton site, si c'est un site vitrine, marchand.., la cible etc. Puis après tu as la possibilité de louer un nom de domaine (.fr, .com etc) pour rendre ton site plus accessible.

[median stag]

hostinger n'est pas gratuit il me semble

[cerulean vortex]

le site que je voudrais faire serait un site vitrine avec une market place, et d'autres onglets dessus pour d'autres infos, je verrais mais c'est mon idée de base

après si il faut mettre le prix dedans, j'ai vu des tarifs entre 10€ et 35€ sur OVH

[void anvil]

Oui après OVH tu t'assures de la qualité, de mon côté, mon nom de domaine + l'hébergement ça me coûte 40€ annuel ce qui est très raisonnable.

[void anvil]

Personnellement je connais bie moins cher

[cerulean vortex]

oui en effet

[void anvil]

C'est vrai que c'est vraiment très raisonnable 👌🏽

Je vais t'envoyer mon offre pour que tu puisses y jeter un coup d'œil.

Ça existe des nom de domaine à vie ?

[void anvil]

Non

Ah ok je croyais que ça existait

[strange quest]

Oui c'est PlanetHoster* WorldLite qui est gratuit 😉 J'utilise 000webhost perso.

[void anvil]

https://www.ovhcloud.com/fr/web-hosting/ → moi j'ai l'offre Hébergement perso

[strange quest]

Il y a LWS aussi niveau qualité prix qui est pas mal je trouve

[median stag]

en gratuit moi aussi :d

[void anvil]

Connais tu des sites où on achète un nom de domaine ?

[void anvil]

OVH

[median stag]

hostinger en payant jaime bien

[void anvil]

Mais il y en a plein.

[void anvil]

Et c'est cher ?

[cerulean vortex]

d'accord, c'est la page où j'était mais c'est quoi la diférence entre l'abonnement perso et pro ?

[strange quest]

Tous les hébergeurs proposent de louer un nom de domaine

[void anvil]

C'est relatif à ce que tu souhaites, c'est pas les mêmes prix.

[cerulean vortex]

ah oui c'est bon, le pro ya beaucoup plus de place

[strange quest]

OVH c'est l'un des meilleurs mais bon il faut mettre le prix, c'est toujours pareil

[void anvil]

Pro est plus cher 😂 et plus performant mais très honnêtement le perso est très bien si tu veux un portfolio avec quelques sites en plus.

[void anvil]

Oui après moi je paye 5€ environ par an.

Après ça dépend moi je l'ai en FR mais quand c'est en COM c'est plus cher etc....

Il y a pleins de critères qui rentrent en compte.

[strange quest]

Un nom de domaine, c'est pas cher, c'est l'hébergement qui coûte le plus.

[void anvil]

Ca c'est sûr 😄

[strange quest]

C'est pour ça que mieux vaut savoir ce que tu veux avant de prendre un abonnement, ça ne sert à rien de prendre un serveur dédié pour héberger un site vitrine par exemple :p

[void anvil]

Exactement.

Tu peux commencer par les offres gratuites et quand tu sauras, évoluer sur les payantes.

[cerulean vortex]

donc pour moi ce serais : site vitrine abo perso, et si je met la market place faudrais l'abonnement pro

[strange quest]

De plus le nom de domaine, tu peux l'utiliser sur des hébergeurs gratuit, il n'est pas relier à l'hébergement, tu peux le transférer d'un hébergeur à l'autre

[void anvil]

Tout dépend de ton market.

[cerulean vortex]

je sais pas du tout combien de personnes vont aller sur le site

[void anvil]

Ce serait quoi ?

Quel type de market ?

[cerulean vortex]

pour une micro entreprise, création artisanales

[void anvil]

Ah oui donc le pro serait préférable du coup.

Mais bon c'est un cout quand même.

[strange quest]

Ton site, tu le créer toi même ou tu utiliserai un CMS comme prestashop, Woocommerce etc. ?

[cerulean vortex]

ca coûterais 7€ par mois

[cerulean vortex]

je pensais voir pour le faire moi même, on est plus libre dans la création

après j'avais vu wordpress mais je sais pas ce que ca vaut

[strange quest]

Bin si tu as les connaissances, oui puis ce serait plus sécurisé

[void anvil]

Ouai par contre un market il faut que tu sois bien caller pour ne pas faire de failles exploitables.

[cerulean vortex]

oui ya ca aussi à prendre en compte

[strange quest]

le plus connu ça reste Prestashop, et il y a des offres chez les hébergeurs qui te proposent un site presta (ou autres)

[void anvil]

Après tu peux te rediriger vers Wordpress aussi.

[strange quest]

La différence des offres sont par rapport à la base de donnée (nombre de produits max.), tu as beaucoup de réf dans ta micro entreprise?

[cerulean vortex]

de réf, de produits en vente ?

[strange quest]

oui

Ou c'est des services?

[cerulean vortex]

je sais pas du tout

c'est des créations artisanales

[strange quest]

Et tu veux les vendre via ta page web donc? du coup tu devrais savoir combien tu en as à peu près? 50, 500, 1000, 10'000...

Tu as déjà un site vitrine ?

[cerulean vortex]

peut-être partir sur 30 produits différent, c'est pas directement mon entreprise mais j'aide pour la création du site web

pour le moment je prend juste des renseignements

[strange quest]

En résumé, il faut que tu sache exactement ce que tu mettras sur ton site, la technologie utilisée, les pages etc. Le plus simple si tu n'as pas plus de connaissance que ça c'est de partir sur un CMS comme Wordpress, Prestashop etc. mais dans tout les cas, il faut quand même savoir ce que tu mets dedans pour que ce soit adapté et que tu évite de devoir tout recommencer car tu n'avais pas prévu certaines choses.

[cerulean vortex]

d'accord

danone et decathlon sont passé par prestashop, à vu d'oeil le logiciel à l'air puissant

[strange quest]

C'est l'un des plus connus et utilisés et c'est Français (cocorico :p)

Sinon il y a Wordpress avec l'extension WooCommerce, Shopify et Wix. Je n'en ai jamais utilisé mais ça à fait ses preuves. Bien sûr ça ne vaut pas un site créé par un développeur mais quand on en est pas un, ça dépanne bien 😉

[cerulean vortex]

d'acc je vais me pencher vers prestashop, merci beaucoup à vous !

donc soit je créer moi même le site et j'héberge sur OVH en pro
soit je passe par prestashop

[strange quest]

C'est ça et le temps consacré n'est pas le même

[cerulean vortex]

oui jme doute, merci à toi

[dusty copper]

Bonjour c possible de mettre une image en background et par dessus un dégrade de couleur ?

Si oui comment faire svp

[kind ermine]

.lineaire-simple {
  background: linear-gradient(blue, pink);
}

div {
  width: 120px;
  height: 120px;
}

[median stag]

hey !
je ne comprends pas pourquoi mon media query ne fonctionne pas, j'ai essayé sur plusieurs cas, mais ça ne fonctionne pas .. la pièce jointe est un bref extrait 🙂

[strange quest]

background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531);

[dusty copper]

Merci

[strange quest]

Si tu inverse l'url avec linear-gradient, tu peux faire passer le gradient derrière l'image et vis versa. Tu peux aussi rajouter plusieurs gradient. Moi je me sers de ça pour faire un filtre en dégradé sur une image en baissant l'opacité (utilisation de la couleur en RGBA)

[strange quest]

Quand je fais du media query, j'utilise la console du navigateur pour voir à quel moment il est detecté et ça me permet de voir d'où vient le problème.
Tu utilise un framework comme bootstrap peut être? car dans ce cas il faut mettre un !important

C'est peut être con mais est-ce que ça prends quand même en compte si tu mets un espace entre max-with et ":" ?? Je suis pointilleux sur le code :p

[median stag]

c'est à dire avec la console?

[strange quest]

Si tu veux je peux te montrer en vocal car expliquer à l'écrit c'est compliqué (je suis en bas du discord, dans un vocal)

[median stag]

je règle des pb sur mon code et jrv :d

[ancient jackal]

Yo, vous utiliser quoi comme logiciel pour codé ?

[void anvil]

Visual Studio Code

[strange quest]

Visual Studio Code

Mais tu peux coder avec un bloc-note si tu veux 😉

[ancient jackal]

Le quel celui de base ou le professionnel ou l'entreprise car moi j'utilise le visual studio entreprise

[ancient jackal]

Le mec qui code avec ça je serai impressionner si il fait un site ultra vie

Bie n

[strange quest]

Visual Studio Code c'est pour "particulier", Visual Code c'est le Pro ou entreprise (grosso modo)

[ancient jackal]

Oe voila

Mais le pro est gratuit et a des outil en plus

[strange quest]

Bin le code ça reste du texte, c'est juste beaucoup plus long et aucune aide

Oui mais il est plus lourd et te demande plus de ressource, mieux vaut avoir au moins 16go de RAM

Tout dépend ce que tu en fait, c'est toujours pareil !

[ancient jackal]

En vrai ça va il fonctionne sur un PC avec des confit de base

[ancient jackal]

Oe c'est ça le truc moi je fait du fronted et du c++ donc en vrai ça me sert bien car je peux sauvegarde des code prêtait pour simplifier le plus possible

[strange quest]

Bin oui il n'y a pas de mal, faut bosser sur un logiciel qui nous plaît avant tout, s'ils existent et qu'ils sont si populaire ce n'est pas pour rien

[ancient jackal]

Oe ta raison

[cerulean vortex]

VSC le meilleur selon moi, en tout cas j'utiliserai que lui, notepad ++ c'est un bloc note, et un peu trop scolaire, pas assez pro

[forest echo]

Enfaite ce qui me fait rire c’est que à l’école tu utilises notepad ++ mais :

De un, c’est pas du tout intuitif, c’est une galère à utiliser

De deux, y’a même pas le pré-remplissage donc ça ne te fait même pas découvrir de nouveaux trucs. Tu passes plus de temps à écrire ton code qu’à apprendre de nouveau truc

De trois, tu te brûle les yeux avec le mode blanc par défaut 💀.

Pour résumer tu perds plus de temps à galérer à utiliser le bordel qu’à coder.

||Oui j’ai la rage contre ce logiciel||

[kind ermine]

vsc > all

[forest echo]

Oui

[cerulean vortex]

Tout est dit 👍

Le pire que j'ai vu c'est le prof qui te dit d'installer powershell alors que ya le CMD windows, et sur les PC il est carrément désactiver, c'est pareil pas besoin de mettre ton powershell qui prend de la place pour rien

[void anvil]

Tellement ça

[leaden cloud]

Salut à tous, j’ai une petite question

Je travaille actuellement sur un blog interactif en ligne, et je me demandais comment je pourrais sécuriser contre les injections une zone de texte avec la possibilité de mettre en forme ce texte avec l’aide d’un éditeur de texte html ?

[void anvil]

Bonjour, pouvez vous me dire comment je fais pour mettre les boutons "Grades" et "Collections" en dessous des boutons avec le fonds bleu ?

Code html :

Lien: https://paste.gg/p/anonymous/98bf3b22fcfb424bbfc721fe400bc82f (le code est trop long)

Code Store.css :

.buttons-store-grade{
  text-align: left;
}
.buttons-store-collection{
  text-align: center;
}
.buttons-store-money{
  text-align: right;
}

Code buttons.css :

  
  .buttons-nav{
    margin-top: 1%;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .buttons-nav a{
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    text-decoration: none;
    color: #fff;
    border-radius: 30%;
    margin-right: 10px;
    transition: .5s;
  }
  .buttons-nav a:hover{
    border-radius: 50%;
  }
  .buttons-nav i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
  }
  .home{background: #0099f8;}
  .store{background: #0099f8;}
  .collection{background: #0099f8;}
  .earn{background: #0099f8;}
  .infos{background: #0099f8;}

[leaden cloud]

En dessous de quels boutons ?

[void anvil]

Les boutons avec le fond bleu (les 5 boutons avec des icônes font awesone)

[leaden cloud]

Moi j’aurais fait un display grid pour les boutons font bleus, et ajouter tes boutons dans le grid avec un grid-template-row, et tu places tes boutons dans la deuxième row avec « grid-row: span 2 » par exemple

Et les autres boutons grid-row: span 1

https://developer.mozilla.org/fr/docs/Web/CSS/grid-row

[leaden cloud]

(je me permet de remonter mon problème)

[knotty scaffold]

t'utilise un WYSIWYG ?

[leaden cloud]

Ouais c’est ça

[knotty scaffold]

Le plus simple c'est de vérif si dans tous les texte tu trouve une balise script. Si oui return false

[leaden cloud]

D’accord merci, et par exemple si il écrit « ;DROP DATABASE; »

Comment je peux contrer ça ?

[knotty scaffold]

verif aussi les SELECT, DROP ...

[leaden cloud]

Ok ça marche, je dois faire du cas par cas du coup

[knotty scaffold]

cas par cas ? tu veux dire quoi ?

[leaden cloud]

Je dois vérifier toutes les commandes SQL dans mon champs en gros ?

[knotty scaffold]

pas tous, mais celle qui peuvent faire des dégâts oui

[leaden cloud]

Ok ça marche merci

[foggy bolt]

Bonsoir à tous, j'ai eu récemment un soucis avec ma boutique qui fait que le joueurs paye mais ne reçoit rien. Voici l'erreur (Merci d'avance pour ceux qui vont m'aider ) :

[Cosmo ~ DANGER] (HTTP) Request failed with reason: unsuccessful
[Cosmo ~ DANGER] Endpoint: https://pokemaniaboutique.mtxserv.com/api/game/store/pending
[Cosmo ~ DANGER] Failed to fetch pending from store, packages will not be delivered. Details can be found above!

[forest echo]

Salut, ton problème ne vient pas du front de ton site mais du back-end. Je t’invite donc à poster ton problème dans #php et #configuration. 👌

@foggy bolt

Passe surtout par le support de ton hébergeur ou sur leur Discord, c’est eux les mieux placés.

[indigo basin]

Salut j'ai un petit problème quand je met une image elle ne s'affiche pas j'ai bien fait comme il faut

Ah ok mrc j'avais essayer

At faut mettre l'URL d'abord ou après le chemin d'accès ?

[forest echo]

Tu es sur quel éditeur?

[indigo basin]

Trebedit

Ah

[forest echo]

Moi non plus

Si tu étais sur VSC je t’aurais dit de faire clique droit « copier le chemin d’accès relatif »

Oui

[indigo basin]

C payant VSC ?

[forest echo]

Non

[indigo basin]

Oe j'vais essayer

Nn ça marche pas

[indigo basin]

... de cant ou

Devant

[indigo basin]

Oui c'est ce que j'ai fait

Bah ça marche pas

Ok at

Sa fait sa

[indigo basin]

Ok

Mais je met la ?

[leaden cloud]

Va dans outils de développement et dans console, regarde ce qu’il t’affiche comme erreur

[indigo basin]

Heu

[kind ermine]

pourquoi tu mets plein de titre dans ton code ?

[indigo basin]

Quel titres ?

[leaden cloud]

Si c’est une erreur 404, c’est que le chemin d’accès n’est pas bon, si tu as des difficultés avec les chemins d’accès je t’invite à aller faire un tour sur internet pour apprendre à naviguer entre les fichiers

[kind ermine]

h6 h4

tout est en h4

mets les en div ou paragraphes c est plus logique

[leaden cloud]

Oui, le css existe pas pour rien 😅

[leaden cloud]

Je te conseille de revoir tes bases en html/css car la structure de ta page n’est pas bonne

C’est un mauvais chemin à prendre si tu veux continuer à faire du développement web

[kind ermine]

les fameux dev roblox

[indigo basin]

Oui ça fait longtemps que j'ai pas codé

[indigo basin]

Nn c pour un ami

[leaden cloud]

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

[kind ermine]

ensuite 3 eme ligne ton <br> tu le mets dans un bloc ( div paragraphe titre ) pas au pif au milieux

[leaden cloud]

@indigo basin passe un coup sur cette formation (je crois qu’elle est gratuite) 😁

[kind ermine]

et pour l image c est une baniere orpheline ducoup t a oublier un \ c est une convention

[indigo basin]

Oui

[indigo basin]

T'avais rejoin mon serv XD

[leaden cloud]

Ouais miss click x)

[indigo basin]

Huh pk ce nom mdr

Mdr

[leaden cloud]

Mdr

[kind ermine]

sans vouloir etre mechant t a deja fait un vrai bot discord ?

[indigo basin]

Nn

[leaden cloud]

A mon avis je pense pas mdr si déjà il galère sur du html, je n’imagine pas sur un vrai langage de programmation avec des coroutines et autres

[indigo basin]

Nn j'utilise autre choses 🤔

[leaden cloud]

_ca devient hors sujet go continuer sur #discussion-dev _

[indigo basin]

Oui

[brisk forum]

ta mis ton image dans le meme fichié que le reste ?

[indigo basin]

Oui

[brisk forum]

c'est quoi le nom de l'image ?

[brisk forum]

pour quoi tu a mis le chemain d'accer complet le nom image.png suffit

partaage ton code en text se sera mieux

[indigo basin]

On m'as dit sa

[brisk forum]

abon ?

envoi ton code en text stp

[brisk forum]

car c'est nouveu sa j'ai jamais entendu parler de sa

regarde @indigo basin

[indigo basin]

O

[brisk forum]

ici tu prend que le nom de l'image dans ton cas polish.....png

et conseille evite les espace dans les nom de tes fichié et image met des - a la place

[willow pollen]

Tout dépend où se trouve ton image,
si elle est dans le même dossier que ton fichier html, alors oui tu as juste a mettre le nom direct :
src="image.png"
mais si elle se trouve dans un dossier img par exemple, alors il faudra donner le chemin du fichier :
src="./img/image.png"

[kind ermine]

et si elle est dans un dossier parents
src="…/image.png"

[brisk forum]

je déconseille d'utiliser les chemain sa risque des bug inutille

[fading heron]

En "robux" je rigole depuis ce matin🤣 🤣 🤣 🤣 🤣 😭 😭

[kind ermine]

il en faut pas bcp

[brisk forum]

ba apres c'est une methode de dile XD

[kind ermine]

et les chemins ?

[fading heron]

Stp arrête 😭

[kind ermine]

alors utilise les chemins sa permet de ranger ses fichiers si t a un petits site oui trkl t embete pas par contre si tu a bcp d image tu vas vouloir les rangers dans des dossiers pour t y retrouver plus facilement

[kind ermine]

le pauvre genre c est juste un enfant qui veut dev on a tous commence quelque part

[fading heron]

dans sous dossiers images on on fait nomdossier/nom images.jpg

[brisk forum]

moi je trouve c'est une bonne idéé des robux contre un bot discord XD

[fading heron]

Younous tu viens de commencer une formation ?

[brisk forum]

formation de ?

[fading heron]

Dev

[brisk forum]

non

[fading heron]

Att

Je comprend r a la discussion

Desolé

J'ai confondu

[brisk forum]

XD tkt sa arrive

[fading heron]

😂

Tu me conseille un projet pour s'améliorer

?

[brisk forum]

mm un portfolio meilleur moyen de s'ameliorer

moi pour commencer j'avais fait un site d'emulateur

il a pas eu trop de visite mais c'est pas se qui compte

[willow pollen]

Regarde sur des sites comme : "frontendmentor" ou "devchallenges" tu peux trouver des exemples sympa a faire ou aller voir dans des portfolio et refaire certain projet

[fading heron]

OK merci

[frosty stream]

Bonsoir, je suis débutant dans l'html et j'aimerais déplacer les truc la a la même hauteur de l'ecriture dev a droite si quelqu'un sait m'aider svp

[cerulean vortex]

[small basalt]

+ tu mets ton dev et ta nav dans une div que tu mets en display: flex;

[frosty stream]

Merci

[forest echo]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ le meilleur tuto ever

[brisk forum]

pour t'entrainer avec flexbox https://flexboxfroggy.com/

[plucky coral]

Bonjour à tous j'ai du mal avec le html/css et j'aurais besoin de votre aide s'il vous plaît 🙂

je dois coder une maquette faite sur figma et j'ai du mal à placer du texte sur la droite

[floral haven]

intégrer*

🤭

[plucky coral]

oui désolé ^^

[strange quest]

Renseigne toi sur les grid et les flexbox 😉 évite les float

A la rigueur, utilise un générateur flex ou grid

[plucky coral]

merci 😉

[iron stone]

J'aimerais que mes icônes ne bougent pas avec l'animation de l'image et qu'elles soit par dessus l'image

    margin: 0;
    padding: 0;
    text-decoration: none;
}
.images {
    animation-duration: 10s;
    animation-name: mesImages;
    animation-iteration-count: infinite;
}
@keyframes mesImages {
    0% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-900px);
    }
    100% {
        transform: translateX( 0);

    }
}```

<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
</head>
<body class="image">
    <header>
        <div class="images">
            <img src="media/R.jfif" alt="">
        </div>
        <div class="hautdepage">
            <div class="firstblock">
                 <div class="icone">
                    <img src="media/th.jfif" alt="">
                    <img src="media/th (1).jfif" alt="">
                 </div>
            </div>
            <div class="secondblock">
    
            </div>
        </div>
    </header>
</body>

</html> ```

Merci de votre aide

[forest echo]

Peux-tu joindre un screen pour visualiser ton problème ou une petite vidéo comme c’est une animation?

[iron stone]

Ouaip

Je fais ça après

[forest echo]

Ok

[forest echo]

Alors avant de commencer quelques (petit) conseils :

• Le body n’a pas besoin de class pour obtenir des propriétés css. Il faut juste écrire body{…}

• Pense à remplir les "alt" de ton code pour garantir une bonne accessibilité.

Passons à ton problème. Je n’ai pas pu voir de mes propres yeux ce que ça donnait mais tu peux utiliser la propriété position: absolute sur ta class "icone". De cette façon tu pourra les positionner ou tu veux et elles ne bougerons plus.

@iron stone

[iron stone]

Yep

En gros ya mon image tous en haut , ya l'anim , et en bas ya l'icône

Quand je la mets dans la div de l'image avec l'animation, eh bah elle fait donc aussi l'animation ce que je ne veux pas , j'ai donc mis un animation none mais ça change rien

Et j'aimerais aussi que mon icône soit sur l'image

@forest echo

[forest echo]

tu fais un div :
tu y mets ton image (avec une class genre animation) + un div avec tes icones.

Le div principal tu le mets display.flex et tu fais un align-items: center.
Puis, tu mets les propriété d'animation dans le .animation .
Puis, dans le div avec les icones tu mets un z-index: 1 pour superposer. 🙂

@iron stone

[iron stone]

Dac je vais tenter ça

[iron stone]

ça marche un peu près la l'icone part a l'autre bout de la page

@forest echo

[cobalt linden]

Bonjour,
Je suis graphiste mais j'avais l'envie connaître codé.

je viens tout juste de commencer le HTML et bientôt le CSS.

C'est quoi les conseils que vous pouvez donner a un débutant

[iron stone]

Bonjour, a tu un site que tu peux nous montrer ^^ ?

[cobalt linden]

A la de suite non vu que j'ai pas mon pc a disposition mais demain j'y penserai

[iron stone]

Dac

[cobalt linden]

Mais je vient de commencer il y a vraiment pas longtemps ducoup c'est pas dutout un truc de ouf

[iron stone]

Pas grave

Tu sais faire quoi en css ?

Flexbox grid tous ça ?

[cobalt linden]

Pour le moment je suis encore à l'html

Je suis un cour en ligne et je ne suis pas encore au css

[iron stone]

Ca fait combien de temps que tu dev ?

[cobalt linden]

Sa fait quelques heures on va dire 5 h que je suis à fond les cours

[iron stone]

Aaah

[cobalt linden]

Oui c'est vraiment pas beaucoup

[iron stone]

Dcp tu as les bases en HTML ?

[cobalt linden]

Wai les <p></p>
Les <H1></H1>
<ol>
<ul>
<li>

Etc...

[void anvil]

Bonjour, comment je peux aligner une image à la même hauteur que le texte, comme dans cette exemple ?

[cobalt linden]

Les truc de bases je commande a connaître

[iron stone]

C'est a dire l'aligner ?

Aaaah

[void anvil]

bah mettre l'image juste à droite du texte en gros

[iron stone]

Float : right

Tu mettras ton image a droite

[void anvil]

D'accord merci, je vais tester

[iron stone]

Yep

[void anvil]

Merci ça marche !

Par contre elle est très mal positionné -_-

[forest echo]

Euh bof c’est vraiment pas le meilleur moyen…

Faut utiliser les flex-box

[dusty copper]

Bonjour, juste pour savoir si je veux mettre un cursor personnalise il me suffit de mettre sa dans mon body ?

cursor: url('images/exemple.png');

[void anvil]

On peut pas la mettre plus à droite ?

[iron stone]

Mets du margin left

[void anvil]

ok

[void anvil]

ça déforme tout

[iron stone]

Att c'est bizarre que ça déforme comme ça

[forest echo]

Met la width du div à 100% sinon ça va pas marcher…

[forest echo]

Tu as utilisé quoi pour faire ça ?

[void anvil]

.img-partenaire{
  width: 100%;
  float: right;
  margin-bottom: 10%;
  margin-left: 25%;
}

[forest echo]

C’est ça sans “

[forest echo]

Ouais alors c’est pas méchant mais faut oublier les float c’est vraiment pas responsive

Je te propose plutôt d’utiliser les ✨flex box✨. Tu as un div parent avec la propriété flex, et d’autres éléments enfants comme des images ou des divs….

Tu mets ton texte et ton img dans un div avec comme propriété :
display: flex;
Et ensuite tu lis ce petit tuto de qualité : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[void anvil]

Cela marche mais mon image ne va pas tout à droit 🤔

[forest echo]

Faut mettre ton parent avec un width 100%

[cobalt linden]

Voilà ce que j'ai commencé à faire

[brisk forum]

ajoute du css

[void anvil]

Bonjour, comment puis je faire pour mettre du texte par dessus une image ?

[hazy spade]

Pour ajouter du texte par dessus une image, utilise des div

<div class="exemple">
    <img />
    <div class="ton texte">...</div>
</div>

Puis avec du CSS tu viens ajuster la position du texte, la couleur etc...

[forest echo]

Un tuto pourra t’aider, mais dans les grandes lignes tu devra utiliser la propriété z-index

https://waytolearnx.com/2019/07/comment-afficher-du-texte-sur-une-image-avec-html-css.html

[void anvil]

Merci beaucoup !

[cobalt linden]

J'ai pas encore appris

[brisk forum]

tu veut un tuto simple tien : https://www.youtube.com/watch?v=Hgh2pPXRpRU

[fading heron]

Met ton image en background avec des div

[iron swan]

on est en 2012 pour avoir des tutos avec du texte tapés dans un éditeur? xD

[brisk forum]

pour les niveau debutant c'est bien

tu aprend a placet du text

et a mettre des couleur

[hazy spade]

C'est le mitard de faire ça dans des éditeurs de texte

[brisk forum]

sublim text est un bon editeur je l'ai pris exprai pour la seri vu que il est simple d'utilisation

"pour les debutant"

si tu vois se que je veut dire

[iron swan]

nan c'est pas le contenu que je critique, c'est le faite que tu ne parles pas dans la vidéo ou que le texte est pas rajouté au montage, le faite d'écrire ça dans un éditeur de texte c'est vraiment ultra vieillot, ça fait penser aux vieux tutos de l'époque ou le mec écrivait des trucs sur le bloc-note avec une musique techno

[brisk forum]

XD c'est vrais c'est vrais

[void anvil]

Visual studio code est pas mieux ?

[hazy spade]

Incomparable tellement VSCode est loin devant

[strange quest]

https://tenor.com/view/no-sidechat-gif-23964194

Rien de tel qu’un bon vieux notepad :p

[brisk forum]

j'ai viasual studio mais pour les débutant on va pas les faire souffrire avec un visual studioou tu doit installer 100 truc

[hazy spade]

HTML CSS Support et IntelliSense ça suffit amplement comme extension pour faire HTML/CSS en débutant

[brisk forum]

ouais nan mais le but du tuto c'est pour des gens qui save pas codé jor il save vraiment pas manipulé les logiciel etc

[void anvil]

pas faux

[void anvil]

ouais tellement

[iron stone]

https://tsukasadh.github.io/portfolio/

Un avis ^^ pour l'instant le site n'est vraiment pas complet , c'est juste un aperçu

[void anvil]

propre mais les carrés sont trop vide, tu devrais agrandir le texte !

[iron stone]

Okay

[dark patio]

Bonsoir, quelqu'un aurait une idée de comment faire ce genre de border sur un circle ?

[covert oak]

svp le CDN de Font Awesome

[kind ermine]

photoshop et tu le calle en image

[sharp lynx]

hello j'aurai besoin d'un petit coup de main pour faire de la gestion de zoom sur un page web que je suis en train de faire, je précise je suis carrément un débutant ^^
Pour etre un peu plus explicite j'aimerai que lorsque je dézoome mon site (ctrl -) des marges se créer des deux cotés au lieu de créer des espaces entre mes différents éléments

[brisk forum]

j'ai regarder vit fait to code je le trouve tres clean juste niveaux designe je donne juste un conseille change la couleur du background car je trouve le blanc tres sec

[kind ermine]

alors c est faisable tres facilement meme il suffit de faire une media query

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

un tuto assez claire

[sharp lynx]

super merci beaucoup, je regarde ça

[brisk forum]

yo l'equipe ya pas un moyen dans une page web que quand c'est sur telephone c'est la meme que sur pc

sur chrom des fois ya en haut a gauche dans les petit point version pc

moi je veux sa mais sa que les utilisateur on a cliqué dessu

je sais pas si c'est faisable que en html/css j'ai un dout je crois on a besoin de js

[hazy spade]

Tu vérifie avec JS le support côté client (http://detectmobilebrowsers.com/) et après tu redirige

[brisk forum]

je met sa dans mon code comme sa ?

mais c'est pas se que je demande je crois j'ai mal expliqué

sur telephone les site son sommé jor sa change et ya un bouton version pour pc sa rend la version pour telephone comme celle du pc alors que la c'est une simple redirection et moi j'ai pas fait 2 page 1 pour mobile et une pour pc

[forest echo]

J’ai rien compris à tes messages 😂

[warped mango]

Good morning,
I have made a small update of my portfolio and I would like to know what you think about it. I am also available for any type of front-end work.
portfolio : https://rochelin-portfolio.netlify.app/
source code : https://github.com/rochelin-shikamaru/PortFolio

[brisk forum]

XD pas grave

[forest echo]

J’aurais bien voulu t’aider….

[brisk forum]

ba apres j'ai entendus dire que s'etais une technique de flemard

[forest echo]

Ha ok xD

[robust sinew]

J'ai un souci avec une img dans une div dans une grosse boîte sous flex avec une autre box en aside j'arrive pas à la centrer en dessous des deux box, j'ai beau mettre display flex, justify content centrer et align center le truc reste sur la gauche 😦 (je posterais le code plus tard je suis dehors)

[robust sinew]

https://codesandbox.io/s/test-divers-et-varie-8wkkyb?file=/index.html

[woeful willow]

Bonjour @robust sinew j'ai pas bien compris ton problème, tu veut que la div de l'image soit centré horizontalement ?

[robust sinew]

C'est bon j'ai réglé le problème. Je suis juste un peu bête ^^'

[woeful willow]

ok bonne journée 🤗

[sharp lynx]

hello, j'ai un petit soucis sur le projet css que je suis en train de réaliser, j'ai un énorme espace blanc qui apparait que ma page web lorsque je travail pour mobile et je n'arrive pas a savoir ce que c'est meme en m'aidant de la console, si qu'elqu'un aurait une idée de ce que ça peut etre je suis preneur ^^

[woeful willow]

code please

[sharp lynx]

html ou css ?

[woeful willow]

tout mdr si tu peut met tout dans un codepen

[sharp lynx]

yes je te fais ça

https://codepen.io/Seda7e/pen/QWmRENy

[iron stone]

1. ou 2.

[woeful willow]

2

[robust sinew]

2

[iron stone]

Merde alors X)

https://tsukasadh.github.io/portfoli/

La version mobile est nul

[indigo basin]

bonjour

[woeful willow]

bonjour

[dark patio]

Bonsoir ! Je rencontre actuellement un problème avec mon drag and drop, quand je drag en dehors du parent de l'élément que je suis entrain de drag, celui-ci disparait. J'aimerais donc savoir si quelqu'un serait comment faire pour afficher l'axis x tout en gardant un overflow-y: scroll ?

Le css :

    .container-items {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-gap: 15px;
        z-index: 1;

        .item {
            width: 75%;
            height: 100%;
            min-height: 10vh;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-bottom: 5%;
            border-radius: 5px;
            position: relative;
        }
    }```

Vidéo montrant le prob : https://streamable.com/9gaclk

[woeful willow]

Est ce qu'un overflow-x: visible; fonctionne ?

[dark patio]

yup cela fonctionne mais lorsque je met un overflow-y scroll, cela ne marche plus

[woeful willow]

apparemment cela n'est pas possible il faut donc revoir la mise en page :(https://stackoverflow.com/questions/38460841/overflow-y-scroll-with-overflow-x-visible)

[dusty sorrel]

Att tu code sur gta avec CSS ??? wsh

[dark patio]

FiveM ^^

[dark patio]

Erf, ça m'embête là mdrrr

[dark patio]

Mais vas-y c'est la galère mdr, je fais du react perso sur fivem sauf que leur moteur chronium est pas à jour dcp on peut pas use certains truc de react comme DND donc je galère à faire un truc en jquery frr mdrr

[high karma]

Avec NUI, tu peux faire tes interfaces en HTML CSS JS, et les faire intéragir avec ton LUA 🙂

[void anvil]

Bonsoir, j'ai un problème. Mes boutons avec le fond bleu son dans mon footer quelqu'un peut m'aider ?

[astral turtle]

envoie ton code html et css sinon on pourra pas t'aider

[void anvil]

Je peux te les envoyés en pastebin ? car il sont trop grands.

[astral turtle]

oui

[void anvil]

HTML : https://paste.gg/p/anonymous/b4bab62f541b4a08b3e2d92923b21112
CSS : https://paste.gg/p/anonymous/3ab8dfd3785b4f55bd40573394b6ad85

[woeful willow]

Tu pourrais faire un codepen car j'ai l'impression qu'il manque du code (en html et en css)

[void anvil]

pas la penne je vais refaire tous le code

[woeful willow]

ah ok

[dusty sorrel]

bien stylé ca

[dusty sorrel]

jeux trop vieux

[dark patio]

yup

[dark patio]

Personne aurait une idée dcp les gars ?

[brisk forum]

Coder gta en html css 😆

enfait je comprend pas trop envoie tout ton code stp html/css/js

sur codepen vu que je pense ton code sera long @dark patio

[dark patio]

C'est good, merci quand même bg ^^

[brisk forum]

dr je me demande c'est quoi ton projet ? si tu peu nous l'expliqué

[dark patio]

C'est à dire ? ^^

[brisk forum]

j'ai vu que tu faisait un truc sur fiveM

[dark patio]

yup

[brisk forum]

donc un serveur gta

[dark patio]

euh yep, je suis actuellement entrain de faire mon framework

[brisk forum]

a oui ok et tu y arrive en html/css ?

[dark patio]

yup, tu peux tout faire

Perso je fais du react

Tu peux faire du angular etc

Mais le souci est que le moteur chronium de fivem n'est pas à jour

dcp tu as certaines choses que tu ne peux pas utiliser

[brisk forum]

a ouais donc tu n'a pas les dernier react

[dark patio]

yup

[brisk forum]

en tout cas force a toi XD etre penaliser a se point c'est chaud

[dark patio]

Merci ^^

En vrai ça va mdrrr

[void anvil]

Ma page ne s'affiche pas -_-

[copper warren]

Bah t'as un probleme de code

erreur 500

[void anvil]

Oui effectivement cela venais de mon code. Merci

[vernal yoke]

Salut !

Je suis en pleine galère avec Tailwind sur une section de mon site. Voici le code :

<section className="flex items-center flex-nowrap">
                <div>
                    <img src={LittleBanner} alt="little-banner" className="h-2 w-10 my-auto ml-0 lg:my-auto md:my-auto"></img>
                </div>
                <div>
                    <p className="mx-10 font-bold text-emerald-800 text-[18px] text-center lg:mx-[10px] lg:text-[32px] lg:font-semibold lg:text-emerald-800 md:mx-[10px] md:text-[32px] md:font-semibold md:text-emerald-800 my-0">TEST TITRE</p>
                </div>
                <div className="bg-[#F3C892] md:h-[10px] grow"></div>
            </section>

Ca rend bien ce que je veux :

Par contre, sur mobile, la troisième div ne s'affiche plus ..

Première div correspond au trait à gauche
Deuxième, au texte
Et troisième, la barre à droite

Comment faire avec les flexbox pour que la dernière div prenne toute la place restante ? Comme vous le voyez, j'ai testé avec flex-grow mais sans succès

[finite arrow]

tu pourrais juste avoir un div height: 10px; ou qqchose comme ça et le texte avec un background blanc au-dessus

[vernal yoke]

Théoriquement oui mais j'aimerais ensuite arrondir les bords

[finite arrow]

de... ?

[vernal yoke]

Comme sur la barre de gauche

Donc si je met juste un texte blanc dessus, ça passe pas

[finite arrow]

tu veux arrondir quoi ? j'ai pas bien compris

[vernal yoke]

Ceci

[finite arrow]

pourquoi ?

[vernal yoke]

Car c'est un design que je dois suivre 😂

[finite arrow]

ah ok

bah juste deux divs alors

puis un border-radius

si tu veux pour t'aider y'a ça https://9elements.github.io/fancy-border-radius/full-control.html

[vernal yoke]

Oui, j'ai bien deux divs là, avec une div texte au milieu

[finite arrow]

oui je sais mais ce sont des images

non ?

ah non

[vernal yoke]

La première oui c'est une image, je vais la remplacer
Mais la troisième c'est juste une div

[finite arrow]

ok

[vernal yoke]

Et c'est bien la troisième qui pose soucis là

[finite arrow]

donne tout le html

[vernal yoke]

Tout le html est là

[finite arrow]

oof

[vernal yoke]

?

[finite arrow]

t'utilises quel ide ?

si t'utilises vsc tu tape ! puis tab et ça te fais un fichier html tout propre

et tu où est-ce que tu charges ton style ?

[vernal yoke]

Le style est chargée par Tailwind derrière, moi j'utilise juste des noms de class

[finite arrow]

ah

j'connais pas

où est-ce que tu charges tailwind ?

[vernal yoke]

Dans mon fichier css principal

[finite arrow]

où est-ce que tu charges ce fichier css ?

parce que là ça charge direct, et c'est mieux que depuis un autre fichier css parce que si ce fichier intermédiaire ne peut pas être chargé pour une quelconque raison ça marche pas

(là)

[vernal yoke]

J'utilise ReactJS, il est automatiquement chargé dans le component principal
Mais le CSS fonctionne bien car j'ai le visuel que je veux

[finite arrow]

mais fallait le dire

ça change tout

enfin pas tellement

mais si on a pas le style on peut pas t'aider

[vernal yoke]

Je vais donner celui généré par Chrome

Le CSS de ma section :

.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
}``` Le CSS de la dernière div :
```css
.bg-\[\#F3C892\] {
    --tw-bg-opacity: 1;
    background-color: rgb(243 200 146 / var(--tw-bg-opacity));
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-1 {
    flex: 1 1;
}

[finite arrow]

le parent des trois div tu peux le mettre en overflow-x: hidden; peut-être

[vernal yoke]

Aucun changement

[finite arrow]

bizarre

dans l'inpecteur quand tu cliques sur le troisième div, ça affiche quelque chose ?

[vernal yoke]

Oui, c'est le CSS que j'ai montré ci-dessus

[finite arrow]

attends

quand tu hover l'élément à droite c'est censé le mettre en bleu

est-ce que tu vois ton div comme ça ?

pareil sur chrome si tu veux savoir

[vernal yoke]

Sur Responsive justement, rien n'est hover
Comme si la div avait disparu

Mais je l'ai bien en hover sur PC

[finite arrow]

sur responsive ?

[vernal yoke]

Oui, en responsive, je n'ai pas la div et j'ai aucun hover

[finite arrow]

ça ?

[vernal yoke]

Oui

[finite arrow]

ok

bah c'est bizarre

[finite arrow]

Est-ce que c'est possible de ne pas flouter une background-image quand on zoom avec un background-size (afficher les pixels nettement) ? Ou est-ce qu'il y a une alternative ?

Je n'ai pour l'instant trouvé que image-rendering qui s'applique aux images elles-mêmes, pas au background image

[iron stone]

Bah je dirais le svg

Mais sinon ça va forcément se pixeliser

C'est normal

[finite arrow]

?

je voudrais afficher une image png utilisée dans un background-image et zoomée avec background-size sans anti-crenélage

je peux pas utiliser de svg si je veux utiliser une image png

[eternal ember]

Bonjour, j'ai un petit soucis on va dire que j'ai fait un menu hamburger et le problème sont que les 3 premiers boutons ne peuvent pas être cliquable à cause de la div du container de la navbar comment je pourrai faire pour éviter cela ?

[brave jay]

Tu peux utiliser pointer évent

[eternal ember]

ça ne marche toujours pas.

[brave jay]

Met un zindex à ta div

[brave jay]

.

[eternal ember]

Oki je mets combien

[brave jay]

-1

[eternal ember]

Pareil

[brave jay]

Ok envois ton code et la parti du css concerné

[brave jay]

Je regarde en arrivant à la maison

[brave jay]

ah c'est le hamburger que tu ne peux pas cliqué ?

[eternal ember]

Non le bouton sur la page

https://codepen.io/killerjumper/pen/LYmPVPK

Le codepen si tu veux

Faut y mettre en version tel par contre dessus

En gros là le bouton jaune marche plus à cause de la div du menu.

[brave jay]

Alors deja tu peux enlever pointer-events: all; sur .navbar-container

et normalment ca devrait marcher

enfaite quand tu display pas ta navbar ca met quand meme le clic dessus

Et si jamais ça ne marche pas jete ton ordi par la fenêtre et rachète en un 😉

[eternal ember]

Le problème c'est si je mets que le pointer-events: none; sur container c'est le menu qui n'est plus cliquable.

[brave jay]

Tu le mets quand le menu est fermer sinon

[eternal ember]

Ouais je vais voir.

[eternal ember]

Si je fais après je peux plus appuyer sur le hamburger

C'est bon j'ai réussi

[iron stone]

Ca donne quoi le portfolio ^^ ?

[graceful onyx]

Salut j'ai un petit problème que j'arrive pas à résoudre, j'essaye de créer un portfolio full animé css un ptit site vitrine tout bête mais j'arrive pas à faire rentrer ma case skill en dessous de expérience quelqu'un pourrait m'aider.

https://pastebin.com/S3fKHafa

J'ai regrouper le css dans la balise style dans le html histoire de pas créer 2 pastbin, merci d'avance je vais continuer à chercher de mon coté

[brave jay]

Alors je te conseil de soit utilisé le flex

sinon les grid mais c'est un peu plus compliqué

[last kindle]

Bonjour/Bonsoir,
j'ai un petit problème avec mon site, il y a un gros décalage latéral mais je ne trouve pas son origine
si quelqu'un serais comment m'aider j'apprécierais

le code source au cas ou https://github.com/4D4J/BS_Studio

[brisk forum]

peut tu envoyer un codepen

[last kindle]

https://codepen.io/4d4j/pen/oNdvrqw

[brisk forum]

c'est fait expré qu'on voit pas le curseur ?

[woeful willow]

c'est un peu relou je trouve

[last kindle]

oui et non

je viens de le remettre

[brisk forum]

le décalage c'est quoi au juste ?

lui

[last kindle]

ouep

[brisk forum]

c'est peut etre la margin

[woeful willow]

je ne sais pas en tout cas si trouve pas tu peut fixer la taille de ton body avec

width: 100vw;
overflow-x: hidden;

[last kindle]

ba ça règle le problème

je ne c pas pourquoi mais j'ai plus mon décalage

merci mec

[woeful willow]

de rien

[lofty field]

Salut les gars quand on fini de suivre une formation et qu'on veut commencer un projet on se rend compte que aïe ça bloque et on revient encore suivre la formation
Ou voir commencer une nouvelle formation!! Comment faire pour arrêter cette enchaînement svp🙇‍♂️🙇‍♂️
Surtout pour quelqu'un qui vient de finir html css javascript react js mais maintenant quand tu veux te lancer aïe 💔
merci de me tagger concernant la reponse merci😉

[eternal ember]

Je pense que ce qui fait le tout c'est surtout la pratique, perso c'est comme ça pour moi après peut être que la formation ne te conviens pas.

[lofty field]

avant la pratique je penses qu'il faut d'abord comprendre ce que tu fais norr!!??

[brisk forum]

j'ai jamais fait de formation que de la pratique

[eternal ember]

Pareil, niveau JS, après Html je pratique un peu moins donc j'suis un peu moins bon.

[exotic sentinel]

Viendra un moment où tu n'auras plus besoin de formation mais simplement de faire des recherches ponctuelles pour des questions précises.
Il faut juste atteindre se point d'autonomie. Pour ça c'est bien de faire des tuto dans ta technologie cible, mais c'est encore mieux d'avoir les compétences transversales qui te permettent de résoudre les problèmes réguliers qui ne changent pas entre les langages.

Dans ces compétences transversales, j'ai en tête : l'algorithmie, l'oop(héritage, polymorphisme, encapsulation, class, class abstraite, interface), compréhension des types d'un langage fortement typé, Design pattern, principe KISS et SOLID, programmation fonctionnelle, ...

[lofty field]

merci

[graceful onyx]

vas y merci je vais regarder ça

[quartz turret]

J'ai besoin de dev pour un projet

[strange quest]

Sur g-ca.fr tu va en trouver

[brisk forum]

a et pour t'aider juste un truc qui m'aide c'est l'inspecteur des navigateur ou control + u

[potent linden]

Bonjour j'aurais une petite question quand je met la ligne suivante : <?php include 'config.php';?> Mon css se décale

[strange quest]

Il faudrait voir ton code, ça peut venir d'un mauvais positionnement, une erreur de syntax, fin bref la liste est longue et souvent c'est juste une erreur d'inattention dont tu as peut être déjà régler au moment où je te réponds 😛

[potent linden]

c'est bon j'ai regler merci

dsl du dérangement

[strange quest]

Aucun soucis, c'est toujours comme ça en dev 😄

[brisk forum]

salut petit question comment je peut mettre une page web dans une page web alors c'est comliqué dit comme sa se que je veux savoir c'est par exemple j'ai mon site site-de-younous.tech et j'ai une page ou je veut afficher le haut et dans le body j'affiche une autre page ccomme : page-du-forume.tech

[woeful willow]

utilise <iframe href=""></iframe>

[brisk forum]

enfait j'ai fait sa mais c'est un forum donc si on fait <iframe> on pourrait pas se connecter etc

[brisk forum]

c'est plus tot du php non je pense faudrai voire dans #php

[woeful willow]

ouaip

[potent linden]

fuck

merci

[brisk forum]

dr

[hidden rapids]

Le HTML de la SNCF 😭

[dusky skiff]

[crisp siren]

include

[tame star]

wow sympa l'interface 😂

[safe citrus]

Bonjour, est-il possible de copier des pages web d’un autre site internet en changeant quelques détails ??
Je fais de la customisation sur textile, je me fournis sur un site de fournisseur bien évidement , et j’aimerais proposé à mes clients un site internet (sans montrer aux client le vrai site du fournisseur) avec les couleurs que je peux leurs proposer selon le textile choisi

Si c’est possible, je recherche quelqu’un pour cette mission 🙏🏼

[leaden swan]

Salut, j'ai un petit problème mon site marche parfaitement mais quand je le mets sur mon VPS le css ne marche pas. Je pourrait avoir de l'aide a l'écrit ou en vocal pour le mettre svp, merci.

[void anvil]

yo

[viscid copper]

Comment ca ca ne marche pas ?

[brave jay]

Si tu fait f12 puis network ça te marque le css quelque part ?

[tame star]

il me semble que ce n'est pas très légal dans ce contexte de voler un site pour le modifier 🤔 ou du moins ce n'est pas très moral. Cependant ce que je ferais c'est prendre une maquette que je paye (il y en a pour pas très chère). Apres je ne comprend pas le rapport avec le textile, tu veux avoir une site ou tu propose tes service ? Si c'est le cas et que tu n'est pas dev passe par un dev web ou un CMS 🤔

[strange quest]

Cela vient souvent du lien que tu as mit quand tu va chercher ton css, regarde dans ta page où tu l'importe

[fading heron]

Salut les gars vous me conseillée quoi comme langage cote back ??

[crystal knoll]

Yo, je pense que le mieux dans l'environnement actuel c'est le Javascript car tu peux tout faire avec donc avoir une bonne connaissacne de base est un gros + pour toi, pour du back j'imagine que tu parles du web ? Donc il faut t'orienter vers NodeJS qui te permet de faire du back, en JS puis ensuite tu pourraas apprendre un framework qui te rendrait la vie belle et facile comme Express.

Sinon il y a Php, on fait de beaux trucs avec php de nos jours comparé à ce que peuvent dire les gens qui détestent php pour son passé donc tu peux aussi apprendre php, par contre contrairement à JS, même si c'est un langage qui peut être utilisé "partout", faut se dire que c'est utilisé QUE en web, et QUE en back alors que JS, c'est partout, front et back

[fresh sparrow]

Javascript - > Firebase

Impossible de faire plus simple à mon avis

[tame star]

firebase c'est pas un langage (mais c'est excellent pour faire du no code), après tous dépend de ton projet. Si tu as un gros projet peut-être que faire du back en Js n'est pas une bonne pratique mais que le Java sera mieux. Et tout dépend des langage que tu connais ...

[tame star]

et petit point en plus, fastify est plus opti que express (https://www.fastify.io/) et il se code pareille (donc aucune excuse de ne pas en faire)

et voici des source (bien que sa vienne de fastify, il y a le code :p ) https://www.fastify.io/benchmarks/

[floral haven]

"se code pareil"

[queen pivot]

Bonjour !
J'aurais une petite question pour un développeur Web confirmer.
Possibilité de rémunération, merci de me contacter ici dans un fils ou en mp.

(n'hésitez pas à me mentionner)

[hushed roost]

Salut! Je cherche quelqu'un pour m'aider à faire une page web (développeur confirmer). Merci!

[floral haven]

Quel est le problème ?

[hushed roost]

J'arrive pas à coder

[floral haven]

Il va falloir plus d'info pour que je puisse t'aider ^^

[hushed roost]

En gros j'arrive pas à mettre des liens

[floral haven]

Montre ton code

[hushed roost]

Je te l'envoie quand je rentre

Et des vidéos et des images

Et le css

[brisk forum]

lien comme sa ? ```html
<a href="your link">your text</a>

[jolly pier]

Bonsoir quelqu'un à une idée (problème dans la console de mon serveur) :
[Prometheus repeated error of 21:39:04 - 10/09/2022] DB Connection failed! Error msg: Can't connect to local server through socket '/tmp/mysql.sock' (2)

[hushed roost]

oui

[rapid silo]

Salut à tous, J'ai une petite question de CSS, j'ai beau chercher, impossible de trouver comment reproduire ce type d'affichage.
Mise en context, j'ai des données avec des images de taille différentes, je soutaiterai avoir 3 colonnes avec une "width" fixé et laisser la "height" libre en fonction de la taille de l'image. Merci par avance a ceux qui seront m'aider 🙂
PS: image pour mieux illustrer

[void anvil]

Bonjour, comment puis-je mettre ceci :

Ici ?

J'ai dejà essayer de copié le code et de le mettre sur ma page avec le css mais cela ne fonctionne pas

ça donne ça

[hollow needle]

Bah tu créer tes 4 box, avec un espacement entre, et tu met le contenu dans chacune ? Je vois pas le pb

[urban ingot]

Hello, petit essai rapide :

Je me suis servi des propriétés "columns: 3" et "break-inside: avoid-column"

<html>
<head>
    <style>
        .zone{
            columns: 3;
        }

        .elt{
            margin: 10px;
            background: grey;
            break-inside: avoid-column;
        }
    </style>
</head>

<body>

<div class="zone">
    <div class="elt" style="height: 50px"></div>
    <div class="elt" style="height: 100px"></div>
    <div class="elt" style="height: 150px"></div>
    <div class="elt" style="height: 100px"></div>
    <div class="elt" style="height: 40px"></div>
    <div class="elt" style="height: 100px"></div>
    <div class="elt" style="height: 40px"></div>
</div>
</body>
</html>```

[rapid silo]

Yes c'est un super debut merci beaucoup, je vais creuser !

[rapid silo]

Yes au final c’est parfait ! Merci encore

[urban ingot]

😉

[stray lava]

Bonjour, j'aurais besoins de votre aide ! 🙂
Je suis actuellement en train d'apprendre le html/Css je m'occupe donc pour m'entrainer d'essayer de faire le site pour un pote. (son entreprise)
je rencontre un petit problème j'ai mon figma avec ces que je dois faire (c'est moi qui ai fait le figma) (je l'envoie ci dessous en 1er & 2nd image)
Mais au moment de réellement le dev 😄 J'ai ma base qui est tout bien mais j'ai un scroll horrible horizontal qui se créer quand je fais une <div></div> sous mon image (regardez la 3eme photo)
Si vous avez une solution à ceci je suis preneur 🙂

Ah bah non en fait problème régler suite à l'ajout d'un overflow-x:hidden; dans mon body

je r'envoie un message si j'ai un nouveau problème 🙂

[forest echo]

Essayes de respecter des « grilles visuel ». Pour faire simple, faut que tout tes éléments du bord droit et gauche soit sur le même alignement comme s’il y avait des lignes imaginaires

Un peu comme ça :

[stray lava]

Tu parle de ces élément l'a qui ne sont pas sur le même alignement ?

[forest echo]

oui exactement

[stray lava]

Ok très bien merci pour ton retour je vais voir ça 🙂

[errant cypress]

Hello, vous savez comment modifier le css du dropdown ?

le mettre dans le même thème histoire que ça sois lisible

[errant cypress]

réglé*

select * {
    background-color: #27293d !important;
}

[tame star]

fait plutôt ceci ```css
option {
// css
}

le problème dans ton cas c'est que tt tes éléments vont avoir le background (c'est pas utile) et le !important on évite quand c'est possible ...

[patent solstice]

Qui a le site qui liste toutes les fonctionnalités CSS, et qui précise par quel navigateur il est supporté ?

Je retrouve plus

[keen bison]

Parle tu de ce site :
https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics ?

[patent solstice]

C'était lui ! => https://caniuse.com/

[cobalt vale]

Hello, j'ai un petit problème lorsque j'essaye de faire une barre sous un élément. La première image c'est comment c'est actuellement et la deuxième c'est ce que je veux faire. Je n'arrive pas a integrer la vbarre dans le background de mon élément (j'utilise bootstrap) voici mon code actuel :

           <div class="col-md-5 col-4">
                  <div
                    class="server-card mb-3 mt-5 mx-lg-5 "
                    style="background-image: url(assets/scp_banner.png);"
                  >
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%; z-index: auto"></div>
                  </div>
                    <div class="overlay">
                    <button type="button" class="btn btn-primary">Se connecter au serveur</button>
                    </div>
                  </div>
                </div>

si vous avez des idées je suis preneur :)

et de même pour le petit texte (78 en ligne)

[floral haven]

PS: ton client est un scammeur et n'a aucune notion de dev

[cobalt vale]

tu dis pour moi ? xD

[floral haven]

Absolument

[cobalt vale]

je suppose c'est très complexe

[floral haven]

Je t'informe juste tu en fais ce qiue tu veux ^^

[cobalt vale]

ahah t'inquiète mais t'as une idée ou pas dutout ?

[brave jay]

elle est ou ta barre ?

[floral haven]

J'ai pas lu la question ^^'

[cobalt vale]

elle se cache derrière le background

[brave jay]

met lui un z-index de 10

comme ca on sera ou elle ce cache

mais le principe c'est que ta div background soit en relative

et que ton progress soit en absolute avec un bottom 0

[floral haven]

Te prend pas la tête, il va te demander de faire du pixel position pour ensuite vouloir du design responsive à partir d'une image PNG 🙂

[cobalt vale]

c'est bizarre quand j'inspecte la barre elle me dit 0x16

mais elle est basée au centre de la div

[floral haven]

Mets lui une largeur

[brave jay]

envois le css de progress

[urban ingot]

Elle est pas en position absolute par hasard ?

[cobalt vale]

bah vu que c'est le truc de bootstrap je l'ai pas fait

[urban ingot]

Moi j'laurais pas mise en absolute mais naturellement en dessous de l'image

[cobalt vale]

enfin j'ai pas créer la classe progress

[brave jay]

du coup si il n'y a pas de css c'est comme si la barre n'avait pas de taille

[brave jay]

oui mais non quand tu regardes l'image qu'il a envoyé c'est sur l'image

[floral haven]

La deuxième image c'est l'objectif

pas le résultat actuel

[brave jay]

En gros crée une partie css pour dire que : ```css
.progress {
height: 10px;
width: 100%;
}

apres on verras ce qu'on ajoute dedans

[urban ingot]

Même , la deuxième image, pour moi c'est pas flagrant que la barre est sur l'image, et de toutes façons c'est dommage de cacher un bout de l'image x)

[cobalt vale]

j'avais pas pensé a mettre une taille 🤦

[brave jay]

donc le progress est bien en absolute par rapport au back ?

[cobalt vale]

je viens de mettre et là elle est bien en bas

[urban ingot]

tu as mis un bottom 0 ?

[cobalt vale]

yes là c'est good merci les gars

je vais faire le reste vu que j'ai capté comment faire le truc

merci beaucoup

[urban ingot]

Moi j'ai pas fait grand chose mais de rien

[brave jay]

C'est un grand plaisir xD

[void anvil]

Je viens quémander votre aide, je suis en reconversion professionnelle au sein de mon entreprise et je vais sûrement entrer en formation pour devenir développeur web. Le seul petit soucis c'est que pour la dernière étape de sélection l'école en partenariat demande à ce que l'on réalise 4 pages HTML. J'aurais besoin qu'on m'aiguille ou aide pour cela si possible.
J'ai regardé et suivi quelques cours sur YouTube et Openclassrooms mais j'aimerais bien avoir l'avis d'un "confirmé" si cela est possible.

Si quelqu'un est partant mes DM sont ouverts pour plus d'explications.

Merci !

[tame star]

je peut te conseiller grafikart (il fait du freelance, il est bo, il est fort). il a une playliste web et css (bien quelle date elle te donnerons une bonne aide)

[formal jewel]

@void anvil Je peux te donner un avis

[void anvil]

Je note ! Merci !

[brisk forum]

yo vous avez pas des idéé pour amelioré sa , je travaille avec un mec et il me donne sa comme exemple

et me dit de l'ameliorer

[void anvil]

Salut,
Moi je dirais tout d'abord que les couleurs sont trop flashy et cela pète trop aux yeux pour l'expérience utilisateur de plus il faudrait peut-être moins de surface carré rectangulaire exetera et arrondir plusieurs bords par exemple pour la meilleure utilisation et la lisibilité

[brisk forum]

ouais exactement

[exotic sentinel]

Regarde les applications de messagerie comme messanger et autre ils ont bossé sur l'ui et l'ux

[brisk forum]

la je regarde en effect c'est interessant alors si je doit prendre un timeplate et le modifié vous me conseiller le quelle ?

[spiral phoenix]

Hey, j'utilise outline sur une classe avec un border-radius de 50%, mais j'ai ceci :
ya un tout petit espacement, qlq saurait cela est du a quoi ?

[rapid isle]

Hello guys, I'm trying to add an effect to a label:after when I focus the input below. Except with Js, do you know the way to do it when the label is before the input in the HTML page ?

Mince j'ai tout mis en anglais XD. Si vous ne comprenez pas demandez moi.

J'avais oublié que c'est un discord Fr.

[urban ingot]

lol

C'est quoi come input ?

Ce qu'il te faut c'est la pseudo classe focus-within

https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within

[rapid isle]

input type text.

[rapid isle]

Yes merci je vais tester ça.

[vale socket]

Bonjour les gars, est-ce que l'un d'entre vous utilise gsap ? En particulier le plugin ScrollTrigger ?

J'ai réussi à faire tout ce que je voulais faire, tout fonctionne

Maintenant j'aimerais apporter quelques règles dans certains cas particuliers, notamment lorsque la vitesse de défilement est rapide

Lorsque je fais un scroll rapide sur mon Mac par exemple, il est suivi d'un mouvement avec un effet "smooth". Cependant, ce mouvement ne semble pas être pris en compte par le déclencheur "start" du ScrollTrigger. L'évènement "onEnter" est alors déclenché avec un retard, l'animation de ma section (section qui devrait occuper toute la fenêtre) ne démarre qu'à la moitié de sa hauteur révélant une partie de la section suivante

En résumé : J'aimerais injecter un "overflow hidden" au body dès que ScrollTrigger.progress == 0. Le problème ? C'est que ça n'arrive jamais. L'effet smooth fait que la valeur de progress quand le scroll est rapide est toujours supérieure à 0

[stoic plume]

Bonjour, j'aimerais intégrer une musique qui se joue automatiquement quand on arrive sur mon site, avec un bouton pour faire pause si on souhaite. J'ai utilisé <audio> mais ça ne fonctionne pas, j'ai bien la petite partie mais le son reste à 0:00/0:00, je ne comprends pas pourquoi

https://cdn.discordapp.com/attachments/1021363234923614209/1021363235259162624/unknown.png

[woeful willow]

bonjour, essaye de rajouter des argument dans ta source comme autoplay je crois

[stoic plume]

Comme ça ? J'ai essayé mais ça ne change rien :/

[woeful willow]

non essay de mdifier ton <audio> et de rajouter autoplay tout cours

[stoic plume]

de mettre <autoplay> ? ou <audio autoplay>

[woeful willow]

<audio controls autoplay>

[stoic plume]

pareil

[woeful willow]

ok essaye <audio src="img/onigiri_audio.mp3" autoplay contols></audio>

[stoic plume]

La case a disparue

là ça m'embête parce que c'est vraiment un truc bête je suis sûr et ça prend la tête pour rien :/

[woeful willow]

ouaip je sais pas trop désolé essaye de regarder la https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio

[stoic plume]

T'inquiète pas grave merci quand même 🙂

[spiral phoenix]

Quel est le meilleure moyen de rendre un site responsive , j'ai entendu parler d'utiliser vh et les pourcentages mais ce n'est pas assez parfait

[urban ingot]

Utiliser les media queries

[urban ingot]

Il me semble qu'il y a des sécurités sur les navigateurs maintenant qui empêche le déclenchement automatique de sons si l'utilisateur ne les a pas acceptés au préalable sur le site. Idem pour les vidéos qui ont du son, mais on peut lancer automatiquement une vidéo sans son

Donc regarde en haut à gauche du navigateur pour accepter le son sur le site, et après la lecture auto devrait fonctionner

[stoic plume]

J'avais entrendu parler de ça mais je n'arrive même pas à ajouter un son qui ne se met pas automatiquement donc je ne comprends pas du tout..

Je pense que je ne vais pas le mettre du coup tant pis :/

[urban ingot]

Tu es sûr du chemin de la source ?

[stoic plume]

Oui oui :/

[urban ingot]

Tu as vérifié dans l'onglet réseau si tu voyais ton fichier audio ?

Il doit avoir le code 200

[stoic plume]

il est bien dans img

[stoic plume]

Où ça ?

[urban ingot]

Ça te dérangerait de m'envoyer l'url complete sur laquelle tu es ?

[stoic plume]

je suis en local

[urban ingot]

Dans l'onglet reseau de ton inspecteur d'éléments

[stoic plume]

ah

[urban ingot]

Oui même en local je veux bien voir l'url

[stoic plume]

C'est bien ça ?

[urban ingot]

Oui mais rafraîchis la page

[stoic plume]

Quand je double clic j'ai un fenêtre avec le son mais il est pas là non plus

impossible de le lancer

[urban ingot]

pkoi ya wma aussi ?

[stoic plume]

J'ai essayé de changer mais ça ne change rien

du coup j'ai remis mp3

[urban ingot]

Mais dans ce cas le fichier wma devrait pas être appelé 🤔

[stoic plume]

ah ba ça j'en ai aucune idée

il est plus dans mes fichiers pourtant

[urban ingot]

Essaie ctrl + F5 (si tu es bien sur windows) à tout hasard et regarde l'onglet réseau encore

[urban ingot]

S'il apparaît dans l'onglet réseau en principe c'est qu'il est dans le code source de ta page

[stoic plume]

le mp3 vient de disparaitre

pourtant non j'ai bien mp3

[urban ingot]

Tu es sur windows ?

[stoic plume]

oui

[urban ingot]

Tu as bien fait CTRL + F5 ? parce que je vois plein de 304 c'est pas normal

[stoic plume]

Oui j'ai bien fait

ah ba je viens de refaire et le mp3 est revenu

mais je peux toujours pas play

[urban ingot]

Ah là ya plein de 200 ça se voit que tu as fait ctrl F5

Hm tu peux aller dans le code source de la page web (CTRL + U) et rechercher ".wma"

[stoic plume]

ba

il s'est pas actualisé

😐

[urban ingot]

Sur quoi tu travailles, un simple fichier html ?

[stoic plume]

oui sur vsc

normal quoi

[urban ingot]

J'peux voir l'url ? 😅

[stoic plume]

comment ça l'url

dans mon pc

[urban ingot]

L'adresse où tu es dans ton navigateur

[stoic plume]

(je débute donc je suis un peu un noob)

ça ?

[urban ingot]

Hm

Oui ça

C'est quoi ton serveur ?

Celui qui est monté sur 5500

Où plutôt comment tu as ouvert ton fichier dans le navigateur ?

[stoic plume]

ah

comme ça

[urban ingot]

D'acc

[stoic plume]

le plugin là

[urban ingot]

A la place ouvre juste le fichier index.html avec chrome

Pour voir

[stoic plume]

Oui

ça change rien

le musique n'est pas là

[urban ingot]

Et dans réseau ?

[stoic plume]

et dans CTRL U y'a toujours ça

je comprends pas..

[urban ingot]

Alors là.. ouvre index.html avec notepad et regarde si ya "wma"

[stoic plume]

ho ptn non je suis débile

je sais pourquoi y'avais le wma

[urban ingot]

Pkoi ?

[stoic plume]

j'avais oublié de supprimé l'autre

je l'avais mis plus haut au début

je suis vraiment un noob

[urban ingot]

Bon et en supprimant celui-là ça donne quoi

[stoic plume]

mais ça ne règle qu'un problème mdr le son ne marche toujours pas

[urban ingot]

Tu as regardé en haut à gauche du navigateur si tu devais autoriser le son ?