#html-css

1 messages · Page 3 of 1

knotty scarab
#

a quoi sert le flexbox, concretement ?

acoustic current
#

A placer des éléments

#

Sauf que la Flexbox est plus permissive mais parfois moins précise

void anvil
#

Je maitrise un peu mieux flexbox

copper warren
#

Personnellement je ferais des grid mais comme dis plus haut, chacun ses préférence moi sur des trucs aussi "complexe" je partirais sur une grid niveau des placements etc c'est plus simple.

#

Si jamais tu decides de partir sur des grid utilises ça blobthumbsup

#

A vue d'oeuil je ferais une grid avec 3 colonnes et 4 lignes

#

avec ça :

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 7px;
grid-row-gap: 8px;
}

.div1 { grid-area: 1 / 1 / 4 / 3; }
.div2 { grid-area: 1 / 3 / 4 / 4; }
.div3 { grid-area: 4 / 1 / 5 / 2; }
.div4 { grid-area: 4 / 2 / 5 / 3; }
.div5 { grid-area: 4 / 3 / 5 / 4; }

Tu auras ce layout :

image.png
void anvil
#

Merci en tout cas !!!

void anvil
#

Bonjour, je voudrais que ceci :

image.png
#

Ressemble à ceci :

image.png
#

Comment puis je faire ?

floral cloak
dreamy flume
# void anvil Comment puis je faire ?

si tu veux des ressources pour flexbox :
● https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Flexbox
● https://css-tricks.com/snippets/css/a-guide-to-flexbox/
● https://flexboxfroggy.com/#fr
● https://www.pierre-giraud.com/html-css-apprendre-coder-cours/flexbox-modele-boite-flexible/
● https://www.youtube.com/watch?v=LNqBKTeeiWo
● http://flexboxdefense.com/

Flexbox - Apprendre le développement web | MDN

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

CSS-Tricks
Chris Coyier
A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

Pierre Giraud
Pierre GIRAUD
Introduction au modèle des boites flexibles ou flexbox - Pierre Gir...

Dans ce cours, nous avons vu que les éléments HTML pouvaient être affichés de différentes manières et que le type d’affichage conditionnait la disposition par défaut d’un élément : Affichage en bloc avec display : block ; Affichage en ligne avec display : inline ; Affichage sous forme de tableau avec display : table ; ... Lire plus

YouTube
Grafikart.fr
Tutoriel CSS : Flexbox

Article ► https://grafikart.fr/tutoriels/flexbox-806
Abonnez-vous ► https://bit.ly/GrafikartSubscribe

Flexbox est un nouveau mode de mise en page (display) qui permet de disposer les éléments de manière plus flexible et de gérer de manière prévisible leur alignement quelque soit la taille de l'écran. Ce nouveau mode de disposition vient se posi...

▶ Play video
Flexbox Froggy

A game for learning CSS flexbox

sonic stag
#

Salut, quelqu'un sait comment s'appelle ce petit texte qui spawn quand on passe la souris sur un élément ?

image.png
dreamy flume
#

je ne sais plus pour l nom mais tu peux le faire avec un hover

#

en css

dusky skiff
sonic stag
#

Merci !

void anvil
gilded otter
#

Salut j'ai un petit problème avec wamp, j'aimerais commencer le PHP mais je n'arrive pas a installer correctement wamp car lorsque je met mon site dans mon dossier www lorsque je vais sur l'accueil de wamp et je clique sur mon site sa me met le code et pas le résultat du code

austere lark
gilded otter
#

J'ai même regarder plusieurs tuto mais rien

#

ah c'est good

void anvil
#

Bonjour, comment puis-je faire une sorte de pop-up qui s'affiche quand je clique sur un bouton ou un lien ?

steady verge
#

Soit tu fais tout toi même en natif soit tu installes une lib

void anvil
#

D'accord merci, je vais regarder ça.

brave jay
#

Eh salut quelqu'un est super mega trop fort en css ?

formal jewel
#

@brave jay Elle est bizarrement posée ta question

#

T'as pas de superman / super expert qui vont pouvoir te résoudre tes problèmes par pure incantation

brave jay
#

Ouais je sais mais en gros je voudrais faire un obturateur qui s’ouvre et se ferme

exotic sentinel
# brave jay Ouais je sais mais en gros je voudrais faire un obturateur qui s’ouvre et se fer...

Voilà 3 codepen dont tu peux t'inspirer :
https://codepen.io/marekmurawski/details/Mwggdo
https://codepen.io/episodedesign/details/LYxBoG
https://codepen.io/onion2k/pen/AxomQJ

CodePen
Marek Murawski
Shutter effect in pure CSS3/HTML

Sample 5 blade aperture fullscreen CSS3 shutter effect based on the design element of an upcoming photo contest site http://shuttout.com...

CodePen
Dan Episode
Shutter Test

Greensock shutter animation with svg. Inspiration taken from here http://capptivate.co/2013/08/14/your-extra-life-3/ ...

CodePen
Chris Neale
Leaf Shutter

A leaf shutter in CSS. Could probably use more li elements for the leaves....

brave jay
exotic sentinel
brave jay
#

Tu peux mettre ça sur codepen stp ?

void anvil
brave jay
void anvil
brave jay
void anvil
#

ah c'est ça .....

void anvil
brave jay
#

avec rien

void anvil
#

Ah d'accord merci beaucoup !

sand ingot
#

Qui pourrais m'aider ?

#

je voudrais savoir

#

regardez

#

j'aimerais que le mot Skorflex soit en rouge comment je peux faire ?

# 
<body>
  
  <header>
    <div class="header-container">
      <a class="all" target="_blank" href="https://snipfeed.co/skorflex" >Tous mes réseaux</a>
      <a class="vid" target="_blank" href="https://www.youtube.com/watch?v=eC4lOGmx3V0">Ma dernière vidéo !</a>
      <a class="discord" target="_blank" href="https://discordgg/6A6J5VKrp4" >Mon discord</a>
    </div>
  </header>
  
  <div class="main">
    <h1>Bienvenue sur le site officiel de Skorflex !</h1>
    <h2>Sur ce site vous pourrez trouver tous ce qui concerne ma chaine <a href="https://www.youtube.com/SkorflexYT">YouTube</a></h2>
  </div>

  <script src="script.js"></script>
</body>
knotty scaffold
#

Apprendre le CSS

brave jay
brave jay
void anvil
# 
<body>
  
  <header>
    <div class="header-container">
      <a class="all" target="_blank" href="https://snipfeed.co/skorflex" >Tous mes réseaux</a>
      <a class="vid" target="_blank" href="https://www.youtube.com/watch?v=eC4lOGmx3V0">Ma dernière vidéo !</a>
      <a class="discord" target="_blank" href="https://discordgg/6A6J5VKrp4" >Mon discord</a>
    </div>
  </header>
  
  <div class="main">
    <h1>Bienvenue sur le site officiel de <span class="name">Skorflex !</ span></h1>
    <h2>Sur ce site vous pourrez trouver tous ce qui concerne ma chaine <a href="https://www.youtube.com/SkorflexYT">YouTube</a></h2>
  </div>

  <script src="script.js"></script>
</body>
brave jay
sand ingot
#

D'ailleurs j'ai une quesion
pourquoi mon footer il est pas en bas ??

# 
    <header class="shadow">
      <a href="https://snipfeed.co/skorflex">Tous mes réseaux</a>
      <!-- Changer à chaque nouvelle video -->
      <a class="maincolor underline" href="https://www.youtube.com/watch?v=eC4lOGmx3V0">Ma dernière vidéo !</a>
      <!-- fin -->
      <a href="https://discordgg/6A6J5VKrp4">Mon discord</a>
    </header>

    <div class="container">

      <h1>Bienvenue sur le site officiel de <span class="maincolor">Skorflex</span> !</h1>

      <h2>Sur ce site, vous pourrez trouver tous ce qui concerne ma chaine YouTube !</h2>

      <!--  Changer le embed par le lien de la nouvelle vidéo   -->

      <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/eC4lOGmx3V0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->

    </div>

    <footer>Site made by Skorflex</footer>
# 
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
body{
    background: #232323;
}
header {
    display: flex;
    justify-content: space-between;
    padding: 50px 10em;
    flex-wrap: wrap;
}
header a {
    color: white;
    font-size: 30px;
}

html {
    width: 100vw;
    height: 100vh;
}```
void anvil
#

Parceque tu ne mais pas height: 100vh; et width:100vw; dans ton body (css)

#

Et tu n'a pas mit aussi un display flex dans le body (css)

# 
body{
background: #232323;
height: 100vh;
width: 100vw;
display: flex;
align-items: space-between;
box-sizing: border-box;
}
#

Voila ton body normalement

sand ingot
#

ça marche pas

void anvil
#

Rajoute sa dsl je l'est oublié flex-direction: column

void anvil
#

Salut à tous ! J'ai une petite question je débute une page html et css pour mobile mais quand j'ouvre mon navigateur je vois la page en desktop même si j'attribue une width à mon body c'est normal ? ou faut que je passe par l'inspector pour pouvoir voir le rendu ?

#

Désolé si la question parait bête je suis en pleine formation débutant 🙂

lucid forge
dusky skiff
#

Il faut passer par l'inspecteur c'est fait pour, enlève la width que tu as mise c'est mieux

exotic sentinel
tame star
#

pas besoin de ngrok pour le faire, il peut directement passer en localhost :/

#

utiliser des tools alors que lont peut le faire nativement je trouve sa overkill

floral haven
#

Tout dépend si il veut tester une condition réelle
L'utilisation "smartphone" sur PC ou bien sur un smartphone est bien différent, que ce soit niveau UX ou bien niveau perf
Même si, en effet, je pense pas qu'il en soit là

tame star
exotic sentinel
frail apex
#

Hello

void anvil
#

Bonjour ! J'aimerais faire une sticky bar au bas de ma page mobile mais quand j'utilise la position : sticky et bottom 0 sur le parent ça ne la laisse pas en bas ... help please !

brave jay
#

Faut utiliser fixed

void anvil
#

J'essaye

#

Ca ne fonctionne pas ...

#

aussi bien sur le footer que sur une div dans le footer

brave jay
#

Mets ton code sur codepen

void anvil
#

Bjr j'ai besoin d'un développeur css qui à un très beaux design

tame forge
void anvil
#

Bonjour, je voudrais que mon code affiche le texte à gauche et l'image à droite puis au paragraphe suivant inversement mais je n'y arrive pas. Mon code : https://codepen.io/Legoshii__FR/pen/VwdQeEP.

Pouvez vous m'aider ?

brave jay
viscid owl
#

Bonjour, j'ai réussi à centrer verticalement et horizontalement mon conteneur (qui est en rouge sur le jsfiddle). Mais lorsqu'on réduis la taille du navigateur/simule la taille d'un écran mobile, le conteneur ne s'adapte pas du tout à ce dernier... Je vous remercie d'avance pour votre aide.

Mon jsfiddle : https://jsfiddle.net/73ovw1ar/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

copper warren
#

Bah tu fais rien pour qu'il s'adapte en mobile déjà à vu d'oeuil

forest echo
#

Pourquoi utiliser Tailwind pour un tout petit site? autant utiliser une simple balise media

void anvil
brisk forum
brave jay
forest echo
#

Oui mais faut déjà connaître ses bases, et à première vue il ne les connaît pas forcément (ce qui est normal quand on débute)

karmic moss
#

Bonjour vous me conseillez quel livre pour débuter html css ? 🙂 merci

copper warren
copper warren
balmy parrot
#

Bonsoir, j'ai une question j'aimerais mettre des vidéos dans mon html, jusque là pas de problème sauf que j'aimerais aussi rogner la vidéo car je veux diffuser uniquement un extrait de la vidéo mais je ne sais pas comment faire?

#

je voulais dire raccourcir pas rogner lais je sais pas si possible de le faire directement dans html ou css ou si il faut le faire avant d'intégrer la vidéo

tame star
#

je viens d'y penser mais si c'est du react tu a une lib pour faire de l'édition vidéo si jamais ton cas s'y prête

safe pebble
#

yo les gars je cherche des petits projets de développement web a bosser dessus histoire de pratiquer un peut. je suis ouvert a toute suggestion

errant cypress
safe pebble
errant cypress
#

look dribble

safe pebble
#

merci

balmy parrot
#

@tame star merci

unkempt viper
#

Hello je recherche qqn qui serais chaud de faire un site web payant biensur ! me mp plus d'info

tame forge
civic sleet
tame forge
#

Faudrait que j’ajoute un raccourci sur le clavier 🤣

ancient jackal
ancient jackal
#

quelqu'un à une idée de comment crée une page de résultat automatiquement?

mild canyon
ancient jackal
# mild canyon Sois plus précis

en gros récupérer les info d'une autre page de résultat et les mettre sur la mienne et fait ça automatiquement quand je rentre le recherche dans la bar

void anvil
#

bonsoir j'aurai besoin d'une aide pour mieux comprendre la logique de css je me suis rendu compte que je faisait un peu tout bonheur la chance certain aspect me semble encore flou quelqu'un serais d'humeur a coach un débutant 🙂

ancient jackal
sand ingot
#

Hey, existerais t'il un moyen d'inserer un code python sur un site ?

void anvil
ancient jackal
#

vazy tes dispo quand

copper warren
copper warren
brave jay
#

C’est pour ton meta moteur ?

ancient jackal
ancient jackal
ancient jackal
twin cradle
brisk forum
sand ingot
twin cradle
ancient jackal
sand ingot
#

genre comme si la fenetre cmd étais sur le site avec déjà le script qui est lancé

#

en laissant le code caché

#

genre un truc comme ça

image.png
#

mais sans le code source

tame forge
#

Bonsoir, est-ce que quelqu'un saurait pourquoi quand je clique sur ma div, je suis redirigé vers pages/playlists.html au lieu d'être redirigé vers pages/playlists.html?id=0 ?

                        let content = ""

                        if (playlists.length === 0) return;

                        playlists.forEach(playlist => {
                            content = content + `
                            <a href="pages/playlists.html" onclick="location.href=this.href+'?id='+playlist.id;return false;">
                                <div class="playlistCard">
                                    <img class="homePlaylistIcon" src="${playlist.icon ? playlist.icon : settings.defaultPlaylistIcon}" height="100" width="100">
                                    <div class="playlistCardInformations">
                                        ${playlist.offline.status === true && playlist.offline.download_status === null ? `<img src="assets/download_green.png" height="20" width="20">` : playlist.offline.status === true && playlist.offline.download_status !== null ? `<img src="assets/download_red.png" height="20" width="20">` : ""}<h3 class="special playlistCardTitle">${playlist.name ? playlist.name : `Liste de lecture #${playlist.id}`}</h3>
                                    </div>
                                </div>
                            </a>
                            `
                            content = content.replace(/pages\/playlist.html/g, `pages/playlists.html?id=${playlist.id}`)
                        })
                        div.innerHTML = content
#

(le problème ne vient pas des variables playlists et playlist puisque les div en question d'affiche ^^)

tame forge
#

En fait jsuis trop con...

#

Il me suffit de mettre un ${}

void anvil
ancient jackal
void anvil
opal thunder
#

Hello tlm je bloque sur quelque chose je cree mon site et depuis le front j' aimerais récupérer toutes les images que j' aurais dans un dossier image sur mon hébergeur ( c'est pour une partie réalisation pour afficher à chaque fois de nouvelle image que je rajouterai a ce fameux dossier)

brave jay
#

Tu peux utiliser fs

opal thunder
brave jay
#

C’est un truc qui te permet de voir les fichiers locaux

void anvil
#

Bonsoir je suis développeur web, je recherche deux personnes sur ce salon qui ont un très bon niveau afin de créer un projet, si intéressé venez mp

brave jay
void anvil
#

vendre full site

tame forge
elfin bear
#

Bonjour, je débute dans le html-css, et j'aurai aimer avoir une petite aide sur mon code

#

en gros je voudrai ajouter du text juste a coté de boy, girl, alien mais je ne connais pas la manipulation

Capture_decran_du_2022-12-03_14-30-08.png
crystal knoll
# elfin bear en gros je voudrai ajouter du text juste a coté de boy, girl, alien mais je ne c...

Yo, il y a plusieurs solutions mais en voici une : tu peux envelopper tes champs et labels "boy, girl, alien" dans une div, pour les grouper, si ce n'est pas déjà fait, tu peux ensuite re-créer une div par dessus celle ci, qui englobera elle la div des champs et labels et un tag a,p,h2 etc, n'importe quel texte, de base il seront pas forcément placés comme tu le souhaites, grâce aux divs tu pourras très facilement les placer avec un display: flex; et la propriété flex-direction: ... https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction

elfin bear
#

Oh merci beaucoup @crystal knoll

static steppe
#

Quelq'un aurait une documentation pour HTML CSS en français vraiment complète

brave jay
stoic plume
#

Bonjour, je cherche à placer des images comme ceci dans la partie droite de la page, du milieu au bord droit dans une disposition comme sur le dessin, j'ai essayé mais je n'y arrive pas et je ne trouve pas sur internet. Une idée svp ? Merci 🙂

image.png
lucid forge
stoic plume
brave jay
#

Ou grid

stark rock
#

Bonsoir, y'a pas de question stupide il parait .
Je chercher à changer la police des commentaires.
une âme charitable et compétente saurait m'indiquer la marche à suivre ?

brave jay
stark rock
#

exemple, j'ai l'éditeur avec la police "consolas" mais je voudrais que mes commentaites /commentaires/ aient une autre police

#

la j'ai les comment en italique mais j'aimerais carrément mettre une autre police

crystal knoll
stark rock
#

merci infiniment !!!!👍

kind pewter
#

Bonjour, je souhaiterai savoir si il existait une fonction qui sous condition pouvait passer une div en un z index différent ? merci

wary wave
# 
if (condition) {
  // Si la condition est vraie, on change la valeur de la propriété z-index de la div
  document.getElementById("maDiv").style.zIndex = 5;
} else {
  // Si la condition est fausse, on laisse la valeur de la propriété z-index inchangée
  document.getElementById("maDiv").style.zIndex = 1;
}
#

@kind pewter

kind pewter
kind pewter
#

psk là je patoge dans ce truc mais c'est la misère...

image.png
brave jay
kind pewter
# brave jay Tu veux faire quoi enfaite ?

J'ai crée un écran de chargement, je veux qu'il reste 4s peu importe les conditions, après ce délais, si la page est entièrement chargé y dégage (chose réussit), sauf qu'ensuite comme j'ai utilisé un z index pour que le chargement reste en premier plan les 4 première seconde bah la shadow box de ma page d'après et le bouton principal ne s'affiche plus car ils sont "derrière", donc je suis bloqué à choisir soit l'un soit l'autre

#

Je sais pas si je me suis fait comprendre

brave jay
#

Pour changer le zindex ton élément doit être en position relative

kind pewter
#

Entre ça et le fait que j'arrive pas à mettre une image animé en arrière plan j'suis vraiment une quiche en code moi >.>

brave jay
#

Et sinon tu peux changer le pointer event

kind pewter
#

mon loader est absolute

image.png
#

et le bouton/box en relative

image.png
#

ah non absolute aussi attends

#

Hm du coup il est plus centré si je le met en relative

brave jay
kind pewter
#

Comment je fais pour qu'il reste au milieu de ma page sans être absolute ?

wary wave
wary wave
# 
.truc {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}
brave jay
wary wave
#

Pourquoi oui mais non

brave jay
#

pour centrer un bouton tu peux le mettre dans une div flex

kind pewter
#

en fait ce qui se passe quand je met en relative, outre le fait de centrer la chose qui est faisable du coup, mes 2 "pages" se mélangent, en fait c'est cette notion de page que j'arrive pas à comprendre, comment est ce qu'on crée une page, puis une suivante qui apparait automatiquement puis une troisième en cliquant sur un bouton, c'est ces 3 étapes là que je souhaite faire en réalité

#

tout s'affiche à la fois

image.png
brave jay
#

Tu veux faire un loader en 3 etapes ?

wary wave
#

enfaite, je n'ai pas suivi le problème c'est juste centrer ?

#

plus le chargement ?

kind pewter
#

je souhaite 1 loader, un écran "d'accueil" on clique sur le bouton bleu là et on arrive dans le sujet principal où après on fait le reste

brave jay
#

va sur codepen et mets ton code html

kind pewter
#

disclaimer j'ai commencé le codage y a 3j donc ça va surement vous piquer les yeux

brave jay
wary wave
#

en gros c ça que tu cherches pour ton loader ?

#

au bout de 4000ms (4s) ça part ?

kind pewter
kind pewter
brave jay
#

et ton bouton bleu doit etre sur les bulles ?

kind pewter
#

non les bulles c'est un truc css que j'ai copié collé sur internet psk j'arrive pas à mettre de fonds d'écran animé

#

fond d'écran image oui mais "vidéo" non

#

Sinon j'avais mon background vidéo tout prêt et tout mais impossible à mettre

brave jay
#

pour mettre des videos : <video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the html video tag. </video>

kind pewter
#

Ouai c'est le code que j'avais mis, mais ça s'affichais pas

#

J'ai jamais su pourquoi

wary wave
# 
const loadingScreen = document.querySelector('.loading');

window.addEventListener('loading', () => {
  loadingScreen.style.display = 'none';
});
kind pewter
#

Pourquoi index auto ? quel est le rôle de const j'ai du mal à comprendre comment il peut savoir que c'est mon loader qui va rester 4s ? (désolé pour tte les questions mais j'voudrai comprendre que recracher la solution)

wary wave
#

enfin non ducoup

wary wave
#

la const recupere l'écran de chargement

#

et l'event attends que la page ait completement chargé (puis le none)

kind pewter
#

ça marche, donc ça c'est la fonction que je possède, et ensuite la ligne qui va faire que mon loader va au minimum rester 4s elle se fait aussi avec const loader ?

wary wave
#

ah tu veux aussi que ça reste 4s

#

desolé j'ai mal compris mdr

kind pewter
#

Qui du coup va être = à 4s et ensuite if event est bon ça disparait else ça reste ?

kind pewter
wary wave
#

tu rajoutes juste un délai

#

tu défini un délai const delai = 4000;

kind pewter
#

const loader ou juste const de base récupère forcément le loader ?

wary wave
#

et tu mets l'event qui fait disparaitre dedans un settimeout

# 
  setTimeout(() => {
    loadingScreen.style.display = 'none';
  }, delai);
kind pewter
#

delai à la fin signifie quoi ?

wary wave
#

un delai de 4000ms

#

setTimeout(() => {ton truc}, argumentdetemps);

kind pewter
#

C'est bon j'ai compris, et ça fonctionne, on crée une constante delay à laquelle on attribut 4s et on l'introduis dans la variable de temps de set timeout

wary wave
#

si j'ai bien compris, oui

kind pewter
#

cette variable qui supprime l'affichage du loading

wary wave
#

oui

kind pewter
#

J'ai le cerveau qui brûle mais j'suis content j'ai compris enfin 😭 maintenant plus qu'à centrer mon bouton, mettre mon fond vidéo, et faire que quand je click sur ce fkin bouton on arrive sur une 3e page et je peux mourir en paix 🥲

wary wave
#

et en vrai si tu veux tout savoir j'y connais rien en javascript j'ai utlisé box noire GPT-3

kind pewter
#

Je connais pas je t'avoue

wary wave
#

après pour centrer un bouton tu peux demander à Snox

#

j'ai pas trop compris pourquoi il a pas aimé auto

kind pewter
#

Donc le bouton, a, pour le centrer on joue sur les bordure, right left top bottom si j'ai bien compris po

#

Je sais pas du tout

wary wave
#

@brave jay ?

wary wave
#

enfin non ducoup

#

là t'intègres une video a ta page

kind pewter
#

Je vais re essayé mtn voir si ça fonctionne ou pas mais avant ça fonctionnait pas

wary wave
# 
<video src="chemin/vers/ma/video.mp4" autoplay loop muted></video>
kind pewter
#

En soit ce que j'ai besoin c'est juste un bg animé quoi

wary wave
#

bah bg animé pas en css

#

mais en langage courant oui mdr

brave jay
#

du coup je conseille flex

wary wave
#

ah très bien

kind pewter
#

hmm

wary wave
#

?

kind pewter
#

j'ai l'image mais elle prend pas tout l"écran, habituellement j'aurai fais background size complet j'ai oublié le nom, en css

#

mais tu m'as dis on peut pas utilisé css pour ça ?

wary wave
#

pas moi enfin j'pense

#

mais ouep on peut

# 
video {
  /* Positionner la vidéo en haut à gauche de la page */
  position: absolute;
  top: 0;
  left: 0;

  /* Définir une hauteur et une largeur pour la vidéo */
  height: 100%;
  width: 100%;

  /* Régler les problèmes de distorsion de la vidéo */
  object-fit: cover;
}
#

après

#

absolute :/ je sais pas si ça sera responsive

kind pewter
#

qu'est ce que vous appelez responsive ?

wary wave
#

ça s'adapte a l'écran

# 
/* Style pour les écrans de largeur supérieure ou égale à 1200px */
@media (min-width: 1200px) {
  video {
    /* Définir une hauteur et une largeur pour la vidéo */
    height: 100%;
    width: 100%;
  }
}

/* Style pour les écrans de largeur inférieure à 1200px */
@media (max-width: 1199px) {
  video {
    /* Définir une hauteur et une largeur pour la vidéo */
    height: 50%;
    width: 50%;
  }
}
#

tu peux rajouter ça

wary wave
kind pewter
#

Et ca c''est dans la partie css du coup

#

un endroit spécifique ? tout en haut comme les styles d'écriture ou je met avec la 2e section juste

wary wave
#

ouep

#

c'est comme tu veux

kind pewter
#

ça marche

wary wave
#

enfin en bas c mieux

kind pewter
#

donc la je suppr la partie video height width 100% de la section media

#

C'est bon ça marche nickel merci !

wary wave
#

tkt

remote flume
#

Bonjour, j'ai une petite question concernant font face. Voulant utiliser une police perso sur ma page j'ai utilisé font face pour importer ma police. La police est super complète et a pas mal de variantes (de ultra light à extra bold). J'aimerais pouvoir profiter de toutes ses options mais je ne sais pas comment m'y prendre. De plus, chaque variante de ma police est un fichier .ttf

#

pour être plus clair, voici une partie de mon dossier font et voici mon css

image.png image.png
warped gyro
#

salut qui peut m apprendre a dev ou qui peut me faire un site

#

C quoi les bases d’un site

floral sapphire
kind pewter
#

Bonjour, je souhaite afficher une vidéo lors d'un clique sur un bouton mais ça ne fonctionne pas jsp pk

#

<a href="#" onclick="document.getElementById('là je met ma vidéo').play(); setTimeout(function(){document.getElementById('ici aussi').pause();}, 1000);">

#

J'ai fais ça

median solar
steady verge
#

La t’as juste mis des instructions

arctic sage
#

ya pas quelqu'un qui est fort en laravel ?

kind pewter
# steady verge il faut que tu mettes une fonction

Je suis plus sur le pc, mais le soucis c'est que j'voudrais faire des effets lorsque j'appuie sur ce bouton, faire un zoom avant mettre un background vidéo pour un effet de transition puis afficher le background d'après pour faire comme si on arrivait sur une autre page je sais pas si tu vois, mais j'ai du mal à rendre mon site dynamique depuis le début je trouve que c'est assez limité avec HTML CSS JS

steady verge
brisk forum
#

juste pour info ici c'est html/css pas php ou javascript/typescript

kind pewter
#

Yes sorry sir

brave jay
fathom cargo
#

Bonjour les amis

image.png
#

je ne comprends toujours aps pourquoi ça fait ça

fathom cargo
#

(me ping)

brave jay
fathom cargo
brave jay
#

ca arrive tkt

#

je viens de passer 3 heures pour un simple element fixe

fathom cargo
#

mdr

wary wave
iron stone
#

Un avis ? Regarder sur pc plz la version mobile est pas terminé

steady verge
errant cypress
#

ça manque beaucoup d'ui

fathom cargo
#

je t'invite aussi à te renseigner un peu sur le design...

forest echo
forest echo
# iron stone https://julesdevfront.github.io/8/

J’aime bien l’organisation de la page mais tu devrais te renseigner sur les proportions de texte et la bonne taille à adopter selon la situation.
De plus si tu veux t’améliorer tu peux aller t’inspirer sur Behance ou Dribble

outer crest
#

Bonsoir, j'ai une question: J'aimerais faire un site ou l'on peut dessiner dessus mais je ne sais pas comment m'y prendre. Quelqu'un aurais une réponse, bien à vous !

iron stone
#

Comment j'apprends les proportions de texte et le bonne taille ?

#

@forest echo

tame star
outer crest
primal flax
#

Bonjour, je dev un site et je galère pour mettre une image et du text par dessus

#

quelqu’un peut me help, je peux envoyer mon code en privé

brave jay
drifting crown
#

Salut, j'ai une petite question en CSS, en gros je fais un agenda la et je voudrais que les onglets ne s'affiche que si ils peuvent être affiché en entier

#

par exemple ici le dernier a droite bah il est pas en entier

#

je sais si c'est possible

grizzled beacon
grizzled beacon
primal flax
drifting crown
grizzled beacon
wild lodge
#

Salut! Question toute bête j'aimerais créer un objet a partir de plusieurs images (.png), ce serait quoi le meilleur moyen de le faire? Je me vois mal les positionner au pixel près avec des left: xxpx; right: xxpx;

brave jay
exotic marsh
stable jetty
#

je précise que c'est du tailwind

brave jay
#

Oh là faut être motivé pour grid avec tailwind 😮

#

Moi je te conseillerais de refaire le tous en flex

#

Sinon tu fais 2 code. 1 pour tel et un pour pc

stable jetty
stable jetty
brave jay
#

Grid c’est compliqué de base mais sur tailwind je trouve que c’est ultra galère

stable jetty
#

j'arrive a rendre le truc plutot responsive jtrouve

drowsy sail
#

Bonsoir, je ne comprends pas pourquoi quand je fais ceci :

#

J'ai ceci :

image.png
#

Alors que je voudrais un truc comme ceci :

image.png
brave jay
true schooner
#

que pui-je utiliser pour réduire les contour?

Capture.PNG
#

@brave jay peut-etre?

brave jay
#

C’est width

brave jay
true schooner
#

?

true schooner
white dragon
#

on peut m'apprendre ?

tame star
white dragon
#

le code

tame star
#

faudrait etre plus précis car c'est plutôt vaste et en sachant que c'est pas vraiment du code le css html ...

true schooner
# white dragon le code

en vrais vas voir sur yt tu regarde un cour css et un de html de from scratch et t capable de te débrouiller tt seul

true schooner
#

qui connais un hébergeur gratuit ou je peu etre mes propre fichier (000webhostc de la daube

true schooner
#

qui peut m'aider pour changer k'pparance de ce bouton svp

Cappture.PNG Captuire.PNG
#

pour que le blanc dégage

#

(je suis pas raciste c juste relou)

primal flax
#

bonsoir, quelqu’un qui a des compétences de base aurait quelques minutes a me consacrer en vocal pour m’aider pour la création d’un site

void anvil
brisk forum
fathom cargo
true schooner
#

eu... c une question bte mais bon

#

c quoid déja pour metre une image avec le Title

delicate isle
#

svp

void anvil
delicate isle
#

C'est pour cela que j'ai mis le lien de la page

delicate isle
#

svp

delicate isle
brave jay
delicate isle
brave jay
#

Bah en soit ça te permet de voir comment c’est fait mais tu n’apprends pas grand choses quoi

#

Pour faire ça tu as besoin de JavaScript

delicate isle
#

Ca me permet de savoir comment c'est fait pour pouvoir le refaire si besoin

#

Mais le probleme c'est que j'ai essayer de le refaire sauf que l'animation ne se fait pas et les autres catégorie ne s'ouvre pas

delicate isle
#

c'est bon je viens de réussir. Le code du javascript se trouvait dans ceci

📎 message.txt
fathom cargo
# delicate isle c'est bon je viens de réussir. Le code du javascript se trouvait dans ceci

Nan mais c'est pas comme ça qu'on apprend regarde tu tape juste sur google : menu déroulant html css, premier lien regarde : https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-deroulant/ tu as un tuto où tout est expliquer

Pierre Giraud
Pierre GIRAUD
Création d’un menu déroulant en HTML et CSS - Pierre Giraud

Dans l’exercice précédent, nous avons réussi à créer un menu horizontal simple en HTML et en CSS. Je vous propose maintenant de transformer ce menu pour créer un menu déroulant, c’est-à-dire un menu comportant plusieurs niveaux. Créer un menu déroulant en HTML et en CSS va s’avérer un peu plus complexe que de créer un ... Lire plus

#

le copier coller que tu as fait ne te servira à rien la

delicate isle
wild lodge
brave jay
#

Salut ! j'arrive pas a faire un input pour le prix dans le meme style qu'un TPE (le terminal de paiement carte bleu)

rustic anvil
#

salut, tu peux envoyer ce que tu as actuellement? code html pour la balise voir balises autour, ainsi que le css?
et si tu trouve un résultat qui te plaisir sur internet, le lien serait intéressant à partager aussi.

#

l'input, c'est juste l'affichage? ou tu veux aussi les boutons?

brave jay
#

Y’a rien actuellement xD c’est plus pour savoir si quelqu’un l’a déjà fait ou non

rustic anvil
#

j'arrive pas
n'a pas essayé :( déception

#

bah essaye d'aller voir des exemples sur internet déjà ^^

brave jay
#

Si j'ai essayé mais le code ne te servira a rien

rustic anvil
#

bah déjà voir où tu en es :)

brave jay
# 
  const changeHandler = (e) => {
    let newValue = e.target.value;
    newValue = newValue.replace(/^0*(.+?)0*$/, '$1'); // enlève les 0 superflus
    newValue = newValue.replace(/^$/, '0'); // remplace les valeurs vides ou nulles par 0
    newValue = newValue.replace(/(\d{2})$/, '.$1');
    console.log(newValue);
    setValue(newValue);
    // setValue(e.target.value);
    onChange(e);
  };```
#

Spoiler : ca ne fait en aucun cas ce que je demande

rustic anvil
#

d'accord, tu as quoi en entrée (quelques exemple) et tu voudrais quoi en sortie?
j'aime bien les regexp :)

eternal ember
brave jay
#

Tu payes combien pour les manquant ?

austere lark
#

…

eternal ember
brave jay
#

Mais sur iPhone ça donne ça :

IMG_5935.png
eternal ember
#

C'est bien comme ça non ?

brave jay
#

Je suis pas fan mais si ça te convient c’est le plus important

dim osprey
brave jay
dim osprey
#

Haha

stable jetty
#

Mais le texte est trop petit à mon avis

#

Sur mon tel ça donne un peu la même

eternal ember
crystal rain
#

Salut, vous savez si c’est possible de mettre une licence sur son code svp ? Si oui comment le faire please ?

crystal rain
#

D’accord merci beaucoup, mais ça empêchera les gens de copier et fouiller le code ou pas ?

indigo bison
#

yooooo, je débute en HTML (vraiment) et je connais pour l'instant absolument rien en langage code etc... et j'ai un problème avec ces flèches "<" et ">" en faite quand j'essaie de faire par exemple la commande <br> ou <h1> etc... bah ça ne s'active pas cette à dire que ça reste en format texte et ça ne se transforme pas en commande. J'espère que vous avez compris ce que je voulait dire et que vous pourriez trouver une solution à mon problème.

#

https://www.youtube.com/watch?v=qsbkZ7gIKnc&t=0s&ab_channel=FromScratch-LedéveloppementWebdezéro

YouTube
From Scratch - Le développement Web de zéro
[Cours HTML] Apprendre HTML de zéro

🌱 Après cette vidéo, si tu veux tout savoir sur CSS → https://youtu.be/HDobHQfbRbo

  • Dans ce cours nous verrons toutes les choses utiles (ou presque) pour coder en HTML. Gérer les photos, vidéos, listes, tableaux, liens, formulaires, mails, transferts de fichiers…

  • HTML Cheat Sheet : https://htmlcheatsheet.com/

  • Icones en HTML : https://w...

▶ Play video
#

voici le tuto que je regarde et je suis bloqué au tout début

#

et quand je transfère le fichier index.html.txt sur la barre d'URL google (comme dans son tuto) bah <br> et <h1> ne transforme pas mon texte alors que sur son tuto quand il le fait ça se transforme

#

peut être je n'utilise pas la bonne touche ? je ne sais pas

#

ou peut être que le problème ne vient pas des "<" ">" ?

tawdry jackal
indigo bison
#

okay

#

je vais tester

#

enfaite c'était déjà ce nom, c'est juste que j'ai regardé le nom sur VScode mais même avec ce nom ça reste comme sa

tawdry jackal
#

Bah normalement si t'as un .html et que tu l'ouvres avec un navigateur t'as aucun problème

indigo bison
#

est ce que je peut te montrer en vocal ?

#

@tawdry jackal

tawdry jackal
#

ou alors fait un fil

indigo bison
#

ok c'est bon j'ai réussi à régler

#

est ce que tu sais comment revenir en arrière ?

#

sur VScode ?

brave jay
tawdry jackal
#

Bah gl ^^

brave jay
#

@indigo bison Hésites pas je peux t'aider un peu si tu veux

indigo bison
indigo bison
#

j'ai que des problèmes alors que je suis le tuto à la lettre

sturdy oriole
#

bonsoir enfaite j'ai un projet pour mon ecole et je dois faire un site et la je veux faire un header avec un logo et ul avec dessus acceuil connexion et inscription mais j'arrive pas a les aligner si qlq peut m'aider svp

#

ca me fait ca et j'arrive pas a les aligner bien

ornate pike
#

Peut tu nous envoyer ton code HTML et CSS ?

ornate pike
sturdy oriole
#

je peux te montrer en appel deux seconde ?

#

@ornate pike

ornate pike
#

Si tu veux

#

Mais jpp vrmt parler

#

Ça va pas être super grave

sturdy oriole
#

pas grave juste je te montre

ornate pike
#

Yes

wooden hemlock
sturdy oriole
#

juste si qlq a un moyen de mettre le header un peu plus a gauche 🤣

wooden hemlock
#

Pour le header, tout dépend de quoi tu parles, du bloc total ? Des liens ou du logo ?

obtuse solstice
#

Salut

wooden hemlock
mental nest
#

Bonjour je souhaiterais faire un dashboard qui permet de éteindre allumé un bot discord qui est sur le même serveur que le bot peut importe le code je le ferai

ornate pike
mental nest
ornate pike
dim osprey
ornate pike
dim osprey
#

Ok

#

Moi je commence

ornate pike
dim osprey
ornate pike
mental nest
ornate pike
# mental nest qu'il soit on ou off

Pour ça il va falloir aussi rajouter dans le code de ton bot des infos, donc le mieux et de coder sur le site dans le même langage que ton bot pour plus de simplicité de communication

obtuse solstice
# wooden hemlock Peut-on avoir le plaisir de t'aider ? 🙂

Je dirais plutôt me conseiller. J'aimerais être autodidacte en développement web. J'ai donc commencé à me documenter sur le sujet mais j'ai l'impression d'acquérir juste des connaissances en plus. Je sais pas comme m'expliquer.. j'ai pas vraiment l'impression de connaître un tout-petit peu la chose. Pourtant j'apprends, je lis je fais des tests etc.. qu'est-ce qui me manque selon vous svp?

#

Bonne Année à tous au passage

ornate pike
obtuse solstice
#

Je me suis mis à lire du html 5, oui css, puis js et maintenant j'apprends React js...

#

Je manque probablement de pratique sur ce domaine... comment y remédier ? Je dois me créer un projet ? Me trouver un mentor ? Aller dans une école ?

iron swan
#

c'est la meilleure chose à faire en autodidacte, te lancer dans un projet qui te tient à coeur

#

par exemple je dis des exemples à la con mais refaire youtube, faire un portfolio, etc

ornate pike
#

Oui, tu peux faire n'importe quel projet, tu peux aussi en trouver facilement sur internet

obtuse solstice
obtuse solstice
iron swan
obtuse solstice
#

D'accord... merci

#

Je vais me creuser les méninges un peu plus

brave jay
#

Mais surtout quelque choses qui te donne envie et qui est assez intéressant pour continuer de l’améliorer

wooden hemlock
wooden hemlock
# obtuse solstice Je dirais plutôt me conseiller. J'aimerais être autodidacte en développement web...

J'ai eu pendant trés longtemps exactement le même problème (qui n'en est pas un) !

J'avais l'envie, une volonté incroyable mais j'étais dans un flou monstrueux !

Il faut franchir un cap "moral" qui te limite et qui te laisse croire que tu ne pourras pas évoluer.

Ensuite, apprendre de manière autodidacte, comme je l'ai fais et le fais encore, te demande une rigueur bien plus important que celle d'un cursus scolaire dans lequel tu es "drivé".

Mon conseil premier serait de supprimer totalement un certain côté "prétentieux" et de suivre l'excellent cours d'OpenClassRooms qui se nomme : Apprennez à apprendre (gratuit en libre accès).

Je parle de prétention car pzesonnellement je me suis dis : "je suis pas demeuré, j'ai pas besoin qu'on me dise comment faire ca" et bien pas du tout, j'ai confirmé ce que je savais qui était bon à appliquer et j'ai gagné plein de superbes méthodes et surtour un confort moral, qui lorsque tu te rappelles de ce cours, te rassure lorsque tu doutes par exemple !

Personnellement j'avais déjà ma structure hiérarchique sur ce que je désirais apprendre et sur quelle finalité je désirais me diriger.
Mais si ce n'est paq ton cas, ce cours t'aidera une nouvelle fois.

J'ai aussi appris à me "forcer" et ne pas "snobber" des éléments que je prenais pour acquis, car dans le pire des cas ca fait office de révision et tu obtiens un confort moral sur tes capacités.

Tu devrais avant tout bien définir ce que tu désires faire à long terme, moyen et court termr.

T'imposer de commencer par la base des bases de cet objectif et évoluer en fonction de ca !

Je reste disponible si tu as des questions ou autre chose à éclaircir ! 🙂

dim osprey
brave jay
obtuse solstice
#

Vous êtes plutôt géniaux ici

open saffron
#

Saluuuut !
Alors je me ramène en tant qu'hostile puisque je viens demander de l'aide à propos d'un site WORDPRESS harold, mais il y a pas vraiment de channels pour ça alors je viens vous demander on sait jamais.

**Voici mon cas : **

  • Mon site est très très TRES long à charger. J'ai beau avoir fait tout ce que je peux, rien n'y fait. Pas d'extensions pétées, pas de médias HYPER LOURDS ou quoi que ce soit... Cela pourrait venir de mon host car je le paie très peu. Mais à côté de ça, auriez-vous des moyen d'arranger tout cela ?

Merci d'avance à vous bande d'experts !

rustic anvil
#

Salutations, pour ton wordpress, quand tu fais F12, que tu vas dans réseau, puis shift+F5 (ou ctrl+f5 sur FF) ça donne quoi niveau temps de chargements?
( tu peux envoyer plusieurs screens ? (en mp, ça évitera de flood) au moins de la zone avec la liste des ressources )

open saffron
rustic anvil
#

ok,
et quand tu regarde les temps de chargement des fichiers dans F12->réseau, c'est tout aussi problematique?

brave jay
#

Petit crée super galère a faire mais ca rend plutôt bien c'est toujours en dev d'ou les couleurs

chrome_ztBT5BjPF8.gif
floral haven
#

Sympas, j'imagine que la fluidité c'est dû au GIF ?

brave jay
#

Oui

void anvil
brave jay
void anvil
brave jay
#

Display: flex

#

Flex direction row

void anvil
#

Ah d'accord merci !

wise spindle
#

Hey, j'aurais besoin d'un coup de main...

J'aimerais que mes affiches défilent et puis se mettent de l'autre côté de la ligne... Vous savez comment faire? Parce que moi ca donne comme dans la vidéo...

Code HTML:

    <div class="partone">
        <div class="affichepartone">
            <img class="partoneaffiche one" src="../Img/affiche/news.png" alt="">
            <img class="partoneaffiche two" src="../Img/affiche/discord.png" alt="">
            <img class="partoneaffiche three" src="../Img/affiche/youtube.png" alt="">
            <img class="partoneaffiche four" src="../Img/affiche/chevrehurlante.png" alt="">
            <img class="partoneaffiche five" src="../Img/affiche/mctime.png" alt="">
            
            
        </div>
    </div>```

Code CSS:
```js
.partone {
  background-image: url(../Img/temporaires-fichiers/Blender/partonebackground.png)
}

.partoneaffiche {
  padding-left: 5px;
  padding-right: 5px;
  
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-700px); }
}

.affichepartone {
  animation: scroll 20s linear infinite;

}
dim osprey
#

@quartz turret

wise spindle
dim osprey
brave jay
# 
  @keyframes moveSlideshow {
    100% {
      transform: translateX(-50%);
    }
  }

  .slideinf-element {
    /* from vue slider infinite */
    transform: translate3d(0, 0, 0);
    position: relative;
    overflow: hidden;
    animation-name: moveSlideshow;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: flex;
    width: max-content;
    min-width: 200%;
    animation-duration: 50s;
    animation-direction: reverse;
    animation-delay: 0s;
  }
# 
                class={`slideinf-element h-full`}>
                <div class="w-50%">

                    --T'es elements

                </div>
                <div class="w-50%">

                    --T'es elements

                </div>
            </div>```
wise spindle
brave jay
#

Non

#

Tu mets tous dans chaque div

wise spindle
wise spindle
turbid sparrow
#

C'est possible de mettre des pub sur un panel pterodactyl ?

brave jay
#

Salut, j'ai une petite question pour les devs "pro" imaginons ou vous demande un site vitrine pour un restaurant avec un systeme de réservations crée de 0 vous le faites payer combien ? (vous pouvez donner une fourchette)

steady zephyr
# brave jay Salut, j'ai une petite question pour les devs "pro" imaginons ou vous demande un...

salut je me permet de donner mon avis "j'ai rien d'autre a faire" , cela dépend de plein de chose déjà si tu te base sur des vrais prix ou des prix personnalisé je dirais pour en agence 1000 à 5000 euro alors que si tes en freelance 500 à 3000 bien sur c'est des prix existant trouver sur internet mais ça dépend de plein de chose si tu utilise un CMS , WordPress , ou tu fait du html brut

floral haven
# brave jay Salut, j'ai une petite question pour les devs "pro" imaginons ou vous demande un...

Pour déterminer le prix c'est assez "simple" en soit. Il faut décomposer le processus en deux partie
La première est de déterminer ton TJM, c'est souvent le plus compliqué pour les débutants. Le TJM étant ce que le client va payer pour une journée de travail
Ensuite la seconde partie tu vas estimer la charge de travail et la quantifié en temps.
Ensuite tu fais un rapport à la journée de travail et tu auras le "prix" (le devis pour être précis)

Exemple: Si tu es un développeur ayant un TJM de 450e. On te donne un projet de réaliser le site X. On te donne toute les informations nécessaires pour déterminer le temps nécessaire à la réalisation de celui-ci et tu estimes qu'il te faudra 30h, et bien tu vas rapporter ça à une journée de travail (30/8=3.75) et ensuite à ton TJM soit un total d'environ 1700euros

C'est la manière la plus simple pour déterminer le coût d'un projet. Bien sûr avant ça tu auras déterminer un CDC précis et tout ce dont tu as besoin pour déterminer convenablement la charge de travail précise

brave jay
#

Mais ouais c’est bien ce que je me disais

floral haven
brave jay
#

J’ai bugger … le manque de sommeil … 🙂

tame forge
turbid sparrow
tame forge
turbid sparrow
#

...

storm hound
#

bruh ptdr

turbid sparrow
#

Donc, une personne peux m'aider pour mettre des pub sur un panel pterodactyl ?

brave jay
turbid sparrow
#

Oui mais il son ou c'est fichier ?

fickle void
turbid sparrow
#

Je demande juste si un développeur est disponible pour m'aider à chercher...

brisk forum
#

Oui @turbid sparrow

wicked sable
#

Bonjour, j'aimerais savoir pour l'image de l'embed du site ne veut pas se mettre en bas.

#

Voici le code

# 
<meta content="https://lien.lien/assets/img/slimee.png" property="og:image" >
    <meta property="og:image:width" content="1920"/>
    <meta property="og:image:height" content="1080"/>
granite coyote
#

Hey bonsoir la team, excusez de venir comme ça mais je monte une equipe pour créer un assez gros projet et j’aurais besoin d’environ 2 dev HTMl et CSS capable de faire un site assez cali qui serez pret a rejoindre l’equipe je donne plus d’info en mp

stiff talon
#

Salut !
Je bloque un peu pour le développement de mon premier site internet est-ce que quelqu'un pourrait m'aider à régler ce petit problème ?

Je rencontre un problème lors de la création de ma navbar en format téléphone (menu hamburger). J'ai bien réussi à faire en sorte que le menu se déplie au clic mais je n'ai pas réussi à faire de même pour mes sous catégories (qui sont directement dépliées)... Je pense que c'est un problème de sélecteur. L'architecture de ma navbar est <nav><ul><li><label for="btn-1" class="show">catégorie</label><a href"">catégorie</a><input type="checkbox" id=btn-1><ul><li><a href="">sous categorie</a></li></ul></li></ul></nav>
Et dans mon CSS j'ai ça en bref :
.show + a, .navbar nav > ul{ display:none; } [id^=btn-1]:checked .show + a, .navbar nav > ul > li > ul{ display:block; } [id^=btn]:checked + nav > ul{ display: block; }
J'ai tenté de remplacer [id^=btn-1]:checked .show + a, .navbar nav > ul > li > ul{ par [id^=btn-1]:checked .show + a, .navbar nav > ul > li > ul>li{ mais là c'est le problème inverse les sous catégories ne sont pas dépliées et ne se déplies pas 😦
Je suis débutant en intégration et pas très à l'aide avec les sélecteurs et combinateurs donc si quelqu'un pouvait m'indiquer que faire pour résoudre mon problème je serai ravi ! : )

peak hare
#

saluuuut!
je debute totalement en Webdev et je cherche a faire une parallax qui s'adapterai su ordi et sur tel
est ce que quelqu'un saurait comment faire svp?

mint ibex
#

bonsoir, je voulais d'abord savoir si ct possible d'héberger sur github un site en temps réel, en mode deux personne sur le site peuvent voir ce qu'elle font par exemple. et si jamais c'est possible, par quoi commencer

lapis burrow
mint ibex
#

C'est compliqué a faire ?

lapis burrow
#

Mais sinon, nan c'est pas complexe

mint ibex
#

Ah et sans payer le seul moyen c'est d'utiliser mon pc comme server ?

lapis burrow
mint ibex
#

ya pas un heberger autre que github qui permet d'utiliser un websocket gratuit ?

lapis burrow
supple pasture
lapis burrow
iron stone
#

hello , vous pensez quoi de la landing page de mon site ?

tame forge
#

Sympa 👀

#

La navbar est pas hyper facilement visible. Faudrait mettre une couleur qui se verrait sur le fond ^^

rustic anvil
#

le background a besoin d'un bon 50% de lumiere en moins, et ça sera top :)

deep sage
#

bonsoir j'ai besoin d'un petit service sur une ligne de code quelqu'un pourrai m'aider ?

tame forge
mint ibex
#

un peu comme le backface-visibility: hidden; qui rends invisible la face arrière, est-ce que il y a qqch qui permet de changer la face arrière pour y mettre une image ou couleur ?

rustic anvil
#

ton element peut recevoir un background? si oui, alors il faut l'afficher puis appliquer un background background:#f00 url(xxx.png) no-repeat center center/contain (ou voir pour plus simple)

mint ibex
rustic anvil
#

tu peux t'inspirer de ça :)

mint ibex
ancient jackal
#

quelqu'un à une idée de pourquoi cela me fait ça? après que j'ai commencer a configurer les div

image.png
left wigeon
#

Plusieurs raisons possibles :

  • tes div sont en position absolute ?
  • as tu essayé d'augmenter la line height ?
ancient jackal
brave jay
#

Si tu ne mets pas de position c’est relative par défaut

ancient jackal
#

Oui j'avais oublié ça

floral haven
#

static tu veux dire ?

void anvil
#

bonjour
j'ai un problème dans le développement de mon site web. J'ai peut-être un peu abusé de la fonction css position:relative et je me retrouve donc avec un grand bout de ma page en bas qui est blanc... est-ce qu'il est possible de la faire disparaitre ?
Merci

tame forge
void anvil
rustic anvil
#

(doucement @strong lynx xD t'as suppr aussi l'aide apportée xD)

#

pour résumer, il y a plusieurs soucis dans tes CSS @void anvil , avec les bottom de partout

granite coyote
#

Salut la team, je cherche un bon dev HTMl et CSS pour un gros projet

left wigeon
granite coyote
# left wigeon Rémunéré ?

sachant que cest un projet sur le long therme non. En tous cas pour le moment. Mais apres le lancement du jeux oui on pourra remunere

left wigeon
#

C'est un projet pour dev un r/place ?

brave jay
left wigeon
#

son profil

image.png
brave jay
#

Ah bien vus !

#

Moi j’ai pas c’est pour ça

IMG_6084.png
granite coyote
#

donc je cherche des devs chaud pour le projet j’en ai deja un tres cali pour le back mais pas pour le front et on aimerais commencer un site pour fzire connaitre le projet

#

apres il nous faudra un dev json pour la partie fonctionnement du jeu

left wigeon
#

Car j'imagine que quand les joueurs sont sur la même map ils doivent tout voir en direct

granite coyote
brave jay
#

Si moi tu me donnes un design et le back déjà fait je suis chaud

granite coyote
#

pour le moment il me faut un dev capable de faire un site comme celui qu’on avait commencer mais attention c’est une copie du site de paladium mais on veut faire dans le meme esprist

brave jay
#

Ouais donc tu n’as pas de design :/

granite coyote
#

ben apres je comprend pas trop ce que tu appelle design

#

moi quand je dis design 3d c’est sa

#

sa par exemple ce sont des images que l’on veut integrer au site. Je suis vraiment nul en dev donc 😅

brave jay
#

Maquette web par exemple

granite coyote
#

ah sa non on a rien de tous sa

#

le projet viens d’etre attaquer la depuis noel

#

et on a pas que 1 dev donc pour faire les maquette c’est galere surtout qu’il travaille.

brave jay
#

Le truc c’est que je ne travaille pas sur : j’aimerais un truc dans ce style mais avec mes trucs

#

Je suis pas assez créatif pour ça

left wigeon
granite coyote
#

possible de vocal 😅 car la je pigr pas tous

brave jay
#

en gros je ne travaille pas sans maquette ou au moins un wireframe :

image.png
granite coyote
#

ah ok ben malheuresement on en a pas

#

mais sinon moi j’ai des idees

#

je sais deja comment je veux agencer le site

#

donc bon apres voila je chercher et je cherche

void anvil
#

salut, je suis pas sur mon pc en ce moment suite a un ptit prblm dcp je fais que de l'html css car j'ai pas les perms admins sur celui là j'ai fait le cours html css et js sur openclassrooms, vous auriez des idées pour aller + loin ?

#

pas forcément sur oc hein

rustic anvil
#

si tu as appris les bases, peut être qu'il faurait créer un projet bidon contenant plusieurs besoins, ce qui te permettra de mettre en pratique les choses
et ainsi tomber sur des problemes à résoudre qui te permettront de consolider ce que tu connais voir, aller plus loin en dev
exemple, gérer un parking (des vehiculent entrent, ils sortent et payent selon la durée, il faut chaque jour voir si des vehicules y sont encore, en cas de longue durée declencher une erreur)
tu peux faire une petite interface en html et css, puis jouer avec le JS pour afficher et gérer des choses :)

void anvil
copper warren
floral haven
#

Il est chaud le boug

exotic sentinel
tame forge
brave jay
#

Salut ! Vous utilisez quoi pour faire un audit seo ?

left wigeon
brave jay
#

Merci

left wigeon
#

De rien 👍

bronze mortar
#

salut a tous j'aurais besoin d'aide pour la redimentions de la catégorie mais je bloque si vous avez des solution je suis preneur

image.png
#

je presise c'est une image par default

#

et je vient de supprimer le plus d'info

void anvil
#

tu peut utiliser width en css avec un pourcentage ou des px voir d'autre unité présente dans css.

width: 200px;

width: 15%;

Tu peut mettre ça dans ta div:

<div style="width: 200px;">
</div>

bronze mortar
#

comment sa j'ait deja tenté mais rien

image.png
void anvil
#

tu peut voc ?

bronze mortar
#

oui

void anvil
#

ok je créer un channel vocal

bronze mortar
#

sa marche

left wigeon
#

@bronze mortar @void anvil vous avez réussi ?

void anvil
#

non, mais la je vais afk.

left wigeon
#

ok

void anvil
#

salut en fait je suis un débutant en html et j'ai commencé a faire ma page

#

mais

#

afin d'inclure du css dans ma page je suis obligé de creer un nouveau fichier ?

#

fin pas un fichier mais un autre

#

index.css

#

j'en sais rien je suis perdu

#

je fais des recherche mais je trouve pas

brave jay
#

Non t’es pas obliger tu peux écrire directement dans le .html avec les balises <style> </style> ou dans les balise avec style=" "

brave jay
void anvil
#

ok

#

je dois le renommer index.css ?

#

pour y coder du css ?

exotic sentinel
#

Tu lui donnes le nom que tu veux mais en .css

void anvil
#

okok

#

merci les gars

brave jay
#

Tu peux le nommer comme tu veux ce qui est important c’est le .css

void anvil
#

ok

#

et jai eu un autre probleme

#

jai mis une image dans mon html

#

mais quand je lance mon site l'image n'apparait pas

brave jay
#

Montre nous le code

void anvil
#

`<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Mon site</title>
<mark>C'est censé etre surligné</mark>
<br>
<a href="https://openclassroom.com/fr/">Ma formation Open Classroom</a>
<!-- saut de ligne CTRl+/ -->
<p>
<img src="images/ARNdev.jpg" alt="ARNdev"/>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
</p>
<a href="https://www.youtube.com/watch?v=fVgYJ4MigHI">Une vidéo sur le codage en 2023</a>

</div>`

brave jay
#

Le un screen du dossier où est l’img

#

Et*

#

Ah non c’est juste pas dans la valise <body>

#

Enfin j’arrive pas a voir je suis sur téléphone

void anvil
#

tien le code en normal

#

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Mon site</title>
<mark>C'est censé etre surligné</mark>
<br>
<a href="https://openclassroom.com/fr/">Ma formation Open Classroom</a>
<!-- saut de ligne CTRl+/ -->
<p>
<img src="images/ARNdev.jpg" alt="ARNdev"/>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
</p>
<a href="https://www.youtube.com/watch?v=fVgYJ4MigHI">Une vidéo sur le codage en 2023</a>

</div>

exotic sentinel
#

Ouai je pense que c'est ça ya pas de body

void anvil
#

ah ouais

#

j'essaye tout de suite je vous redis

brave jay
#

Oui et aussi ton code il peut pas aller chercher dans mes dossier perdu au fond de t’es dossier perdu au milieu de nul part 🙂

#

En gros tu as dans ton dosier

index.html
Image/
Image.jpg
T’es autres fichiers

void anvil
#

mais l'image elle est dans le fichier images

#

donc normalement il le trouve

#

et jai mis le body sa marche encore pas

#

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Mon site</title>
<body>
<mark>C'est censé etre surligné</mark>
<br>
<a href="https://openclassroom.com/fr/">Ma formation Open Classroom</a>
<!-- saut de ligne CTRl+/ -->
<p>
<img src="images/ARNdev.jpg" alt="ARNdev"/>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
</p>
<a href="https://www.youtube.com/watch?v=fVgYJ4MigHI">Une vidéo sur le codage en 2023</a>
</body>

</div>

brave jay
#

J’arrive chez moi dans 20 minutes je vais pouvoir t’aider

void anvil
#

okok

left wigeon
# 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Mon site</title>
</head>

<body>
    <mark>C'est censé etre surligné</mark>
    <br>
    <a href="https://openclassroom.com/fr/%22%3EMa formation Open Classroom</a>
                    <!-- saut de ligne  CTRl+/ -->
                      <p>
                        <img src="images/ARNdev.jpg"
        alt="ARNdev" />
    <div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
    </p>
    <a href="https://www.youtube.com/watch?v=fVgYJ4MigHI%22%3E">Une vidéo sur le codage en 2023</a>
</body>

</html>
void anvil
#

la normalement c'est censé marcher jai mis la balise body

left wigeon
#

La balise <head> doit s'ouvrir et se fermer

#

de même que ta balise <body> et <html>

void anvil
#

ah merci beaucoup je vais changer tout ca

left wigeon
#

J'ai corrigé ta balise <a> aussi

void anvil
#

je vais pas copie collé betement

#

je vais essayer de comprendre mes erreurs grace a ta correction

left wigeon
#

pour une balise <a> fais bien attention à avoir

<a href="https://tonlien">le texte de ta balise</a>
#

essayes de corriger ton autre balise <a> tout seul

void anvil
#

bah la les balises sont bonnes non ?

#

<a href="https://www.youtube.com/watch?v=fVgYJ4MigHI">Une vidéo sur le codage en 2023</a>

#

et comment tu fais pour mettre le texte en couleur sur discord ?

left wigeon
#

regarde celle en rouge

image.png
left wigeon
void anvil
left wigeon
#

Essaye de faire comme celle soulignée que verte que j'ai corrigé

void anvil
#

<a href="https://openclassroom.com/fr/">Ma formation Open Classroom</a>

left wigeon
#

parfait

void anvil
#

ok merci

#

et la regarde mon code l'image ne s'affiche toujours pas

# 
<!DOCTYPE html >
  <html>
    <head>
        <meta charset="utf-8" />
          <title>Mon site</title>
    </head>
            <body>
              <mark>C'est censé etre surligné</mark>   
                <br>
                  <a href="https://openclassroom.com/fr/">Ma formation Open Classroom</a>
                    <!-- saut de ligne  CTRl+/ -->
                      <p>
                        <img src="images/ARNdev.jpg" alt="ARNdev"/>
                          <div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
                            </p>
                              <a href="https://www.youtube.com/watch?v=fVgYJ4MigHI">Une vidéo sur le codage en 2023</a>
              </body>
                        
  </div>```
left wigeon
#

est ce que le alt s'affiche ?

void anvil
#

oui le alt il s'affiche mais pas l'image

left wigeon
#

donc c'est que le lien est faux

void anvil
#

je vais mettre une image google pour voir

#

ah oui merci

#

c'etait donc bien le lien qui etait faux

#

parfait

left wigeon
#

tu devrais créer un dossier media à coté de ton fichier index.html et déplacer ton image dedans

void anvil
#

maintenant il faut que j'arrive a mettre le css pour rendre la page belle

left wigeon
#

tu as préparé un style.css à côté de ton index.html ?

void anvil
left wigeon
void anvil
#

je suis en train de le faire la justement

#

car faut que je reapprenne tout

#

css

#

html

#

et flexbox

#

qui va avec css

#

donc la je repart de

#

0

#

c'est bon jai creer le file style.css

#

et dedans je vais devoir mettre tout ce qui est en rapport avec le texte c'est ca ?

brave jay
#

ca doit ressembler a ca :

image.png
void anvil
#

yes

brave jay
#

Ensuite pour ajouter ton css dans ton html tu peux faire : <link rel="stylesheet" href="style.css" />

code.png
void anvil
#

c'est quoi le stylesheet ?

brave jay
#

Feuille de style en francais

#

c'est pour dire au navigateur que c'est un fichier css

#

Sinon il ne sait pas ce qu'il importe

void anvil
#

okok

#

merci

#

ca vous dirais un appel ?

#

parce que jai creer le style.css

#

maintenant cque je vais mettre dedans je sais pas encore

brave jay
#

tu gagneras du temps

void anvil
#

je vais aller voir ca

brave jay
brave jay
void anvil
#

cette formation elle est bien car je compte etre prochainement mis sur un projet en tant que dev front end

#

donc je me forme

#

jusqu'a etre bon

#

donc cette formaton est cool

dim canopy
#

Salut

brave jay
dim canopy
#

Bref pose la question a google et il va te sortir tout ce que tu as besoin

#

google a la réponse

void anvil
#

Bonjour est ce que on pourrai m'aider je suis en galère pour tous replacer et sa a tous détruit l'ajout de la box avec le code.

image.png
left wigeon
#

Possible d'avoir le code stp ?

void anvil
#

oui

left wigeon
#

Je regarde ça

void anvil
#

ok

left wigeon
#

Il y a beaucoup de problème, je peux résoudre les plus importants pour te débloquer

#

Le plus gros problème est le flexbox que tu appliques au body

void anvil
#

a la base c'est ca la maquette

image.png
left wigeon
#

Il s'affichera mieux avec ce css par exemple :

body {
    background: linear-gradient(135deg, #000111 0%, #000000 100%);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: initial;
}
#

ah

void anvil
#

merci

left wigeon
#

Évite les position absolute aussi

#

ta div .code se place mal à cause de ça

void anvil
#

ok merci

left wigeon
void anvil
#

mdr

left wigeon
#

essaye d'avoir ce genre de structure dans ton html

image.png
void anvil
#

ok

gloomy kernel
#

Bonjour je suis graphiste et je voudrai savoir sa coute combien pour faire un site web

left wigeon
#

cela dépend du type de site

void anvil
#

bonjour comment est ce que je pourrais inclure un header sur mon site car

#

lorsque je met la balise <header></header>

#

le texte ne s'affiche pas tout en haut

brave jay
#

Tu l’as mise où ta balise ?

void anvil
#

dans mon body

#

il faut que je le mette dans mon head ?

brave jay
#

Non justement envois ton html et css

void anvil
# 
<!DOCTYPE html >
  <html>
    <head>
        <meta charset="utf-8" />
          <title>Mon site</title>
    </head>
            <body>
              <br>
                <a href="https://openclassroom.com/fr/">Ma formation Open Classroom</a>
                  <!-- saut de ligne  CTRl+/ -->
                    <a>
                      <img src="https://www.ynov.com/wp-content/uploads/2014/01/metier-developpeur-web-ynov.jpg" alt="dev" style: width="500px" height="300px"/>
                    </a>
                          <a href="https://www.youtube.com/watch?v=fVgYJ4MigHI">Une vidéo sur le codage en 2023</a>
                            <link rel="stylesheet" href="style.css" /> 
                              <!--lien vers le fichier css -->
                                <header>Contact</header>
                              
                                    
                                      <a>Je suis un développeur débutant </a>
              </body>
                        
  </div>```
brave jay
#

Alors le link vers ton fichier css c’est dans ton head qu’il faut le mettre

#

Mais tu n’as pas regarder les tutos que je t’es envoyer enfaite ?

void anvil
#

ca marche pourtant

void anvil
#

mais la j'essaye de comprendre comment positionner les items sur mon site

#

tu pourrais me l'envoyer en message privé

brave jay
#

Le header c’est la partie haute du site donc tu dois le mettre tous en haut idéalement (c’est pas vraiment obligatoire) j’arrive chez moi dans 10 minutes je vais regarder tous ça

void anvil
#

ah oui c'est bon

#

lorsque je positionne mon head en haut de mon body il est en haut

#

et aussi

#

comment je peux faire par exemple

void anvil
#

ce soit au milieu avec plusieurs item

rustic anvil
void anvil
#

@brave jay en gros je voudrais dev un site qui ressemblerais a ca

#

juste changer le truc en bleu avec ecrit HTML CSS

rustic anvil
# void anvil lorsque je positionne mon head en haut de mon body il est en haut

attention à ne pas confondre header et head
voici un exemple de structure html :

html

   -head
      --title
      --style
      --script
   -body
      --header
         nav
      --main
         div
         aside
      --footer

ce n'est qu'un exemple pour comprendre la différence
un header sera dans ton body, et ton head est une balise cachée pour poser le titre, les scripts, styles et autres balises ne servant pas dans ton affichage

void anvil
#

je sais

#

je me suis trompé

#

lorsque jai ecrit

#

desolé

brave jay
brave jay
void anvil
#

tkt

brave jay
#

Tu as réussi du coup ?

brisk forum
void anvil
brisk forum
void anvil
#

oui

brisk forum
#

ok ok

#

ya des balise manquante pour info comme </html>

#

</div>

#

tu code sur quel editeur ?

void anvil
#

vsc

brisk forum
#

je te conseille sublime text il aide a coder pour les débutant genre si tu oublie une balise il va te la fermé sans rien faire

fallen flint
void anvil
#

je l'ai live server

brisk forum
#

live server je m'en fou un peut j'ai pas la flem d'actualiser

brave jay
iron stone
#

Un avis ?

dim canopy
iron stone
#

Ok je vais l'enlever la où ça surchage

stable pendant
#

Bonjour a tous, je voulais savoir, comment je pouvais faire pour pas avoir besoin de mettre le truc top:100vh pour placer mes div en dessous du div qui est en dessous, parce que ça pose des problèmes sur le responsive (si vous pouvez me ping si vous répondez svp)

En gros ça c'est une partie du site mais tout le site est fait comme ça du coup les div se superposent beaucoup dans le site et je perd des textes

image.png
brisk forum
# iron stone Un avis ?

j'ai regarder un peut et ici dans ta barre je te conseill de faire un effet de couleur noire ou blan de base puis au survole de la souris devient coloré

iron stone
#

Un hover yes

brisk forum
#

exact

stable pendant
dim canopy
# iron stone Un avis ?

Je pense que tu peux utiliser des frameworks comme bootstrap ou tailwind pour un rendu plus pro

stable pendant
brisk forum
#

ba sa dépend ou tu le place non ?

stable pendant
#

C'est a dire ?

brisk forum
#

envoie ta partie html

stable pendant
#

vasy

brave jay
stable pendant
stable pendant
brave jay
#

Bottom: 0

stable pendant
#

Je le met sur quel élement

brave jay
#

Ah j’ai pas compris la question

stable pendant
#

Celui en haut ou en bas

brave jay
#

Attend je regarde du coup

brisk forum
#

bottom: 0; oblie pas le ;

stable pendant
stable pendant
brave jay
#

Montre un rendu stp

#

Parce que normalement la façon dont tu as placer t’es éléments normalement tu ne devrait pas avoir besoin de mettre le sommaire en absolute

brisk forum
#

ouais se que j'avais dit en haut

stable pendant
#

J'ai un peu scroll pour que on puisse mieux voir

image.png
brave jay
#

Et du coup c’est à quel endroit que ça ce superpose ?

stable pendant
#

Sans le absolute ça donne ça...

image.png
stable pendant
brave jay
#

Ouais montre nous le css de couverture img

stable pendant
# 
#couverture-img {
  width: 100%;
  height: 100vh;
  background-image: url("../elements/img/couverture.png");
  background-size: 100%;
  /* background-repeat: no-repeat; */
  background-position: center;
  align-items: center;
  justify-content: center;
  display: flex;
}
brisk forum
#

ici pour quoi avoir fait align-items: center; +
justify-content: center;
?

stable pendant
#

Euh rien je crois mdr

brave jay
#

Tu peux centrer ton image avec backgroud position il me semble

brisk forum
#

ouais il a fait sa

brave jay
#

Ouais je viens de voir

#

J’arrive pas trop à comprendre comment tu as ce résultat en enlevant le absolute :/

#

Tu peux ajouter ton code sur codepen ou replit comme ça on peut tester ?

stable pendant
#

Yes je fais ça att

brisk forum
#

ya pas le cssou je connais pas bien le logiciel

stable pendant
#

Dans l'arboréseance t'a un dossier css

brisk forum
#

ok

#

je crois avoire trouver un peut du problème sa vient de la class sommaire-grid

stable pendant
#

C'est vrai que si j'enleve des trucs ça va mieux mais mon titre sommaire est toujours en haut

brisk forum
#

ouais

#

au moin regle sa apres on regarde le titre car le titre c'est une autre class

stable pendant
#

C'est reglé j'ai corrigé dans le fichier

brisk forum
#

ouais

#

pour débug j'ai utiliser l'inspecteur

stable pendant
#

C'est a dire ?

brisk forum
#

l'inspecteur de google

stable pendant
#

Ah

#

Mais du coup je sais pas comment faire pour mettre mon titre en haut

brisk forum
#

c'est quoi qui doit etre avent quoi ?

#

en text

stable pendant
#

titre, apres en dessous, la barre, apres la grille

brisk forum
#

ok

#

donc en premier le text "commencer le" ?

stable pendant
#

Yes

#

Ensuite street workout

#

ensuite Mattia PARRINELLO en bas de l'écran d'acceuil

#

et apres le sommaire comme je t'ai dis

brisk forum
#

ok

stable pendant
#

J'ai vu que je pouvais mettre top:0; mais ça fais rien

brisk forum
#

font-size: 5em;

#

ou font-size: 10em;

#

sa donne sa

image.png
stable pendant
#

Ca fait grand mais je vois pas pourquoi changer ça

#

et la barre sous le commencer le c'est sous le titre sommaire normalement

brisk forum
#

tu veut la mettre ou ? j'ai un peut mal compris

stable pendant
#

En gros un truc comme ça mais apres ça c'est la version pdf donc bon mais t'a une idéee

image.png
brisk forum
#

a ok

#

pour la barre tu fait top: 115vh; ou tu choisit la valeur qui te vas

#

et apres se serai le text a re placer

#

c'est bon pour la barre ?

stable pendant
#

Yes c'est bon

stable pendant
brisk forum
#

tu sais comment

stable pendant
#

Nope

#

A moins de faire un truc avec top:-xvh

brisk forum
#

essaye

eternal ember
#

Salut tout le monde,

J'aurez aimé avoir un avis pour ce petit site qui m'a servi d'entraînement pour moi mais aussi pour gérer ma collection Astérix & Obélix.

Site: https://www.killerjumper.fr/asterix

brisk forum
#

j'aime bien l'animation avec le robot ta mis une image de robot et en arrière la forme si je me trompe pas

stable pendant
# brisk forum essaye

ça marche merci, et est ce que il y a un moyen de mettre la taille du div sommaire en auto parceque quand je la met en auto ou a 100% ça fait ça. Alors que c'est censé faire ça

image.png image.png
brisk forum
#

envoie le lien stp j'aifermé la page

eternal ember
#

ça c'est pour mon portfolio je voulais savoir pour l'onglet Asterix.

brisk forum
#

a oui att

eternal ember
#

En tout cas merci.

brisk forum
#

moi j'aurais aimer une barre de recherche

eternal ember
#

C'est vrai que ça peut être sympa et ça entraîne pas mal.

brisk forum
#

exact

stable pendant
brisk forum
#

ok oklm

stable pendant
#

Du coup t'a trouvé ?

brave jay
#

Je vais regarder ton code quand je serais dispo d’ici 2 heures

brisk forum
stable pendant
#

Oui mais si je met .sommaire sans hauteur définie ça fait n'importequoi

brave jay
#

Ne lui met pas de hauteur du coup

brisk forum
#

a ok je regarde

brisk forum
stable pendant
#

Genre ça fait ça si je lui en met pas

image.png
brave jay
#

Y’a un gros soucis dans ton code

stable pendant
#

Ah

brave jay
#

Je regarde après la j’ai pas le temps

brave jay
# 
.sommaire {
    background-color: #d8a790;
    width: 100%;
    display: flex;
    flex-direction: column; /* aligne les éléments les uns en dessous des autres */
    top: 100vh;
    align-items: center;
    justify-content: center;
}

.sommaire-title {
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;

}

.sommaire-title-h2 {
    font-family: "Roxborough", sans-serif;
    font-size: 3em;
    color: #764b36;
    text-align: center;
    font-weight: 400;
    display: flex;
}

.sommaire-barre {
    width: 85%;
    height: 0.2vh;
    background-color: #764b36;
    display: flex;
    top: 115vh;
    align-items: center;
    justify-content: center;
}

.sommaire-grid {
    width: 85%;
    height: 75vh;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    margin-top: 100px;
}``` Voila
#

Mais arrêtes d'utiliser des absolute partout

#

Aussi utilises <section> comme ca tu peux faire de ton sommaire un menu avec des boutons qui renvois vers t'es différentes sections

stable pendant
#

Merci beaucoup, j'ai jamais été doué en css html je suis plus sur du js ou node, et encore moins sur du responsive. Du coup il faudrait que je fasse ça sur a peut pres tout mon site et que j'enlève le absolute. Merci de tes conseils!

sly abyss
#

hey est ce que vous savez comment je peut remonter mon bouton svp
voici le code :

 <div class="card">
            <div class="content">
              <img src="https://via.placeholder.com/150x150" class="image">
              <div class="text">
                <h3>Titre</h3>
                <p>Texte descriptif</p>
              </div>
            </div>
            <div class="bottom-buttons">
              <a href="#"class="button">Découvrir +</a>
            </div>
          </div>```
```css
.card {
    display: flex;
    flex-direction: column;
    border: 1px solid #111;
    width: 300px;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  
  .content {
    display: flex;
  }
  
  .image {
    width: 150px;
    height: 150px;
    padding: 5px;
  }
  
  .text {
    display: flex;
    flex-direction: column;
    padding: 5px;
  }
  
  .bottom-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }
  
  .button {
    background-color: #E85D75;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
  }
  .button:hover {
    background-color: #582e35;
  }
image.png
brisk forum
#

width: 000px;
height: 000px; et tu choisit des valeur a la place des 000

#

@sly abyss

void anvil
#

comment on fait une [ overflow ] ( Barre de navigation ) qui démarre de bas en haut svp ?

brisk forum
#

une barre inversé ?

iron stone
#

Un avis ?

floral haven
#

Un effort sur le wording ^^

brave jay
dim canopy
swift lava
void anvil
#

Hello, quelqu'un pourrais m'aider je vais faire une dépression je crois..
Quand j'ai beaucoup de content sur ma page ça met bien le footer tout en bas par contre si il y en a très peu ça l'affiche pas du tout en bas..
code : https://srcb.in/4rFyxJGSqg

on voit bien que si j'ai beaucoup de content il s'affiche bien en bas, honnêtement ça fait 4h j'y suis j'en peux plus

image.png image.png
brave jay
#

c'est bootstrap que tu utilises ?

brave jay
void anvil
brave jay
#

D'accord, alors pense a regarder tailwind si jamais 😉 envois nous l'endroit ou il y a les contents

#

enfinle code des contents

void anvil
brave jay
#

oui

void anvil
brave jay
#

Sur le screen que tu as envoyer c'est pas sur le form le soucis si ?

void anvil
brave jay
#

ah

#

autant pour moi j'avais pas compris xD

void anvil
brave jay
#

fixed-bottom je crois

#

ou alors min-vh-100 sur loginpage

void anvil
brave jay
#

Je suis désolé je ne me sers plus de bootstrap depuis très longtemps et j’avais que des bases

void anvil
brave jay
#

En gros tu dois faire en sorte que ta page prennes toutes la taille de l’écran en hauteur et après tu place ton footer en bas

#

Avec un margintop negatif

#

C’était la façon que j’avais trouver

floral haven
#

Hello, tu devrais commencer par du CSS sans tools pour commencer, sinon tu risques d'avoir des bloquages à chaque fois
Bootstrap (au même titre que Tailwind etc...) est uniquement là pour te faire gagner du temps lors de la réalisation, pour pour esquiver l'apprentissage

brisk forum
#

par exemple si tu utilise ni bootstrap ni tailwind tu auras des 1000 ligne de css

#

sur les gros site

cloud dawn
#

Salut, j'ai une question comment je peux faire pour mettre deux images cote à cote, mon code : ```html
<img class="actor"src="../assets/img/back.jpg"><img class="actor"src="../assets/img/back.jpg">

```css
.actor
{
    display: flex;
    justify-content: left;
    margin-left: 4%;
    margin-top: 1%;
    color: rgb(206, 204, 204);
    max-width: 20%;
    transition-duration: 0.4s;
}````
left wigeon
#

@teal nova Tu as + de CSS sur ton site en important bootstrap ou tailwind

#

Pour rester opti faut pas hésiter à minifier

left wigeon
cloud dawn
brisk forum