#html-css

1 messages · Page 6 of 1

drifting crown
#

meme si tu regardes pas complet

#

le temps de rejoindre

#

trouver l'anime

#

lancer

#

et te dire que c'est nul

#

ça te prend + de 1m30 normalement

floral haven
#

La promotion de contenu piraté est illégale, même si dans les faits, ils en ont rien à foutre pour les petits sites

#

Un nième site de streaming de toute manière

lapis burrow
sly abyss
#

Bonjours, je cherche à centrer le bouton au milieu de ma div mais je n'y parvient pas pouvez vous m'aider svp le code : ```css
.quiconce p, .quiconce h2, .quiconce button{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

image.png
left wigeon
#

@sly abyss Ce n'est pas l'élément qui doit avoir un flexbox mais son parent si tu veux centrer ton bouton

sly abyss
#

ok merci je regarderait sa un peut plus tard (surement demain)

#

j'ai pu test et sa marche nickel merci

left wigeon
mild canyon
sly abyss
#

🤷

void anvil
mild canyon
turbid rock
#

Bonjour ya t-il une personne disponible ? (css html javascrip) merci

left wigeon
turbid rock
#

et j'ai pas assez de experiance pour debuter solo
tu propose des cours ? ou aides ?

left wigeon
#

Formation openclassrooms ?

turbid rock
left wigeon
#

Tu as un mentor sur cette formation non ?

turbid rock
left wigeon
#

Tu as déjà fait quelques sessions ? Tu es à quel projet ?

turbid rock
#

non la première actuellement

left wigeon
#

Normalement ton mentor a dû te rediriger vers les cours openclassrooms dont tu as besoin.
Sur le premier projet tu dois simplement suivre les indications données.

#

Certains de mes élèves commencent avec 0 connaissances de base sur ce projet aussi. Il ne faut pas paniquer, c'est normal 🙂
Prends le temps de découvrir les cours HTML et CSS disponibles sur la plateforme.

#

Si tu es vraiment bloqué sur un point ce n'est pas grave non plus, tu pourras en parler à ton mentor pendant ta prochaine session.

turbid rock
#

ok merci de ton aide

left wigeon
void anvil
#

Bonjour, je voudrais faire ceci :

image.png
#

Mais j'ai ceci :

image.png
#

Pouvez vous m'aider ?

brave jay
#

Tu dois utiliser flex

void anvil
#

J'ai fait ceci :

image.png image.png
brave jay
#

Ton container met lui une width de 50%

#

Je me trompe peut être je suis sur tel

sudden wing
#

Bonjour, j'aimerais faire un résultat comme ça mais j'y arrive pas voilà ce que j'ai.

image.png image.png
void anvil
brave jay
tame forge
sudden wing
#

la première image

#

j'ai réussi a le faire sur un autre fichier mais quand je le met sur l'autre ça n'affiche rien du tout

image.png
tame forge
#

Tu pourrais me passer le css des images et de l'élément parent ?

void anvil
tame forge
void anvil
tame forge
void anvil
#

Pas de problème je te passe ça 2s

# 
<div class="description-items">
            <div class="container">
                <article>
                  <img src="./img/Icon-1.png" alt="Image article">
                  <div class="article-content">
                    <div class="title">Personnalisation avancée</div>
                    <div class="desc">MyProtect offre une personnalisation avancée, permettant ainsi de personnaliser le bot selon leurs préférences. Cette fonctionnalité est constamment améliorée afin de fournir un bot sur mesure gratuitement.</div>
                  </div>
                </article>
                <article>
                  <img src="./img/Icon-2.png" alt="Image article">
                  <div class="article-content">
                    <div class="title">Modération automatique</div>
                    <div class="desc">Le bot possède également une modération automatique puissante et efficace ce qui permet de vous protéger contre de nombreuses personnes mal intentionnées. De plus, cette fonction s'accompagne avec la personnalisation complète ce qui vous permet de choisir dans quelles conditions la modération automatique doit agir. Pour finir, le bot possède également un système d'avertissement complet en cas d'infraction afin de réagir au plus vite !</div>
                  </div>
                </article>
                <article>
                    <img src="./img/Icon-3.png" alt="Image article">
                    <div class="article-content">
                      <div class="title">Fonctions utilitaires</div>
                      <div class="desc">MyProtect possède de également de nombreuses commandes utilitaires pour obtenir de nombreuses informations rapidement comme par exemple une calculatrice, des rappels, des informations d'utilisateur et plus !</div>
                    </div>
                  </article>
             </div>
        </div>
# 
.description-items{
  margin-top: 10%;
}

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

article img{
  width: 10%;
}

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

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

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

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

@tame forge

tame forge
#

Et renvoie ce que ça donne

#

c'est bizarre que ça marche pas 🤔

void anvil
#

Moe bizarrre ça marche pas

tame forge
#

🤔

#

bizarre effectivement

brave jay
#

Je vais essayer de regarder dans la soirée

void anvil
sleek python
#

Bonjour, je regarde un tuto pour faire des animation avec Keyframes mais j'ai un petit problème.
Dans le tuto la personne mais ça :

$cd-box: #fff;

.container {
  background-color: rgb(237, 246, 247);
}

.form {
  &__group {
      & input {
      border: 2px solid $cd-box;
      border-radius: 100rem;
      color: $cd-txt;
      font-family: 'Montserrat', sans-serif;
      font-size: 2.5rem;
      outline: none;
      padding: .5rem 1.5rem;
      width: 100%;
      &:focus {
          border: 2px solid $cd-txt;
          }
      }
  }
}```
#

mais moi ça ne fonctionne pas

#

donc si quelqu'un pourais m'aider je dit pas non

#

enft j'ai envie de faire un truc que quand je click sur le bouton bah une barre de teléchargement bouge

iron stone
#

C'est du scss ?

tame forge
sleek python
brave jay
#

Et du coup c’est quoi ton problème ?

left wigeon
sleek python
astral turtle
#

pour l'instant te préoccupe pas du SCSS

#

commence déjà par apprendre le CSS

brave jay
sleek python
#

D'accord merci

copper warren
brave jay
#

Il connaît pas on va pas commencer à lui parler de trop de trucs 😄

void anvil
brave jay
#

ce soir 😉

ember jetty
#

Avez-vous des idées d'amélioration? Je suis assez nul en css mais je me débrouille mais j'ai vraiment du mal avec le style de la page la beauté donc si vous pouvez m'aider svp

dusky skiff
# ember jetty

C'est vrai que c'est pas très beau Kappa
Déjà essaye de mettre la même police partout
Ensuite je te conseille d'éviter les gros contours bleu foncés ou gris
Et aussi garde une harmonie partout, par exemple tu as des contours ronds autour des tâches et carré autour des notes, et la couleur est différente
Et concernant la navbar à gauche c'est pas centré, tu as, selon moi, trop d'espace à gauche

lapis burrow
void anvil
#

Hello

j'ai un petit soucis avec mon site web...

actuellement il s'affiche comme ça :

image.png
#

voici le code du portofolio

#

PS : seul le produit 4 est different

lapis burrow
#

752023001

ember jetty
#

Pour la police robot c'est bien et les couleurs vous avez une palette svp je suis très nul en goût des couleur

#

*s

ember jetty
#

Avez vous une pallettes de couleurs qui aurais bien avec mon site?

gleaming badge
#

Bonjour, j'aimerai savoir comment faire en sorte que mon footer sois tjr en bas peux importe le body (exemple si le body est tres petit ou tres grand)

j'avais ca comme css

.footer{
position: absolute;
top: 100%;
width: 100%;
justify-content: center;
}

.footer a{
padding: 10px;
width: 50px;
}

et le html

<footer>
<div class="flexible footer">
<a href="#"> <img src="img/logo-instagram.svg" alt="logo insta"></a>
<a href="#"> <img src="img/logo-discord.svg" alt="logo discord"></a>
<a href="#"> <img src="img/logo-facebook.svg" alt="logo facebook"></a>
<a href="#"> <img src="img/logo-linkedin.svg" alt="logo linkedin"></a>
</div>
</footer>

grizzled beacon
#

si c'est ça que tu veux faire

#

sinon tout depend de la taille de ton body

gleaming badge
gleaming badge
#

ca fonctionne aussi

left wigeon
#

@gleaming badge

#

Ce n'est pas vraiment une bonne chose à faire, mais si tu veux vraiment que ça fonctionne ainsi, voici le code :

body {
  margin:0;
  padding-bottom: 70px;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: red;
  height: 70px;
}
#

ces deux valeurs doivent être les mêmes

image.png
gleaming badge
#

je teste ca de suite

gleaming badge
left wigeon
#

Ah je pensais que tu voulais tout le temps le voir

gleaming badge
#

non justemetn

#

seuelement a la fin ^^

left wigeon
#

Alors pourquoi ne pas juste mettre un min-height au body ?

gleaming badge
#

car je n'y avais pas pensé je pense

#

justement comment faite pour etre sur ?

#

niveau html et css? si c possible

left wigeon
#

@gleaming badge

body {
  min-height: 100vh;
}
gleaming badge
grizzled beacon
#

je comprends rien à ce que tu veux faire 🥲 ta pas d'exemple ?

#

un shema

gleaming badge
#

genre la le truc est bien en bas

#

par cotnre si je suis en mode telephone :

image.png
astral turtle
#

normal tu dois rendre ton site responsive

gleaming badge
#

c'est fait avec des media

left wigeon
# 
body {
  margin: 0;
  min-height: calc(100vh-70px);
}
#

70px -> la hauteur du footer

gleaming badge
#

ok

#

et j'aurai encore une petite question mdr, j'avais trouve une tiktok avec des animations pour les logos, mais je pense qu'il manque un truc (l'image) et en meeme temps je vois pas pk il utilise le <i>

left wigeon
#

surement pour fontawesome

gleaming badge
#

j'envoie le lien juste 3 sec

#

jsp si y un truc pour les liens

left wigeon
gleaming badge
#

ok ok

#

et les images, ils les met ou ? enfin a quel moment

gleaming badge
left wigeon
gleaming badge
#

dsl

left wigeon
gleaming badge
#

pk j'ai une erreur?

left wigeon
#

Quelle erreur ?

#

le texte souligné en jaune ce n'est pas une erreur, juste un warning

gleaming badge
#

ah ok

#

et pk warning?

#

@left wigeon
je peux encore t'ennuyer mdr mais tu peux me dire ou est l'erreur ?

<footer>
<ul>
<li><a href="#"> <i class="fa-brands fa-instagram instagram"></i></a></li>
<li><a href="#"> <i class="fa-brands fa-discord discord"></i></a></li>
<li><a href="#"> <i class="fa-brands fa-linkedin linkedin"></i></a></li>
<li><a href="#"> <i class="fa-brands fa-facebook facebook"></i></a></li>
</ul>
</footer>

footer ul{
position: relative;
display: flex;
}
footer ul li{
position: relative;
list-style: none;
margin: 0 20px;
cursor: pointer;
}
footer ul li a{
text-decoration: none;
}
footer ul li a .fa-brands{
font-size: 6em;
color: #222;
}
footer ul li::before{
font-family: "FontAwesome";
position: absolute;
top: 0;
left: 0;
font-size: 6em;
height: 0;
overflow: hidden;
transition: 0.5s ease-in-out;
}
footer ul li:nth-child(1)::before{
content: "\f16d";
background-image: linear-gradient(45deg,#f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
-webkit-background-clip: text;
-webkit-test-fill-color : transparent;
border-bottom: 4px solid #dc2743;
}
footer ul li:nth-child(2)::before{
content: "\f16d";
color: #25d366;
border-bottom: 4px solid #25d366;
}
footer ul li:nth-child(3)::before{
content: "\f16d";
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
footer ul li:hover::before{
height: 100%;
}

image.png
left wigeon
#

car tu leur donne à tous l'icon insta

image.png
#

Vraiment je pense que tu essayes de faire quelque chose de trop compliqué pour toi.
Tu vas te retrouver bloqué en boucle. Continue à pratiquer le CSS et ne brûle pas les étapes. Tu seras vite capable de comprendre ce code avec de la pratique

gleaming badge
brave jay
#

Bah regarde des cours de css

#

C’est le plus simple et rapide pour apprendre

#

Parce que demander de l’aide pour chaque problème que tu rencontres c’est pas très opti comme méthode d’apprentissage

#

Et d’ailleurs tu l’as trouver ou ce code de footer ?

gleaming badge
gleaming badge
brave jay
gleaming badge
#

mdr

#

j'ai pas mal de petit code comme cela

#

ca fait plus d'un ans que je les "recolte"

#

sur insta / tiktok

#

ou des site web

brave jay
#

Ouais, d’accord mais ils te servent à quoi si tu ne sais pas t’en servir ?

gleaming badge
#

ben a voir comment est fait le code

#

de base je sais m'en servir

#

juste y a certain truc que je ne coco pas

sleek python
#

@gleaming badge vas sur openclassroom tu comprendras en 1 semaine si tu te met à fond toute les bases du css et comment ça peut fonctionner

sly crest
#

Vous savez changer ici le nom de l’application pwa ?

IMG_0752.png
mortal dawn
#

Bonjour, j'ai un projet professionnel pour la conception d'un site web, j'aimerais rendre mon site responsive. Est ce qu'il y a des règles à respecter niveau taille de fenetres, a partir de combien de px mon interface doit-elle changer ? Le site serait pour un usage sur téléphone/PC (je peux passer outre le format "tablette") Si quelqu'un à la réponse, ou un site qui présente assez clairement les règles communes du responsive je suis preneur ! 🙂

brave jay
austere lark
mortal dawn
mortal dawn
dusky skiff
# sly crest Vous savez changer ici le nom de l’application pwa ?

Yo, je pense que c'est dans le manifest.json t'as le name et le short_name, tente peut être. Je te met le mien si ça peut t'aider

{
  "name" : "wailrone.com Website",
  "short_name" : "wailrone.com",
  "start_url" : ".",
  "background_color" : "#ffffff",
  "theme_color" : "#ffa500",
  "display" : "standalone",
  "icons": [
    {
      "src": "192x.png",
      "sizes": "192x192",
      "type" : "image/png"
    },
    {
      "src": "812x.png",
      "sizes": "512x512",
      "type" : "image/png"
    }
  ]
}
#

Après j'ai pas d'iPhone je peux pas trop te dire à quoi ça correspond

brave jay
sly crest
sly crest
dusky skiff
#

étrange

short shard
#

qqn peut venir nous sauver la vie et venir voc svp on a besoin d'aide

frigid jungle
#

svp on a vrm besoin daide

tame forge
#

@austere lark

hazy spade
frigid jungle
austere lark
tame forge
#

Ah ok

#

Sorry :)

void anvil
#

Bonjour,
Je voudrais que mes pubs (en rouge) ce mette en dessous du texte et non pas en haut, et je voudrais faire aussi un rectangle pour les contenir, savez vous comment faire ?

PS : J'utilise adsterra pour les pubs

image.png
brave jay
#

Better than tinder ! La grande classe

grizzled beacon
void anvil
void anvil
brave jay
dusky skiff
void anvil
void anvil
void anvil
#

J'aurais une autre question,
Quand je passe ma souris ou que je clique le bouton "ajoute moi" et les liens en li ne font rien, pouvez vous m'aider ?
Mon code :

<div class="add-me">
            <h3>Qu'attendez-vous ? <br> Ajouter moi dès maintenant !</h3>
            <button class="custom-btn btn" onclick="window.location.href='#'"><span>Ajoute moi</span>
        </div>

        
            <!-- FOOTER START -->
        <div class="footer">
            <div class="contain">
            <div class="col">
            <h1>MyProtect</h1>
            <ul>
                <li><a href="LIEN">Discord</a></li>
            </ul>
            </div>
            <div class="col">
            <h1>Nos services</h1>
            <ul>
                <li><a href="./">MyProtect</a></li>
                <li><a href="./">MyHeberg</a></li>
            </ul>
            </div>
            <div class="col">
            <h1>Liens rapide</h1>
            <ul>
                <li><a href="./docs/v1.php"></a>Documentation</li>
                <li><a href="LIEN"></a>Discord</li>
                <li><a href="">Partenaires</a></li>
                <li><a href="">Status</a></li>
            </ul>
            </div>
            <div class="col">
            <h1>Support</h1>
            <ul>
                <li><a href="LIEN">Discord</a></li>
                <li><a href="">Chat en ligne</a></li>
            </ul>
            </div>
            <div class="col">
                <h1>Mentions légal</h1>
                <ul>
                    <li><a href="">Conditions générales d'utilisation</a></li>
                    <li><a href="">Politique de confidentialité</a></li>
                </ul>
                </div>
            <div class="col social">
            <h1>Social</h1>
            <ul>
                <li><img src="https://svgshare.com/i/5fq.svg" width="32" style="width: 32px;"></li>
                <li><img src="https://svgshare.com/i/5eA.svg" width="32" style="width: 32px;"></li>
                <li><img src="https://svgshare.com/i/5f_.svg" width="32" style="width: 32px;"></li>
            </ul>
            </div>
        </div>
        </div>
            <!-- END OF FOOTER -->
sleek python
urban ether
#

Hey,
J'aimerais utiliser le bouton refresh suivant : https://codepen.io/ssolo/pen/jezoQd mais lorsque je l'ajoute dans mon code j'ai ce rendu (voir PJ), j'ai transformé le SCSS (ou lessCSS je ne sais pas trop) en CSS classique mais le rendu n'est pas le bon KappaCringe

J'ai ce CSS :

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.refresh {
    background: #ccc;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    padding: 8px;
    border: 0;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: block;
}
.refresh .icon {
    fill: #fff;
}
.refresh:hover {
    background: #def4d7;
    cursor: pointer;
}
.refresh:active .icon {
    fill: #5ac938;
}
.refresh.loading {
    background: #def4d7;
}
.refresh.loading .icon {
    fill: #5ac938;
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -ms-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
}```

Au niveau du HTML, j'ai juste remplacé le <button> par un <a> (ce n'est pas ça qui cause le problème) :
```html
<a class="refresh" href="/refresh">
                    <svg class="icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                        <path d="m23.8995816 10.3992354c0 .1000066-.1004184.1000066-.1004184.2000132 0 0 0 .1000066-.1004184.1000066-.1004184.1000066-.2008369.2000132-.3012553.2000132-.1004184.1000066-.3012552.1000066-.4016736.1000066h-6.0251046c-.6025105 0-1.0041841-.4000264-1.0041841-1.00006592 0-.60003954.4016736-1.00006591 1.0041841-1.00006591h3.5146443l-2.8117154-2.60017136c-.9037657-.90005932-1.9079498-1.50009886-3.0125523-1.90012523-2.0083682-.70004614-4.2175733-.60003954-6.12552305.30001977-2.0083682.90005932-3.41422594 2.50016478-4.11715481 4.5002966-.20083682.50003295-.80334728.80005275-1.30543933.60003954-.50209205-.10000659-.80334728-.70004613-.60251046-1.20007909.90376569-2.60017136 2.71129707-4.60030318 5.12133891-5.70037568 2.41004184-1.20007909 5.12133894-1.30008569 7.63179914-.40002637 1.4058578.50003296 2.7112971 1.30008569 3.7154812 2.40015819l3.0125523 2.70017795v-3.70024386c0-.60003955.4016736-1.00006591 1.0041841-1.00006591s1.0041841.40002636 1.0041841 1.00006591v6.00039545.10000662c0 .1000066 0 .2000132-.1004184.3000197zm-3.1129707 3.7002439c-.5020921-.2000132-1.1046025.1000066-1.3054394.6000396-.4016736 1.1000725-1.0041841 2.200145-1.9079497 3.0001977-1.4058578 1.5000989-3.5146444 2.3001516-5.623431 2.3001516-2.10878662 0-4.11715482-.8000527-5.72384938-2.4001582l-2.81171548-2.6001714h3.51464435c.60251046 0 1.0041841-.4000263 1.0041841-1.0000659 0-.6000395-.40167364-1.0000659-1.0041841-1.0000659h-6.0251046c-.10041841 0-.10041841 0-.20083682 0s-.10041841 0-.20083682 0c0 0-.10041841 0-.10041841.1000066-.10041841 0-.20083682.1000066-.20083682.2000132s0 .1000066-.10041841.1000066c0 .1000066-.10041841.1000066-.10041841.2000132v.2000131.1000066 6.0003955c0 .6000395.40167364 1.0000659 1.0041841 1.0000659s1.0041841-.4000264 1.0041841-1.0000659v-3.7002439l2.91213389 2.8001846c1.80753138 2.0001318 4.31799163 3.0001977 7.02928871 3.0001977 2.7112971 0 5.2217573-1.0000659 7.1297071-2.9001911 1.0041841-1.0000659 1.9079498-2.3001516 2.4100418-3.7002439.1004185-.6000395-.2008368-1.2000791-.7029288-1.3000857z" transform="" />
                    </svg>
                </a>

PS : Le front c'est trop compliqué vive le back KaPOP

image.png
brave jay
#

Le front c’est de la réflexion

urban ether
#

Rien que pour aligner un bouton je mets 3h '-'

brave jay
#

a partir du moment ou tu connais ca va plus vite

#

mais pour l'alignement c'est flex qu'il faut utilisé

urban ether
#

Problème réglé ✅

sly steppe
#

Trop compliqué pour moi tout ça

#

Je préfère UI design

forest echo
#

Bah c’est important de réfléchir à comment va être intégré la maquette d’un site que tu fais

void anvil
#

Bonjour, je voudrais que mon site soit responsif pour PC / Tablette / Téléphone mais je ne mis connais pas trop, comment je fais ?

image.png image.png
grizzled beacon
kindred blaze
#

la navbar est belle ?

image.png
#

dite oui svp

kindred blaze
#

petite page 404

sleek python
# kindred blaze dite oui svp

Assez simple a faire donc on peut pas spécialement te dire si c’est beau ou pas car si le site après tu le met en rouge non ducoup elle sera moche mais sinon si tu l’accorde bien bah elle sera belle

forest echo
# kindred blaze

Les retours ( même si y’a pas beaucoup de matière ).

En ui :
• il y a deux fois marqué 404 avec un texte différent. Je te conseil donc de supprimer le texte de l’image et de simplement garder l’illustration.

• Mets de l’espace entre ton image et ton texte. Sur desktop on préfèrera une disposition horizontale du contenu, là ou sur mobile on cherchera à positionner verticalement les blocs.

• Utilises les mêmes couleurs que ton illustration. Ton lien doit être dans le même bleu que celui de l’illu ou inversement.

En « ux » :
• Pour garder l’utilisateur sur ton site malgré un problème, il faut pouvoir revenir à la « home page » comme tu l’as fait ✅, mais aussi, selon moi, pouvoir revenir à la page précédente. Je te conseil donc de mettre un bouton qui renvoie à la page précédemment consultée.

trim willow
#

Hey !! J’apprends depuis pas mal de temps et voici un petit aperçu pour le moment, avis et critique je prend note. Thks 🙂

patent igloo
#

Hello je voulais savoir par rapport à la balise <br> si on en met beaucoup ça affecte pas la fluidité etc… du site ? Juste que ça rend le code plus moche ?

brave jay
#

Oui ça rend le code bien plus moche

#

Tu peux utilisé le padding ou le margin pour que ça soit mieux

brave jay
kindred blaze
analog solstice
#

qui a un systeme de inscription ou conneection de compte svp

kindred blaze
analog solstice
#

comment jfais pour l'avoir ?

brave jay
#

bah tu apprends a le faire

kindred blaze
analog solstice
#

il m'a fais ça chatgpt

brave jay
#

non mais commencé pas a vous donné des tutoGPT la ...

kindred blaze
#

nan mais si il veut s'entrainer mec.

#

y'a un début a tout

#

au moins il pourra voir comment le faire pour plus tard

brave jay
#

ouais certainement mais gpt c'est loin detre bien pour "s'entrainer"

kindred blaze
#

l'ia va avoir plus de difficultés dans certains domaine que d'autres

brave jay
#

mouais je vais évité de me lancer dans ce genre de discutions .. Bonne journée

kindred blaze
#

@analog solstice

#

essaye ça

#

dit moi si ça fonctionne

#

mais bon,

#

pas de bdd donc tu pourras pas recevoir

analog solstice
#

ah

kindred blaze
#

les informations de connexion

analog solstice
#

et la bdd jfais comment

kindred blaze
#

Aucune idée ¯_(ツ)_/¯

#

demande à @brave jay, je pense qu'il pourrait te répondre.

brave jay
#

Comme la plupart des personnes ici: Tu apprends a dev

#

c'est la meilleurs méthode

#

tu peux regarder sur youtube pour des trucs spécifique ou alors tu peux taper grafikart sur google pour des vrai tuto

kindred blaze
kindred blaze
brave jay
#

dans ce que j'ai donné tous est gratuit

kindred blaze
#

oui

brave jay
#

et le fait d'apprendre et toujours mieux que de compter sur des mecs qui demande a chatGPT pour un projet sans comprendre comment il marche

kindred blaze
#

effectivement

#

je ne demande pas à chatGPT moi

#

je lui dit de la poser à chatGPT

brave jay
#

Ca reviens au même c'est pas un bon conseil

dusky skiff
#

C'est clair, t'apprends rien

#

Si tu veux apprendre commence avec les bases, tu peux par exemple voir les tutoriels d'open classroom qui sont bien pour débuter

#

Mais ne commence pas à te lancer dans un site Web avec une database tu vas rien comprendre il faut faire petit à petit

exotic sentinel
# analog solstice et la bdd jfais comment

Tu brûles les étapes, d’abord apprends le front pendant quelques temps puis tu verras le back, là à part recopier bêtement le code des gens et corriger des erreurs en boucle tu va rien comprendre

Commence avec openclassroom ou autre

dusky skiff
#

Merci c'est ce que je viens de dire Kappa

#

Et du coup pas sûr qu'il sache ce qu'est un back et un front

exotic sentinel
dusky skiff
lapis burrow
exotic sentinel
#

Ça doit être clean niveau architecture en tout cas

lapis burrow
#

Yep plutôt

trim willow
forest echo
#

pourquoi pas mais peut-être rétablir l'opacité à 1 pour des questions de lisibilité

exotic sentinel
small pasture
#

Salut quelqu'un pour m'expliquer comment monter un texte ?

#

j'ssaye avec : margin-top:

#

-50px par exemple

#

mais le texte ne monte pas

#

je suis dispo voc aussi

#

mrc d'avance

#

(jrv à le déplacer à droite et à gauche)

small pasture
#

Ok c'est réglé mrc

kindred blaze
#

si quelqu'un pourrait m'aider pour cette question, ce serai sympa

small pasture
kindred blaze
small pasture
#

En hauteur droite gauche ?

small pasture
kindred blaze
small pasture
#

Tu veut bouger quoi

kindred blaze
#

le texte

small pasture
#

Vers quel direction

kindred blaze
#

bah droite

small pasture
#

Tes dipo voc pour me faire un partage que je t'explique ?

kindred blaze
#

bah la je ne peux pas

small pasture
#

Ha

kindred blaze
#

tu peux m'expliquer comme ça sinon ?

small pasture
#

Ta essayer de mettre un span puis un Padding left

kindred blaze
#

att 2 s

small pasture
#

Genre entre ton texte tu met <span ="test"> Texteee </span>

#

Et puis en css

#

.test {
Padding-left : 50px;
}

kindred blaze
#

<p> mon texte

small pasture
#

Essaye avec span

#

Comme jtai

#

Dit et essaye

kindred blaze
#

avec span ça fait ça

#

et nan

#

le css marche pas

forest echo
# 
<div>
  <img href="ton image">
  <p>Ton texte</p>
</div>

<style>
  div{
    display: flex
    flex-flow: row wrap
  }
  /* tu ajustes les widths des éléments */
</style>
drifting crown
#

Bonjour, petite question vous savez si mettre une balise rel="canonical" sans contenu dupliqué est mauvais pour le seo ?

sly crest
#

ça mange pas de pain et ça fait 1 ligne

drifting crown
sly crest
drifting crown
drifting crown
shrewd cobalt
#

Bonjour, j'ai commencé un site il y a longtemps et j'ai eu un problème du code qui a rendu le site inutilisable.
Le problème est que quand on ait sur mobile (en tout cas avec le mien le problème survient) les animations ne se font plus et du coup la page n'apparaît pas
si quelqu'un peut m'aide svp merci d'avance

Le code mis sur codesandbox pour que sa soit plus simple : https://7nzwtm.csb.app/

sleek python
tame forge
#

Qui dispose des dernières mises à jour de son OS, du navigateur et qui n’est pas en "mode eco" ?

#

As-tu vérifié la compatibilité du navigateur que tu utilise avec les propriétés CSS & JS que tu utilise (sur MDN par exemple) ?

shrewd cobalt
shrewd cobalt
shrewd cobalt
mental condor
#

ou trouver des bons templates HTML & CSS ?

errant cypress
#

avec de bonnes recherches sur le net

#

tu veux un template sur quoi ?

tame forge
mental condor
#

Gagner du temps

mental condor
errant cypress
#

np bg

mental condor
#

petite question, si je veux mettre en ligne un site avec une DB je dois louer quoi ?

lapis burrow
#

un VPS harold next ?

mental condor
#

Sur le VPS je suis ouvert direct sur le web ?

#

je vois pas trop comment cela fonctionne

dusky skiff
#

Yo, j'ai un problème assez étrange et j'aimerais savoir si quelqu'un a déjà rencontré ce problème ou si quelqu'un sait comment le régler. En gros j'ai une sorte de " résidu " sur le haut de mon élément lors du hover. Cela se produit à cause de la transformation de l'élement qui se retrouve incliné pour créer un parallélogramme. Sur chrome j'ai ce problème, mais pas sur Firefox, étrange. Et comme vous pouvez le voir sur le gif, ce problème ne se déclenche que de manière random ( visiblement lorsque je . Au niveau du code, le voici : https://jsfiddle.net/feby0q4k/ ( j'ai testé il apparait aussi, mais plus légèrement )
Merci à celui qui m'aidera à régler cette étrangitude

brave_pG3W5uujex.gif
Résidu chelou - JSFiddle - Code Playground

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

dusky skiff
lapis burrow
dusky skiff
lapis burrow
#

wtf

dusky skiff
lapis burrow
#

c'est peut être juste un bug graphique

lapis burrow
#

qui laisse ce résidu bleu degeux

#

car avant de le hover il y est pas

dusky skiff
errant cypress
#

J'ai l'impression que c'est plus un bug graphique qu'autre chose

#

t'as essayé d'enlever le border-radius ? peut-causé par la bordure

#

je sais que j'ai déjà eu des soucis graphiques à cause de ça

#

Ok bon après réflexion j'ai trouvé le soucis

#

rajoute un overflow: hidden; à ton .skill, ça va masquer tout le contenu qui dépasse les limites, étrange car il est à l'intérieur mais pas vraiment, mais j'ai testé et c'est good.
Ca vient du skewX() qui peut rendre apparemment après renseignement des effets indésirables comme le tien, m'enfin bref après vérif c'est good

# 
body {
  background: #313131;
  font-family: Roboto, sans-serif;
  margin: 2em;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  justify-content: flex-start;
}

.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;

  flex: 1;
  min-width: 15em;
  height: 10em;
  padding: 1em;
  transform: skewX(-10deg);
  background: rgb(42, 42, 42);
  cursor: pointer;
  transition: background 0.5s;
  overflow: hidden;
  border-radius: 1em;
  color: white;
  font-weight: 500;
  opacity: 0.8;
}

.skill * {
  transform: skewX(10deg);
}

.skill img {
  transition: 1s;
  height: 4em;
}

.skill a {
  margin-left: 16px;
  transition: 1s;
}

.skill:hover {
  background: red;
}
#

et ça sera normalement bon, j'ai testé sur le JSFiddle

dusky skiff
errant cypress
dusky skiff
#

Je pense que c'est le combo des deux

errant cypress
hollow sentinel
#

Yo les loulous !
Dites moi j'ai un problème sur mon site.
En gros tout marche nickel sur PC mais sur téléphone certains textes ne s'affichent pas dans la police demandée.
Savez vous pourquoi ? ^^

sleek python
hollow sentinel
#

C'est déjà respondive mais juste la police passe pas

grizzled beacon
hollow sentinel
#

Je peux t'envoyer le site

#

@grizzled beacon

grizzled beacon
hollow sentinel
hollow sentinel
#

@grizzled beacon

kindred blaze
#

Coucou ! Besoin d'une aide en css.

#

je vais vous montrer c'est quoi mon erreur attendez

#

si vous voulez faire plus simple, mon bouton suit mon logo

#

je vous envois le code

# 
.logo {
  width: 300px;
  margin-right: 200px;
}
#

Le css du logo

# 
<div class="logo">
          <img src="Images/logo.png" alt="Logo StreamZone">
#

le html du logo

# 
.bouton {
  display: inline-block;
  padding: 12px 24px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #282828;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 400px;
  margin-top: 20px;
}

.bouton:hover {
  background-color: #676767;
}

.bouton a {
  color: #ffffff;
  text-decoration: none;
}

le css du bouton

# 
    <div class="bouton">
      <a href="Mercredi/ep1.html" target="_blank">Regarder</a>
    </div>

html du bouton

#

si ça vient de l'image je vous envois le code

sudden swan
#

tu les fermes qd tes div?

kindred blaze
#

juste après

#

genre au css

sudden swan
#

pq ton bouton tu le mets en inline-block?

kindred blaze
#

pour que je puisse changer son hauteur et tout

#

parce que je crois qu'avec les autres on peut pas

#

@sudden swan

mental hull
#

Et tu veux faire quoi ?

#

J'ai pas compris l'erreur

sudden swan
#

il doit vouloir centrer les deux sauf que l'un subit la position du parent

kindred blaze
#

mettre le logo en haut à gauche

sudden swan
#

hin

kindred blaze
#

et le bouton en dessous de l'image

mental hull
#

Tu veux que au scroll il reste au haut ou pas?

kindred blaze
#

oui

sudden swan
#

soit l'architecture est pas bonne soit ton position est pas bon

mental hull
#

Envoie tout le code html de ton contexte s'il te plaît, je vais t'expliquer c'est super simple tu va voir ^^

kindred blaze
#

D'accord merci

# 
<!DOCTYPE html>
<html>
  <head>
    <title>StreamZone</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
        <img src="Images/mercredi.jpg" alt="Image Mercredi">
      </div>
        <div class="logo">
          <img src="Images/logo.png" alt="Logo StreamZone">
        </div>
    <div class="bouton">
      <a href="Mercredi/ep1.html" target="_blank">Regarder</a>
    </div>
  </body>
</html>
# 
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #484848;
}

.logo {
  width: 300px;
  margin-right: 200px;
}

.bouton {
  display: inline-block;
  padding: 12px 24px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #282828;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 400px;
  margin-top: 20px;
}

.bouton:hover {
  background-color: #676767;
}

.bouton a {
  color: #ffffff;
  text-decoration: none;
}

img {
  max-width: 100%;
}
sudden swan
#

ya 2 div qui sont pas fermées

kindred blaze
#

ah on doit les fermés ?

sudden swan
#

oui

mental hull
#

Donc en gros, ton contexte général c'est ton container jusqu'à là tu es d'accord ? C'est lui qui va accueillir le contenu de ta page (dans ton cas)

kindred blaze
sudden swan
#

tu dois les fermer à l'endroit que tu souhaites pour que son scop soit limité (sa zone d'effet css)

mental hull
#

Déjà oui il faut fermer toute tes divs car en gros elles définissent le début et la fin de tes contextes

kindred blaze
#

j'ai édit le html

mental hull
#

Ensuite, par défaut les éléments sont en "position: relative;" c'est à dire que leur position est relative par rapport aux autres éléments présents dans le contexte

kindred blaze
#

ah d'accord

#

donc le bouton, ça veut dire que son parent est le logo et que je doit changer la place du logo dans l'html pour que ce ne soit plus le parent c'est bien ça ?

mental hull
#

Si tu veux ne plus avoir ce comportement, tu peux utiliser position: absolute; la position de ton élément ne sera plus relatif aux enfants du contexte mais au parent

#

Donc en gros si tu met en absolute ça sera relatif au .container

#

Et ensuite tu n'as plus qu'à placer ton .logo avec les propriétés top / right / left / bottom

mental hull
kindred blaze
mental hull
#

Nan tous dans le .container

kindred blaze
sudden swan
#

y'a que le logo à mettre en absolute

#

avc top 0 et left 0

kindred blaze
sudden swan
#

ton html doit ressembler à ça

# 
<!DOCTYPE html>
<html>
  <head>
    <title>StreamZone</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <img src="Images/mercredi.jpg" alt="Image Mercredi">
      <div class="logo">
        <img src="Images/logo.png" alt="Logo StreamZone">
      </div>
      <div class="bouton">
        <a href="Mercredi/ep1.html" target="_blank">Regarder</a>
      </div>
    </div>
  </body>
</html>
#

ton container contient tout

#

j'ai déplacé la div de fermeture pour agrandir son scop

kindred blaze
kindred blaze
# 
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #484848;
}
#

c'est bien ça ?

sudden swan
#

oui

kindred blaze
#

ok

mental hull
#

Les flexbox ❤️

keen plank
#

Hello, avez vous des bon tuto pour débuter l'html et le css ?

astral turtle
#

Grafikart il me semble qu’il a une bonne série

keen plank
#

Okay merci

pulsar rampart
#

Hey everyone ! Je souhaitais savoir comme fonctionne les intégrations d’un site web sur Discord ? Je vais vous montrer un exemple 😉

gaunt yoke
#

ce sont des balises open graph

pulsar rampart
gaunt yoke
#

tu parles de l’embed ?

#

alors oui

pulsar rampart
#

Yep

gaunt yoke
pulsar rampart
#

Je vais trouver mon bonheur ! Merci 😄

mental hull
# 
<!-- Default meta -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1" />

<meta name='author' content='AUTHOR_NAME'>
<meta name='owner' content='YOUR_NAME'>
<meta name='subject' content="YOUR_NAME">

<meta name='identifier-URL' content='URL_APP'>
<meta name="description" content="DESCRIPTION_APP">
<meta name='reply-to' content='contact@URL_APP'>

<meta name='language' content='FR'>
<meta name='target' content='all'>
<meta name='theme-color' content='COLOR_APP'>

<link rel='shortcut icon' type='image/png' href='ICON_URL'>
<link rel="apple-touch-icon" href="ICON_URL" />

<!-- Twitter Card meta -->
<meta name='twitter:card' content='summary'>
<meta name="twitter:title" content="YOUR_NAME" />
<meta name='twitter:url' content='https://URL_APP' />
<meta name='twitter:domain' content='URL_APP' />
<meta name="twitter:description" content="DESCRIPTION_APP" />
<meta name="twitter:image" content="META_IMAGE_URL" />

<!-- Open Graph meta -->
<meta property='og:title' content='YOUR_TITLEt' />
<meta property="og:description" content="DESCRIPTION_APP" />
<meta property="og:image" content="META_IMAGE_URL" />
<meta property='og:type' content='website' />
<meta property='og:url' content='https://URL_APP' />
<meta property='og:site_name' content='YOUR_NAME' />
<meta property="og:locale" content="fr_FR" />

<!-- IOS meta -->
<meta name="apple-mobile-web-app-title" content="YOUR_NAME">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- Primary Meta Tags -->
<title>YOUR_TITLE</title>
<meta name="title" content="YOUR_TITLE">
#

@pulsar rampart Tiens un template que j'utilise sur tous mes projets

#

Après je te laisse regarder les docs : og (OpenGraph), twitter et apple pour voir les spéficités

lapis burrow
mental hull
#

Yep

pulsar rampart
dusky skiff
#

Wow il est fat ton template KaPOP

#

Je pensais que twitter prenait aussi opengraph Thonk

dusky skiff
lapis burrow
lapis burrow
dusky skiff
#

Ah la racaille

lapis burrow
#

Look tu peux faire ça avec celui de twitter

dusky skiff
#

.onion ?

lapis burrow
dusky skiff
#

Sérieux ?

#

Y'a quoi dessus j'ai pas tor sur mon tel

lapis burrow
#

twitter

#

avec un .onion en URL

dusky skiff
#

Ah OK

ancient jackal
#

Salut, j'ai uen question je voudrais aligné mon .logo avec le .menu m'ai je n'i arrive pas. Et si vous toruver aussi comment aligner les img avec le texte qui suite dans les li

Voici le code html:

  <div class="left">
    <div class="logo">
      <img src="./web/favicon.png">
    </div>
    <nav>
      <ul>
        <li><button><img src="./web/img/house-door-fill.svg">   <a href="#">Acceuil</a></button></li>
        <li><button><img src="./web/img/patch-plus.svg">   <a href="./post.php">Poster</a></button></li>
        <li><button><img class="profil-image" alt="Photo de profil de <?php echo $username ?>" src="./profil/image/<?php echo $profil_image ; ?>"><a href="./profil">Profil</a></button></li>
      </ul>
    </nav>
  </div>
</div>```

Et voici le code css:
```.container {
    display: flex;
  }
  
  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 200px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    align-items: stretch;
  }
  
  /* Logo */
  
  .logo {
    margin-top: 10px;
  }
  
  .logo img {
    border-radius: 50%;
    width: 100px;
  }
  
  /* Barre de navigation */
  
  ul {
    list-style-type: none;
  }
  
  a {
    text-decoration: none;
    color: #fff;
  }
  
  button {
    width: 100%;
    background-color: #1da1f2;
    border: none;
    color: #fff;
    margin-right: 20px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
  }
  
  button:hover {
    opacity: 0.8;
  }
  
  .profil-image {
    width: 24px;
    border-radius: 50%;
  }```
knotty scaffold
hazy spade
#

Sincèrement pour répondre ça tu peux t'abstenir

void anvil
#

C'est de la grosse merde ChatGPT..

#

Il y a réellement des développeurs qui ont peur de devenir inutiles face aux ia?

proud raven
void anvil
#

En code?

proud raven
#

Oui

void anvil
#

D'après ce dont j'ai vu c'était pas ouf niveau code mais je ne sais probablement pas l'utiliser.

#

Il m'a inventé le transform:zoom en css ptdrr

gaunt yoke
#

pour les devs je trouve que pour l'instant aussi utiliser copilot

#

qui reste >

#

copilot a un vrai impact positif sur ton temps de développement etc

proud raven
#

T'a vu Copilot X ?

void anvil
#

Copilot?

#

J'irais tester

proud raven
#

Githut Copilot

gaunt yoke
#

ouais copilot X ça va etre la step du dessus

#

qui peut vraiment faire un gros boum

proud raven
#

Bah ça va être basé sur l'api de gpt-4

#

ça va être incroyable

gaunt yoke
#

à voir le prix

proud raven
#

il comprendra ton projet plus facilement et donc des réponses hyper accurate

gaunt yoke
#

est-ce que ce sera dans l'abonnement copilot de base ou encore un cran au dessus

proud raven
#

de base

#

normalmenet

gaunt yoke
#

carré alors

proud raven
#

donc même avec l'offre étudiante t'a accès si je me trompe pas

dusky skiff
cedar island
proud raven
ancient jackal
#

on peux revenir à ma question svp

tame forge
#

🐀

dark patio
#

Bonsoir ! Je viens vers vous car je galère et je ne sais pas comment procéder... 😂
Quelqu'un aurait une idée de comment je pourrais reproduire cette forme arrondie sur une div ? ^^

image.png
tame forge
void anvil
tame forge
#

Oui

#

Si tu mets la height à 100% et que tu arrondi uniquement les bordures gauches et droites avec la même valeur (la deuxième en négatif)

#

Ça devrait fonctionner

sage nicheBOT
#

:mdn: border-radius
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

tame forge
#

Ah nan autant pour moi.

#

On peut juste arrondir les coins

void anvil
dark patio
#

Merci quand même chef

errant cypress
dusky skiff
# dark patio Bonsoir ! Je viens vers vous car je galère et je ne sais pas comment procéder......

Ca me parait compliqué mais t'as peut être un début du solution ici : https://webdesign.tutsplus.com/tutorials/how-to-build-a-css-only-semi-circle-donut-chart--cms-26997

Web Design Envato Tuts+
How to Build a Semi-Circle Donut Chart With CSS

Although HTML5 Canvas and SVG might be more elegant solutions for building charts, in this tutorial we’ll learn how to build our very own donut chart with nothing but plain CSS.
To get an idea of...

dusky skiff
#

J'ai trouvé mieux

#

Tu peux mélanger les deux je pense

#

Bonne chance soldat

void anvil
brave jay
#

Alors vous avez presque tous bon 🙂

#

Enfaite c’est des svg sur l’image

#

Plus simple et moins lourd à modifier

errant cypress
#

c’est une galère en css, mais c’est certain des svg et l’affaire est réglée

dusky skiff
#

C'est vrai mais c'est pas assez galère

brave jay
#

Pas tant que ça enfaite

#

Le plus complexe c’est de faire le svg

dusky skiff
#

Non mais ce que je veux dire c'est que j'aime bien galerer et le svg c'est trop simple

brave jay
#

Ah bah bon courage

dusky skiff
#

De toute façon je vais pas faire ça 😭
T'as pas compris mon second degré je pense mais c'est pas grave Kappa

brave jay
#

Ah ouais nan, j’ai aucun secondes degrés moi 😮

dark patio
dark patio
dark patio
brave jay
#

enfaite ton svg tu vas le faire en plusieurs partie

#

et comme ca tu peux gerer chaque partie une a une ensuite

void anvil
#

J'utilise actuellement React et je me demande si l'idéal serait d'utiliser a href ou link to pour ma barre de navigation.

#

Quelqu'un aurait la réponse?

#

Qu'est-ce qui change concrètement?

brave jay
#

C’est similaire mais c’est mieux de use link pour les liens interne

void anvil
lapis burrow
void anvil
lapis burrow
void anvil
#

oui

#

mais ça fait trop de css pour rien

lapis burrow
#

Mouais, fin bon

#

c'est ça ou le référencement naturel foireux

void anvil
#

après c'est pas avec le référencement que tu vas faire connaître ton site

#

tu dois faire de la communication

lapis burrow
#

Moi je réussisais à faire connaitre comme ça avec un bon seo

brave jay
#

Avec react il n’y a pas de référencement

#

Mais enfaite link est bien pour l’interne car c’est plus opti il ne refait pas le chargement complet de ta page

#

Et ça te rend une balise « a » dans tous les cas

lapis burrow
lapis burrow
brave jay
lapis burrow
#

et encore, nextjs j'aime pas trop la version SSG

#

trop de javascript superflux je trouve

brave jay
#

Ou tu as react helmet il me semble mais je connais pas

floral haven
#

Il y a un référencement sur React, sauf qu'il fonctionne différents et sera pas/moins basé sur le content

void anvil
#

ul et li changent avec React?

lapis burrow
#

react modifie pas le comportement du HTML

woven kindle
#

Bonsoir quelqu’un pourrait m’expliquer les balises meta s’il vous plaît

void anvil
lapis burrow
void anvil
tender egret
#

salut

#

j'ai fais un petit design sur figma

#

et j'aimerais savoir si quelqu'un sait comment refaire le dégradé que j'ai fais

void anvil
#

?

#

Bah tu regardes le design

#

figma pour savoir comment le reproduire

dark patio
#

Bonjour, quelqu'un aurait une idée de pourquoi mon z-index ne se met pas ? 🙂
J'aimerais que mon carré bleu passe derrière le rectangle transparent :

Code HTML :

  <div class="notification simple-notification">
    <span></span>
  </div>

**Code SCSS : **

.container-notifications {
  width: 16vw;
  height: 35vh;
  margin: 1.5rem;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: 1fr;
  gap: 1rem;

  .notification {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 30% 70%;
    // grid-template-columns: 80% 20%;

    span {
      position: absolute;
      top: -0.5rem;
      left: -0.5rem;
      padding: 0.8rem;
      background: #00a8ff;
      z-index: 1;
    }
}
image.png
mint ibex
tame forge
mint ibex
#

faut recharger la page ?

tame forge
#

nan

#

le truc blanc qui apparait

mint ibex
#

nan, autour de la lune

tame forge
#

parce que à part ça, je vois pas de truc blanc

mint ibex
#

quand je met hidden le truc qui cache la lune laisse une trait blanc

tame forge
#

ah oui x)

#

strange

#

je dirais que ça vient de l'image

mint ibex
#

il n'y a pas d'image...

#

juste des div avec un background color

thin spade
#

Pourquoi sa me fait sa ?

image.png
#

Eu lieu de sa svpp aidé moi

image.png
tawdry bear
#

la redirection vers ton fichier CSS ?

brave jay
#

juste pour le background

lapis burrow
#

harold c'est image

thin spade
thin spade
brave jay
#

ah tu dois mettre un no repeat dans ces cas la

lapis burrow
#

faut ajouté "no-repeat"

thin spade
brave jay
#

je te laisse chercher

lapis burrow
#

Sinon tu peux faire background color 👌🏻

thin spade
lapis burrow
#

au lieu de background-image

thin spade
lapis burrow
#

alors juste background

thin spade
#

Toujours pas

lapis burrow
#

Alors cherche no repeat

thin spade
#

okay

lapis burrow
thin spade
#

Merciii

#

Je fais comment ?

#

Je fais un height 100% ?

brave jay
#

tu donne une taille a ton body

#

par contre je pensais que tu etais un scooter kappa

thin spade
#

Mdrrr

lapis burrow
#

c'est magique 🦄

thin spade
#

Merci

stark tendon
#

bonjour qui peut m'aider a mettre le texte du bouton s'inscrire au millieu du bouton svp

image.png
stark tendon
#

et si vous savez comment faire pour que sa marche

severe matrix
#

essaye un text-align: center;

stark tendon
#

je teste ca tt de suite

severe matrix
#

Ok

stark tendon
#

marche pas

errant cypress
#

fais voir ton code

stark tendon
#

ok

#

css ou html

errant cypress
#

les 2

stark tendon
#

ok

errant cypress
#

mais le text-align: center; tu dois le mettre sur le parent pour que ça s'affecte aux childs

severe matrix
errant cypress
#

mdr

stark tendon
#

HTML

#

CSS

#

pardon c'etait pas

#

sa

errant cypress
#

tqt

#

sort le moi en vrac, j'te fais un codepen pour que tu comprennes

stark tendon
#

en vrac ?

errant cypress
#

donne ton code html + css direct comme ça sans formatage

#

te fais pas chier

stark tendon
#

ok

errant cypress
#

copie colle seulement

stark tendon
#

<div class="container">
<div class="signup">
<label for="">Inscrit Toi !</label>
<input type="text" placeholder="Votre Nom">
<input type="email" placeholder="Votre E-Mail">
<input type="password" placeholder="Ton Mot De Passe">
<button>S'inscrire !</button>
</div>
</div>

button {
width: 40%;
height: 10px;
background-color: #0f0049;
border: none;
outline: none;
margin-bottom: 20px;
padding: 20px;
font-size: 1rem;
font-weight: bold;
border-radius: 10px;
color: #fff;
cursor: pointer;
text-align: center;
}

errant cypress
#

Il manque des choses là

stark tendon
#

ah tu veut tt le html et tt le css ?

errant cypress
#

bah de ton truc ouais

#

pour que j'ai le même rendu que toi

stark tendon
#

ok

#

.container {
width: 350px;
height: 500px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.signup {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 60px;
}

label {
color: #fff;
font-size: 2.3rem;
font-weight: bold;
margin-bottom: 60px;
cursor: pointer;
}

input {
width: 70%;
height: 20px;
background-color: #fff;
border: none;
outline: none;
margin-bottom: 25px;
padding: 20px;
font-size: 1rem;
font-weight: bold;
border-radius: 15px;
}

.rt a{
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: white;
margin-left: -897px;
}

.rt {
margin-top: -687px;
}

.rt a:hover {
color: red;
}

button {
width: 40%;
height: 10px;
background-color: #0f0049;
border: none;
outline: none;
margin-bottom: 20px;
padding: 20px;
font-size: 1rem;
font-weight: bold;
border-radius: 10px;
color: #fff;
cursor: pointer;
text-align: center;
}

#

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Connexion</title>
</head>
<body>

<div class="container">
    <div class="signup">
        <label for="">Inscrit Toi !</label>
        <input type="text" placeholder="Votre Nom">
        <input type="email" placeholder="Votre E-Mail">
        <input type="password" placeholder="Ton Mot De Passe">
        <button>S'inscrire !</button>
    </div>
</div>
<div class="rt"><a href="index.html">← Retour</a></div>

</body>
</html>

errant cypress
#

et ton fond c'est quoi ?

stark tendon
#
  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open-sans', sans-serif;
    }

body {
background-color: #6296a7;
background-image: url(fdcs.png);
background-size: cover;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

errant cypress
#

Voilà, remplace ton css des button par ça :

button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 10px;
    background-color: #0f0049;
    border: none;
    outline: none;
    margin-bottom: 20px;
    padding: 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    text-align: center;
}
stark tendon
#

je l'ai mis en fichier cest plus pratique

#

ok

errant cypress
#

Il est désormais centré horizontalement + verticalement grâce au flex, ainsi qu'au justify-content & align-items

stark tendon
#

ah oui merci c'est bon

errant cypress
#

np

stark tendon
#

tu sais comment le rendre fonctionnel je crois que c'est en js

errant cypress
#

tout dépend de comment tu veux utiliser ton formulaire, et les stacks que tu veux utilisées

#

c'est possible en JS effectivement

stark tendon
#

j'ai essayer de me renseigner mais il montrer que la partie visuel

errant cypress
#

Pour te donner une idée, pour débuter

stark tendon
errant cypress
#

Tu me poses une question je te réponds, si t'as besoin d'aide je te répondrais dans le salon adéquat

stark tendon
#

ah merci bcp en tout cas

void anvil
#

salut j'ai un probleme quand je met 2 boutton dans mon site il y en n'a un qui ce désactive

#

il ce désactive pas il mais je ne peut pas cliquer en plein milieu je sais pas comment expliquer

void anvil
#

partage ton code stp

void anvil
#

j'ai changer j'ai fais autre chose mais j'ai encor qu'elle probleme j'aimerais que mon image de fond sois tous en haut c'est possible ?

#

et si possible enlever le blanc a droite

void anvil
vapid pulsar
# void anvil

partage ton code stp mais là vite fait je dirais que ton image est pas en background

severe matrix
#

@void anvil

#

Fait un backgroud-size: cover;

severe matrix
#

@void anvil

thick salmon
#

Bonjour , je suis nouveau dans ce domaine et j'aimerais en apprendre d'avantage sur le CSS ,
avez-vous des vidéos intéressantes a me conseiller pour débuter ?

past escarp
#

Grafikart / OpenClassrooms

thick salmon
#

ok merci

formal fox
#

Je sais que tu as demandé des vidéos mais si la lecture ne te fais pas trop de mal tu as W3School

cobalt mesa
#

j'ai fais ça pas mon premier site mais le premier que j'ai fais tout seul (je sais que le fond et bizarre)

image.png
#

le fact c'est que j'ai un problème avec les onglet en haut a droite

#

j'essai de prendre ça en vidéo 😬

#

(j'ai fait ça en 1h max)

#

c'est bon voila mon problème j'ai fait que les lettres s'espace quand je clique sur les liens et que je passe ma souris dessus mais les autre lien bouge aussi

# 
.link {
        color: white;
        text-decoration: none;
        transition: color 0.3s ease-in-out, letter-spacing 0.3s ease-in-out;
}
      
.link:hover {
        color: red;
        text-decoration: none;
        letter-spacing: 0.1em; 
      }
      
.link:active {
        letter-spacing: 0.5em;
      }
#

(voila le css en question)

formal fox
#

J'ai pas bien compris, tu voudrais que seul le lien sur lequel tu passes ai l'effet @cobalt mesa ?

cobalt mesa
#

oui

#

je sais je devrais faire des class différente pour chaque liens mais c'est long

formal fox
#

Non pas spécialement

#

Tu veux bien inspecter l'élément et m'envoyer un screen ?

#

Avec la console de dev

cobalt mesa
#

tu veux l'html

formal fox
#

Sinon envoies moi ton code que je jette un oeil

cobalt mesa
#

ok

formal fox
#

Oui ça sera plus simple :)

cobalt mesa
# 
<!DOCTYPE html>
<html>
    <head>
        <title>Lumen</title>
        <link rel="icon" href="image/favicon.ico" />
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <script src="navlink.js"></script>
    </head> 
    <nav class="nav">
        <a href="#" class="logo">My Website</a>
        <div class="link">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
          <a href="#">Login</a>
        </div>
      </nav>
      <script src="navlink.js"></script>
    <body>
        <form action="php/connexion.php" method="post">
            <h2>Connexion</h2>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <br>
            <input type="submit" value="Se connecter">
            <div class="basdepage">page is work in progress subject to change</div>
          </form>
          
    </body>
</html>
brave jay
#

Enlève le :active

#

Enfin le letter spacing

formal fox
cobalt mesa
#

nah mais justement c'est l'effet que je veux

formal fox
#

Je veux bien ton css

cobalt mesa
#

ok

brave jay
#

Oui mais sur le hover pas sur le active

cobalt mesa
#

si sur les deux

brave jay
#

Alors dans ces cas là tu regarde sur quel page tu es et tu ajoutes une classe

formal fox
#

J'ai trouvé ton problème

brave jay
#

Ah bah non

#

J’ai trouver aussi

formal fox
#

Enfaite tu dois mettre ta classe link sur chaque élément

#

Pas sur le parent

#

car ça va appliquer le style à chacun d'entre eux

cobalt mesa
#

c'est juste ça ok

formal fox
#

C'était le plus évident mais on pouvait pas le voir sans le code

# 
<nav class="nav">
    <a href="#" class="logo">My Website</a>
    <div>
        <a class="link" href="#">Home</a>
        <a class="link" href="#">About</a>
        <a class="link" href="#">Contact</a>
        <a class="link" href="#">Login</a>
    </div>
</nav>
cobalt mesa
#

ah oui merde

formal fox
#

Plutôt comme ça :)

cobalt mesa
#

le plus évident et celui que l'on remarque le moins 😂

formal fox
#

il faudrait que tu ajoutes une classe que tu nommes active et que tu l'ajoutes à l'élément en fonction de la page

cobalt mesa
#

ok

fossil olive
#

salut tout le monde je viens de mettre les fichier d'un site internet que mon tuteur de stage ma donner mais le css ne fonctionne pas vous savez pourquoi ?

image.png image.png
cyan imp
#

Exemple : Si ton CSS est dans /assets et qu'il s'appel styles.css, s'il est importé dans ton index.php, le lien devrait ressembler à ça :

<link rel="stylesheet" href="assets/styles.css">
#

Enfin non en PHP ça doit ressembler à ça pardon :

<style>
<?php include 'assets/styles.css'; ?>
</style>
fossil olive
#

merci beaucoup

cyan imp
fossil olive
#

Ouai nickel

cyan imp
#

Pense toujours à vérifier les imports, si les chemins sont correctement écrit etc ...

fossil olive
#

ouai c'est vrai

severe matrix
#

Vous avez des hébergeur gratuits à me donner

#

Et bonjour bonsoir

mental hull
#

Nan en vrai si tu es étudiant tu peux avoir des offres chez certains comme Dyjix ou pulseheberg

severe matrix
#

Nn mais pas des offres gratuitement

mental hull
#

Je connais pas beaucoup de truc gratuit ou alors c'est vraiment de la merde, mais pour quelques euros tu peux avoir des trucs

floral haven
#

Host de quoi ?

#

Serveur de jeu ? API ? Bot discord ?

severe matrix
#

Site

brave jay
#

ton site il est fait en quoi ?

severe matrix
lapis burrow
severe matrix
#

Ok merci

pulsar rampart
#

Bonsoir tout le monde !
Je souhaitais savoir comment faire un Footer du style reprit du site de enzo#0003. Ce serait simplement avec une couleur bleu. Pourriez-vous m'éclairer un peu comment faire ? Niveau HTML & CSS je suis pas très bien placé 😅
Merci d'avance !

image.png
mental hull
copper warren
#

Pour l'effet de flou derrière c'est une autre div avec du blur dessus

#

Si je dis pas de connerie à vérifier avec @gaunt yoke

severe matrix
#

Le site de Enzo il est incroyable

gaunt yoke
#

oui c’est juste une div d’une certaine hauteur avec un shadow pour le côté glow

subtle haven
#

Bonjour je voulais reproduire ce modèle mais je rencontre un petit problème avec la bannière je ne sais pas pourquoi l'image a un liseré cela me dépasse quelqu'un peut il m'aider

Screen_Shot_2023-05-20_at_23.56.48.png
gaunt yoke
tame forge
copper warren
#

C'est une façon de faire je suppose

#

Moi je donnais la manière d' @gaunt yoke donc demande lui

gaunt yoke
#

car si tu veux un gradient, avec un glow + une animation bon courage avec la border

tame forge
#

oui x)

hoary junco
#

Salut! est ce quelqu'un connais un cours sur la programmation en JS react??
Je cherche ca sur internet mais je n'en trouve pas!

void anvil
formal fox
#

@hoary junco la doc suffit sinon :)

void anvil
#

je suis disponible vocal

wintry owl
void anvil
wintry owl
#

Ah non je viens de comprendre

#

Tu n’as juste pas fait la responsive

void anvil
#

si tu peux venir vocal pour m'aider stp

wintry owl
copper warren
copper warren
# void anvil non c'est de l'html / css

C'est un problème de responsive en effet. Je sais pas comment marche exactement le dev d'interface sur fiveM mais tu trouveras surement tes réponse ici : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries

Media queries - CSS : Feuilles de style en cascade | MDN

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

wintry owl
copper warren
#

Prend exemple sur le message du dessus

wintry owl
#

Il sera pas faire sa responsive en claquant des doigts

copper warren
#

Si il a fait l'interface ou au minima chercher à comprendre comment ça marche les media query il pourra comprendre

void anvil
mint ibex
lapis burrow
#

j'aime bien en vrai

mint ibex
#

thx

gaunt yoke
#

c'est sympa mais le texte est illisible

mint ibex
#

ouai je sais pas trop comment faire tout en ne mettant pas un background au texte qui cacherais l'image

mental shell
mint ibex
mental shell
mint ibex
#

Mouais pour faire un vrai effet stylé pour ça je saurai pas faire

tame forge
mint ibex
#

why not

#

j'en ai add un peu et mis une parallaxe

severe matrix
#

Le texte un peu pixelisée à mon goût

gaunt yoke
#

c'est dommage ça reste illisible a la lecture

mild marsh
#

qlq à des idées de ce que je peut amélioré/ajouté : https://lucasm548.github.io/Pear-Search/

Pear Search

The best search engine of all time, it will allow you to find what you're looking for while letting you wander the web. You can forget about your personal data, which will be stored directly on our servers to simplify your life.

copper warren
#

Ah mon avis y'a un probleme avec les couleurs

#

Genre la c'est une misère à lire

brave jay
#

Tu devrais faire en sorte que tous les moteurs marchent ensemble

lapis burrow
#

google search API =5€/10000 Requête harold

tame forge
lapis burrow
#

c'est pi-ggle ?

copper warren
gaunt yoke
#

mais c'est juste une redirection sur [browser]/search?q=xxx ? ??

copper warren
#

oui c'est ça

gaunt yoke
#

je vois pas bien l'utilité, autant aller sur google quoi non ?

#

ou bien je loupe un truc

#

fin y a vraiment des gens qui sont sur google et qui se disent "tiens et si j'essaye sur duck duck go maintenant" ou l'inverse ?

tame forge
brave jay
lapis burrow
brave jay
#

C’est un peu ça oui 😄

woven kindle
#

Bonsoir j’ai besoin d’aide svp, j’ai mis une police sur mon site, je la voyais quand je faisais la preview mais sur mon téléphone je ne la vois pas

IMG_4068.png
#

j'ai pourtant bien suivi le tuto et mis le fichier otf en woff

gaunt yoke
#

envoie ton code pour voir si tu as bien importé ta font

woven kindle
#

Tout le dossier ?

copper warren
#

Le CSS ou t'as ton @font-face et fais un screen de la ou se trouve ta font

woven kindle
copper warren
#

Montre ou se trouve la fonts par rapport à ton fichier CSS

#

Genre screen l'arborescence des fichiers

#

local normalement t'en a pas besoin ( fin j'ai jamais utilisé perso)

#

Et pour la font-family faut que tu change le nom entre tes deux fonts

#

Tu peux pas mettre les deux avec INTEGRALCF

woven kindle
woven kindle
copper warren
#

Le chemin est pas bon c'est pour ça que ça marche pas

woven kindle
copper warren
#

Screen le dossiers de ton projet

woven kindle
woven kindle
copper warren
#

./assets/fonts/lenomdelafont dans l'URL

woven kindle
copper warren
#

T'as enlevé local?

#

Et montre ton CSS

woven kindle
woven kindle
copper warren
#

Enleve local et met l'extension dans l'URL

#

Genre Integral.woff

woven kindle
#

ok

woven kindle
copper warren
#

Non

#

Tu met src: URL et ce que je t'ai mis avec l'extension

woven kindle
copper warren
#

Genre :
src: url("./assets/fonts/INTEGRALCF.woff")

#

Et le format tu peux laisser

woven kindle
copper warren
#

Mais gros

#

Je t'ai mis ce qu'il fallait que tu mettes

#

Tu laisse juste url et format

woven kindle
copper warren
#

Niquel test comme ça

woven kindle
copper warren
#

Montre ton HTML

woven kindle
copper warren
#

L'endroit où tu appelles la font

#

Pas besoin de voir tout

woven kindle
copper warren
#

C'est quoi ta class integralcf montre ta Tailwind config

#

Ou l'endroit où tu l'as déclaré

woven kindle
copper warren
#

De ?

woven kindle
#

Tailwind config

copper warren
#

Bah t'utilises bien Tailwind dans ton projet ?

woven kindle
#

Je sais pas ce que c'est

copper warren
#

Le code tu l'as trouvé où ?

woven kindle
#

Github d'enzo

copper warren
#

Bah il utilises tailwind

woven kindle
#

ici ?

copper warren
#

Va dans ton CSS

#

Fais
.integralcf {
font-family: 'INTEGRALCF'
}

woven kindle
#

D'acc

copper warren
#

Désolé je suis sur tel c'est une galère

woven kindle
#

Np

#

ça change rien

copper warren
#

Screen PLS

woven kindle
copper warren
#

Bizarre 🤔

#

Mais !important après le nom de la font

#

Genre font family: blabla !important

brave jay
#

quand tu vas sur google que tu appuis sur f12 que tu vas dans reseau et que tu recharge ta page tu vois ta font ?

brave jay
near bear
#

Salut quelqu'un a une idée de pourquoi mon text-shadow ce met devant mon texte et pas dernière ?

.card h1 {
    font-size: 100px;
    color: #FFFFFF;
    text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.25);
    margin-top: -70px;
}

.victoire {
    background: linear-gradient(to bottom, #00D94A 80%, #008D1F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.25)!important;
}
image.png
woven kindle
woven kindle
brave jay
#

Ta font n’est pas appeler

brave jay
gaunt yoke
#

j’ai du mal à comprendre, si tu as pris le template sur mon github, il y a déjà un exemple de custom font, reprend tout simplement la même chose en changeant juste le nom

#

et puis le problème il sera réglé

woven kindle
gaunt yoke
#

ah oui mais enfaite l'import est pas bon sur le template j'avais jamais fais gaffe kappacap

brave jay
#

C’est quoi ton projet ?

gaunt yoke
woven kindle
gaunt yoke
#

dans fonts.css

#

enfaite je l'avais pas finis ce truc je viens de voir, y a quelques coquilles a fixer, meme si rien de grave

#

mais du coup regarde dans fonts.css, change juste par ta police à toi

woven kindle
gaunt yoke
#

surement oui, si tu as bien écris la font ca devrait être bon

woven kindle
gaunt yoke
#

tu as bien modifié la classe carmen dans l'html aussi ?

woven kindle
#

tu parle d'ici ?

image.png
gaunt yoke
#

yes okay tu as l'air de l'avoir update, et côté cs tu as bien un .integralcf avec font-family: 'INTEGRALCF' ?

woven kindle
#

Affirmatif

gaunt yoke
#

et tu as dis que tu as transformés ta font tout a l'heure, du moins le format

#

tu es sur que ta font est pas broken du coup suite à ça ?

#

tu as pas juste éditer le format en le réecrivant, rassure moi harold

#

tu as utilisés un outil pour la convertir ?

woven kindle
woven kindle
gaunt yoke
#

ça doit etre un truc bête, si tu veux envoie moi le dossier en zip je peux regarder

woven kindle
woven kindle
#

Bonjour à tous, est-ce que quelqu’un sait comment retirer les bandes en haut et à gauche svp

IMG_4073.png
gaunt yoke
woven kindle
hollow sentinel
#

Peut être que je me trompe mais moi j'aurais essayé comme ça

gaunt yoke
#

tu devrais essayer de mettre ta shadow via un drop-shadow à la place

#

peut être que celui ci ne sera pas prit par le clip text

near bear
#

Merci pour l’info je vais test quand je serai chez moi

stable jetty
#

il y a un rpoblème majeur dans mon code, quand je suis sur mobile notament (mais aussi sur ordinateur) et que le choix est trop long, cela fait un gros bouton à coté d'un plus petit, c'est totalement disproportionné et c'est moche

brave jay
#

Tu peux leurs définir une taille par défaut ça évitera ce problème

copper warren
# stable jetty

Soit tu change l'agencement soit tu leur met une max-width

stable jetty
stable jetty
copper warren
stable jetty
# copper warren yep

Je pense je vais faire ça avec grid, sur ordi 2 a côté et sur tel les unes en dessous des autres

copper warren
#

ça me semble plus logique en dispo téléphone ça sera plus simple pour appuyer sur les boutons

stable jetty
unique ore
#

Bonjour j'aimerai faire comme la premiere image mais je ne sais pas comment les mettres en longeur et les espacer

brave jay
tame forge
copper warren
tame forge
wild stump
copper warren
#

euh ouais ok?

tame forge
wild stump
tame forge
#

Ok ok

remote flume
#

Bonjour, je rencontre un petit problème avec mon header. Pour les boutons de mon menu j'ai utilisé une liste avec display: inline-block pour l'affichage. Seulement ma ligne se casse au bout d'un certaine dimension (~1370px de large) alors qu'il lui reste encore beaucoup de place avant de rencontrer un autre élément à sa gauche. Savez vous comment je peux régler ce "breakpoint" automatique de ma liste? Merci d'avance.

copper warren
#

Code plus screen please 🙂

hollow sentinel
remote flume
#

nop

hollow sentinel
#

Essaie de l'introduire dasn ton code et de régler le comportement de ta liste en fonction des tailles d'écran

empty tartan
#

C'est sûrement ça qui casse

brisk forum
#

hello j'ai un problème ya pas besoin du code en gros j'ai fait un site de radio web bref c'est un délrie perso et quand je le met en ligne le son des station en se lance plus alors qu'en local tout se lance une idée d'ou sa peu venire

tame forge
#

Que disent l’onglet réseau & la console ?

brisk forum
#

a ya un message d'erreur j'avais pas pensé a verifier mdr

#

Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.
radio-coran.netlify.app/:1 Mixed Content: The page at 'lien perso' was loaded over HTTPS, but requested an insecure element 'Lien perso;'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
;:1 Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
radio-lien perso.app/:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Chromium Blog
No More Mixed Messages About HTTPS

Update (April 6, 2020): Mixed image autoupgrading was originally scheduled for Chrome 81, but will be delayed until at least Chrome 84. Chec...

#

si besoin des lien me dire

torn sage
#

welp le certificat ssl sur live.mp3*****.net:8026 n'est pas valid

fresh flare
#

@rustic anvil

rustic anvil
#

@fresh flare oui?

scenic fiber
#

Bonjour à tous, je suis sur la création d'un site WEB et j'ai un soucis avec la responsive. Je n'arrive pas à responsive mes images ajouté. Pouvez-vous m'aider ?

#

Voici mon CSS des images :

# 
img {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-347%, -652%); 
  }

  .image-reduite {
    width: 270px; 
    height: 70px; 
  }

.image {
  transform: translate(860px, -452px);
  width: 65px; 
  height: auto; 
}
severe matrix
#

et fais voir le rendu

#

@scenic fiber

scenic fiber
severe matrix
#

et en mode responsive

scenic fiber
#

Comment ça ? Désolé je débute 😀

severe matrix
#

tkt on a tous commencé comme sa genre tu rend ton ecran 3/4 quart visible

scenic fiber
severe matrix
#

att désole j'etait au petit coin

scenic fiber
#

Pas de soucis

severe matrix
#

regarde tu fais un bail comme sa

@media(max-width: 992px) {
/*tes modifs*/
}
#

en css

#

en gros ca detecte si la fenetre est a moins de 992px si oui sa fait les modifs que ta fait

scenic fiber
#

Et je place cela au début de mon code ?

severe matrix
#

comme tu veux 0 importance mais je te conseil en bas