html-css

[void anvil]

mais le texte jlai chnager ds top 5 pk sa ta pa smis

[sudden notch]

Ouais mais c'est juste que c'est drôle de trouvé les erreurs

[void anvil]

trop beauu

[dim canopy]

https://tenor.com/view/judging-gif-4584572

[void anvil]

MDMR

cmt tarrive a changer le style wsh

[dim canopy]

https://tenor.com/view/jdg-albus-humblebundledor-magie-la-magie-humblebundledor-gif-17560362

[brisk forum]

pour que tu apprend de tes erreur ton erreur vien de la <link rel="stylesheet" href="styles/style-de-Tom.css" type="text/css" />

[void anvil]

donc jle remplace

par quoi

[sudden notch]

Bah là juste c'est pas le bon emplacement

[brisk forum]

tien et essaye le

c la correction de ton code

[sudden notch]

https://tenor.com/view/hide-secret-escape-scared-dying-gif-4513776

[void anvil]

mtn sa m emet sa

aller jv me suicider

[dim canopy]

MDRRR

Je hurle xD

[void anvil]

jmet quoi a la place dcp

tuez moi

[brisk forum]

essaye le code que je t'ai envoyer apres je te dit

[brisk forum]

this

[void anvil]

tjr pas.

eh c trop

[brisk forum]

nn donwload le fichiers

zip

[brisk forum]

hada 👆

[void anvil]

quand jappuie dessus apres

sa me ramene a notepad

et sa me met sa

[void anvil]

.

[sudden notch]

Mais attend la tu es dans le dossier mon-site/pages/...

[brisk forum]

ouvre le fichier mon site1

va dans page

[sudden notch]

Alors que ici tu es dans mon-site/...

[brisk forum]

va dans top10 ou top5 jspltrop

[void anvil]

quand jappuie sur mon site1

sa me ramene a notepad

[brisk forum]

puis fait clic droit

[dim canopy]

Bon courage les gars moi j'abandonne

[brisk forum]

dans le dossier ?

[void anvil]

ds telechargement la

[brisk forum]

force a toi

[void anvil]

jappuie su rmonsite1

[dim canopy]

https://tenor.com/view/disappearing-gif-25080169

[brisk forum]

oui sur le dossier

[brisk forum]

enfin tu dézip

[void anvil]

quand jouvre mon site 1 sur note pad

jai sa

[brisk forum]

genre tu fait extraire le fichiers

[brave jay]

il a pas winrar

[dim canopy]

Izarc > winrar

[brisk forum]

winzip ou comme tu veux juste extrait le fichiers

[brave jay]

ouais mais moi je suis vieux

et reste avec les vieux truc qui marche

en tous cas je sais qu'on ne peux pas unzip avec notepad

[void anvil]

..

[brisk forum]

extraire tout @void anvil

[dim canopy]

Qui te spam toute les deux minutes pour l'acheter 👀

[void anvil]

azz

[brisk forum]

clic droit sur ton fichier zip

[void anvil]

g que sa

qd jft clic droit

[brisk forum]

https://www.win-rar.com/ telecharge on gagnera du temps

[void anvil]

mais

c payant

[dim canopy]

C'est bien izarc fait la même mais gratuitement

[brisk forum]

non

[brave jay]

non

[dim canopy]

https://www.izarc.org/

[brave jay]

Peut être

[dim canopy]

@void anvil

[void anvil]

ok apress

[brisk forum]

mais la il c lancer tt seul le telechargement non

[void anvil]

oui sa c telecharger

[brisk forum]

ok nice

[void anvil]

apres jft quoi

[dim canopy]

Tu l'installe

Une fois installer tu clique sur le fichier zip et tu extrait

[void anvil]

oui c installer

quel fichier zip

que younous ma env

[void anvil]

sa

[dim canopy]

oui

[void anvil]

mais qd jft clique droit

g pas

extraire tout

g juste ouvrir avec

[dim canopy]

Et bien tu ouvre avec le truc que tu a installer

[brisk forum]

ou tu double clic sur le fichier et automatiquement winrar va se lancer

[void anvil]

jlextrait vers qquoi

jlextrait sur notepad ?

[brisk forum]

nn tu l'extrait sur ton bureau

[void anvil]

LETSGOO

sa marche mais mtn sa me met fichier introuvable pour biographie et album

MDMMR

acueil et top jai

[dim canopy]

https://tenor.com/view/mohamed-baby-yes-yey-cute-gif-15857559

[void anvil]

🙂

[brisk forum]

rajoute les sans erreur

[dim canopy]

Pour les fichier introuvable vérifie le chemin d'acces et ça ira

[void anvil]

AHHH

MAIS ENFT

sa marche

c juste

que faut que jrevienne a lacueil

genre si jveut aller ds top 5 jdois lfaire que dpeuis laccueil

si jveut aller ds album pareil

[proud raven]

[void anvil]

que lacueil

[void anvil]

tg

[dim canopy]

Oui biensur !

https://tenor.com/view/judging-gif-4584572

[void anvil]

🥲

orh

[proud raven]

[dim canopy]

bah alors ?

[void anvil]

jris 🙂

[dim canopy]

C'est pas gentil

[void anvil]

ui

[brisk forum]

voila ta tout reussi

[void anvil]

nah jai pas fini mtn faut que jinsert de sphoto

des

🥲

[dim canopy]

Let's go le prochain bill gates est là

[proud raven]

oui

[brisk forum]

en tt cas problème resolut

[void anvil]

nannn psk mtn quand jv sur notepad et que je change mon script i marche pas

fin jactualise

sa ecris pas cke jveut

sa reste comme avant

[proud raven]

clear le cache de ton nav

[void anvil]

et g ecris sa

g mis albums sa laisse tutos

[proud raven]

clear le cache de ton navigateur

[void anvil]

comment

[dim canopy]

non

[void anvil]

jai actualiser

[dim canopy]

Tu édite les mauvais fichier sur notepad

[proud raven]

[void anvil]

bah nann

fin

jsp

expliquee

[dim canopy]

regarde le chemin d'acces sur ton navigateur et sur notepad

[void anvil]

oui

[dim canopy]

C'est pas les même

[void anvil]

jft cmt dcp la

[proud raven]

ah ouais tu edit mon-site au mais tu regarde mon-site1 tout court

[void anvil]

deh

[brisk forum]

yes c sa

[void anvil]

jcomprend grv pas la

[brisk forum]

mec utilise sublimetext ou vs code notepade pue la merd

[void anvil]

mais jdois utiliser notepad

jsp c la prof

elle nous a dis

notepad

[dim canopy]

Je pense plus que le pb est entre la chaise et l'écran

[proud raven]

en soit c'est pas dégueu notepad++ mais c'est sur que vscode ou sublime son mieux

[proud raven]

[void anvil]

bruh

[dim canopy]

facts déso

[void anvil]

non

[proud raven]

réel après c'est le début

[dim canopy]

Bref

[proud raven]

faut bien apprendre

[void anvil]

dis que jss incapable

[dim canopy]

Il faut tout simplement que tu modifie les bon fichier

Là on parle pas de connaissance informatique

[proud raven]

ou que tu ouvre le bon fichier

[dim canopy]

Juste de logique

[brisk forum]

fait fichier --> ouvrire un fichier

ou

tu fait clic droit ouvrire avec et tu choisit notepadd

[dim canopy]

ça c'est pas le meme fichier que ça

Les chemins ne correspondent pas

[brisk forum]

@void anvil

[void anvil]

ui

[digital crater]

cc

quelqu'un

pour m'aider en html css

svp

[dim canopy]

Expose ton pb

[digital crater]

ok

@dim canopy voila

au pire je peux voc

[dim canopy]

https://www.youtube.com/watch?v=dNYCrO8w4kg&ab_channel=TheWheelchairGuy

[ancient jackal]

yo, quelqu'un sais comment enlever les ectention .php ou .html?

[tame forge]

Renseigne toi sur le .htaccess

[ancient jackal]

J'ai déjà fait un .htaccess mais ça fonctionne pas

[dim canopy]

https://stackoverflow.com/questions/6534904/how-can-i-remove-file-extension-from-a-website-address
Sinon tu fait des routes

[brisk forum]

de base avec les hébergeur sa le fait pas automatiquiement

[lapis burrow]

un fichier .htaccess règle le soucis en général

[proud raven]

C'est même la meilleur solution

[patent igloo]

Bonjour je voudrais faire comme sur le screen pour mon site mais je ne trouve pas le mot exact à rechercher pour trouver de l’aide concernant ce que je veux faire. Je voulais savoir si quelqu’un aurait une idée de comment on appel ça ou si quelqu’un peut me proposer directement son aide merci d’avance !

[past escarp]

Recherche éditeur WYSIWYG

[patent igloo]

super c’est ça merci beaucoup!

[digital crater]

hey

cc

j'ai un petit problème concernant ma nav bar avec mon menu-hamburger

lorsque j'appuie il s'ouvre

mais je ne peux le fermer

[brisk forum]

[digital crater]

en effet @brisk forum

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
    <title>ScienceCool</title>
    <body>
        
        <nav class="navbar">
            <a href="#" class="logo">SCIENCE-COOL</a>
            <div class="nav-links">
                <ul>
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="#">Mathématiques</a></li>
                    <li><a href="#">Physique Chimie</a></li>
                    <li><a href="#">Informations</a></li>                    
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
            <img src="rsc/menu-btn.png" alt="menu hamburger" class="menu-hamburger">
        </nav>

        <header></header>

        
    </body>
        <script>
            const menuHamburger = document.querySelector(".menu-hamburger")
            const navLinks = document.querySelector(".nav-links")
    
            menuHamburger.addEventListener('click',()=>{
            navLinks.classList.toggle('mobile-menu')
            })
        </script>
    
    </html>```

*{
    margin: 0;
    padding:0;
    text-decoration: none;
    list-style: none;


}

body{
    font-family: 'Poppins', sans-serif;
}
header{
  height: 100vh;
  width: 100vw;
  background-image: url(../rsc/landscape.jpg);
  background-size: cover;
}


.navbar{
  position: absolute;
  padding: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.navbar a {
 color: white;

}

.navbar .logo{
 font-size: 2em;
 font-weight: bold;
}

.navbar .nav-links ul {
 display: flex;

 }
 
.navbar .nav-links ul li{
  margin:0 25px;

}

.navbar .nav-links ul li.active{
color: #ed3c57;
font-weight: 600;
}

.nav-bar .menu-hamburger{
  display: none;
  position: absolute;
  top:50px;
  right: 50px;
  width: 35px;
}

@media screen and (max-width: 900px){
  .nav-bar {
    padding:0;
  }
  .navbar .logo{
    position: absolute;
    top: 50px;
    right: 50px;
   }
   
  .nav-bar .menu-hamburger {
    display: block;
  }
  
  .nav-links {
    top:0;
    left: 0;
   position: absolute;
   background-color: rgba(255, 255, 255, 0.20);
   backdrop-filter: blur(7px);
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: -100%;
   transition: all 0.5s ease;

   }
  
   
   .nav-links.mobile-menu{
    margin-left: 0;
  }

  .nav-links ul {
  display: flex;
  flex-direction: column;
  align-items: center;

  }
  .navbar .nav-links ul li {
  margin:25px 0;
  font-size: 1.2em;

  }
}

[brave jay]

Parce que tu ne me ferme pas quand tu clics

[digital crater]

bah oui

je sais

[brave jay]

Vérifie si il est ouvert ou fermer

[digital crater]

un

[brave jay]

Et si il est ouvert alors tu supprime la class

[digital crater]

oui

mais je vois pas le button menu-hamburger

[brave jay]

Ah oui ça c’est un soucis css et je ne peux pas le régler sur tel désolé :/

[digital crater]

ok

[digital crater]

svp ??

quelqu'un??

[iron stone]

Tu ne trouves pas ton menu?

Si c'est ça inspecte l'élément

[iron stone]

@digital crater

[digital crater]

Nn sebon

J'ai résolu le problème mais j'en ai un autre

Mdr

[iron stone]

Dis moi

[digital crater]

Bah je suis plus sur pc mais attend

Mon titre de gauche part a droite avec la flexbox

Alors que de base il est censé être a gauche

[iron stone]

https://youtu.be/HQopEEurQYE , xD tu as regardé ce tuto toi ?

[tame forge]

[digital crater]

Nan @iron stone

Pas du tout je vois pas de quoi tu parles

Bizare genre

[iron stone]

Xd

[digital crater]

Mdr

Tkt

[void anvil]

Bonsoir j'aimerai savoir comment je fait pour décoler l'icone du text svp

[short acorn]

margin-left dans ton css

[patent igloo]

Salut j’ai mis TinyMCE comme WYSIWYG sur mon site mais il prend toute la largeur de ma page et il ce met devant des éléments html quelqu’un sait comment modifier sa largeur et sa hauteur et est ce que c’est avec CSS déjà pour le modifier ?

[proud raven]

Oui c'est avec css

[patent igloo]

d’accord merci et quand je met ça dans le css ça change rien et ça m’enlève le style d’un bouton genre il redeviens comme un bouton par défaut.

tinymce.init({
selector: ’textarea’,
width: 300
});

[void anvil]

oui met ça decal tous le text pas juste l'icone

[void anvil]

jl'ai deja fait

[rustic anvil]

il faut peut être créer 2 span, et appliquer le css sur l'element de droite, pour que le margin left ajoute un espace.
ou alors tu le fais à l'ancienne
texte   icon
tu auras ton texte, suivi d'un espace, puis d'un espace insécable, puis d'un espace, puis de ton icon :)

[cyan imp]

Uhm .... Sinon ... pourquoi ne pas simplement utiliser Flex 🙃

Imaginons que tu ai ce HTML :

<div class="container">
  <p> 99k </p>
  <p> Shop </p>
  <i class="fas fa-card" />
</div>

Tu pourrais tout simplement faire

.container{
  width: 200px; /*Par exemple mais tu met ce que tu veux*/
  display: flex;
  justify-content: space-between;
}

Ou bien utiliser les nth-child()

.container :nth-child(last){
  margin-left: 10px;
}

Après bon, il y a plusieurs façon de le faire, à toi de trouver celle que tu veux utiliser, mais surtout celle que tu comprend le mieux, pour ne pas avoir le même problème plutard @void anvil

[void anvil]

merci

Bonjour , j'ai un souci avec mon code css c'est que les changement que je fait sur ma balise p ne fonctionne pas sauf le margin-top: 1rem;
voici mon code :

CSS
/* Hero Section */
.main {
    background-color: #141414;
}

.main__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    height: 90vh;
    background-color: #141414;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0 50px;
    
}

.main__content h1 {
    font-size: 4rem;
    background-color: #29539B;
    background-image: linear-gradient(to top, #29539B 0%, #1E3B70 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.main__content h2 {
    font-size: 2,75rem;
    background-color: #29539B;
    background-image: linear-gradient(to top, #29539B 0%, #1E3B70 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.main__content p {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.main__btn {
    font-size: 1rem;
    background-image: linear-gradient(to top, #29539B 0%, #1E3B70 100%);
    padding: 14px 32px
}```voici mon code html```html
  <div class="main">
    <div class="main__container">
      <div class="main__content">
        <h1>99k's Store</h1>
        <h2>(Very Cheap)</h2 
          <p> See What Makes Us Different</p>
        <button class="main__btn"><a href="/">Shop Now
          <i class="fa-solid fa-credit-card"></i>
          </a></button>
      </div>
      <div class="main__img--container">
        <img src="images/pic1.svg" alt="pic" id="main__img">
      </div>
    </div>
  </div>```

[brisk forum]

sa donne quoi ?

[void anvil]

le texte ne change pas

[brisk forum]

essaye de faire ```html
<p class="main__content">

[void anvil]

trj la mm

[brisk forum]

essaye de faire une autre class juste pour test fait une class main__content2

[void anvil]

j'ai trouver à un moment j'ai du effacer le > du <h2>(Very Cheap)</h2

[brisk forum]

a oui aussi j'avais pas vu mdr

yes c sa

[void anvil]

merci quand mm bg

🫶🏻

[winter slate]

Qui pourrait m'aider à dev un site pour mon serveur Minecraft gratuit ou avec un prix

[void anvil]

vient dm bg

[brave jay]

Si tu as un design je te le fait

[void anvil]

un conseil leurs fait rien il ont anarqué mon pote

[brave jay]

Comment ça ?

[void anvil]

bah en gros ma pote a fait un site ect et il n'était pas content sauf que il doivent quand même payer

et d'après eux c'est une template

voci la fameuse template

[void anvil]

ils lui ont dit quoi faire

ni rien

[winter slate]

J'aimerais bien qu'on parle en privé

[brave jay]

Tous les sites ce ressemble aujourd’hui …

[copper warren]

Prix ?

[brave jay]

Et cette template est très / trop facile à reproduire alors je ne vois pas où est le problème

[copper warren]

J'ai rien compris son pote à fait une maquette en gros ?

Et la les mecs veulent pas payé c'est ça ?

[brave jay]

Il a fait le site mais ils veulent pas payer ça ressemble à un template

[copper warren]

Le site est vraiment pas ouf surtout faut être honnête

à intégrer ça prend legit 5 minutes

[brave jay]

Bah y’a rien du tout enfaite

Oui

[proud raven]

Bah ils a juste mis des label mdr et fais du design flat

donc je peux comprendre le mécontentement en vrai

[brisk forum]

ba tu dev en leur tennant la main tu leur dit etap par etap se qu'il veulent

moi j'ai fait baucoup de site pour des gens

et sa a tout jour bien marcher

[left wigeon]

ça rigole pas chez YounousTech

[brisk forum]

😂 ba sa ma rapporter tres peu mais bon

[left wigeon]

ça t'a au minimum apporté de l'expérience 👍

[brisk forum]

yes

j'ai appris a co op avec un dev backend

[left wigeon]

ça a du aiguiser ta patience xD

[void anvil]

qui pour rait me faire un site svp bessois de consiélle

[brisk forum]

😂 baucoup trop

[tame forge]

Plutôt un prof de français qui devrait te donner des conseils parce que là on te comprend pas

[void anvil]

dsl je suis endicapér

[queen pivot]

Hm

[brisk forum]

meme faut s'appliqué moi j'ai aussi un truc dys jsp trop quoi et je suis marocain j'ai vécu la bas mais j'essaye de m'appliqué

[queen pivot]

J'avoue

[plush solar]

Salut, quelqu’un aurait un code pour un menu burger ?

[empty tartan]

[tame forge]

https://tenor.com/view/google-is-your-friend-justin-mitchel-free-code-camp-you-can-search-on-google-google-can-help-gif-22479579

[iron stone]

Tu peux mettre du margin a ton block , faire un code JS qui donne un class a ce block quand tu clique sur ton menu , et sur la class tu mets : css margin : 0;

[sly abyss]

hey est ce que qlqn pourait voc pour m'aider en deux spi svp

[supple crag]

à propos de quoi ?

[sly abyss]

ya mon header qui bug

il est pas centré et des que je scroll il se recentre

c bon enft

[sly abyss]

hey on est d'accord que avec sa : ```css
img{
display: flex;
justify-content: center;
align-items: center;
}

[rustic anvil]

non, mais juste avec un margin:auto, ça devrait être bon

[copper warren]

Tu cibles pas la bonne chose

C'est pas sur ton images que tu dois mettre ça mais sur son parent

D'ailleurs tu peux remplacer tes justify et align par une seul propriété qui est place-items

[plush solar]

Oke jvaud test

[patent igloo]

Bonjour j’ai mis un <embed> sur mon site pour un fichier pdf.
Je n’arrive pas à le décaler du bord gauche.
Je ne vois pas comment faire. J’ai essayé d’utiliser un margin mais je suis pas sûr que ce soit ça, puis ça me le décalé pas du bord.

[lapis burrow]

Utilise iframe plutôt ?

[patent igloo]

Niquel merci plus simple en plus

[rare knot]

Bonsoir quelqu’un pourrais m’aide à crée une page en html ?

Car je mis connais absolument pas

[brisk forum]

commence pas apprendre en reagardant des tutos

[rustic anvil]

( perso j'ai commençant en copiant une page existante, je colle en local, je supprime des bouts pour voir ce que ça fait, comprendre à quoi ça sert, puis je modif pour voir la réaction aussi :3 etc.. mais y'a des tutos ouip)

[candid ginkgo]

Hey, je débute en html et css et je rencontre un petit souci en essayant de créer ma page web.
j'ai mis de la couleur sur le header pour que le problème soit bien visible:
les boutons de gauche sortent du header quand on resize la page.

https://codepen.io/D3mOo_TV/pen/yLxzVRa

[rustic anvil]

peut être pas assez responsive, chaque element prend de la place, surtout la barre de recherche, lorsque l'écran est pas large, bah... catastrophe
peut être mettre sur deux lignes lorsque écran petit avec un flex grid surement, ou javascript, ou autre technique en css que je ne connais pas

[brisk forum]

moi je sais pas j'ai tout apris dans un egrotte j'ai trouver un livre de java donc pas de html du tout et sa parler de html je ne sais pas pour quoi et y'avais des base de code que j'ai copier etc...

[stone laurel]

Bonjour, j'ai quelques difficultés pour mon header en HTML/CSS quelqu'un aurait-il la possibilité de m'aider quelques minutes svp ? J'ai un micro.

Je suis débutant, je sais que mon header n'est pas super propre.

[rustic anvil]

Salut @stone laurel
tu as quoi de fait, et il y a quoi qui déconne? :)

[dusky skiff]

Hey, c'est carré niveau design mais le rouge il pique à mort
Je te conseille plutôt de partir sur un rouge plus clair : #FF5050

[candid ginkgo]

Merci pour ta réponse !

[candid ginkgo]

Salut, merci pour ton message, alors pour la couleur rouge de base c’était un blanc avec quelques ombres au-dessus mais j’ai mis la couleur rouge juste pour que le problème soit bien visible. Merci à toi

[dusky skiff]

Ok, bien vu !

J'avais pas lu tout ton message, mb

[candid ginkgo]

Pas de soucis c’est juste que le site n’est pas responsive et je ne comprend pas pourquoi certains boutons de la navbar restent en place mais pas le header

[stone laurel]

Mon élement du site passe sous mon header c'est normal mais je n'arrive pas à le descendre, même en utilisant margin-top padding top = c'est mon header qui descend et pas l'élément que je vise

@rustic anvil

[rustic anvil]

@stone laurel ok, quand tu dis "Mon élement du site" c'est quoi exactement, l'image de fond? la barre contenant "livraison" ?

[stone laurel]

Je veux que l'image de mon main commence juste après mon header tu vois ?

L'image se coupe

[rustic anvil]

j'ai DL tes fichiers, ça donne ceci : (ducoup jpeux pas preview le probleme) et sur ton ancien screen je vois que l'image passe "derriere" le header

[forest echo]

tu voudrais qu'ils soient où les boutons de ta navbar pour la version "mobile"?

[candid ginkgo]

J’ai mis un lien codepen mais en gros quand tu redimensionne le site, les boutons de la Navbar sont toujours en place mais le header en rouge devient plus petit

[forest echo]

tu pourra pas faire passer tout en même temps sur la même ligne sur la version mobile

[candid ginkgo]

Il faut passer soit sur une navbar sur deux lignes ou sinon un menu burger ?

Je ne comprenais juste pas pourquoi le header devient de plus en plus petit alors que les boutons non

[forest echo]

Enfaite ton input de recherche à une width définie et ton container header n'a pas toutes les propriétés pour flex correctement donc tout reste sur la même ligne

tu dois donc modifier ta width par :

.rechercheInput{
  max-width: clamp(20em,35vw,40em);
}```
et ajouter à ton header :
```css
header{
  flex-flow: row wrap;
}```
> "row" aligne les items sur une ligne et "wrap" permet aux items de passer l'un en dessous de l'autre si il n'y a plus de place.

Voici un site super bien fait pour comprendre les flex-box :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Et voila un site qui t'expliquera comment créer une** navbar responsive** pour la version mobile (ne recopie pas le code bêtement mais essaye de l'adapter à ton projet.) :
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

[candid ginkgo]

Merci beaucoup pour ton explication ! Passe une très bonne journée

[forest echo]

Dr

[candid ginkgo]

Est-ce que tu aurais un site où on peut trouver des maquettes de site web ?

[forest echo]

https://www.free-css.com/free-css-templates y'a lui mais je te conseille de le faire toi même en suivant un tuto sur internet. Ca te formera beaucoup plus que de simplement recopier le code d'un autre.

[candid ginkgo]

non je ne cherche pas recopier du code juste à avoir un design de site et pouvoir donc m'en inspirer pour créer le mien merci

[forest echo]

ha alors tu peux aller sur dribble ou behance pour t'inspirer

[candid ginkgo]

nickel c'est dribble que je cherchais merci !

[fair merlin]

Salut les gars, j'aurais besoin de quelqu'un qui maîtrise le html pour me donner un petit coup de pouce svp ^^

[dusky skiff]

Dit nous ?

[kindred blaze]

HTML : html.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Page de connexion/inscription</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="form-container sign-in-container">
      <form action="login.php" method="POST">
        <h1>Connexion</h1>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Mot de passe" required>
        <button type="submit">Connexion</button>
      </form>
    </div>
    <div class="form-container sign-up-container">
      <form action="google.fr" method="POST">
        <h1>Inscription</h1>
        <input type="text" name="name" placeholder="Nom complet" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Mot de passe" required>
        <button type="submit">Inscription</button>
      </form>
    </div>
    <div class="overlay-container">
      <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h2>Bienvenue !</h2>
          <p>Pour continuer, veuillez vous connecter.</p>
          <button class="ghost" id="signIn">Connexion</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h2>Nouveau parmi nous ?</h2>
          <p>Inscrivez-vous maintenant et rejoignez notre communauté !</p>
          <button class="ghost" id="signUp">Inscription</button>
        </div>
      </div>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

CSS : style.css

* {
    box-sizing: border-box;
  }
  
  body {
    background-color: #f6f5f7;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  .container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25),
                0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    max-height: 650px;
  }
  
  .form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
  }
  
  .sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
  }
  
  .sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
  }
  
  .overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100%;
  }

donc voici mon code

et voilà ce que ça me fait sur le site

je ne comprend pas, si quelqu'un pouvait m'aider

[iron stone]

La couleur du body marche ?

[kindred blaze]

j'essaye de la changer

car c'est du blanc mais gris léger

yep elle marche

[grizzled beacon]

un petit coup d'inspection sur la page avec la souris pour qu'on voit quel élément sont visible ? si ta tjr le problème

[rustic anvil]

le container est en "position:relative" quand je l'enleve ça affiche tout

y'a plusieurs overflow et flex avec des absolute ... hm
peut être refaire ça propre, car ducoup ouai rien ne s'affiche :s

perso, je mets toutes mes divs en relative, puis j'applique des flex sur mes zones, et pour overflow/hidden, j'ajoute un container uniquement là où il y a besoin. ça permet d'avoir un code propre et flexible. m'enfin bon c'est ma façon de faire, chaque dev a ses techniques :)

[kindred blaze]

yep, j'avais vu ça

mais bon, maintenant j'ai juste a faire le style de la page parce que là euh

moche moche

[copper warren]

Mettre toutes ses divs en relative quelle horreur mon dieu

[rustic anvil]

pk?

[copper warren]

Aucun interet tu détruits le flow de ta page

Si la propriété par défaut c'est static c'est pas pour rien

[rustic anvil]

bah jsais pas, quand je veux mettre en place mon site ça marche très bien, ça ne détruit rien

[copper warren]

Une question de propreté c'est comme si je mettais des display: block partout aucun interet quand t'as pas besoin de t'en servir

[rustic anvil]

ok, jsais pas j'avais plein de problemes, et depuis des années j'utilise relative partout, et zero soucis depuis, je ne me suis même pas rendu compte que c'était static d'origine ^^

d'accord, je vois
m'enfin quand je ne mets pas ça, ça déconne sur certaines disposition de page

[copper warren]

Le principale problème c'est surtout le positionnement

si tu met tout en relative

Le moment ou tu veux mettre un truc en absolute t'es baisé il sera absolute au dernier parent ducoup 🙂

[rustic anvil]

exact, et ça me convient, car si je le veux en absolu du body, je le mets direct dans le body :3

[copper warren]

Oh mon dieu

[rustic anvil]

quoi? xD

ça fonctionne

je ne vois pas en quoi c'est un soucis

[copper warren]

Je vais te donner un exemple att je fais un dessin

[rustic anvil]

okok :)

[copper warren]

Imagine t'as ça :

Si toute tes divs sont en relative tu met comment le 1 ?

Si tu met dans le body t'as l'air un peu con

[rustic anvil]

bah là je ne connais pas l'heritage des divs, mais en cherchant un peu c'est totalement possible, peut être avec un ::before

là je n'ai pas assez d'infos pour donner une réponse
mais bon, je ne vois pas ce qu'il y a de con, ou d' horreur, vu que tout fonctionne habituellement

encore si ça déconnait là oui ça serait horrible, comme la plus part des choses que je répare d'ailleurs :p

pour ta réponse, je pense qu'on peut flex end, ou absolute right et margin negative

[copper warren]

Niquel alors si ça marche 👍

[rustic anvil]

c'est le principal :) après niveau optimisation, y'a tellement de moyens de faire une même chose.. :3 on pourrait se prendre la tete des heures
mais je pense qu'il faut mieux se préoccuper de choses qui déconnent :3

[plush solar]

Quelqu’un dispo vocal maintenant svp ?

J’ai besoin d’aide

[iron stone]

Dis moi tout

Je peux voc vers 13h si tu es disponible

[void anvil]

Bonjour à tous,

j'aurais besoin d'aide pour créer un formulaire en HTML et CSS

Voici a quoi doit ressemble le formulaire

Merci a vous

[tame forge]

C’est quoi le problème ?

[void anvil]

je n'arrive pas a mettre en forme mon formulaire comme sur limage, il reste a la vertical alors qu'il faut qu'il soit a l'horizontal @tame forge

[brave jay]

Flex est ton ami

C’est une révolution tu vas voir

[tame forge]

x)

[void anvil]

jai essaye le flex ça ne marche toujours pas
je dois rendre ce taff pour la semaine pro je ne sait plus comment faire

[brave jay]

Et bien je t’avoue que là maintenant je peux pas plus t’aider

Et si c’est un taff à rendre c’est que tu as des cours de développement non ?

Si oui, ça veut dire que tu n’as pas suivi t’es cours et ça c’est mal

[hazy spade]

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

[brave jay]

tu as un portfolio toi ?

[hazy spade]

Non

[plush solar]

Pour l’instant c’est bon j’ai plus besoin mais merci beaucoup je reviens vers toi pour toutes questions

[sudden ibex]

**Je viens de déterminer mon site ( Je l'ai adapté au mieux pour les téléphones ) :

https://spacial.vercel.app/#docs

Si je peux avoir un avis sa serait cool**

[dim canopy]

Le front est sympa 👍

[sudden ibex]

C'est gentil

[left wigeon]

@sudden ibex c'est toi qui a fait le front ?

[sudden ibex]

nan pk

[left wigeon]

https://github.com/JastinXyz/discord-bot-landing-page-web

Nan je demande comme ça hein

[sudden ibex]

[left wigeon]

😂

Il va falloir assumer vos paroles monsieur LifeTime

[sudden ibex]

Je vois pas de quoi tu parle

[forest echo]

Ok ce n’est pas toi qui l’a fait mais ce n’est pas le meilleur template puisqu’il y’a quelques problèmes :

• Il y a un scroll horizontal. C’est sûrement une image trop grande ou une width fix d’un div et son contenu trop grand.

• Dans la section des paragraphes et des images certaines images sont au dessus de leur paragraphe (et inversement) ce qui crée un effet de discontinuité.

• Il faut revoir les couleurs des différents boutons pour uniformiser leur style.

• Il faut aussi faire attention a l’organisation du header. En effet le bouton qui invite à l’action (la petite flèche) n’est pas visible directement au chargement (il faut scroller). Il faut donc : soit supprimer l’image sur la version mobile, soit inverser les deux.

Ces remarques et conseils concernent la version mobile.

Bonne journée à toi 😉

@sudden ibex

[sudden ibex]

Oui Bv je vais faire sa

[forest echo]

pour que ca face plus "pro" essayes de mettre de l'espace entre les paragraphes

[brave jay]

Je viens vous parler d'un super effet qui est le blur !

Pour rajouter un effet de shadow dans le même style que youtube mais pour les images dans ce style :

c'est assez simple il suffit de doubler la photo et de rajouter un blur en arrière plan

Voila un exemple de code : html <div className="relative z-50"> <img className="h-32 w-32 rounded-full absolute inset-0 -z-1 blur-xl" src={img} /> <img className="h-32 w-32 rounded-full border-2 border-blue-500" src={img} /> </div>

C'est fait avec tailwindcss et next donc ne recopié pas bêtement 🙂

Ça marche aussi très bien avec les vidéos mais j’ai pas eu l’occasion de tester

[copper warren]

L'ajouter en before ça aurrait sûrement été mieux à mon avis 🤔

Mais l'effet est vraiment sympas 👌

[brave jay]

comment ca ?

[copper warren]

Bah en utilisant un before ça serait peut être mieux ça t'éviterais d'avoir un doublon de ton image dans le dom

Après c'est une autre facon de faire peut être plus propre

[brave jay]

Ah oui attend je test ! 🙂

alors soit ca ne marche pas soit je ne sais pas comment faire

[trail breach]

quelqu'un serait ou pourrait être la timezone ?

[rustic anvil]

il y a surement moyen de le faire directement en css :p (j'aime la pureté :3)

[brave jay]

C’est pas toi qui mets toutes t’es div en relative ? xD

C’est pas très pur tous ça, mais ouais je prendrais le temps de chercher

[rustic anvil]

ouai, bah tant que je n'aurai pas de soucis je continuerai (et ça fait plus de 10ans^^)

[lost canopy]

Bonjour, j'ai un petit soucis. Je dois, pour les cours, créer mon site internet avec un formulaire d'inscription et une consigne avec laquel j'ai beaucoup de mal actuellement et que je dois créer une base de donnée en xml mais j'ai beaucoup beaucoup de mal pour la créer. Voici mon code java script et HTML réservés pour ma base de données (merci à ceux qui pourront m'aider :)).

le problème se situe au niveau de la 6ème ligne, mon xmlhttp.status doit valoir 200 mais vaut constamment 0. Je ne comprend pas pourquoi ?

[rustic anvil]

salutations, tu peux m'envoyer le cours qui dit qu'on peut save une donnée dans un xml? car je crois qu'on ne peut que le lire, et pas écrire dedans, mais je me trompe peut être.

[lapis burrow]

via html/css/js impossible d'écrire des donnée coté serveur yep

Sauf via une API

[rustic anvil]

ouip, avec API
( avec du js tu peux, avec fetch par exemple, il faut juste que ton serv puisse écrire dans un fichier / dans une bdd )
là ça m'étonne de voir un fichier xml dans une url de httprequest, surtout pour write des données :s

[lost canopy]

Je vous avoue je découvre tout sa les bases de données en XML. Pour l’instant mon objectif c’est pas de transférer les donnés dans mon xml mais plutôt de réussir à faire apparaître ma base de donnée dans une page html et j’arrive pas des masses 😅

[lapis burrow]

Ah ça

c'est la partie ok

[lost canopy]

Comment ça c’est la partie ok ?

[lapis burrow]

Bha la lecture c'est okay xd

[severe matrix]

slt comment faire un .com ou .fr pour mon site ?

[proud raven]

tu achete le nom de domaine avec l'extension souhaitée

[severe matrix]

bah nn enft rien

pas envie de payer

[iron stone]

tu ne peux pas alors

Tu peux héberger seulement sur GitHub ou localhost ou autres hébergeurs gratuits

Mais tu n'auras pas un nom de domaine personnalisé

Tu auras toujours : .GitHub.io .
Sur GitHub par exemple

[tame forge]

.netlify.app ou encore .vercel.app & j'en passe ^^

[severe matrix]

dmg

[forest echo]

et oui rien n'est gratuit...

[plush solar]

J’ai une question assez complexe en html et css quelqu’un peut me dm en privé ?

[left wigeon]

Je te conseille de quand même l'écrire ici

[plush solar]

Oke

Comment on fait un système pour avoir un carré avec du texte et pouvoir bouger entre carré avec des flèches ?

[left wigeon]

Pour faire un slider, soit tu te chauffe et tu suis un tuto pour comprendre comment en faire un
Soit tu utilises une lib js comme swiper js par exemple

[plush solar]

Mhhh mais comment on fait ça ?

[left wigeon]

Perso je te conseille de suivre un tuto afin de comprendre comment ça fonctionne

[left wigeon]

pour swiper ajoute juste son cdn

[plush solar]

Oke je vais voir tu as des chaînes qui font ce genre de chose ?

[plush solar]

Merci

[left wigeon]

https://www.youtube.com/watch?v=14xcmpCvG7Q&ab_channel=LeDesignerduWeb-ÉcoleduWeb

[plush solar]

Ça c’est la maquette de mon site et le but c’est de présenter mes services avec une image et un texte

[plush solar]

Merci beaucoup 🙏

[dreamy flume]

Salut j'ai une balise div dans laquelle je met du texte et un background image mais je veux que la div fasse la taille du background c'est possible ?

[dreamy flume]

probleme resolu

[sly abyss]

Bonjour, j'essaye de faire un cercle de texte tournant autour d'un texte sauf que le text n'est pas centré pouvez vous m'aider svp

mon code :

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Document</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    display: grid;
    place-items: center;
}
#text {
    height: 160px;
    font-size: 20px;
    animation: animate 5s linear infinite;
}
@keyframes animate{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
span {
    position: absolute;
    transform-origin: 0 80px;
}
.container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#play{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
    </style>
</head>
<body>
    <div class="container">
        <h1 id="text">Snake</h1>
        <h3 id="play">Jouer</h3>
    </div>






    
    <script>
        const text = document.getElementById("text")
        text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>")

        const ele = document.querySelectorAll("span")

        for(var i = 1; i<ele.length;i++) {
            ele[i].style.transform="rotate("+i*16.5+"deg)"
        }
    </script>


</body>
</html>

[left wigeon]

@sly abyss

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    display: grid;
    place-items: center;
}
#text {
    height: 160px;
    font-size: 20px;
    animation: animate 5s linear infinite;
    position: absolute;
}
@keyframes animate{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
span {
    position: absolute;
    transform-origin: 0 80px;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#play{
    display: flex;
    justify-content: center;
    align-items: center;
}

Essaye avec ce CSS

@sly abyss je viens de le mettre à jour, j'avais oublié un élément

[sly abyss]

ta rjt quoi?

prcq sa marche niquel

c le position: absolute?

[left wigeon]

pour ce que tu veux faire ton parent (celui des span) doit être en abso

[sly abyss]

ok ba merci

[left wigeon]

Pas de soucis 👍

[rare veldt]

hey, j'essaie d'apprendre l'html mais j'ai un problème j'arrive pas à aligner mon image à la droit du texte

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
#barre_fixe
{
position: fixed;
top: 10px;
width: 99%;
background: #304276;
border: none;
border-radius: 10px 10px;
}
</style>
<title>Positionner une barre fixe</title>
</head>
<body style="background-color:#51565E;">
<div id="barre_fixe" style="text-align: right;">
<h2><center><p style="color:#CCE5F6";><span style="text-decoration: underline;">Gamer In Strength</span></p></center></h2>
<img src="https://cdn.discordapp.com/attachments/915322515163848704/1086004574839648396/Logo_Discord_2015.png" height="100" width="100" </p>
</div>
</body>
</html>```

[rustic anvil]

tu as posé ton image "apres" le h2, donc elle ne peut pas être à coté
peut être la poser juste apres le texte ou au moins apres la span

[forest echo]

Alors… par où commencer :

Déjà tu ne t’y prends pas de la bonne manière. Je ne sais pas si tu regardes un tuto mais ce n’est pas le bon.

Pour commencer il faut séparer le style du html. Soit dans un fichier séparé, soit dans des balises <style></style> au dessus ou en dessous du body. C’est important pour correctement s’organiser, c’est une sorte de norme d’aujourd’hui.

Pour aligner tes deux éléments il existe quelque chose de magique : ✨les flexbox✨.
Tu dois juste mettre dans les propriétés css de ton « #barre_fixe » la propriété « display: flex » ainsi que « flex-flow: row nowrap ».

• flex : fait en sorte que le contenu s’aligne d’une façon spécifique.
• row : aligne le contenu du container sur une ligne.
• nowrap : permet aux éléments de passer les un en dessous des autres si il n’y a plus assez de place.

N’hésites pas à te renseigner sur les flex box et à suivre des tuto pour débutants. Ceux d’Openclassroom sont très bien fait pour les débutants.

[rustic anvil]

j'ai tenté de modifier la page pour que ça fonctionne, y'a des ; qui n'ont rien à faire là, des balises mal fermées... un petit début de catastrophe.
il faut séparer le style du html. Soit dans un fichier séparé, soit dans des balises <style></style> au dessus ou en dessous du body. C’est important pour correctement s’organiser, c’est une sorte de norme d’aujourd’hui. certainement pas... il faut que ça aille dans le head comme il l'a fait (element invisible), ou oui dans un fichier séparé. mais surtout pas sous le body ou avant le body..
par contre oui le tuto qu'il a suivi doit être tout pourri, car rien ne va dans les elements du body.. il est temps de reprendre de zero pour repartir sur de bonnes bases

pour l'alignement, il existe le table, le float et le flex. Flex étant ultra simple d'utilisation, il est intéressant de s'y pencher.

[forest echo]

Oui effectivement je sais pas pourquoi j’ai dis au dessus du body

[rare veldt]

ouais je sais, désolé, entre temps quelau'un m'a aider a clean mon code et m'a montrer comment faire ce que j'avais demandé

et donc il m'a montré comment trier l'html et le CSS

et ma montrer la marche à suivre pour bien mettre ma barre

[forest echo]

Ok super

[valid yarrow]

Bonjour

Je cherche une personne qui s’y connais bien en codage HTML CSS svp merci

[brave jay]

tu as besoin de quoi ?

[mild canyon]

Pose direct ton problème

[iron stone]

yep

[dusky skiff]

[severe matrix]

Eh beh

[austere ibex]

Hey; je cherche a bloquer un boutton de scroll sur mon background mais il bouge a chaque résolution si quelqu'un serais m'aider

  <div class="background">
      <h2 class="small-title">Azuria Studio vous présente le serveur du moment</h2>
      <h1 class="big-title">SCP Secret Lab <span>Non Rôleplay</span></h1>
      <p class="slogan">Innovons votre façon de jouer !</p>
      <button><a href="#cards">Voir plus</a></button>
    </div>
    </div>
  </main>

  button {
    margin: -50px;
    font-size: 20px;
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    display: inherit;
    align-items: end;
  }

  .background {
    background-image: url(images/bg.jpg);
    background-size: cover;
    background-position: center center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

[rustic anvil]

margin: -50px;
ça c'est du fixe "px" il faudrait essayer de mettre une valeur plus faible et en poucentage

[void anvil]

Bonjour, comment puis-je faire pour mettre une image à droite, un titre puis une description dessous du titre ? Petit exemple :

[rustic anvil]

flex

une div contenant 2 div (une pour l'image, une pour le texte)
et pareil pour l'autre partie
une div contenant 2 div (une pour le texte, une pour l'image)
avec un flex-wrap:wrap, une taille prévue pour l'image et lez go

-> div rouge
---> titre
-> div part1 (flex-wrap:wrap)
---> div avec image
---> div avec titre puis texte
-> div part2 (flex-wrap:wrap)
---> div avec titre puis texte
---> div avec image

[void anvil]

Merci beaucoup je vais regarder ça !

[rustic anvil]

pose d'autres questions si tu as besoin, il vaut mieux apprendre que de changer d'idée, car ça te servira pour plus tard sur autre chose :)

[void anvil]

J'ai fait ceci :

        <div class="section-1">
            <h1>Titre test</h1>
            <div class="contenu-1">
                <img src="https://www.gannett-cdn.com/authoring/2016/12/20/NPAL/ghows-WL-adcab79b-7730-4619-9568-47e28f548871-48444612.jpeg">
                <h3>Petite description</h3>
            </div>
            <h1>Titre test 2</h1>
            <div class="contenu-2">
                <img src="https://www.gannett-cdn.com/authoring/2016/12/20/NPAL/ghows-WL-adcab79b-7730-4619-9568-47e28f548871-48444612.jpeg">
                <h3>Petite description 2</h3>
            </div>
        </div>

et ```css
.section-1{
margin-top: 10%;
margin-left: 2%;
}
.contenu-1{
flex-wrap:wrap;
}
.contenu-1 img{
width: 10%;
}

.contenu-2{
flex-wrap:wrap;
}

.contenu-2 img{
width: 10%;
}

Mais j'ai ceci :

Pourrais je savoir pourquoi ?

[vestal spoke]

en gros tu veux les mettre côte à côte ?

[void anvil]

Oui c'est ça

[left wigeon]

@void anvil

[left wigeon]

si tu veux ce résultat

Je te conseille de faire cette structure :

 <div class="container">
   <article class="even">
     <img src="https://www.gannett-cdn.com/authoring/2016/12/20/NPAL/ghows-WL-adcab79b-7730-4619-9568-47e28f548871-48444612.jpeg" alt="Image article">
     <div class="article-content">
       <div class="title">Titre test</div>
       <div class="desc">Petite description</div>
     </div>
   </article>
   <article class="odd">
     <img src="https://www.gannett-cdn.com/authoring/2016/12/20/NPAL/ghows-WL-adcab79b-7730-4619-9568-47e28f548871-48444612.jpeg" alt="Image article">
     <div class="article-content">
       <div class="title">Titre test</div>
       <div class="desc">Petite description</div>
     </div>
   </article>
</div>

Et ce CSS

.container {
  display:flex;
  flex-direction: column;
  width: 100%;
}

article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.even { flex-direction: row; }
.odd { flex-direction: row-reverse; }
.even .article-content { margin-left: 10px; }
.odd .article-content { margin-right: 10px; }
.even .article-content > div { text-align: left; }
.odd .article-content > div { text-align: right; }

Tu peux dupliquer tes articles, tout en intervertissant bien "odd "et "even"

[brave jay]

Tu as ca : https://www.zonecss.fr/proprietes-css/nth-child-css-selector.html

c'est peut etre mieux

[left wigeon]

Oui tu peux juste cible avec nth-child(2n+1) pour odd et nth-child(2n) pour even

mais ça te fera pas écrire moins de ligne

ça va juste permettre de ne pas écrire de class dans article

[brave jay]

enfaite c'est plutot ```css

.article-content {
margin-left: 10px;
text-align: left;
}

.article-content:nth-child(odd) {
margin-right: 10px;
text-align: right;
}

[left wigeon]

et la compatibilité de nth fait un peu flipper

https://caniuse.com/?search=nth-child

[brave jay]

c'est ca qu'il faut regarder :

[left wigeon]

Bien vu 👍

@void anvil

Voici la version CSS la plus optimisée

[void anvil]

Merci beaucoup de votre aide, je vais tester ça

[left wigeon]

.container {
  display:flex;
  flex-direction: column;
  width: 100%;
}

article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.article-content { 
  margin-left: 10px;
  text-align: left;
}

.article-content > div { text-align: left; }

article:nth-child(odd) { flex-direction: row-reverse; }
article:nth-child(odd) .article-content  { margin-right: 10px; }
article:nth-child(odd) .article-content > div  { text-align: right; }

[void anvil]

c'est donc mieux de prendre ceci ?

[left wigeon]

prends le code que je viens d'envoyer pour le css

et tu peux retirer les class odd et even pour le html

[void anvil]

D'accord merci :)

[brave jay]

.article-content > div { text-align: right; } n'est pas vraiment obligatoire il peut rester dans son parent

[left wigeon]

C'est faux

Il ne sera pas hérité

[brave jay]

    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    article {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .article-content {
        margin-left: 10px;
        text-align: left;

    }

    .article-content>div {
        text-align: inherit;
    }

    article:nth-child(odd) {
        flex-direction: row-reverse;

    }

    article:nth-child(odd) .article-content {
        margin-right: 10px;
        text-align: right;
    }```

bon c'est clairement pas obligatoire c'est vraiment pousser l'opti 😄

[left wigeon]

On pourrait aller encore plus loin xD
Car l'héritage du text-align peut fonctionner, mais seulement si la balise est de type inline, donc si j'avais mis un h3 en titre et un <p> en desc ça aurait fonctionné

<div class="article-content">
   <h3>Titre test</h3>
   <p class="desc">Petite description</p>
</div>

Là l'héritage serait good

@brave jay merci pour l'aide sur l'opti du code 👍

[void anvil]

Bonjour, je voudrais aligner, le milieu de mon image, à mon texte savez vous comment je peux faire ?

[tame forge]

Hey!
En CSS, tu la propriété align-items, que tu peux définir sur center à l'élément parent de ton image et de tes boutons :p

[void anvil]

Bonjour, j'ai récemment crée un site web comme projet pour m'améliorer, et en faite ce site web c'est un genre de formulaire a remplir et donc j'aimerais savoir comment récupérer les informations que la personne a mis dans le formulaire si vous voulez le code ou l'image du site demandez le moi merci

[iron stone]

tu connais un peu PHP ?

[void anvil]

oui sa sert aussi a programmer les site mais j'ai jamais réellement utilisé le php

[brisk forum]

faut connaitre si tu veux faire de la recolte de donné

et moi je suis pas du style a dire c'est facile php c dure

[steady verge]

Salut, il faut que tu ajoutes à ton site statique un langage de programmation tu as un large panel de choix : php, js, ruby, ts, python etc
Personnellement pour ton cas je te conseil plus de t’orienter sur du js ou php

[void anvil]

Ok merci

[dusky skiff]

Je remet juste mon message

Bah dans ce cas c'est juste une div dans laquelle il y a tes éléments qui a un background blanc et ton body a un background red

Oui, fin je sais pas trop comment répondre à cette question

Bah pour t'exprimer oui, mais pour le CSS tu m'a pas l'air mauvais

Tu veux plus d'espace blanc c'est ça ?

Tu dois avoir une margin sur ton header ou sur ta div

Ou un gap

Quoique ce soit tu peux voir ce qui cause ton décalage grâce à l'inspecteur

f12

[brave jay]

Mon dieu

[void anvil]

Merci ça marche à la perfection ! :)

[severe matrix]

bjr pk je n'arrive pas a faire une nav bar ?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<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>Mon Projet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="navbar">
    <a href="#" class="logo">Mon Projet</a>
    <div class="nav-links"></div>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Assistance.html">Assistance</a></li>
            <li><a href="Connexion.html">Se connecter</a></li>
        </ul>
</nav>
<div>
    <h3>Mon projet</h3>
    <p>Test</p>
</div>
<header></header>

</body>
</html>

[brisk forum]

le css ?

[tame forge]

Le problème surtout ?

Parce que là, tu as une navbar

[severe matrix]

ah oui prd le css g t parti manger

CSS

• {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  }

body {
font-family: 'Poppins';
}

header {
height: 100vh;
width: 10vw;

}

.navbar {
position: absolute;
padding: 50px;
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;

}

.navbar a {
color: rgb(0, 0, 0);
}

.navbar .logo {
font-size: 2em;
font-weight: bold;
}

.navbar .nav-links ul {
display: flex;
align-items: center;
}

.navbar .nav-links ul {display: flex}

[iron stone]

Quel est le problème ?

[severe matrix]

bah au lieu que sa se met en haut aligne sa se met empiller sur le cote

[iron stone]

Screnn

[severe matrix]

ok

[iron stone]

Pourquoi tu mets deux fois navbar nav-links ul

[patent igloo]

Bonjour j’ai un problème avec mon site la résolution ne s’adapte pas sur les PC portable qui ont 150% sur la mise à l’échelle pour les paramètres écran quand je le passe à 100% c’est bon mais à 150% des éléments sont couper par le côté droit de l’écran et d’autres éléments sont plus bas que prévu j’ai essayé de chercher sur google et j’ai trouvé ceci (mais j’ai pas l’impression que ça fonctionne) :
<meta name="viewport" content="width=device-width" />

[severe matrix]

jsp

[ember jetty]

Les gars pour m'améliorer en HTML, CSS vous me conseiller quoi?

Avez vous des sites, youtubeur .... A proposé

[left wigeon]

Donne toi un projet/objectif, fais un nouveau site, ou essaye de refaire un site existant.

[hazy spade]

Sites : Openclassrooms, Udemy, CodinGame...
YT : FromScratchDeveloppementWeb, Benjamin Code...

Puis d'une manière générale prend le temps de te documenter, de faire des petits projets personnels et le travail de recherche associé

[tame star]

(benjamin cest plus de la veille qu'autre chose) apres faire cest propre projet est pour moi la meuilleur solution (comme la dit Zwedge)

[ancient jackal]

avis svp

[dim canopy]

Très... rudimentaire 😬

[brave jay]

Le contrast 😮

[ancient jackal]

je sais j'essaye de taff sur les shadow-box pour arrondir et réduire le logo

[brave jay]

Non mais la tu vas pas du tout dans le bon sens pour un design de réseau

[ancient jackal]

j'essaye de taff sur un coté, y a des truc qui doisvent s'ajoute encore

[brave jay]

attend je te fait un proto

[dim canopy]

Peut être qu'il serais intéressant dans un premier temps de consolidé ton css et ensuite utiliser un framework css comme bootstrap ou tailwind

[ancient jackal]

pour l'instant j'utilise aucune framework, je taff que sur du back-end et la je voulais voir un peux ce que ça allait donné avec le fond

[dim canopy]

Ok bon courage

[ancient jackal]

oui j'ai déja mis 3 fonctionnalité de base qui sont nécessaire

merci

[brave jay]

bon la c'est fait vite fait mais tu vois l'idée

[stark tendon]

bonjour j'ai envi de mettre le bouton se connecter en haut a droite au lieu de en haut a gauche

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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>Mon Projet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
<li class="btn-inscription"><a href="Connexion.html">S'inscrire / Se connecter</a></li>
</ul>
</nav>
</header>
<div>
<h3>Mon projet</h3>
<p>Test</p>
</div>
<header></header>

</body>
</html>

CSS

header {
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

nav ul li {
margin-left: 20px;
}

.btn-inscription {
background-color: #4CAF50;
border-radius: 20px;
padding: 10px 20px;
margin-left: 20px;
}

.btn-inscription a {
color: #fff;
text-decoration: none;
}

[brave jay]

sans photo :

[stark tendon]

c toi qui la fait ?

[brave jay]

oui

[stark tendon]

elle est belle

[brave jay]

mais la c'est une maquette hein

[stark tendon]

ah c pour sa que c en html

/css

[ancient jackal]

oui je vois un peux

[brave jay]

Non justement ca ne l'ai pas pour l'instant

[ancient jackal]

je vias déja partir avec sans photo

[stark tendon]

ah

[brave jay]

La photo de profil ca ne sers a rien de la mettre en énorme comme tu fais

si les gens veulent la voir ils clic dessus

[ancient jackal]

oui j'avais déja prévue de la réduire

[stark tendon]

dcp

[brave jay]

voila :

Je peux encore rajouté des trucs

[ancient jackal]

essaye ça dans le .btn-description

float: right;

[stark tendon]

ok mrc

[ancient jackal]

merci je vais prendre en exemple

[ancient jackal]

essaye ça car c'est ce que j'ai utiliser de mon coté pour mettre à droite

[ancient jackal]

si tu veux je suis en vocal

[stark tendon]

ok je vais tester

enfin .btn-inscription ?

[ancient jackal]

oui

[stark tendon]

marche pas juste je peux pas voc

[ancient jackal]

HTML:

  <nav class="menu">
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos</a></li>
      <li><a href="#">Contact</a></li>
      <li class="btn-inscription"><a href="Connexion.html">S'inscrire / Se connecter</a></li>
    </ul>
  </nav>
</header>

CSS

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu ul li {
  margin-left: 20px;
}

.btn-inscription {
  background-color: #4CAF50;
  border-radius: 20px;
  padding: 10px 20px;
}

.btn-inscription a {
  color: #fff;
  text-decoration: none;
}

/* Déplacer le bouton à droite */
.menu .btn-inscription {
  margin-left: auto;
}

essaye ça cela devrais marché

[stark tendon]

ok mrc

[ancient jackal]

ça je suis sur que ça fonctionne j'ai essaye:
CSS:

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu ul li {
  margin-left: 20px;
}

.btn-inscription {
  background-color: #4CAF50;
  border-radius: 20px;
  padding: 10px 20px;
}

.btn-inscription a {
  color: #fff;
  text-decoration: none;
}

/* Déplacer le bouton à droite */
.menu .btn-inscription {
  margin-left: auto;
}```

HTML:
```<header>
        <nav class="menu">
          <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">À propos</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="btn-inscription">
            <li class="btn-inscription"><a href="Connexion.html">S'inscrire / Se connecter</a></li>
          </ul>
        </nav>
      </header>

[left wigeon]

Alors je suis désolé mais je pense que ce n'est pas la bonne solution dans cette situation

[left wigeon]

je parle de ça

[ancient jackal]

oui c'était une des solution que j'avias proposer mais elle fontionne pas

[stark tendon]

oe mais la sa marche le dernier code

et mrc kelit

[ancient jackal]

oui j'avais ma le conf la ul

dr

[left wigeon]

Concernant la deuxième solution, pourquoi utiliser un margin left en auto ?

Je pense qu'il est plus optimisé de placer l'élément à droite simplement grâce au justify content space-between défini sur le parent

[ancient jackal]

oui, mais je suis pas un pro en css, défois je fait ça ou je le mets à 0

[left wigeon]

Oui je ne te fais pas de remarque de façon négative, je donne juste mon avis sur cette structure 😉

Je vois que tu as préparé un display flex dans ta deuxième solution, et c'est une bonne solution

si le deuxième ul ne va pas à droite de l'écran à ce moment là, c'est lié au fait que son parent ne fait pas une width de 100%

[ancient jackal]

a ok

[left wigeon]

le margin left auto va poser problème plus tard dans le code, surtout pendant le responsive

[ancient jackal]

oui tu as raison

[left wigeon]

Pour parler un peu plus de structure en général (c'est juste un conseil), tu n'as pas besoin de faire un deuxième <ul> dans ta nav. Surtout que celui-ci ne va comporter qu'un seul <li>.
Ce serait plus adapté d'utiliser une balise button avec la class "btn-inscription".

Ou de laisser simplement ta balise <a>

[ancient jackal]

je n'y avais pas pensé à ça merci

[left wigeon]

Pas de soucis 👌

[stable crescent]

Bonjour je creer un morpion en html css js socketio pour localhost et voila j'ai un index avec une page d'accueil et un autre fichier html pour jouer le probleme etant si je vais sur le lien sa ne marche pas

voici

si je clique sur morpion voici le resultat

et le tic-toc.html c'est sa

[left wigeon]

Il se passe quoi quand tu fais ta commande node app.js ?

[stable crescent]

sa me dit que c'est bon

[left wigeon]

je peux voir ta partie express ?

[stable crescent]

enfin

ceci ?

[left wigeon]

oui mrc

[astral turtle]

ligne 24

[left wigeon]

tu n'as pas besoin de commencer ton get par un "/" ?

[lapis burrow]

Alors j'aime pas du tout

fanchement je critique

Mais je clique

[astral turtle]

si

il c'est trompé sur sa route

donc normal que sa marche pas

[stable crescent]

je suis perdu la

[astral turtle]

tu as appris express ?

[astral turtle]

dans ton app.get('/') tu dis que la route racine c'est "/" donc dans tes autres déclarations de route tu dois inclure cette racine

comme si je faisais app.get('/api') mes autres routes deviendront app.get('/api/salut')

[stable crescent]

je suis con je pense

[astral turtle]

en même temps faire du backjs sans connaissance

[lapis burrow]

ça devrais pas allez dans javascript ça ?

[stable crescent]

c'est le prof il me dit de faire sa donc bon 5jours

[astral turtle]

@covert sluice viens #javascript-typescript

putin

@stable crescent

sorry l'autre mec

[left wigeon]

de son prénom Vladimir

[astral turtle]

tout à fait

[stable crescent]

Bon je comprend rien a ce code de merde je suis perdu la

[left wigeon]

relax, tu vas y arriver

[severe matrix]

bjr pk sa retire pas le trait en dessous pour les liens : text-decoration: none;

[brave jay]

Clic droit > inspecter

[ancient jackal]

quelqu'un aurait une idée de comment je peux placé ma div tab?

voici mon css:

    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #a29ba2;
    text-align: center;
    max-width: 50%;
  }
  
  .tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  .tab button:hover {
    background-color: #ddd;
  }
  
  .tab button.active {
    background-color: #ccc;
  }```

[brave jay]

comment ca ?

[ancient jackal]

mon tab c'est avec Post et commentaire et je voudrais les mettre au milieux pas que il reste que à gauche

[brave jay]

Le parent de .tab doit etre en display flex

justify-centent: center

[ancient jackal]

ok merci

[brave jay]

align-items: center

[ancient jackal]

ça reste toujours à gauche

[brave jay]

montre moi le css

[ancient jackal]

.tab {
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid #ccc;
background-color: #a29ba2;
text-align: center;
max-width: 50%;
}

le parent de .tab c'est body

[brave jay]

daccord donc

[brave jay]

^

[ancient jackal]

ok merci

[void anvil]

Bonsoir je cherche un développer qui pourrais reproduire une maquette svp
Me contacter en MP

[brave jay]

Tu as trouver ?

[void anvil]

nan

[brave jay]

Envois moi y’a maquette je te dirais si j’ai le temps de la faire

[brave jay]

??

[brave jay]

Ah tu veux faire un site de ecommerce ?

Après il est déjà fait ton site là

[void anvil]

oui mais c'est un site shopify

[brave jay]

Et tu veux le refaire sans shopify ?

[void anvil]

oui

[brave jay]

Ah ouais, là désolé mais c’est pas mal de boulot, si tu me filer une landing page je l’aurais sans problème mais là on pars sur du gros budget

[void anvil]

j'ai tous sauf que c'est en json

[lapis burrow]

avec du json personne te fera grand chose 💀

[brave jay]

C’est pas compliqué l’export en json c’est pas ça le problème

Le truc c’est que moi je payer fais ce genre de prestation

[lapis burrow]

non mais depuis un Json tu fais pas un site vitrine si ?

[brave jay]

Ah non là il parle de ses produits

[lapis burrow]

ah oui

Rien à voir mdr

[brave jay]

Après à toi de voir tu peux venir me parler en mp si tu veux

[left wigeon]

Son budget ne dépassera pas 100 euros (je précise)

[brave jay]

Ah oui alors laisse tomber :/

[tidal zodiac]

Bonjour je suis sur un projet pour les cours est je n'arrive pas a avancer j'ai besoin d'aide pour du html css
vous pouvez trouver ci joint un croquis et je peux vous envoyer mon code

voila mon code actuel

si quelqu'un a un template similaire je suis preneur je pourrais modifier par la suite

[brave jay]

Si c'est pour les cours fait le comme un grand au lieu de télécharger un template non ?

[tidal zodiac]

je n'arrive pas mdrr c simplement un exo j'essaye simplement de comprendre et d'avoir des conseille

[proud raven]

Bah si c'est qu'un simple exercice essaye par toi même ?

Je pense que c'est le mieux

Car lors de ton exam y'auras pas de template quoi

[tidal zodiac]

alors comme j'ai pue le dire je N'ARRIVE PAS au niveau du css

[astral turtle]

y a plein de tuto sur youtube surtout sur html css

[tidal zodiac]

donc tout simplement un Template me permettre d'apprendre

[tidal zodiac]

pour se type de choses okay merci pour ton conseil

[astral turtle]

apprendre c'est essayer et trouver la bonne méthode pas copier coller un template et faire genre d'avoir compris

[tidal zodiac]

regarde mes fichier avant de me faire la moral stpp

[brave jay]

on te fait pas la moral

[astral turtle]

https://www.youtube.com/watch?v=PE8FQ6zihhw&list=PLjwdMgw5TTLVjTZQocrMwKicV5wsZlRpj

[brave jay]

la principe meme d'avoir des cours c'est pour apprendre

[astral turtle]

si tu es en école pour faire de la programmation tu vas devoir apprendre à essayer par toi même et apprendre à apprendre

[brave jay]

et la on t'apprend que le metier de dév c'est pas seulement faire de C/C

ensuite dans t'es fichier il n'y a rien c'est juste le index.php et index.css

donc on peut pas plus t'aider

[proud raven]

il a quitté

[astral turtle]

ça va être compliqué le monde du dev pour lui

[proud raven]

on a tous était tilt au début de lire des documentations sans rien comprendre

j'le suis encore

[brave jay]

il avait l'air sympa pourtant :/

[severe matrix]

Bjr comment on importe des images en css qui sont dans nos fichiers ?

[left wigeon]

avec le bon lien ?

je comprends pas très bien ta demande

[severe matrix]

nn dans l'app fichier g une image comment je la mais en fond d'ecran stp

[left wigeon]

avec un background-image: url()

[severe matrix]

oui

j'ai essayé de faire User/OneDrive ect ect mais marche pas

[left wigeon]

fais un screen de ton arbo

[severe matrix]

??

[astral turtle]

tes dossiers

[severe matrix]

ah

[astral turtle]

nan mais pas ça

les dossiers de ton projet

[left wigeon]

...

ton lien vers ton image part de ton fichier css, où se situe ton image par rapport à ce fichier ?

@severe matrix

[severe matrix]

sa ?

[astral turtle]

oui voilà

la balise url est vide

[left wigeon]

dans l'url mets juste "/image.png"

[brave jay]

tu fais url(./image.png)

[astral turtle]

normal que ton image marche pas

[severe matrix]

ok

nn j'avais mis un truc mais marcher pas @astral turtle

ah c bon mrc

tt a lheure javais oublier les guillmet

[left wigeon]

au fait, tu peux mettre ton font family avec le reste dans body

[severe matrix]

ok mrc au passage

ah oui

voila mon site actuellement :/ NUL

[astral turtle]

Après le front c'est pas la même chose que l'UX/UI

[left wigeon]

quelqu'un t'as dit qu'il était nul ?

[astral turtle]

donc pour t'entraîner => https://www.frontendmentor.io/

[severe matrix]

nn mais pour moi oui regarde par a port au site de chepa chat gpt

[severe matrix]

mrc

[astral turtle]

nan mais tu compares l'incomparable là

c'est comme si je comparais mon backend à celui de discord bien sûr l'écart de niveau et énorme

[severe matrix]

oe

mais c un exemple apres

[astral turtle]

ChatGPT c'est des développeurs plus expérimentés que toi, sûrement pas la même technologie donc normal

[severe matrix]

oe

moi pour l'instant je vais essayer de faire un ecran d'accueil

[astral turtle]

te compare pas aux autres, la seul personne à qui tu dois te comparer c'est le toi d'avant et là tu verras plus facilement tes progrès

[severe matrix]

oe javoue

[tame forge]

oh merci pour ça 👀

[brave jay]

J’en ai pleins si tu aimes ce genre de truc

[tame forge]

Avec plaisir x)

ça finira dans ma liste x)

[brave jay]

Je te les envois ce soir 😉

[tame forge]

merci :)

[severe matrix]

bjr quel qun peut maider a faire une nav bar responsive en gros sur tel c un bouton on appuille et sa met les elements de la nav bar de base

svp

[iron stone]

Bonjour, il y a des tutos sur youtube pour faire ça

[severe matrix]

Ok mrc

[pallid scaffold]

Vous avez une solution pour tester du code HTML et CSS sur son téléphone ?

C'est cette ligne que je veux tester : <a href="sms:0634567890">Envoyer SMS</a>

[copper warren]

T'es en natif ?

Pas de framework rien ?

Sur certain framework tu peux faire un serveur exposé en 0.0.0.0

[pallid scaffold]

Rien

J'ai Visual studio code et la documentation html et css

[copper warren]

host le sur netlify ( il me semble qu'il prenne les fichier natif ) ?

[pallid scaffold]

Haha j'avais lu Netflix j'avais pas compris

Je vais tester

[pallid scaffold]

Une solution parfaite et simple ! Merci 🙂

[cyan imp]

Sinon pour du HTML-CSS t'emmerde pas et utilise Github-Pages

[pallid scaffold]

Pour le moment la solution avec netlify marche, je testerai ça pour de futurs projets

[copper warren]

dans l'idée netlify fais la même chose il peut tracker tes branches par rapport à tes commits et redeployer

Vercel fais pareil aussi fin y'en a plein quoi

[cyan imp]

@pallid scaffold @copper warren Les deux fonctionnent oui, mais bon ... c'est comme utiliser un missile nucléaire pour déraciner un arbre 🙃
En gros oui Vercel et Netlify c'est parfait, je ne dis pas le contraire, mais il n'est pas nécessaire de recourir à autant pour si peu, si vous n'avez pas besoin de build du JS

Après, libre à vous, je trouve juste ça un peu disproportionner d'utiliser Vercel juste pour du Static 🤣

[copper warren]

Pour un utilisateur ça change rien en soit pis vu que c'est gratuit je vois pas pq s'en priver ?

[cyan imp]

Pour un utilisateur ça ne change rien, mais on en viens à la question écologique

La machine qui gère tout ça derrière, dépensera + d'énergie à initialiser un environnement de Build, plutot qu'à exposer une route à un hébergement de fichier statique déjà existant

Et si certains services deviennent payants c'est justement à cause du fait qu'ils dépensent + d'argent dans la maintenance de leurs service qu'ils n'en gagnent, et utiliser leur service pour ci peu contribue à la saturation de ceux-là 😄

[cyan imp]

Après c'est que mon avis, comme tu l'as dis, pour l'utilisateur ça ne change rien

Exemple annexe : Pourquoi prendre la voiture pour allez faire les courses au lieu de prendre un jet privé, dans les 2 cas ça fonctionne

[austere lark]

Car il y a pas d'aéroport a coté du magasin ? Sinon je le ferais

[cyan imp]

🤣

Bon bien vue 🤣

[copper warren]

L'example est pas bon 😂
T'as le choix et c'est gratuit autant prendre netlify que github page comme ça si par la suite il veut changer le ndd il pourra le faire et gratuitement.
Après si on me proposait d'aller à Paris en jet ou en voiture le choix est vite fais ça sera le jet

[cyan imp]

(Le nom de domaine est changeable avec Github pages 🤣 )
Bon par contre j'ai peut être touver un argument de pourquoi utiliser netlify/vercel plutot que Github Pages, c'est que Github Pages est disponible gratuitement que pour les répo public

[floral haven]

J'ai pas tout lu, mais y a pas photo, si on doit comparer Github pages à netlify/vercel, le choix est vite fait

[dim canopy]

https://responsively.app/

[floral haven]

Pourquoi pas directement l'outil de dev du navigateur (hormis si tu souhaites tester les performances réelles liées au téléphone en question)

[dim canopy]

Ce site te donne une mutli view assez intéressente je trouve

[pallid scaffold]

Si vous avez une solution qui consomme moins de ressource, je l'utiliserais (pouvons-nous nous tutoyer)

[floral haven]

C'est le cas aussi avec l'outil de dev

[pallid scaffold]

Oui, je voulais tester des fonctionnalités telles que l'envoi de message SMS ou d'appel via le téléphone. Et ça marche, je suis content 🙂
https://test0644.netlify.app/

[dim canopy]

Je trouve qu'il offre quand même plus de fonctionnalités plus accessible

[floral haven]

Genre quoi ? Sur la démo il invente rien, il y a même beaucoup moins de features key

[floral haven]

Tu peux le tester en local ça, non ?

[pallid scaffold]

C'est une bonne solution si je veux faire du responsive, merci ! Cependant, je voulais un moyen de tester des fonctionnalités mobile donc un système de mise en ligne gratuit et rapide est parfait !

[pallid scaffold]

En local sur téléphone, j'ai pas trouvé

[dim canopy]

Ah ok ^^

[cyan imp]

Même pour du Statique qui nécessite pas d'environnement de Build ?

[dim canopy]

Jsp si ngrok te serais utile ?

[floral haven]

L'outil qu'il t'a donné ne teste pas réellement un env téléphone, tout comme l'outil de dev du navigateur
Comme dit plus haut, si tu dois réellement testes une feature spécifique à un smartphone, utilise ton smartphone ou bien un vm

[floral haven]

Si t'as rien à build, il ne build rien
Charge au dev de config l'outil comme il en a besoin

[pallid scaffold]

Il faut s'inscrire pour tester et je n'ai pas vraiment envie de le faire. En-tout-cas, sur leur page d'accueil il y a l'image d'un terminal et je ne sais pas l'utiliser alors il est possible que je rencontre des difficultés si je dois en utiliser un

[floral haven]

T'as pas besoin de ngrok si ton site est en ligne

[pallid scaffold]

Plus haut, tu parles de "vm", qu'es ce que c'est ?

[floral haven]

Machine virtuelle (dans ton cas, une machine virtuelle d'un smartphone)
Même si bon, ce que tu cherches à tester c'est une feature lié au navigateur du smartphone, donc sauf si tu prévois de tester sur chaque browser, considère que si sur pc ça fonctionne, alors smartphone aussi

C'est pas à toi de tester que la navigateur a bien dev ces features

Sinon tu t'en sortira jamais

[pallid scaffold]

"considère que si sur pc ça fonctionne, alors smartphone aussi" dans mon cas l'option d'envoi de SMS ne marche pas sur desktop, c'est pour ça que j'avais besoin d'un moyen pour tester sur mobile. En-tout-cas merci de tes conseils 🙂

[floral haven]

Cette feature devrait t'ouvrir l'outil de messagerie sms sur desktop

[shrewd cobalt]

Bonjour j'ai un problème de responsive les animations de mon site ne marche que sur PC pendant un moment elles marchaient toutes et depuis l'ajout des catégories elle ne fonctionne plus

merci d'avance aux personnes qui m'aideront

je n'ai pas mis les dernière image car elle sont trop volumineuse

[brave jay]

va sur codepen ou replit pour ton code stp

[shrewd cobalt]

Ok je vais le faire des que je rentre

[void anvil]

Salut, j’ai pour projet de créer un site web mais j’ai peur de certaines choses, le ddos, hack de bdd,…. Est-ce que il y a des sécurités à mettre en place pour éviter tout ceci ou bien c’est les « aléas » des sites web ?

[astral turtle]

Les deux

Tu peux sécuriser ton site mais il y a pas de risque 0

https://youtu.be/R1SFiuREJuw

[astral turtle]

Après au niveau du backend tu pourras sécuriser ton code avec des méthodes propres au langage

[void anvil]

Merci beaucoup 🙏🏽❤️

[drifting crown]

Petite question avec google analytics par exemple, le temp de session est calculé par rapport au temp que l'utilisateur passe sur la page, mais dans le cas ou il y a une iframe avec un vidéo (mon cas) j'aimerais savoir si la session continue et si non si il y a un moyen de grugé et faire comme si t'utilisateur était toujours sur mon site

[brave jay]

Ton iframe est dans ton site

donc logiquement il reste dessus

[drifting crown]

ouai mais comme c'est une vidéo qui vient d'un autre site c'est pas considéré comme pas sur le site ?

pcq quand je regarde sur les stats google, j'ai une durée de visite de 1m30

alors que les vidéos font plus de 20 minutes

[copper warren]

Bah les stats sont peut être bon

[drifting crown]

hmm j'ai plus de 5000 vue sur mes vidéos

les vues sont compter au bout d'une dizaine de minutes

[copper warren]

ça veut pas dire qu'il regarde la vidéo en entier

[drifting crown]

donc je penses pas....

[brave jay]

Parce que tu n’es pas actif sur le site

[drifting crown]

ah ouai ça c'est possible

[copper warren]

Si tu fais une moyenne t'as surement des gens qui regarde pas en entier

1m30 c'est pas déconnant

voir que quelque secondes

[drifting crown]

comme je t'ai dis

les vues sont compté après une dizaine de minutes

j'ai plus de 15 000 vues en tout

sur 1 seule lecteur

[copper warren]

15 000 vue yt ou analytics ?

[brave jay]

ah oui je viens de voir

[drifting crown]

mais sinon j'ai un CDN qui monétise par rapport a la bande passante de l'utilisateur

[brave jay]

et c'est clairement parceque ya pas de mouvements

[drifting crown]

et meme le CDN les revenus sont par rapport au temps etc... sauf que j'ai des revenus équivalent a 1m passé sur le site

donc c'est surtout pour le CDN que je me pose la question

je sais pas si on peut grugé

[drifting crown]

ah ouai je savais pas ça du coup

[drifting crown]

sur l'host de vidéo

[copper warren]

Bah je vois pas le problème ducoup ?

1m20 si c'est un moyenne

la conclusion c'est que des gens regarde quelque seconde et arrêt ?

[drifting crown]

non...

je pensesp as honnetement

[brave jay]

pourquoi tu uploads t'es videos sur un site externe ?

[drifting crown]

pcq y'en a beaucoup

[brave jay]

si tu fais ton propre lecteur ca sera du temps en plus sur ton site

[drifting crown]

oui mais j'ai pas la place pour autant de vidéo

[brave jay]

tu generes de l'argent actuellement ?

[drifting crown]

nop

[brave jay]

ah oui

[drifting crown]

fin très peu

[copper warren]

C'est pas parce que tu penses que ton contenu est quali et que les gens regardent que c'est le cas ?
Si ça se trouve ta vidéo est regarde 10 secondes et 15000 utilisateur si t'en 3/4 qui regarde pas la moitier c'est pas déconnant d'avoir 1m20

[drifting crown]

c'est pas le but actuellement

[drifting crown]

regarde la bio et va voir le site je pense pas que les gens s'amusent a quitter honnetement

quand tu viens et que tu trouves ta vidéo bah tu regardes qyiu

quoi

et comme je te dis

sur google j'ai pas tant de visites que ça

[copper warren]

Bah ton player est peut être pas bien ?

[brave jay]

mais par contre les sites de stream c'est pas illegal ?

[copper warren]

oui 🙂

[drifting crown]

on est pas en france

donc non

[brave jay]

ok

[drifting crown]

du coup c'etait juste par rapport au CDN je me demandais juste si comme c'est une iframe d'un autre site il considérait plus les utilisateurs dessus

[brave jay]

mais a ta place je ferais mon propre lecteur avec un hebegement ovh dedié "classique" et tu rajoutes les pubs google si tu generes beaucoup de trafics

pub google sur les cotés des videos

[drifting crown]

oui on veut faire ça sur + long terme

mais pour l'instant on veuyt pas mettre de pub

et justement le CDN qui prend la bande passante permetterais de monétiser sans pub

[brave jay]

tu devrais rien que 2 bannière de chaque coté ca peut rapporter assez pour prendre un dedié

[drifting crown]

mais comme j'ai l'impression qu'ils sont plus considéré comme étant sur le site les revenus sont énormément diminués

[brave jay]

bah oui le flux video vient de pstream

[lapis burrow]

comment ça site de stream illégal ?

c'est mon domaine ça

[brave jay]

Bah oui tu peux pas aller telecharger un film et le mettre en libre accée sur internet :*D

[lapis burrow]

c'est cool c'est pas moi qui téléchargé

[drifting crown]

pour être honnete on va mettre ça sur un serveur au seychelle bientot

[brave jay]

l'hebergement rentre en compte aussi

[copper warren]

serveur US la non ?

[drifting crown]

on attend de voir si ça vaut le coup

[lapis burrow]

j'héberge rien non plus

[brave jay]

bah voila

tranquille alors

[copper warren]

@drifting crown après t'es certain que sur tes visites les gens reste regarder ?

même si c'est des animés ok mais t'es certain que bcp de genre regarde complet ?

[drifting crown]

bah franchement, quand je regarde sur le site du host les gens restent assez longtemp

et les vues sont comptabilisé

donc je suppose ouai

pis