#html-css

1 messages · Page 24 of 1

timid mist
#

Pas grave

gaunt yoke
#

li:has(> a:hover) {}

#

essaye comme ça

timid mist
#

visual me le souligne en rouge

#

en mode faute

acoustic current
weary haven
#

Salut les mec je cherche a faire le petit croisant de lune sur les deux rectangle une idée ? ( C'est une maquette donc je cherche a la reproduire )

unkempt cloak
weary haven
clear nest
#

Salut j'ai un problème quand je vais sur mon navigateur et je met le truc pour voir la taille d'écran pour faire mon responsive les écran afficher ne sont pas les meme que les vrai écrans de mobile j'ai tester

dusky skiff
#

Je te conseille de le mettre sur un réseau local et de tester sur ton téléphone

clear nest
#

Oui mais ca ne change rien et tout le reste est bon juste cette parti ca viens peut-etre du code

torn rock
#

bonjour je m'entraînes faire des site web (je débute seulement)mais je ne sais pas comment faire pour m’améliorer quelqu'un pourrait m'aider ?

#

et surtout pour mettre le site web dans le format de tout le appareil

void anvil
#

très bon site

torn rock
dusky skiff
void anvil
#

Pas de quoi !

unkempt cloak
#

Bonjour, je suis débutante et je m'exerce sur ma première intégration responsive en flexbox. Il me reste plus que le responsive à faire, mais je ne comprends pas pourquoi mon container n'est pas centré quand l'écran est inférieur à 480px. Si quelqu'un peut m'éclairer sur ce point. Merci ! https://jsfiddle.net/w7oz1Lh6/

media_queries.png
Edit fiddle - JSFiddle - Code Playground

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

plain haven
#

hey

#

svp j'aimerais mettre le texte en vertical

#

Le titre, la description et le bouton les uns en dessous des autres svp

# 
.presentation{
  padding: 2rem;
  margin-top: 8rem;
  margin: 12rem 12rem;
  position: relative;
  display: flex;
}```
#

Voici le code CSS du container

steel citrus
#

Look flex et wrap

plain haven
#

comment ?

scenic fiber
copper warren
#

si oui essaye ça : ```css
transform-origin: 0 0;
transform: rotate(90deg);

plain haven
copper warren
#

Faut cibler ton text

plain haven
#

juste que le texte soit les uns en dessous des autres avec l'image à côté

#

:/

copper warren
#

Tu veux les text en dessous de l'images ducoup ?

plain haven
#

non

#

l'image à gauche, et les textes les uns en dessous des autres à droite

#

mettre l'image en flexbox c'est bon mais pas le texte

copper warren
#

Envoie ton code en pv

#

Vous embetez pas son soucis est résolu

plain haven
#

oui merci

jolly mango
#

Coucou, je m'entraîne à coder des petits sites en html/css, j'aimerais savoir si quelqu'un aurait pas une maquette par hasard pour que je m'entraîne un peux

void anvil
#

tu pourras même t'entraîner en JS si tu te lances dessus

jolly mango
#

Oh il est génial, merci beaucoup frérot

jolly mango
void anvil
#

ah bah voilà amuse toi bien alors !

delicate igloo
jolly mango
timid mist
#

Hello
J'aimerais bien utiliser ma fonction calc() pour définir la hauteur de div2 en fonction de la hauteur de div1

#

Genre calc(100% - ??)

heavy zealot
gaunt yoke
#

tu le hide en javascript @heavy zealot ?

dusky skiff
#

ça rend dingue ce genre de trucs, comment ça se fait ?

heavy zealot
#

Ah

#

Je dois installer java sur mon hébergement non ?

#

Ou je dis totalement de la merde ? 🤣

gaunt yoke
#

Non non pas besoin

#

vérifie que ton fichier est bien chargé

heavy zealot
#

je peux faire ça comment ?

gaunt yoke
#

envoie le lien

heavy zealot
gaunt yoke
heavy zealot
#

ah

#

c'est du a quoi ?

gaunt yoke
#

ça je ne sais pas, ton url est bonne ?

heavy zealot
#

normalement oui

#

je ne vois pas en quoi elle ne serait pas bonne

#

mais j'ai rien a activer sur plesk ?

#

car en local ça marche mais pas en hébergement je comprends pas ça

#

tu parles de cette url ? @gaunt yoke

gaunt yoke
#

je ne sais pas du tout, juste l'url est en 404 en tout cas

heavy zealot
gaunt yoke
#

oui

heavy zealot
#

de ça ou de l'url du site ?

#

oui c'est la bonne url

timid mist
void anvil
#

Regarde sur la docs si personne te répond

gaunt yoke
#

oui et c'est quoi le soucis avec calc

void anvil
#

Ah bah enzo le sauveur

gaunt yoke
# heavy zealot

je pense juste qu'il te le charge pas, essaye simplement de modifier l'url de ton script, par exemple avec juste un ./ devant le assets

#

Ah non ok

#

Car tu charges ton JS avant que le DOM lui soit chargé @heavy zealot

timid mist
gaunt yoke
#

Met ton script à la fin du body (avant la fermeture de celui-ci) pour try

gaunt yoke
#

width: calc(100 - 20px)

#

par exemple

timid mist
#

Ca je sais

#

Mais

#

On peut pas faire une opération avec la valeur d'une propriété d'un élément ?

#

Genre 100% - (width div1)

gaunt yoke
#

Si mais dans ce cas là il faut que tu l'injectes en JS dans ton DOM et que tu viennes la foutre en variable css

timid mist
#

DOM ? (sorry je débute)

gaunt yoke
#

pour ensuite faire un calc(100 - var(--xxx))

#

(le dom c'est ton document, ta page)

timid mist
#

Et comment on fait ça ?

#

(j'ai déjà du JS lié à ma page

gaunt yoke
#

ou enfaite même mieux sans variable css, tu viens juste faire un element.style.width (si c'est width) et tu lui met le calc()

timid mist
#

Pas tout compris

gaunt yoke
#

const element = document.getElementById('element')
element.style.width = calc(100% - ${otherElement.clientWidth}) ou offsetWidth là je ne sais plus

# 
const element = document.getElementById('element')
element.style.width = `calc(100% - ${otherElement.clientWidth})`
#

mieux pardon

timid mist
#

Hhm

#

et sinon y a pas juste un moyen de dire à div2 que sa hauteur soit de sorte à couvrir le reste de la page parfaitement sans qu'il y ait de scroll ?

gaunt yoke
#

si tu le met en 100% ou 100vh si tu veux le full écran

#

100% ce sera en fonction du parent

timid mist
gaunt yoke
#

donc du 100% suffit

timid mist
#

Bah ça fait 100% du screen

#

donc ça dépasse

#

ah non

#

juste mes éléments sont pas bien organisés

heavy zealot
#

pourtant je le load tout a la fin du fichier @gaunt yoke

gaunt yoke
#

ah ok t'es sur alpine js pour gérer le isOpen de ton menu ?

#

oki c'est ton script alpine qui est pas load car il est pas en https

heavy zealot
#

je vais test ça

#

oh merci tu gères

acoustic current
#

Salut, j'essaie de centrer le texte des 2 bouttons mais il ne veut pas. Le problème est que le texte reste raccroché à la div parent qui a une height limité malgré le padding. Mais je ne sais pas comment outrepasser cette limitation sans passer par des positions absolute qui seront emmerdantes pour le responsive.

#

Maquette

unknown.png
#

La dure réalité

unknown.png
gaunt yoke
#

on peut voir le rendu global stp

acoustic current
#

Yep

#

Maquette

unknown.png
gaunt yoke
#

ah tu veux juste centrer le texte dans tes boutons ?

dusky skiff
acoustic current
#

Oui

#

Ca galère à cause du div parent mdr

gaunt yoke
#

Mais comment c'est possible

#

c"'est censé ce centrer automatiquement vu que tu as un padding sur ton <a>

acoustic current
# 


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

        .big {

          a {
            padding: 25px;
          }

          .purple {
            margin: 0 0 0 30px;
            background: $purple;
          }

          .blue {
            background: $blue;
          }

        }
      }```
gaunt yoke
#

tu peux me send le truc

#

ce sera plus simple

acoustic current
#

ok

# 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>

    <link rel="stylesheet" href="css.rwd.css" />

</head>
<body>

<header>

    <nav class="topbar">
        <div class="left">
            <a href="">Actualités</a>
            <a href="">Partenaires</a>
        </div>

        <div class="right">
            <a href="">Contact</a>
            <a href="" class="devis">Demande de devis</a>

            <div class="big">
                <a href="#" class="btn purple">Professionel</a><!--
                --><a href="#" class="btn blue">Particulier</a>
            </div>
        </div>
    </nav>

    <nav class="navbar">

    </nav>

</header>

<main>



</main>

</body>
</html>```
gaunt yoke
#

en un dossier stp harold

acoustic current
gaunt yoke
#

pour que le padding soit bien prit en compte

#

du coup ça va te décaler (ce qui est normal) tes boutons, maintenant tu peux juste jouer avec un translateY sur ton .big

#

(pour les remonter sans position absolute par ex)

acoustic current
#

Merci c'est bon ❤️

#

Là ca marche mieux LULgoodenough

unknown.png
strong jungle
#

qui a un template de site pour hébergeur ?

acoustic current
#

Tu as un truc qui s'appelle ThemeForest

#

Et si tu veux créer ton hébergeur et que tu veux utiliser une template tu pars déjà mal

strong jungle
#

non mais apres je l'arrange a ma façon c'est juste pour avoir un base

acoustic current
#

Oui mais dans ce cas prends en une de pas connue

#

Mais c'est pas un gage de sérieux

acoustic current
gaunt yoke
#

Encore une fois: c’est pas le sujet, il fait ce qu’il veut de son projet, il vous a pas demandé conseil

#

Il demandait juste si vous connaissiez des templates de site, les réflexions ensuite sur « tu n’y arriveras pas » ou autre c’est pas la peine

#

ou alors ailleurs (discussion libre ou thread) merci

strong jungle
#

et du coup des gratuit il y a pas ?

gaunt yoke
#

Si tu peux en trouver, beaucoup de petit hébergeur en utilise
Par contre là tout de suite je n’aurai pas de lien à te fournir, mais tu peux facilement en trouver via des recherches avec des mots clés précis comme: free thème html/css responsive

#

Par exemple

strong jungle
#

ok merci beaucoup

acoustic current
#

Si tu cherche un peu tu trouveras de quoi faire

unkempt cloak
#

Hello! Je voulais savoir si ce genre de layout ce fait simplement avec html/CSS/JS ? Par exemple la map qui prend tout la largeur d'une section avec un formulaire de contact au-dessus.

map.png
void anvil
#

Oui

unkempt cloak
#

Cool merci

acoustic current
#

Le layout derrière c'est sûrement une div avec une width de 100vw et une height de 100vh

#

Et le formulaire c'est une div en position relative (ou absolute) avec la div de la map en absolute (ou relative je sais plus trop mais ça doit pas être là même que la position de la div du formulaire) avec un left de 10vw et un bottom de 0

unkempt cloak
void anvil
#

Position absolute et bottom @unkempt cloak

#

Sur ton footer

acoustic current
#

Après des absolute h24 c'est pas ouf harold

#

Mais c'est une solution

timid mist
#

Hello j'ai un petit soucis avec mes sections

#

J'ai deux sections dans une autre, et les 2 sections sont alignées en colonne, jusque là rien d'annormal.
Mais j'ai attribué aux deux sections un margin-top et un margin-bottom de 15px, ce qui fait qu'en théorie, l'espace entre les 2 sections est de 30px (2x 15px grâce au bottom de la section1 et au top de la section2)

#

Sauf que les margin se chevauchent et il n'y a que 15px entre les deux sections

#

Je sais que j'avais déjà eu affaire à un problème similaire, mais je ne me souviens plus quelle solution j'avais trouvé

#

Si quelqu'un peut m'aider, merci d'avance :)

sterile skiff
timid mist
#

Je screen quoi ?

#

Le code ou l'Inspecter l'élément avec les parties concernées ?

void anvil
timid mist
#

Ah non enfait je suis juste bête excusez moi c'est le principe même des marges 😅

timid mist
#

J'ai une question est-ce que ça se fait de tricher sur ses pages

#

Genre au lieu de faire un bouton qui redirige vers un autre doc.html du site, on fait une section display : none; qu'on met en position : fixed; et qui prend toute la largeur et la longueur de la page, et qui s'affiche au clique du bouton grâce au JavaScript

#

Ca se fait ou pas ?

slim vessel
#

Oui ça se fait mais c'est pas très propre et optimisé la manière dont tu veux le faire. Ce que tu veux faire c'est ce qu'on appelle une architecture Single Page Application

timid mist
#

Ok merci

slim vessel
#

Je te conseille d'utiliser plutôt un autre document HTML au lieu de tricher comme ça. Si tu veux afficher le contenu d'une page dans une balise section, alors tu casses un peu la sémantique HTML de ton document.

Aussi, le désavantage de mettre beaucoup de code HTML caché comme ça, c'est que tu rends ton document HTML plus lourd et donc plus long à télécharger et à afficher pour le navigateur de ton utilisateur, tout ça pour du contenu qu'il ne verra peut être jamais si il ne clique pas sur ton bouton.

timid mist
#

Non mais je comptais pas le faire, mais comme j'ai fait cette 'triche' pour un menu quand on clique sur un boutton (j'allais pas faire un code html entier pour un menu), ça m'a fait penser à cette option mdr

#

Sinon question pour les listes

#

Imaginons on a un

<ol>
  <li>Sous partie 1
    <ol>
      <li>Texte 1</li>
      <li>Texte 2</li>
    </ol>
  </li>
  <li>Sous partie 2
    <ol>
      <li>Texte 1</li>
      <li>Texte 2</li>
    </ol>  
  </li>
</ol>
#

Et j'aimerais que ça s'affiche comme ça :

1. Sous partie 1
1.1. Texte 1
1.2. Texte 2
2. Sous partie 2
2.1. Texte 1
2.2. Texte 2
#

Comment on fait pour que ça fasse 1.1 ?

#

et 1.2

#

(1.3, 1.4 etc.. vous avez compris)

slim vessel
#

Il faudra que tu fasses un peu de magie en css pour ça

#

Je crois pas que tu puisses le faire en HTML

timid mist
#

Je m'en doute 😹

timid mist
#

Maintenant comment ? x)

slim vessel
#

Je dirais en mettant ton premier <ol> en position relative et ensuite a chaque li de chaque sous ol, ajouter un <span>numéro</span> que tu positionnes en absolute

timid mist
#

J'ai peut-être la piste du li::marker, qui permet de viser le marqueur de la liste (en l'occurrence le 1, 2, etc.)

timid mist
#

Et jsp ce que c'est <span></span>, je le vois utilisé partout mais jsp quelle est cette balise

slim vessel
#

Span c'est comme div mais pour un display en inline

#

div = display block
span = display inline
Dans les deux tu met ce que tu veux, ça represente juste un bloc dans ton document, pas de semantique particuliere

#

Ouais le pseudo element ::marker c'est super pour ce que tu veux faire je pense

timid mist
#

Ouais sauf que je sais pas trop quoi faire avec

#

J'ai rien trouvé sur W3schools

#

Ou alors j'ai mal cherché

#

Je verrais demain

slim vessel
timid mist
#

Moui ça peut fonctionner mais c'est pas vraiment opti, genre il faut à chaque fois rajouter une ligne de code en CSS si on a un autre sous menu

slim vessel
#

Si tu veux l'automatiser, il va falloir passer par du JS, tu peux pas boucler et recupérer l'indice de boucle en CSS

timid mist
#

Oui ok mais jsp faire 😅

delicate igloo
#

comment on appelle ça déjà thinking2

unknown.png
grand pasture
#

side menu ?
side nav ?

delicate igloo
wise cosmos
#

Hello j'ai un soucis avec SASS FIle Formater, voici l'erreur :

Failed to run File Watcher 'Sass'.: The watcher has been disabled. // Error: Invalid executable (4 minutes ago)

IDE: PyCHarm
OS: Linux

#

Je précise que SASS est pris en charge par l'IDE et dans le doute, j'ai installé le module npm qui va avec.

void anvil
#

L’erreur te dit que l’option a été désactivé tu as vérifier tes paramètres ?

wise cosmos
void anvil
wise cosmos
#

Plusieurs fois ouep

timid mist
slim vessel
# timid mist Comment on fait ça ?

Dans l'idée j'imagine qu'il te faudrait une constant qui contient tes parties et sous parties et tu itteres dessus pour creer tes parties et sous parties à coup de document.createElement. Si tu es novice en JS/HTML tu vas pas mal te casser la tete pour le faire, c'est très intéressant pour l'apprentissage mais si tu veux aller vite, tu vas etre deçu.

timid mist
#

Je suis prêt à me casser la gueule dessus, mais j'ai rien compris à ce que je suis censé faire 😅

slim vessel
# 
const menu = {
  'chapitre 1': ['sous chapitre 1', 'sous chapitre 2'],
  'chapitre 2': ['sous chapitre 1']
}

Object.keys(menu).forEach((chapterLabel, chapterIndex) => {
  const computedChapterIndex = chapterIndex + 1;

  console.log(`${computedChapterIndex}. ${chapterLabel}`);

  menu[chapterLabel].forEach((subChapterLabel, subChapterIndex) => {
    const computedSubChapterIndex = subChapterIndex + 1;

    console.log(`${computedChapterIndex}.${computedSubChapterIndex}. ${subChapterLabel}`);
  })
});
#

Run ça dans un navigateur tu verras ce que t'as en output

#

Après tu te débrouilles pour créer les elements 🙂

#

La doc MDN est ta meilleur amie : https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

Manipuler des documents - Apprendre le développement web | MDN

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'ob...

timid mist
#

oof

void anvil
acoustic current
#

Tu l'a bien installé

#

Sass et toutes les dépendnaces ?

wise cosmos
#

Oui.

acoustic current
#

Essaie d'ouvrir le cmd et fait sass

void anvil
#

Salut ! J'ai besoin d'aide, j'ai mis une vidéo sur le site que j'ai fais et ça donne ça

unknown.png
#

Maintenant moi j'aimerais agrandir la vidéo, quitte à ce qu'elle soit + focus vers le centre

#

mais je n'y arrive pas

timid mist
#

Tu as fait comment pour mettre une vidéo ?

void anvil
#

<video></video>

#

avec la balise video

timid mist
#

🤷‍♂️ J'ai jamais utilisé ce genre de balise (je suis débutant lol), la seule fois où j'ai mis une vidéo c'était par le biais de YouTube, et de la balise <iframe>

#

J'imagine que t'as essayé les propriétés width et height 😅

void anvil
#

ah oui, moi c'est pas une vidéo youtube

timid mist
#

Donc je pourrais pas trop t'aider désolé :/ (logik je suis un noob)

void anvil
#

oui mais j'ai un code qui est long et j'arrive plus à m'y retrouver

#

oh avec le temps tu sais

#

ça viendra

dusky skiff
#

Dans ton css tu modifies la width et la height, il a raison

timid mist
dusky skiff
#

Si tu met ta width à 100% elle va prendre toute la largeur de la page

void anvil
#

Je l'ai fais mais ça ne change rien

#

Non c'est pas toute la page

timid mist
#

Tu fais du inline-css ?

dusky skiff
#

@void anvil met un background-color : red sur ta balise video

#

et envoie un screen de ce que ça fait

void anvil
#

ok

timid mist
#

Ouep, ou des border, pour voir ce que ça donne

void anvil
#

La largeur toute entière donne ça

timid mist
#

Ah bah t'as vidéo a des est..

void anvil
timid mist
#

comment dire

dusky skiff
timid mist
void anvil
#

La vidéo que j'ai prit elle est au maximum de sa largeur

dusky skiff
#

@void anvil si t'es dans une div ta div doit aussi prendre 100% de la largeur

#

Si t'es dans ton body, pareil

void anvil
#

J'ai ça

unknown.png
timid mist
#

et ton css ?

void anvil
#

Si quelqu'un veut le fichier zip

timid mist
#

Tu peux peut-être aussi montrer ton CSS pour les class hero et main

#

(je dis ça ça peut peut-être aider)

void anvil
#

J'y ai pas toucher au main

#

ma video est a width 100% et la div hero container l'est aussi, je me dis que c'est peut etre la vidéo en elle meme qui est trop petite et qu'il faut que je change ?

#

Que je change par une plus large

timid mist
#

Ce que je voulais dire, c'est que la vidéo m'a l'air de pas être assez longue par rapport à la hauteur (qui est de 40vh, d'après ce que tu as attribué à la class hero)
Donc en fait la taille de ta vidéo n'est pas 'correcte' par rapport aux dimensions qu'il faut (à savoir 100% par 40vh)

#

Enfin moi j'interprète ça comme ça après je me répète je suis aussi un peu débutant donc attend les autres

void anvil
#

la hauteur elle est bonne pour moi 🤷‍♂️

timid mist
#

Je sais pas

#

Essaye de voir avec la console

void anvil
#

euh

#

ah bon

timid mist
#

Pour moi, j'ai l'impression que ta div dans laquelle est ta vidéo est trop longue (width), par rapport à la longueur de la vidéo

void anvil
#

ah c'est trop large dans ce cas

#

et pas longue

#

nn

timid mist
#

ça c'est du voc, mais je dirais que largeur = plus petite valeur (en l'occurence ça m'a l'air d'être ta hauteur ici) et longueur la plus grande

#

mais en tout cas je te parle de ta width

void anvil
#

ah oui

timid mist
#

Sinon, essaye qqchose

void anvil
#

j'ai tout essayé UwU

timid mist
# void anvil

sur ta balise video, ajoute la propriété width que tu met à 100%, et pareil pour 100% (essaye jsp)

#

Normalement ça devrait faire un truc moche, ta vidéo devrait être étirée

void anvil
#

C'est fait mais ça change rien

timid mist
#

attend

void anvil
#

Tu veux le fichier zip au pire ?

#

ouais enfin quoi que

timid mist
#

Je ne saurais pas t'aider là

void anvil
#

enh :(

#

C'est pas grave tu as fait ce que tu as pu

#

Je vais attendre l'avis des autres

timid mist
#

Déjà je sais pas mais essaye de faire des test enlevant la class hero à ta vidéo, et donc en changeant tes propriétés de ta balise vidéo

void anvil
#

oh boy je crois avoir trouvé

#

j'ai augmenté le height

#

de la class hero

timid mist
#

C'est ce que je te disais 😅

#

M'enfin tant mieux si ça marche

void anvil
#

Oui je pensais pas que ça allait changer quelque chose

#

ça regle pas le problème à 100% mais bon x)

#

Merci

timid mist
void anvil
#

oui mdr

slim vessel
#

@void anvil

errant cypress
#

tailwind

gaunt yoke
#

c po un framework kappa

errant cypress
#

certe kappa

gaunt yoke
#

TailWind c’est très cool mais tu vas devoir tout créer toi même (c’est pour ça que ce n’est pas un framework ui à proprement parlé)
Tu as semantic ui, ant design, material ui, bulma et j’en passe

potent furnace
#

Coucou les copains j'aurais besoin de vos avis , j'ai un projet a rendre pour le bahut , je dois faire un site avec les techno react et boostrap , je me demandais du coup si c'etait plus judicieux de faire tout ca sur une sandbox online ou si je devais plutot tout dl en local , merci pour vos retours

glass quail
#

bonjours, j'aurai besoin de votre aide pour mon html, je dois effectuer cette présentation mais j'ai mal avec les diplay flex ect

# 
@font-face { 
    font-family: 'merienda';
    src: url('police/Merienda-Regular.ttf');
}

@font-face { 
    font-family: 'anudaw';
    src: url('police/ANUDI___.ttf');
}

body {
    background-image: url("/Css/source/images/background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
}

.contenue {
width: 70%;
background-color: #dcdcdc;

}


.titre {
    display: block;
   text-align: center;
    color: red;
    text-shadow: 3px 3px 1px rgb(116, 108, 108);
    font-size: 35px
    
}

.soustitre {
    text-align: center;
    color: #990000;
    border: 2px black solid;
    box-shadow: 9px 9px 4px black;
    margin-left: 25%; 
    margin-right: 25%; 
    font-family: merienda;
    font-size: 21px;
    padding: 2px;
    font-weight: 600;
    margin-top: 15px;
    

}

.ecole {
    text-align: center;
    margin-top: 22px;
    font-style: italic;
    font-size: 22px;
    font-weight: bold;
    font-family: anudaw;
}

.contenuecolone {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.textbox1 {
    font-size: 14px;
    background-color: #BFBFBF;
    border-radius: 20px;
    margin-top: 20px;
    border: 2px black solid;
    margin-right: 62%;
    box-shadow: 15px 15px 7px rgb(116, 108, 108);
    display: flex;
    justify-content: flex-start;
}

.titrebox1 {
    font-size: 17px;
    font-weight: bold;
    border-radius: 25px;
    margin-top: 17px;
    margin-left: 10px;
    
}

.textbox2 {
    font-size: 14px;
    background-color: #BFBFBF;
    border-radius: 20px;
    margin-top: 18px;
    border: 2px black solid;
    margin-right: 76%;
    box-shadow: 15px 15px 7px rgb(116, 108, 108);
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
}

.titrebox2 {
    font-size: 17px;
    font-weight: bold;
    border-radius: 25px;
    margin-top: 17px;
    margin-left: 10px;

}
# 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Station météo déportée</title>
        <link rel="stylesheet" href="style.css"/>
    </head>

    <body>
        <div class="contenue">
            <div class="header">
            <div class="titre">
                <a>STATION M&Eacute;T&Eacute;O D&Eacute;PORT&Eacute;E </a>
            </div>
            <div class="soustitre">
                <a>Bienvenue sur le site de récupération des valeurs de la </br> station météo déportée</a>
            </div>
            <div class="ecole">
                <a>Saint Erembert 2021/2022</a>
            </div>
            </div>
            <div class="contenuecolone">
                <div class="textbox1">
                    <div class="titrebox1">
                        <a>Cette page permet d'optenir des valeurs des grandeurs suivantes:</a>
                    </div>
                    <ul>
                        <li>La température</li>
                        <li>La pression atmosphérique</li>
                        <li>L'altitude</li>
                        <li>La luminosité</li>
                        <li>L'hygrométrie</li>
                    </ul>
                </div>
                <div class="textbox2">
                    <div class="titrebox2">
                        <a>Cette page permet également d'afficher:</a>
                    </div>
                    <ol>
                        <li>L'heure</li>
                        <li>La date</li>
                    </ol>
                </div>
            </div>

        </div>
    </body>
</html>```
#

voila la présentation attendue

unknown.png
timid mist
#

Bon déjà, il est préférable de faire une balise <header></header> plutôt qu'une div avec la class header <div class="header"></div>

sterile skiff
# glass quail voila la présentation attendue

Je te conseille cette vidéo, elle est complète et très claire :

https://www.youtube.com/watch?v=2qA4mobfcK0&t=78s

YouTube
Graven - Développement
Structurer son site avec Flexbox (Tuto débutant)

Aujourd'hui, on se retrouve pour une vidéo sur la notion de flexboxs expliqué aux débutants
1 like = 1 élément aligné

📌 Tutoriel écrit CSSTricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
🔗 Jeu FlexboxFroggy : https://flexboxfroggy.com/#fr
📓 Correction du défi : https://github.com/GravenilvecTV/DefiFlexbox/tree/main

🖼️ Credits :...

▶ Play video
scenic fiber
#

Bonjour j'aurais besoin d'aide, je n'arrive pas à rétrécir et en même temps décaler l'image du bord. Pouvez vous m'aider s'il vous plait ?

<p>Un texte qui est positionné à coté d'une image HTML.<p>

<style>
.image {
float: left;

}
</style>```
unknown.png
wise hamletBOT
#
Résultats de la recherche: width

➜ max-width
La propriété max-width est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété width de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).

Example:

/* Valeur de longueur */
/* Type <length>      */
max-width: 3.5em;

/* Valeurs relatives */
/* Type <percentage> */
max-width: 10%;

/* Valeurs avec un mot-clé */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Valeurs globales */
max-width: inherit;
max-width: initial;
max-width: unset;

➜ border-width
La propriété CSS border-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.

Example:

/* Valeurs avec un mot-clé */
border-width: thin;
border-width: medium;
border-width: thick;

/* Une largeur pour chaque côté */
/* Valeur de type <length> */
border-width: 5px;

/* largeur verticale puis horizontale */
border-width: 2px 1.5em;

/* haut | largeur horizontale | bas */
border-width: 1px 2em 1.5cm;

/* haut | droite | bas | gauche */
border-width: 1px 2em 0 4rem;

/* Valeurs globales */
border-width: inherit;
border-width: initial;
border-width: unset;

➜ width
La propriété width permet de définir la largeur de la boîte du contenu d'un élément. Par défaut, sa valeur est auto, c'est à dire la largeur automatiquement calculée de son contenu. Si box-sizing vaut border-box, la valeur appliquée incluera les dimensions de la boîte d'encadrement (border) et de la boîte de remplissage (padding).

Example:

/* Valeurs de longueur */
/* Type <length> */
width: 300px;
width: 25em;

/* Valeurs en pourcentages */
/* Type <percentage> */
width: 75%;

/* Avec un mot-clé */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Valeurs globales */
width: inherit;
width: initial;
width: unset;
gaunt yoke
#

le dernier exemple te permettra de mettre une taille à ton image @scenic fiber

wise hamletBOT
#
Résultats de la recherche: margin

➜ margin
La propriété margin définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom et margin-left.

Example:

/* La propriété s'applique aux quatre côtés */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* haut | horizontal | bas */
margin: 1em auto 2em;

/* haut | droit | bas | gauche */
margin: 2px 1em 0 auto;

/* Valeurs globales */
margin: inherit;
margin: initial;
margin: unset;

➜ margin-left
La propriété margin-left d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.

Example:

/* Valeurs de longueur */
/* Type <length>       */
margin-left: 10px;  /* Une longueur absolue */
margin-left: 1em;   /* Une longueur absolue relative à la taille du texte */
margin-left: 5%;    /* Une marge dont la taille est relative à la largeur
                       du bloc englobant */

/* Valeur avec un mot-clé */
margin-left: auto;

/* Valeurs globales */
margin-left: inherit;
margin-left: initial;
margin-left: unset;

➜ margin-top
La propriété margin-top définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.

Example:

/* Valeurs de longueur */
/* Type <length>       */
margin-top: 10px;  /* Une longueur absolue */
margin-top: 1em;   /* Une longueur proportionnelle à la taille du texte */
margin-top: 5%;    /* Une marge relative à la largeur */
                   /* du bloc englobant le plus proche */

/* Valeur avec un mot-clé */
margin-top: auto;

/* Valeurs globales */
margin-top: inherit;
margin-top: initial;
margin-top: unset;
scenic fiber
gaunt yoke
#

Idem là sur les différents exemple tu as des utilisations de margin

#

Hésite pas a cliquer sur le lien pour avoir + d'infos, et si tu as des soucis tu nous dis

scenic fiber
#

ok

scenic fiber
gaunt yoke
#

super ! :-) bon courage

scenic fiber
#

Merci 😉

void anvil
#

@scenic fiber même si tu débute je te conseille pas d’utiliser les float à l’avenir parce que quand tu vas commencer à te pencher sur le responsive ça risque de tout casser

#

Je faisais l’erreur avant aussi

timid mist
#

Wow le bot est super complet bravo !

#

C'est nouveau ou juste je n'avais pas vu ?

void anvil
#

C’est nouveau le système de wiki ouais

timid mist
#

C'est super sympa !

scenic fiber
void anvil
scenic fiber
#

😉

timid mist
#

Comment vous faites du coup pour aligner à droite ou à gauche sans le float ? 😅

void anvil
#

Et après tu mets un padding sur ta div en question

#

En gros

timid mist
#

Hhm ?

void anvil
timid mist
#

Jamais vu cette methode

void anvil
#

C’est Enzo qui me l’a montré parce que je faisais beaucoup avec les float mais une fois en responsive sa cassait tout

scenic fiber
#

Pareil moi j'ai toujours fait en float

clever belfry
#

Les flexbox aussi c'est pas mal 🙂

void anvil
#

Oui chacun sa technique après

#

T’auras sûrement l’occasion d’en tester plusieurs

gaunt yoke
#

Le float c’est vraiment à l’ancienne ça ne s’utilise plus à part dans les templates de mail

#

Utilise du flex ou des grid

#

C’est beaucoup mieux

wise hamletBOT
#
Résultats de la recherche: flex

➜ flex
La propriété flex est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.

Example:

/* Valeurs de base */
flex: auto;
flex: initial;
flex: none;

/* Une valeur sans unité pour flex-grow */
/* flex-basis vaut alors 0 */
flex: 2;

/* Une valeur, largeur/hauteur: flex-basis */
flex: 10em;
flex: 30px;
flex: content;

/* Deux valeurs : flex-grow | flex-basis */
flex: 1 30px;

/* Deux valeurs : flex-grow | flex-shrink */
/* flex-basis vaut alors 0 */
flex: 2 2;

/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Valeurs globales */
flex: inherit;
flex: initial;
flex: unset;

➜ Les concepts de base pour flexbox
Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

➜ Aligner des éléments dans un conteneur flexible
Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

#
Résultats de la recherche: grid

➜ Grilles CSS (CSS Grid)
Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

➜ grid-template-columns
La propriété grid-template-columns définit les noms des lignes et les fonctions de taille (track sizing) pour les colonnes de la grille.

Example:

/* Valeur avec un mot-clé */
grid-template-columns: none;

/* Valeurs <track-list> */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* Valeurs <auto-track-list> */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Valeurs globales */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

➜ grid-column
La propriété grid-column est une propriété raccourcie pour grid-column-start et grid-column-end. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.

Example:

/* Valeurs avec un mot-clé */
grid-column: auto;
grid-column: auto / auto;

/* Valeurs <custom-ident> */
grid-column: unezonedegrille;
grid-column: unezonedegrille / unezonedegrille;

/* Valeurs <integer> + <custom-ident> */
grid-column: unezonedegrille 4;
grid-column: 4 unezonedegrille / 6;

/* Valeurs span + <integer> + <custom-ident> */
grid-column: span 3;
grid-column: span unezonedegrille;
grid-column: 5 unezonedegrille span;
grid-column: span 3 / 6;
grid-column: span unezonedegrille / span unezonedegrille;
grid-column: 5 unezonedegrille span / 2 span;

/* Valeurs globales */
grid-column: inherit;
grid-column: initial;
grid-column: unset;
scenic fiber
void anvil
#

C’est juste un choix de facilité qui casse tout après

scenic fiber
#

Oui je comprend

dusky skiff
#

Dinguerie ce petit système de wiki là :)

gaunt yoke
#

Hello RM_studio,
Tout dépend de la compréhension de chacun, mais ça fait partie des technos les plus simple à prendre en main au début
Tu peux le mixer avec du CSS pour habiller ta page ensuite

errant cypress
#

Tu as des multitudes de tutoriels complet pour apprendre

Je pense notamment à openclassrooms, grafikart, etc..

austere lark
heavy zealot
#

Salut les gars j'ai un petit soucis, j'avais fais faire un site web par quelqu'un qui ne reponds plus et j'ai perdu un fichier quelqu'un qui s'y connais un minimum pourrait me faire une page en html qui ressemble à ça, pour que je puisse mettre des écritures des vidéos etc

#

genre comme ça

#

une page blanche simple avec un rectangle arrondi d'un blanc moins clair par exemple dans lequel je peux mettre des écriture

void anvil
#

Tu fais une div ensuite tu lui donnes une hauteur et largeur avec background-color et un border-radius de 2 3px

#

Et tu peux ajouter un box shadow également

heavy zealot
#

mais je dois utiliser du css non ?

void anvil
#

Oui

heavy zealot
#

aie

#

je m'y connais a moitié en web donc complèxe

void anvil
#

Voilà qui devrait t’aider bg

gaunt yoke
#

@heavy zealot pour t'aider un peu plus, tu dois simplement

#

Centrer ta div au milieu de la page
Lui mettre comme propriété:

.card {
   border-radius: 1.5rem;
   box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
   background-color: white;
   font-size: 1.5em;
   width: 100%;
   max-width: 50rem;
   padding: 1.5rem;
}
void anvil
#

tu as oublier la height non ?

gaunt yoke
#

non c'est automatique en fonction du contenu

void anvil
#

ah ok autant pour moi

gaunt yoke
#

Donc oui ajoute un padding je te l'édite

void anvil
#

Ah oui ok je vois j’y avais pas pensé

gaunt yoke
#

tu peux évidemment changer toutes les valeurs, je te laisse faire l'html @heavy zealot c'est simple une div avec la class card

heavy zealot
#

ok merci bcp 🙂

gaunt yoke
#

👌

heavy zealot
#

Soit j'ai fais de la merde soit je sais pas

#

j'ai pas le rectangle qui s'affiche

void anvil
#

Mets en px ton border radius déjà

heavy zealot
#

c'est fais

void anvil
#

Et ton max width a 20rem pour voir

heavy zealot
#

tjr rien

void anvil
#

Oublie pas de refresh ton navigateur

heavy zealot
#

oui tqt je l'ai refresh

void anvil
#

Envoie tout ton html et css

heavy zealot
#

je t'envoie ça en mp ?

gaunt yoke
#

Peut être le css est pas link

heavy zealot
#

ah oui j'avais mis le mauvais css je suis con 😂

void anvil
#

Ah bah voilà 👍

heavy zealot
#

J'ai un autre soucis

#

il est pas a la bonne taille et il se mets n'importe ou c'est moi qui doit régler ça ?

#

la taille j'ai trouvé mais par contre il est tjr pas au centre

void anvil
#

Display flex, justify-content center

heavy zealot
#

dans le css ?

void anvil
#

Oui

heavy zealot
#

marche tjr pas

latent grove
#

est ce que c'est normal que dans certains fichiers css le webkit scrollbar fonctionne et dans d'autres non

void anvil
heavy zealot
#

je t'envoie ça en mp

#

voila

drifting crown
#

Bonsoir, besoin d'aide je suis le coté gauche et j'aimerais mettre le jaune mais je sais pas du tout comment faire j'ai essayer avec box shadow mais ça n'a aucun rapport, si une âme charitable pourrait m'éclairer !
Merci :)

unknown.png
void anvil
#

j'ai pas compris ta demande exact

dusky skiff
#

Je ne comprends pas pourquoi tu veux faire ça en CSS perso

void anvil
#

ah si ok je viens de comprendre

#

tu crées trois div en position relative avec une height et un width plus un border radius

#

et t'es 3 ronds tu les mets en position absolute

#

et après tu joues avec le css pour bien les placer

drifting crown
#

ça m'entraine a bien placer mes divs, faire des formes et essayer de le faire en le moin de characteres possible ^^

dusky skiff
#

Ok

drifting crown
drifting crown
# dusky skiff Ok

apres si t'as d'autre moyen pour m'entrainer dis moi ça m'interesse

dusky skiff
#

Non pas particulièrement

void anvil
void anvil
hybrid stone
#

Bonsoir, j'ai une question pour vous, connaissez-vous des moyens qui peuvent me permettre de mettre un site en ligne pour voir l'avancement de celui-ci sans pour autant avoir acheté un domaine comme netlify ?

dusky skiff
#

Oui tu peux utiliser ngrok

#

Que quand tu es en local

hybrid stone
#

Ah nan moi c'est pour l'avoir tout le temps online

dusky skiff
#

Ah

hybrid stone
#

comme netlify

proper epoch
dusky skiff
#

C'est ce qu'on appelle un hébergeur

hybrid stone
dusky skiff
hybrid stone
#

genre j'aurai besoin d'un truc comme netlify

dusky skiff
#

Tu peux utiliser le sous domaine d'un hébergeur

proper epoch
hybrid stone
#

mais le problème c'est que j'ai trop de fichier quand je veux l'importer sur github

#

pour le lier avec mon repo

dusky skiff
#

Oula

proper epoch
hybrid stone
proper epoch
#

y'a aussi l'option hosting de Firebase

hybrid stone
#

ok

#

j'y penserai

proper epoch
dusky skiff
#

Je peux vraiment pas te conseiller sur des hébergeurs gratuits

#

ça me donne une idée

proper epoch
dusky skiff
#

Il faut qu'il soit éligible

hybrid stone
#

je le suis

#

je l'ai

dusky skiff
#

Et bah voilà

#

Pourquoi tu ne prends pas un domaine alors ?

hybrid stone
#

mais c'est bon vous inquietez pas

proper epoch
#

et pas besoin d'acheter un domaine pour utiliser netlify

hybrid stone
#

yes

dusky skiff
proper epoch
#

je viens de me rendre compte à quel point j'étais broke 😆

hybrid stone
#

yes je l'ai fais

drifting crown
# void anvil front end mentor

j'ai deja fais 2 niveau mais maintenant les seuls facile ou moyen ya du javascript et j'en ai encore jamais fais avec du html

verbal skiff
gaunt yoke
#

#discussion-dev please les mecs (omelette etc)

dusky skiff
#

Ok no problemo

void anvil
#

Salut est ce que quelqu'un sait si il y a une propriété CSS qui permet d'assombrir une image quand on passe sa souris dessus ?

#

Ce serait un peu le contraire d'opacity

#

oui je sais j'ai fais filter opacity

#

et ça rend l'image plus clair

#

filter: brightness(0.4);

#

ajuste la valeur en fonction

#

ah c'est brightness ok merci

#

merci

#

👌

void anvil
#

Salut j'ai un petit problème, j'ai sur mon site un bouton mais on ne peut pas cliquer dessus et le hover ne s'active pas, j'ai essayer de modifier les z index mais rie n ne change, est ce que qqn pourrait m'aider svp

unknown.png
#

Bon j'arrive plus a prendre de screen c super

patent solstice
#

Plus à cliquer dessus c'est-à-dire ?

void anvil
#

Je peux pas cliquer sur mon bouton pour afficher une nouvelle page

#

Voila c'est bon

unknown.png
#

Donc en gros quand je survole mon bouton le hover ne s'active pas et le curseur ne devient pas pointer donc j'en conclue que je ne peux pas cliquer dessus

#

Problème réglé ?

#

@void anvil

void anvil
#

non

#

@void anvil

#

J'ai avancé un peu et le problème vient de la balise content sauf que si je l'enlève la vidéo que j'ai mis en fond n'aura pas d'effet assombrit

void anvil
#

re j'ai réglé le pb

void anvil
#

Parfait

verbal skiff
#

Finito ! Trop content j'en ai souvent chié au début 😄

Capture.PNG
gaunt yoke
verbal skiff
#

Merci ! Bon bah maintenant je pense continuer avec PHP

austere lark
#

💪

void anvil
#

GG clapclap

void anvil
errant cypress
gaunt flicker
#

Bonjour, savez-vous pourquoi les alignements de mes images horizontales ne fonctionne pas malgré les commandes suivantes en css :

.photo{
    display:inline-block;
    width: 800px;
    height: 400px;
    margin: 0;
    background-size: cover;
}
unknown.png
acoustic current
#

J'ai pas compris

wise hamletBOT
#
Résultats de la recherche: flex-grid
acoustic current
#

Ah rip

void anvil
#

Ah merde trompe de truc

acoustic current
#

C'est flex-direction

wise hamletBOT
#
Résultats de la recherche: flex-direction

➜ flex-direction
La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).

Example:

/* La direction suit une ligne */
flex-direction: row;

/* Semblable à <row> mais dans */
/* la direction opposée        */
flex-direction: row-reverse;

/* Les lignes de texte sont */
/* empilées                 */
flex-direction: column;

/* Semblable à <column> mais dans */
/* la direction opposée           */
flex-direction: column-reverse;

/* Valeurs globales */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
void anvil
#

Ouais voilà merci

acoustic current
#

flex-direction: row;

void anvil
#

Yep

#

Plus rapide que moi pour cette fois Smiley_fight_2

acoustic current
#

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;

gaunt flicker
#

Merci pour la réponse, mais rien à changer. Les images ne s'alignent pas. Pour info j'essaye de faire un Carousel Html Css et js.

acoustic current
#

Envoie ton CSS

void anvil
#

Tu veux les alignés comment ?

#

De gauche à droite ou de haut en bas ?

acoustic current
#

Comme ca ?

void anvil
#

Bah comme ça tu dois déjà avoir une div parent

gaunt flicker
#

CSS 👇

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: url("../images/background-12.png");
    background-size: cover;
}

#carrousel{

    width: 800px;
    height: 400px;
    border: solid 4px #fff;
    box-shadow: 0 0 14px rgb(0, 0, 0, 0.3);
}

#carrousel{
    width:800px;
    height:400px;
    border:solid 4px #fff;
    box-shadow:0 0 14px rgba(0, 0, 0, 0.3);
    position: relative;
}

.photo{
    display: inline-block;
    width: 800px;
    height: 400px;
    margin: 0;
    background-size: cover;
}

#container{
    width:800px;
    height:400px;
}

.bouton{
    position:absolute;
    width:64px;
    cursor:pointer;
    top:155px;
}

#g{
    left: 0;
    opacity: 0.4;
    transform: rotate(0deg);
    transform: all 0.3s ease;
}

#d{
    right: 0;
    opacity: 0.4;
    transform: rotate(180deg);
    transform: all 0.3s ease;
}

#g:hover{
    transform: rotate(0deg) scale(1.1);
    opacity: 1;
    transform: all 0.3s ease;
}

#d:hover{
    transform: rotate(180deg) scale(1.1);
    opacity: 1;
    transform: all 0.3s ease;
}
#

HTML 👇

<html>
    <head>
        <title>Carrousel avec Javascript</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="css/style.css" />
        <meta name="viewport" content="width=device-width" />
    </head>

    <body>

        <div id="carrousel">
            <div id="container">
            </div>
            <img src="images/btnPointante3.png" class="bouton" id="d" />
            <img src="images/btnPointante3.png" class="bouton" id="g" />
        </div>

        <script>
            document.body.onload = function() {
                nbr = 5;
                p   = 0;
                container = document.getElementById("container");
                g = document.getElementById("g");
                d = document.getElementById("d");

                container.style.whidth=(800*nbr) + "px";
                
                for(i = 1; i <= nbr; i++){
                    div = document.createElement("div");
                    div.className = "photo";
                    div.style.backgroundImage ="url('../images/b" + i + ".png')";
                    container.appendChild(div);
                }

            }

            g.onclick = function() {
                p--;
                container.style.transform = "translate(" + p * 800 + "px";
            }

            
        </script>
    </body>
</html>
void anvil
#

Pourquoi y a des multiplications dans ton html ?

#

T’as mis du js ?

#

Ah ouais ok

acoustic current
#

Il faut que tu mettes le flex etc sur ton #carroussel

# 
    margin: 0;
    min-height: 100vh;
    background-image: url("../images/background-12.png");
    background-size: cover;
}

#carrousel{
    width: 800px;
    height: 400px;
    border: solid 4px #fff;
    box-shadow: 0 0 14px rgb(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

#carrousel{
    width:800px;
    height:400px;
    border:solid 4px #fff;
    box-shadow:0 0 14px rgba(0, 0, 0, 0.3);
    position: relative;
}

.photo{
    display: inline-block;
    width: 800px;
    height: 400px;
    margin: 0;
    background-size: cover;
}

#container{
    width:800px;
    height:400px;
}

.bouton{
    position:absolute;
    width:64px;
    cursor:pointer;
    top:155px;
}

#g{
    left: 0;
    opacity: 0.4;
    transform: rotate(0deg);
    transform: all 0.3s ease;
}

#d{
    right: 0;
    opacity: 0.4;
    transform: rotate(180deg);
    transform: all 0.3s ease;
}

#g:hover{
    transform: rotate(0deg) scale(1.1);
    opacity: 1;
    transform: all 0.3s ease;
}

#d:hover{
    transform: rotate(180deg) scale(1.1);
    opacity: 1;
    transform: all 0.3s ease;
}```
gaunt flicker
acoustic current
#

display: flex;
align-items: center;
justify-content: center;

#

flex-direction: row;

void anvil
#

Pourquoi y a deux id carrousel ?

acoustic current
void anvil
#

Normal que sa marche pas si tu définis deux style pour la même div

acoustic current
#

@gaunt flicker essaie de nettoyer le CSS

#

Et fait bien attention a pas dupliquer tes sélécteurs CSS surtout quand c'est des ids

gaunt flicker
#

ok merci, je n'avais pas vu le double carrousel 🤦‍♂️

acoustic current
gaunt flicker
acoustic current
#

Dis toi qu'il faut que tu vise les images de ton caroussel

#

Et ces images sont des éléments se trouvant dans la div #carroussel

acoustic current
void anvil
acoustic current
#

Tu fais pas ce genre d'erreurs comme ca ^^

gaunt yoke
#

Oui mais si tu fais ce genre d'erreurs en CSS c'est que tu n'es pas prêt à passer au Sass ou autre

acoustic current
#

C'est vrai

gaunt yoke
#

Car utiliser sass uniquement pour le fait d'imbriquer des éléments > useless/100

acoustic current
gaunt yoke
#

C'est pas une grosse fonctionnalité, c'est juste une syntaxe différente, ca reste useless complet de l'utiliser uniquement pour ça

gaunt flicker
#

Je pense que ce n'était pas la bonne solution, car mes boutons ont été déplacés des emplacements habituels

unknown.png
#

Sur cette vidéo elle montre bien, mais quand essaye de la reproduire, j'ai un souci avec les alignements des images. 🤷‍♂️ 😕
https://www.youtube.com/watch?v=nYY3IQWSUWY

YouTube
Mohamed Chiny
Astuce #19: Créer un carrousel avec Javascript et CSS

Un carrousel (ou défilement en carrousel) est un effet très prisé sur les site Web. Dans cette vidéo, nous allons voir comment créer un carrousel avec Javascript et CSS. La plupart des développeurs intègrent un carrousel dans la page d'accueil afin de donner une idée au visiteur sur le contenu disponible sur le site Web. Un carrousel sert à fair...

▶ Play video
#

Chez moi display: inline-block; pour aligner les images ne fonctionne pas et je ne sais pas pourquoi.
Je suis sur firefox 94.0.1

void anvil
#

Tu as appris les bases du html css ?

gaunt flicker
# void anvil Tu as appris les bases du html css ?

Oui je sais faire la différence entre une class et une id, dans le CSS 🤷‍♂️

<div id="carrousel">
  <div id="container"></div>
  <img src="images/btnPointante3.png" class="bouton" id="d" />
  <img src="images/btnPointante3.png" class="bouton" id="g" />
</div>
void anvil
#

Nan mais le css en lui même les placements etc

#

Je sais que tu utilises les id pour le js

gaunt flicker
void anvil
gaunt flicker
# void anvil Le html css t’as appris grâce à des tutos ou sur le tas ?

On va dire les deux, mais plus grâce à des vidéos tuto comme le youtuber Grafikat à l'époque. 🙂
https://www.youtube.com/watch?v=Djmi1WUELNo

YouTube
Grafikart.fr
Tutoriel CSS : Créer un site web : Intégration

Article ► https://grafikart.fr/tutoriels/coder-site-web-23
Abonnez-vous ► https://bit.ly/GrafikartSubscribe

Dans ce tutoriel vidéo vous apprendrez à utiliser le xHTML et le CSS pour coder une page Web à partir d'une maquette. Il est nécessaire d'avoir visionné le [premier tutoriel](http://www.grafikart.fr/tutoriels/html-css/creer-un-site-web-de...

▶ Play video
#

J'imagine que vous essayez de me dire quelque choses, mais pour le moment je ne capte pas trop la ou vous voulez en venir@void anvil. 😇

void anvil
#

C’était pour être sûr car des fois les gens n’apprennent pas avant de se lancer dans des projets

hollow brook
#

Je tenais à vous montrer la tronche du code fourni dans un TD de web cry

unknown.png
void anvil
#

ah ouais mdrrrrr

gaunt yoke
#

sympa!

hollow brook
#

Le pire c'est le js

#

On peut parler du var that = this qui ne sert à rien (Oui oui, y'a des var partout

unknown.png
acoustic current
#

surtout des function partout

hollow brook
#

C'est rien c'est la LPMI

#

Vous faites ça vous aussi @copper warren ?

copper warren
#

?

#

euh nan mais ça à l'air bien nul

hollow brook
#

Bien vu

errant cypress
#

un peu d’anglais un peu de français, original

unkempt cloak
#

Hello ! vous savez comment on rend une div (qui est transformé en un cercle) responsive?
Il se diminue en réduisant la fenêtre

bright terrace
#

Bonjour à tous

pulsar basin
#

Une question ? Besoin d'aide ?

void anvil
wise hamletBOT
#
Résultats de la recherche: media-queries
void anvil
#

bon

wise hamletBOT
#
Résultats de la recherche: media query
gaunt yoke
dusky skiff
#

Ah

wise hamletBOT
#
Résultats de la recherche: media querys
dusky skiff
#

" querys "

#

Bravo

unkempt cloak
#

@void anvil je fais les media queries oui , mais comment on réduit le cercle et la fleur ? Pour chaque tailles d’écran je dois changer les width et les height??

void anvil
void anvil
#

et oui ou alors je connais pas d'autres moyens

frank gulch
#

Bonjour les gens j ai un petit problème ge're je suis en bac pro sio en première et j ai un petit problème avec de la mise en page CSS et ce que quelqu'un pourrait venir m aider

patent solstice
#

J'avais pas vu ton message ici !

patent solstice
frank gulch
#

Okan gros genre j aimerais aligner genre plusieurs ligne à une image mais sa fonctionne j ai tester rien fonctionne j ai tester de faire une classe avec un display: inline fonctionne pas est ce quelqu un pour m aider
Ps je suis en cours

patent solstice
#

Tu peux nous montrer ton code ?

frank gulch
#

La ligne j aimerais la mettre genre ligne et que chaque jours soit au même niveau mais comme si j avais sauter une ligne

20211110_155729.jpg
#

Et le code attend je te l envoi 5 minute

#

Je t envoi mon CSS ou pas

#

Le CSS c est après la ligne le truc tkt

#

Le html

#

Faut que tu mette le CSS dans un dossier différent nommer CSS

void anvil
#

J’ai pas bien compris la demande

#

Tu peux développer stp

frank gulch
#

En gros le truc c est que j aimerais faire que l image soit coller au texte et que on mette en ligne chaque pour que sa soit comme sa

void anvil
#

Mets ton texte dans la même div si tu veux qu’il soit coller avec ton image

#

Et après tu mets un padding top pour que ton texte se décolle de l’image

frank gulch
#

Okay merci je vais tester sa

unkempt escarp
#

Bonjour tout le monde, j'aimerais savoir comment on fait pour que ma barre de navigation (en vert, c'est une div) touche le bord de mon navigateur (en noir) et qu'il n'y est aucun espacement comment on fait s'il vous plaît ? Merci beaucoup ^^

unknown.png
void anvil
#

il me faudra un plus gros screen que ça stp

unkempt escarp
#

et en passant j'ai beau changé la couleur de ma div ou du background de mon site rien ne change et je comprends pas pourquoi :/

void anvil
#

tu veux qu'elle colle où ? gauche , droite, haut, bas ?

unkempt escarp
#

gauche et droite

void anvil
#

envoie ton code

unkempt escarp
# 
div{
    background: white;
    height: 15%;
    width: 100%;
}
void anvil
#

tout ton code

#

avec le html aussi stp

unkempt escarp
# void anvil avec le html aussi stp

Il y a beaucoup de choses un peu trop de bric à brac comme je suis débutant x)```HTML
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" href="style.css">
<title>Hauts-de-France Randonnée</title>
</head>
<body>
<header>
<a href="index.php"><img src="Images/logorando.png" id="imagelogo" alt="Logo du site"></a>
<div class="navigation">
<ul>
<il>
<a href="index.php"><img src="Images/logohousewhite.png" alt="Maison" id="barrenavig"></a>
</il>
<il>
<a href="construction.php" id="barrenavigoutils" >Outils <b class="caret"></b></a>
</il>
<il>
<a href="construction.php" id="barrenavigoutils" >Randonnée</a>
</il>
<il>
<a href="construction.php" id="barrenavigoutils" >Forums</a>
</il>
<il>
<a href="construction.php" id="barrenavigaccount" >Mon Compte</a>
</il>
</ul>
</div>
</header>
</body>
<?php

?>

</html>

unkempt escarp
# void anvil avec le html aussi stp 

body{
    background:black;
    font-family: verdana;
}

header{
    background-color: navajowhite;
}

img{
    text-align: center;
    border: 1px solid;
}

div{
    background: white;
    height: 15%;
    width: 200%;
}

main{
    background-color:black;
}


a{
    color: black;
    text-decoration: none;
}


#barrenavig{
    width: 2.6%;
    height: 2%;
    border-image: 1cm;
    border-radius: 10px 10px 0 0;
    background:lightskyblue;
    border-color: lightskyblue;
    position: relative;
    top: 6px;
    margin-left:5%;
}

#barrenavig:hover{
    background: url(Images/logohouse.png);
    width: 2.6%;
    height: 2%;
    border-image: 1cm;
    border-radius: 10px 10px 0 0;
    background:black;
    border-color: black;
    color: black;
}

#barrenavigoutils{
    width: 15%;
    height: 15%;
    font-size: 30px;
    border-image: 1cm;
    border-radius: 10px 10px 0 0;
    background:lightskyblue;
    border-color: lightskyblue;
}

#barrenavigoutils:hover{
    background: url(Images/logooutils.png);
    width: 2.4%;
    height: 2%;
    border-image: 1cm;
    border-radius: 10px 10px 0 0;
    background:black;
    border-color: black;
    color: white;
}

#barrenavigaccount{
    width: 15%;
    height: 15%;
    font-size: 30px;
    border-image: 1cm;
    border-radius: 10px 10px 0 0;
    background:lightskyblue;
    border-color: lightskyblue; 
    margin-left: 50%;
}

#barrenavigaccount:hover{
    background: url(Images/logooutils.png);
    width: 2.4%;
    height: 2%;
    border-image: 1cm;
    border-radius: 10px 10px 0 0;
    background:black;
    border-color: black;
    color: white;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
slender saddle
#

Essaye avec

*{
    margin: 0;
}
void anvil
#

et tu fais

# 
.navigation {
  width: 100%;
  height: ...rem; // Remplacer les ... par la valeur que tu souhaites
}
unkempt escarp
unkempt escarp
# void anvil et tu fais

marche pas non plus mais je crois que mn site est bugger quand je change la couleur ça change rien et je sais pas pourquoi 😅

slender saddle
void anvil
#

oui essaye

unkempt escarp
#

@void anvil @slender saddle Eh bien c'est exactement ce que je viens de faire et ça ne marche toujours pas 😭, j'ai essayé le body en black, la barre de navigation en white les boutons de navigation en blue foncé et rien ne change 😭

#

pourtant j'ai bien fermé mon navigateur et je l'ai ouvert de nouveau :/

slender saddle
#

Tu as vidé ton cache ? ctrl + h effacé données de navigations et tu sélection fichiers et images en cache

unkempt escarp
slender saddle
#

😉

unkempt escarp
# slender saddle 😉

Mais mon problème ne fonctionne toujours pas du coup j'ai encore le petite espace sur la gauche et droite malgré le margin 0 ajouté ```CSS
.navigation{
width: 100%;
height: 15%;
background-color: green;
margin: 0;
}

Capture.PNG
slender saddle
#

Rajoute ça :

*{
  margin: 0;
}

Dans ton css tout en haut 😉

void anvil
#

dans ton body mets border-box: box-sizing

#

euh nan l'inverse

#

box-sizing: border-box

unkempt escarp
unkempt escarp
void anvil
void anvil
unkempt escarp
mortal atlas
#

j'ai un problème j'ai fait une grille avec des tr et td dans une table et chaque tr contient une image pour faire un plateau le problème c'est que sans raison après un nb aléatoire de td un espace infime ce crée et c'est ||casse couille ||. qui peux m'aider

wise hamletBOT
#
Résultats de la recherche: border-box
void anvil
wise hamletBOT
#
Résultats de la recherche: box-sizing

➜ box-sizing
La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).

Example:

/* Valeurs avec un mot-clé */
box-sizing: content-box;
box-sizing: border-box;

/* Valeurs globales */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
gaunt yoke
#

si tu cherches pas le bon truc aussi kappa

void anvil
#

j'ai encore du mal avec ça sue

unkempt escarp
void anvil
unkempt escarp
mortal atlas
#

j'ai un body et une div qui contient une table avec des td et tr pour faire un care mais il y a un espace entre les tr pk ?

void anvil
#

Déroule ta valise tr

#

Si il y a ça c’est que ta balise n’est pas vide

mortal atlas
#

elle a juste une img

#

c'est bon

#

j'ai juste un css de div global qui a fait ca

void anvil
#

Hi

#

Je rencontre un petit problème mon background ne se change pas

unknown.png
#

Je parviens pas à trouver mon erreur

#

Mhmm

#

Ça fait très longtemps que j'ai pas fait de CSS

#

@void anvil t'as mis ton body dans l'html?

#

Yes

#

Ce qui me pertube c'est lorsque je l'ouvre directement il affiche le background, mais quand je le met en localhost il me l'affiche pas

void anvil
#

Mhmmm bizarre

void anvil
#

Depuis le dossier de ton site

#

C’est pas ouf depuis un site directement

void anvil
#

Le problème provient du site pour X raison il filtrer mais c’est bon

void anvil
#

Ok parfait

unkempt cloak
#

Hello, j'ai un problème par rapport au média queries. J'ai fini de rendre ma page "index" responsive, tout fonctionne correctement. Mais lorsque je passe à ma page suivante "qui sommes nous ?", je vois que le media queries que j’ai créé pour ma page "index" à un impact sur mon layout de la page "qui sommes-nous?", le bandeau disparait. Je ne vois pas où ça bug. J'ai besoin de vos lumières s'il vous plaît 🙂

void anvil
#

Tu devrais séparer tes fichiers css

#

1 part page

unkempt cloak
gaunt yoke
#

mais en faisant tu vas possiblement avoir des doublons de class

#

encore une fois, sauf si tu en as un global qui viens require les autres

unkempt cloak
#

pouaaah c'était juste à cause ";" ...

#

il y en a qui me disent c'est mieux en 1 seul fichier, d'autres séparer fichier..

#

du coup je suis mon formateur ^^

#

pas le choix de toute façon

gaunt yoke
#

Le mieux c'est d'avoir 1 seul fichier, qui vient en includes d'autres

unkempt cloak
gaunt yoke
#

yup

unkempt cloak
#

(je suis débutante, je ne connais pas cette méthode)

#

on nous l'apprends pas dans la formation

gaunt yoke
#

Tu auras un fichier index.css puis tu en auras d'autres
colors.css, fonts.css, helpers.css etc

#

ça permet de cibler directement quand tu as des modifs à faire, mais tout sera appelé dans index.css, donc tu ne load qu'un fichier une seule fois

unkempt cloak
#

d'acoord je vois

#

je ferais cette méthode, quand j'aurais fini la formation ^^, je suis les recommandations du prof

void anvil
#

J’pensais pas

#

Faut que je regarde ça

unkempt cloak
#

Finalement j'ai un autre soucis..., c'est normal que lorsque je vais sur le devtool on voit mon menu secondaire tout à droite ? mais sur mon navigateur étrangement il n'apparait pas quand je réduit la fenêtre .. il n'y a pas de scroll bar horizontal https://codepen.io/Lalayna/pen/rNzZrBL

unknown.png
CodePen
Fanny
rNzZrBL

...

void anvil
#

Tu as fais en sorte qu’il s’affiche a partir d’une certaine dimension pas avec une fonction onclick avec du js ?

unkempt cloak
#

@void anvil j'ai fais comme le js sur mon codepen

#

j'ai mis un overflow-x: hidden sur mon body

#

et nomalement il apparait au click sur le burger

void anvil
#

Tu as vérifié ton code pas de ; manquant ?

unkempt cloak
void anvil
unkempt cloak
#

@void anvil et c'est quoi ce paramètre qui permet de le détecter ?

void anvil
unkempt cloak
#

@void anvil ah d'accord parce qu'on me dit de paramétrer vscode pour détecter ce genre d'erreur, sans besoin d'extension, mais je trouve rien sur internet

#

je vais voir côté extension alors merci

latent grove
#

Bonsoir, est ce que vous connaiser une balise ou un code pour avoir un input flexible. Parceque j'ai envie de faire un input mais quand tu excris ca va sur plusieurs ligne et non sur une ligne, j'ai essayer le textarea mais c'est chiant parceque on peut l'etirer comme on veut

slender saddle
#

Pour le textarea tu peux rajouter dans le css

resize: none;

Ce qui évite le fait de pouvoir l'étirer

latent grove
#

Merci beaucoup !

slender saddle
#

Avec plaisir 🙂

cloud dawn
#

Salut j'ai une question, auriez vous des tutos pour que je commence à développer en html, css, js ?

mortal atlas
latent grove
#

est ce que vous savez comment faire pour que quand par exemple on met du texte dans le input il s'affiche et que si apres on met du texte dans le textarea et qu'on appuie, sa rajoute l'affichage du textarea mais pas une deuxieme fois le input.

void anvil
latent grove
#

ah oui mince

#

j'ai trop l'habitude de demander dans se salon

void anvil
#

t'inquiète

scenic fiber
#

Bonsoir j'ai une petit question comment je peux faire pour que mon image et mon texte reste au même endroit quand il est sur un grand écrans ou petit écrans

unknown.png
#

Comme vous pouvez le voir sur le grand écran au dessus et le petit écrans et l'image du dessous

#

Moi j'aimerais que l'image reste toujours comme sur le grand écran

latent grove
#

tu as mis text-align: center; ?

scenic fiber
#

Oui

latent grove
#

normalment ca devrait fonctionner 🤨

spiral moss
#

Bonjour je cherche un dev je paye 100€

#

Minimum

scenic fiber
#

IL faut aller sur le site de gca

spiral moss
#

J’arrive pas

latent grove
scenic fiber
#

Ok

scenic fiber
latent grove
#

dsl je peux pas t'aider, attends quelqun d'autre 🤷‍♂️

scenic fiber
#

OK merci quand même

void anvil
#

Tu dois utiliser les média queries

spiral moss
#

J’aimerais un dev front svppp

void anvil
spiral moss
void anvil
#

Salut j'ai un problème j'aimerais mettre mes 4 "Content" au centre verticalement de mon bloc bleu

unknown.png
#

Mais j'y arrive pas

slender saddle
#

Tu peux utiliser flex box pour ça, dans ta balise header essaye de rajouter :

  display: flex;
  align-items: center
void anvil
#

ça va frerot ? @void anvil

void anvil
#

trkl

acoustic current
#

et ton html

#

je regarderais ca ce midi

scenic fiber
acoustic current
#

Ok

void anvil
#

@void anvil du coup t'as navbar c'est good ?

drifting crown
#

bonsoir, vous auriez des conseils pour progresser en html/css

void anvil
drifting crown
void anvil
#

très bon site

drifting crown
void anvil
drifting crown
void anvil
drifting crown
void anvil
drifting crown
void anvil
void anvil
#

oui c'est good @void anvil

void anvil
drifting crown
# void anvil de rien !

parcontre tu sais comment on importe des police en css ? j'y comprend pas grand chose j'ai beau chercher je comprend pas

void anvil
drifting crown
void anvil
drifting crown
void anvil
#

envoie ton css

drifting crown
# 
.h1{
    font-size: 'Big Shoulders Display', sans-serif;
    
    
}

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap');```
void anvil
#

enlève les ' ' et mets ton import tout en haut

drifting crown
#

toujours pas

void anvil
#

font-family pas font-size

drifting crown
#

non plus xd

void anvil
#

enlève le . avant le h1

drifting crown
void anvil
#

et mets ta ligne dans le body comme ça il s'applique à tout le site

drifting crown
void anvil
drifting crown
#

regarde la c'est mon écriture et je veux être comme celle du haut, pourtant j'ai bien mis la police qu'ils m'ont demandé

unknown.png
#

enfaite j'ai 2 polices mais quand je les changes ça me donne le même résultat

void anvil
#

modifie le width

#

mais je pense qu'il à une police d'écriture qui fait ça de base

drifting crown
#

ya autre chose que border-radius pour les angles ou pas ?

void anvil
#

non

#

pourquoi tu veux utiliser autre chose ?

drifting crown
#

on peut modifier la couleur du text dans une balise button ?

void anvil
#

envoie ton html pour voir comment tu as fais ton button

drifting crown
#

<button>Learn More</button>

#

c'est le même pour 3 div donc je donne pas de classe je veux direct modifier la balise

void anvil
#

button {
color: ta couleur;
}

drifting crown
void anvil
#

de rien

#

tu m'as ping ? @drifting crown

drifting crown
void anvil
#

créer ton premier de 0 etc

drifting crown
#

et je connais deja un peu les media-queries

void anvil
#

site* pardon

drifting crown
#

j'ai réussis a adapter toute ma page par rapport a la taille et changer la disposition des éléments

#

mais le probleme que j'ai c'est sur la largeur

#

donc j'ai baissé la width de mes éléments

void anvil
#

tu peux mettre un max-height et max-width pour que ton élément ne s'étire pas

drifting crown
#

ouai mais en gros quand je baissais ma page ya genre le coté gauche avec la scrollbar qui passait sur un élément et je voulais bloqué ça juste avant qu'il rentre sur ma div

scenic fiber
# 
<style>
  .contenant {
    position: relative;
    text-align: center;
    color: rgb(255, 255, 255);
  }
  
  .texte_centrer {
    position: absolute;
    top: 9%;
    left: 16%;
    transform: translate(-50%, -50%);
  }
  </style> ```
acoustic current
#

Envoie un zip de tout le projet stp

#

Comme ca je testerai en direct

scenic fiber
#

@acoustic currentje peux te l'envoyer en prv ?

acoustic current
#

Oui

#

Je look ca en rentrant

scenic fiber
#

Ok

acoustic current
#

@scenic fiber je viens de regarder ton code et il faut absolument que tu apprennes à utiliser un fichier CSS séparé du html mais relié

#

Car le CSS et le HTML mélangés comme tu l'a fait sont illisibles

#

La balise FONT est a bannir

#

au profit du css

#

Voilà une base simple mais organisée avec des dossiers pour chaque langages

📎 base.zip
#

Essaie de re mettre ton code proprement là dedans et relis le. Tu verras que tu as oublié de fermer pleins de balises

#

Ce midi je te ferais une correction que je t'enverrais quand tu auras plus ou moins trouvé le problème

scenic fiber
#

Le problème c'est que je comprend mieux comme ça

acoustic current
#

Si tu veux je pourrais te donner des cours à l'oral

wheat musk
#

Salut à tous j'arrive pas à mettre mon <h1>, <h2> et mon <p> au centre de la page quelqu'un pourrait me dire le code ou m'expliquer

slender saddle
#

tu as essayé text-align: center ?

wheat musk
#

à non je vais tester

#

comme ça j'aimerais le mettre enfaite

unknown.png
slender saddle
#

Tu peux utiliser flex box pour ça :

wheat musk
#

merci !

slender saddle
#

Avec plaisir 🙂

scenic fiber
dreamy tiger
#

Ca existe des dev a qui tu leur donne du code html, un site avec un css et ils te refont le css en allant qu'a l'éssentiel (car le css bootstrap c'est bien mais il prend 72% du projet)

gaunt yoke
#

Tu peux juste purge ton CSS sinon

dreamy tiger
gaunt yoke
#

https://purgecss.com/

purgecss.com
Remove unused CSS - PurgeCSS

PurgeCSS is a tool to remove unused CSS from your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.

dreamy tiger
dreamy tiger
#

et d'autre ne fonctionne plus

dawn kindle
#

Toujours faire des saves avant toute grosses action^^

void anvil
#

@dreamy tiger je te conseille les media queries est de pas utilisée bootstrap

dreamy tiger
dreamy tiger
gaunt yoke
#

Tu as pas mal d’options

gaunt yoke
void anvil
#

Car ça surprime des lignes qui sont importantes

dreamy tiger
gaunt yoke
#

ça doit être simplement de la config purgeCSS a regle

void anvil
#

copies en un qui existe déjà

#

ou frontend mentor est ton ami

mortal crane
#

Slt quelqu'un sait comment on met l'encadrement juste autour du mot ?

tall pebble
#

Met lui une taille

mortal crane
#

Comment ?

#

Avec le width

#

Du coup il decale aussi le texte

hollow cipher
#

envoie nous plutot ton html/css actuel pour qu'on t'aide

#

mais il semblerait que tu aies mis un width: 100% je dirais

#

mieux vaut ne pas specifier de width et plus de gerer avec des padding

void anvil
#

Mets lui un border : 1px solid red;

mortal crane
mortal crane
#

Je ne sais pas comment faire

void anvil
#

De ?

mortal crane
void anvil
mortal crane
#

on mais ca centre pas la barre d'entourer

void anvil
gaunt yoke
#

ce sera plus simple

slender saddle
mortal crane
slender saddle
eternal ember
#

Ça doit être possible en JS mais vaut mieux le faire en PHP je te conseil

gaunt yoke
void anvil
#

Hey Salut ! Comment je pourrais masquer les chemin d'accès de mon url ?
Exemple :
htps://www.test.com/html/tools
htps://www.test.com/tools

hollow brook
#

Avec du routing ?

eternal ember
gaunt yoke
#

Ça m’intéresse

eternal ember
#

Bah par exemple pour le système de mot de passe ou aussi la facilité au niveau de la connexion à une bdd en mysql

gaunt yoke
#

qu’est ce qui a se différent à ce niveau entre une api php et une api js ?

void anvil
hollow brook
#

Enfait ça dépend comment fonctionne ton site

#

Si tu utilises des liens 'normaux' tu n'es pas concerné

void anvil
#

j'utilise surement comme sa alors

errant cypress
#

tu peux le faire en js autant qu’en php, c’est juste que t’as vu peu ou pas de personne le faire en js ici, mais c’est tout à fait possible et je pense plus simplement qu’en php même si je le fais en php perso mais bon l’un n’empêche pas l’autre

dusky skiff
#

Salut ! J'aimerais faire quelque chose mais je suis un petit peu bloqué. En gros j'ai mon site et j'aimerais mettre ma navbar en bas de l'image ! Mais j'y arrive pas ça me gave, et il faut que ça soit responsive aussi

Voici mon code :

<body>  
    <header>
        <img src="./public/images/banner2.png">
        <div id="navbar">
            <button>ONGLET</button>
            <button>ONGLET</button>
            <button>ONGLET</button>
            <button>ONGLET</button>
            <button>ONGLET</button>
            <button>ONGLET</button>
            <button>ONGLET</button>
        </div>
    </header>
</body>

header {
    position: fixed;
    width: 100%;    
}

header img {
    width: 100%;
    margin: 0;
}

header #navbar {
    justify-content: space-around;
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
}

header button {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    user-select: none;
}

header button:hover {
    color: rgb(200, 200, 200);
}
unknown.png
#

Si quelqu'un pouvait m'aider ce serait trop bien pogey

gaunt yoke
#

ah dans l'image ?

#

mais en bas ?

dusky skiff
#

J'ai essayé plein de truc mais c'est pas responsive et ça se décale

gaunt yoke
#

met ton image en backgorund-image déjà

#

je vois pas trop l'intérêt de l'avoir en img si finalement ça sert de fond

dusky skiff
#

j'ai déjà essayé ça a pas rendu dingue, mais je vais refaire

#

en fait ça bugait genre quand on resize

gaunt yoke
#

tu met juste en background-image tu met une taille en hauteur oiu autre a ton header

dusky skiff
#

ça fait ça du coup kapp

unknown.png
gaunt yoke
#

oui met une hauteur a ton image

#

header*

dusky skiff
#

Oui c'est bon ça work

#

Maintenant il faut que je le mette en bas kapp

gaunt yoke
#

soit en absolute, soit en flex tu positionnes en bas

dusky skiff
#

en flex comment on positionne en bas ? Car justement je suis en flex mais le absolute ça pète le flex

gaunt yoke
#

ah oui tu peux pas avoir les 2

dusky skiff
#

J'ai vu ça cryCat

gaunt yoke
#

en flex tu peux align-items: flex-end

dusky skiff
#

il reste à sa place le bougre

gaunt yoke
#

tu l'as mis où

dusky skiff
#

dans ma div navbar

#

ah

#

Je dois le mettre dans le parent ?

gaunt yoke
dusky skiff
#

ça fonctionne pas non plus :/

#

Enfin si mais du coup mon justify-content: space-around n'a plus effet

#

En fait est-ce qu'il y a moyen de faire en sorte que ça s'adapte à la taille du background-image ?

#

j'ai mis 300 px mais tu changes le zoom c'est fini les boutons partent dans un autre monde 😂

gaunt yoke
#

Alors déjà le zoom !== à ton responsive

dusky skiff
#

Je sais

#

Mais je veux que quand les gens zoom ça fasse pas un bordel monstrueux

#

Je teste le zoom et le responsive à chaque fois, si un mec a une mauvaise vue il peut pas utiliser le site correctement du coup kapp

gaunt yoke
#

Envoie moi ton truc ca ira plus vite, je le fais et je te donne le truc

#

car je suis sur autre chose en même temps

dusky skiff
#

ok ok comme ça je vais mieux comprendre

#

merci

#

Euh

#

Ah c'est bon

#

Le bot a del kapp

gaunt yoke
# 
body {
    background-color: #363636;
    margin: 0;
    padding: 0;
}

header {
    background-image: url('../images/banner2.png');
    display: flex;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;    
    align-items: flex-end;
}


header #navbar {
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    width: 100%;
    display: flex;
}

header button {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    user-select: none;
}

header button:hover {
    color: rgb(200, 200, 200);
}
dusky skiff
#

ouaip ça work mais l'image change de taille

#

en gros y'a du texte sur l'image

#

Donc il faut que la background-size soit à 100%
Mais si la background-size est à 100% les boutons partent je ne sais où Dym_Cry

gaunt yoke
#

quel bouton tu parles

#

le menu ?

dusky skiff
#

oui la navbar

#

ça fait ça genre

gaunt yoke
#

pas bon ça ?

dusky skiff
#

Nope car en fait y'a du texte sur la bannière

#

Mais les boutons suivent pas car la height du header change

gaunt yoke
#

le texte sur la bannière c'est une très mauvaise idée

#

Car déjà tu as une image de 600mètres de long et pour le responsive ca va juste etre catastrophe

#

Tu devrais ajouter le texte dessus pour qu'il soit toujours visible

dusky skiff
#

ouais mais dans tous les cas y'a des éléments de la bannière que je peux pas skip
Toute la bannière doit être visible

gaunt yoke
#

Bah oui mais c'est impossible de tout voir lol

dusky skiff
#

ça marche si j'utilise les vh

gaunt yoke
#

Tu vas soit la déformer pour tout voir

#

soit tu pourras pas tout voir de ton image

dusky skiff
#

Bon je verrais demain

#

Merci pour ton aide

gaunt yoke
#

Si tu veux que chaque élément soit toujours visible de ton image peu importe la taille de l'écran tu devrais découper les éléments et venir les placer sur ton image

dusky skiff
#

Thonk Je vais tester demain j'ai vu un truc similaire sur un site la bannière était cut en 3

gaunt yoke
#

Oui, en 1 semaine ce sera pas possible