#html-css

1 messages · Page 4 of 1

left wigeon
#

Ah oui pardon

brisk forum
#

oklm il a pas l'aire actif

broken dune
#

Salut les gars c'est la merde j'ai un petit truc a faire en bootstrap pour demain, quelqu'un s'y connait ? je peux payer

brisk forum
lapis burrow
#

heureusement que boostrap existe perso, je serais incapable de faire un truc un temps soit peu digérable XD

copper wasp
#

Javoue

left wigeon
#

Très franchement j'ai jamais eu besoin de bootstrap, je fais tout à la main

#

C'est une habitude à prendre

#

Mais je comprends ceux qui n'ont pas le temps

copper wasp
#

Au pire faite du React et du node c'est beaucoup mieux

left wigeon
#

Je comprends pas le rapport

copper wasp
#

Bas ça évite tout simplement le bootstrap

left wigeon
#

Ah ok

copper wasp
#

J'ai tester ton php sur ton site 😉

#

@left wigeon

left wigeon
#

Testé mon php ?

#

C'est à dire ?

copper wasp
#

Sur ton site j'ai envoyer un msg

left wigeon
#

Aaah ok

#

Le design te plaît ?

copper wasp
#

le menu pas trop, les cartes dans avantages un peut pixeliser sur le côté mais sinon la charte graphique est cool

#

Responsive nickel

left wigeon
#

Tu ferais quoi pour le menu ?

copper wasp
#

mmmh... justement je suis vraiment une quiche en charte graphique typo etc... donc je sais pas trop

left wigeon
#

Ah ok xD

copper wasp
#

mais je sais qu'il me plait pas qu'il y aurais quelque chose au fond de moi de mieux xD

#

après pas trop d'info mais ça sa viendra lol

#

moi je suis en plein dev de mon nouveau site aussi

#

Et la je suis bloquer il me faut recruter des graphiste web

#

Si un truc cool le bg le faire défiler en même temps du scroll ça rend bien

left wigeon
#

Ah un parallaxe

copper wasp
#

yes

left wigeon
#

C'est une bonne idée

copper wasp
#

Mais vraiment ça doit m'arriver une fois dans l'année des bonne idée de graphique mdrrr

iron stone
#

Vous en pensez quoi

brave jay
tame forge
#

La responsive sur tel est très moche :/

brisk forum
#

fait un pied de page car la sa fait un peut sauvage

#

je me sens pro depuis que je suis devenu UI/UX

#

sa fait une compétence de plus

iron stone
#

C'est quoi un pied de page ?

iron stone
#

Je m'étais trompé de lien my bad

past escarp
iron stone
#

ah ok ol

#

Je vais en faire un

#

Comme ça je trouve ça beau

past escarp
#

Effectivement il est pas mal

tame forge
iron stone
#

C'est a dire ?

void anvil
#

mon index.html:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <div id="overlay">
            <div class="fullscreen-bg">
                <video loop muted autoplay preload="auto" class="fullscreen-bg__video">
                    <source src="assets/bgvideo.mp4" type="video/mp4">
                </video>
            </div>
        </div>


        <div id="audio">
            <audio controls loop autoplay hidden>
                <source src="assets/music.mp3" type="audio/mp3">
            </audio>
        </div>
    </body>
</html>```
(the audio work)

mon style.css:
```css
body {
    background-color: #000000;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}```

Pourquoi la vidéo ce coupe à 86% ?
iron stone
#

Tu as mis un overflow : hidden , ça cache donc ta vidéo

void anvil
#

ah mince, je retire la ligne ou bien je change hidden en quelque chose d'autre?

iron stone
#

Enleve la ligne , dis moi si ça marche

past escarp
void anvil
iron stone
#

Alors ça a marché ?

void anvil
#

86%, la vidéo ce coupe et la musique elle continue d'être en lecture

past escarp
#

Fait voir ton lua

void anvil
#

Yep

# 
local loadIsFinish = false

AddEventHandler("playerSpawned", function ()
    if not loadIsFinish then
        ShutdownLoadingScreenNui()
        loadIsFinish = true
    end
end)```
past escarp
void anvil
#

un Citizen.CreatheThread() ?

#

au pire

#

et genre je fais attendre 15 sec et je fais fermer le loading screen

past escarp
past escarp
#

Citizen.Wait() par exemple

void anvil
#

D'accord

past escarp
#

ou alors comme je t'ai un event un peu plus tard

#

tu utilise esx ?

void anvil
#

qbcore

past escarp
#

ok att

void anvil
#

yep

past escarp
#

Essaye ça :

local loadIsFinish = false

AddEventHandler("QBCore:Client:OnPlayerLoaded", function ()
    if not loadIsFinish then
        ShutdownLoadingScreenNui()
        loadIsFinish = true
    end
end)

Je connais pas trop qbcore mais je viens de le prendre de la doc

void anvil
#

j'essaie

#

@past escarp bon ça viens de ma vidéo puisque je viens d'essayer avec une autre vidéo et elle fonctionne très bien
donc quand je regarde la vidéo avec mon lecteur de vidéo windows, elle ce coupe pas, mais uniquement sur fivem

past escarp
#

Effectivement après avoir réfléchi si l'audio continue, c'est que coté lua tout va bien

void anvil
#

ma vidéo fait 460mb aussi @past escarp

#

c'est peut-être trop je pense pour un loading screen ?

past escarp
past escarp
void anvil
#

d'accord

void anvil
#

juste optimisé pour le web?

#

@past escarp

past escarp
#

Non non juste comme ça et démare

void anvil
#

ok

iron stone
void anvil
#

écran noir mais musique désormais @past escarp

past escarp
#

change de vidéo dans ce cas 😂

#

ça vient pas de ton code en tout cas

void anvil
#

d'acc

tame forge
iron stone
#

Oula

#

J'ai regardé presque tout les mobiles et c'est pas ça

#

C'est quoi ton tel ?

past escarp
#

Problème de compatibilité, en l'occurrence ici avec Safari je crois

brave jay
# iron stone Oula

Par contre tu as regarder les autres avis ? Car ton texte avec le Shadow il me semble qu’on te l’a tous dit :/

#

Après le reste ça va juste La Croix qui est ce barre quand tu descends

IMG_6160.png
iron stone
#

Ok c'est bon j'ai régler c'est deux points

#

Je m'occupe du footer et après ça sera good , merci en tous cas pour tout vos avis

brisk forum
#

lua dans du html c'est possible j'en apprend tt les jour

#

a nan ok c'est bon

iron stone
#

Voilà c'est good , vous en pensez quoi ?

brisk forum
#

ya baucoup de travaille niveau designe sur ton site

iron stone
#

Ah comme ? ^^

iron stone
#

@brisk forum

brisk forum
#

les text centralise les

#

j'ai envie de te dire mais c'est pas méchant rien ne va

#

ta fait un schémas avent de commencer ou tu t'est lancer sans rien

iron stone
#

Non je le fait comme ça

#

Tu peux voc ?

#

@brisk forum

brisk forum
#

la nan

iron stone
#

Ok

brisk forum
#

tu sais utiliser figma ?

iron stone
#

Pas trop

#

Je sais pas faire de maquette

#

Celle que je trouve sont sur dribbble

grizzled beacon
iron stone
#

Du flex ?

grizzled beacon
brisk forum
#

flexbox

swift lava
#

Ton footer a un souci ? @iron stone

Screenshot_20230208-074702_Chrome.jpg
iron stone
#

Oui c'est bon je l'ai régler

swift lava
iron stone
#

Non c'est good

torn sage
#

c'est moi ou tu fait un repos par version sueur

placid maple
#

bonjour j'ai pour projet de crée un site en html en l'hébergeant sur mon pc j'ai donc démarrer mon site puis je suis aller sur l'adresse et ça me marque "Ce site est inaccessible" comment puis-je faire?

tame forge
#

Si tu es en local, il te faut y accéder avec le chemin d’accès du fichier ^^

placid maple
pallid scaffold
#

Bonjour,

Mon problème c'est que je n'arrive pas à appliquer un radius de 30px à mon button```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Mon bouton</button>
</body>
</html>

# 
button {
    background-color: white;
    border: 2px solid;
    border-image: linear-gradient(90deg, #1436AE 0%, #0038FF 100%) 1;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    background: linear-gradient(90deg, #1436AE 0%, #0038FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Le border radiuse ne s'applique pas visuellement */
    border-radius: 40px;
  }
#

.

Une image du button que je dois faire

#

.

Voici une image du résultat que j'ai pour le moment

#

Mon problème c'est que je n'arrive pas à appliquer un radius de 30px à mon button

exotic sentinel
placid maple
exotic sentinel
#

C’est un site qui contient du code backend ? Ou simplement html css et js ? @placid maple

pallid scaffold
#

@heavy musk

placid maple
exotic sentinel
# placid maple juste html et css

D’accord du coup tu as deux options, la plus simple c’est de l’héberger sur github, depuis ton pc c’est possible aussi mais il faudra ouvrir des port sur ta box et c’est un peu galère

placid maple
exotic sentinel
#

Jamais utilisé, tu essaye d’accéder à ton site avec l’ip de ta box + le port quand tu dis que ça marche pas ?

#

@placid maple

heavy musk
iron stone
#

Un avis ?

brave jay
#

Un petit conseil ne met pas ton niveau en développement

#

Parce que par exemple ton niveau html qui est à 100% je ne suis pas sûr que ça soit vrai

iron stone
#

Je vais changer les valeurs (•‿•)

brave jay
#

Mais même évite en vrai c’est pas représentatif donc en tant que recruteur on s’en fou et ça n’apporte rien

iron stone
#

Merci

#

Je vais plutôt lettre quelques projets

#

Quelques sites *

brave jay
#

C’est mieux ça permet de voir ce que tu as fait ou tu peux mettre en cours d’apprentissage. Ou connu sur t’es langages mais html et css le mets pas c’est inutile car si tu fais des sites tu sais les utiliser

iron stone
#

Ok thanks

copper warren
#

100% et css 100% j'aimerais bien voir ça

#

Sinon manque un peu d'animation sur le site ( les sites de dev créatif on souvent beaucoup d'animations ). Et les chart de chartjs custom les pour avoir un truc un peu plus sympas

#

En mobile enlève les charts ou rend les responsives de mémoire avec chartjs y'a moyen + ajoute du padding en mobile c'est dommage que le text soit collé au coté gauche et le menu est cassé en mobile

hoary junco
#

Bonjour bonjour, voici le problème:
J'essaie de faire exécuter une fonction JS quand je clique sur un boutton en HTML, sauf qu'il se passe rien, je comprend pas pk...
Si quelqu'un peut m'aider

#

Laissez tomber j'ai trouver

#

J'suis une grosse p***

#

Bonne journée

austere lark
iron stone
#

??

tame forge
#

Bonjour, comment puis-je retirer cet espacement (pareil en haut et à droite) ?

image.png
dusky skiff
dusky skiff
#

y'a un margin de base

tame forge
#

okay

#

mrc

warm dock
#

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DMH</title> <link rel="shortcut icon" href="/media/favicon.ico.png" type="image/x-icon"> <link rel="stylesheet" href="Boutique.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" /> </head>

#

@formal jewel @iron stone Merci les bg

#

Voilà mon code

#

Mais l'icone ne s'affiche pas je comprend pas ?

iron stone
#

Fais voir l'autre partie du code

warm dock
#

Tous le reste ?

iron stone
#

L'html de l'icone

warm dock
#

html de l'icone ? En format PNG ?

iron stone
#

Bah là dans ton code il ya pas d'image qui est censé s'afficher

#

Une image c'est avec une balise img pas avec un link

warm dock
#

<link rel="shortcut icon" type="image/x-icon" href="/media/zsR43 (1).png">

#

Ah pourtant sur internet il m'ont dit ça

iron stone
#

Oui c'est sur que ça va pas s'afficher

#

Mets ton image avec une balise img

warm dock
#

Ducoup je remplace link par img src ?

iron stone
#

Et tu verras ça marchera

#

Yes

warm dock
#

<img src="/media/favicon.ico.png">

#

Je rajoute quoi ?

iron stone
#

Ça ne marche pas ça ?

formal jewel
#

Tu n'écoutes pas

warm dock
#

Non..

iron stone
#

Enleve le premier slash de ton lien

warm dock
formal jewel
iron stone
#

Aaaah mais tu veux faire comme ça

formal jewel
#

Basiquement, une fois ton image prête, au bon format, tu la mets dans ce genre de balise : <link rel="shortcut icon" type="image/png" href="/favicon.png"/>

#

Assure-toi de connaître les rudiments de développement web, sinon tu vas avancer à l'aveugle

#

Déjà connaître le système des chemins relatifs et absolus

iron stone
#

Je te conseil les vidéos de graphikart

#

Elles sont complètes

formal jewel
#

Elles sont longues

iron stone
#

Plutôt que d'essayer directement de faire un site , si c'est ce que tu fais

iron stone
formal jewel
#

Et soporifique

iron stone
#

Oui

warm dock
#

J'ai trouvé mon erreur

#

Je l'avais pas mis au bon format

iron stone
#

Mais c'est comme ça que j'ai commencé et ça m'a bien aider

formal jewel
#

Un incontournable

#

Même chose, des incontournables à la pédagogie éprouvée

brave jay
#

Mouais un cours sur le css sur un site plus que moyen avec des pubs c’est pas trop mon délire

#

Et les cours écrit c’est pas mon dada grafikart reste l’un des meilleurs cours complet

brave jay
iron stone
#

Tu peux aussi apprendre des petits tips avec Benjamin code

warm dock
#

Ca ne marche pas je comprend pas

#

Pourtant je recopie ce que tu ma envoyé

#

<link rel="shortcut icon" type="image/ico" href="/media/zsR43 (1).ico"/>

formal jewel
#

Il faut que le chemin href="..." corresponde à l'emplacement de ton fichier

#

D'où l'importance d'apprendre les rudiments de la gestion de dossiers et fichiers quant à leur localisation : absolue ou relative

#

Donc, si tu veux davantage d'aide pour ton problème, tu devrais a minima partager des captures d'écran de la structure de ton site web

#

Plus précisément là où tu as stocké ton image et sous quel format " ico ? png ? "

warm dock
iron stone
#

ಥ‿ಥ

#

Tu as appris ou a coder

#

Comme a dit aeden , il faut que tu apprennes le béaba de ce language , tu avances les yeux fermés

warm dock
#

Tout seul pourquoi ?

warm dock
formal jewel
#

Il y a des conventions (des façons de travailler, des modèles d'agencement d'un projet) qu'il est bon de suivre

iron stone
#

Oui , il y a une chronologie a suivre

#

Un dossier css

formal jewel
#

En général, on crée un dossier " assets " qui représente les ressources qu'on utilise sur son site, telles que les images

#

À l'intérieur du dossier assets, si je ne dis pas de conneries, tu crées tes différents dossiers, tels que " image " et " css ", par exemple

#

Ne reste plus qu'à indiquer le chemin ; du type href="assets/image/favicon.ico"

warm dock
#

Merci beaucoup !

brisk forum
#

tout se qui est dossier etc... je n'aime pas j'evite les bug chelou a cause des nom de dossier

brave jay
#

Et pour ton premiers projet tu peux nommer t’es fichiers comme tu veux tu pourras toujours les renommé après

#

Un premier projet au début c’est toujours brouillon à toi de l’améliorer au fur et à mesure

iron swan
#

les bugs de noms de dossiers en vrai fait des années que c'est réglés sur la majorité des logiciels, OS, etc

#

y'a que des vieux trucs qui vont pas aimer les espaces, accents et autre

#

(et quelque rares exceptions sur certaines apps qui sont juste codé avec le cul)

brave jay
#

Pour les .ico c’est ‘images/x-icon d’ailleurs

brave jay
iron swan
#

oui j'allais en parler dans mon message suivant: il reste des OS avec des limitations sur les noms à cause de backward compatibility par exempl e(coucou windows), mais à part y'a aucun risque à avoir des espaces, accents ou autre, et en vrai en dev c'est rare de nommer quelque chose avec un accent ou un espace, quasi tous les noms de dossiers sont en anglais et la seperation entre les mots avec un _ ou - ou autre

#

mais utilise des dossiers vraiment, tout foutre au même endroit c'est pas une bonne idée du tout, pour un tout petit truc ok à la limite

#

(pour les deux points, c'est pas un bug ou un truc de backward compatibility mais surtout parce-que c'est un symbole spécial dans les path windows)

brave jay
#

Quelqu’un a un top sur les trucs de WordPress, JavaScript et php en gros le plus utilisé aujourd’hui

brisk forum
brave jay
#

la base :

image.png
#

apres si tu bosses que tous seul tu es libre de t'es choix mais sache que pour travailler en equipe il faut un code clean et un espace de travail clean

brisk forum
#

ouais exact apres quand j'ai des demande pro la j'en fait

brave jay
brisk forum
#

a ouais mais bon la plus part du temps c'est en group et il aime pas ma méthode

warm dock
#

quelqu'un sait quelle balise on utilise pour décoller l'image du fond gris ? Mercii

image.png
tame forge
#

C’est à dire ?

warm dock
#

j'aimerai qu'il y ai un espace entre l'image "souris" et le bord gris.

brisk forum
warm dock
#

<div class="container"> <div class="product-image"> <img src="media/Souris (6).png" alt="Image du produit"> </div> <div class="product-info"> <h2>Souris en bois</h2> <p>Notre souris filaire en bois réutilisable et écologique est le choix idéal pour ceux qui cherchent à éliminer leurs empreintes écologiques tout en améliorant leur expérience informatique. Avec un design élégant en bois naturel, cette souris est non seulement une déclaration esthétique, mais aussi un choix responsable pour l'environnement. <br> <b><br>&ndash; Caractéristiques:</b> <br> <br> &#x2022; Fabriqué à partir de bois durable <br> <br>&#x2022; Conception ergonomique pour un confort optimal <br> <br>&#x2022; Compatible avec la plupart des systèmes d'exploitation <br> <br>&#x2022; Connexion filaire fiable pour une expérience informatique sans interruption <br> <br>&#x2022; Écologique et réutilisable, réduisant les déchets électroniques <br> <br>&#x2022; En choisissant notre souris filaire en bois réutilisable et écologique, vous pouvez améliorer votre expérience informatique tout en prenant soin de notre planète. N'attendez plus pour adopter un mode de vie plus durable aujourd'hui!</p> <br> <p>Prix : 25€</p> <a href="#" class="buy-button">Ajouter au panier</a> </div> </div> </div>

#

``.container {
max-width: 1200px;
margin: 2em auto;
display: flex;
flex-wrap: wrap;
background-color: #a4a1a1;
width: 100%;
}

/* Style de l'image produit */
.product-image {
width: 40%;
text-align: center;
}

.product-image img {
width: 100%;
max-width: 400px;
}

/* Style des informations produit */
.product-info {
width: 50%;
padding: 1em;
}

.product-info h2 {
margin: 0;
}

.product-info p {
margin: 1em 0;
}``

#

Voilà désolé

brave jay
#

Utilise margin

brisk forum
#

indique lui plus stp il a l'aire de pas très bien connaitre

iron stone
#

hello , vous pouvez me donnez un avis histoire que je parte pas danq le faux , après je vais le faire en complet

forest echo
warm dock
brisk forum
#

non mais ooorh bref fait comme tu veux

swift lava
# 
<div id="nav">
<img class="logo" src="images/LOGOZE.png"></img>
    <nav>
        <ul class="nav_links">
            <li><a href="#">Accueil</a></li>
            <li><a href="#about">A Propos</a></li>
            <li><a href="#project">Projets</a></li>
            <li><a href="#skill">Mes Compétences</a></li>
        </ul>
        <a class="nav_button" href="#contacte"><button>Contact</button></a>
    </nav>
</div>
</div>

<div id="home">
    <div class="home_header"></div>
</div>
# 
#nav{
    height: auto;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 10%;
    background-color: #222222;
    z-index: 10;
}
nav{ /*menu en haut */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: transparent;
}
.nav_links li, a, button{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0F1;
    text-decoration: none;
    background-color: unset;
}
.nav_button button{
    color: #ececec;
    margin-left: 20px;
    padding: 9px 25px;
    background-color: rgba(0,136,169,1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.nav_button button:hover{
    background-color: rgba(0,136,169,0.8);
}
.logo{
    cursor: pointer;
    height: 50px;
    width: 150px;
    background-color: transparent;
}
.nav_links{
    list-style: none;
    background-color: transparent;
}
.nav_links li{
    display: inline-block;
    padding: 0px 30px;
}
.nav_links li a{
    transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
    color: #0088a9;
}
#home{
    height: 900px;
    width: 100%;
    background-color: #3a1d1d;
    position: relative;
    z-index: 1;
}
.home_header{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;left: 0;
        background-color: #222222;
        /* background:url(/images/PC.jpg) center no-repeat; */
        background-size: cover;
        z-index: 2;
        opacity: 0.6;
}
#

salut les gens j'aimerais bien que ma nav bar sois de couleur transparent quand elle est sur mon header (j'ai essayé avec le z-index mais sans succés ) puis ensuite quand je déroule ma page que cette dernière redevienne visible avec sa couleur

image.png
tame forge
# 
#nav {
    /* ... */
    background: none;
}```
#

Ça sent le code pris quelque part harold

swift lava
#

donc c'est normale que je réutilise mon code, je finaliserai les détails à la fin

tame forge
swift lava
#

et quand je met

#nav {
    /* ... */
    background: none;
}

le souci c'est que ça fais l'inverse de ce que je veux, je veux que quand je suis sur mon header le background de la nav disparait et quand je retourne sur mon font blanc il redevient coloré

tame forge
#

Si oui, tu peux faire comme ça :

header:hover #nav {
    background: none;
}
swift lava
#

nan il sont séparé

tame forge
#

Du coup faut faire avec javascript

swift lava
#

la je viens de rentrer mon header avec ma nav et justement elle disparait quand elle est plus dans le header

tame forge
#

🤔

#

Je comprends pas bien ce que tu veux faire

#

Tu veux que la div #nav ai un fond traparent quand tu survole le <header> avec ta souris ?

swift lava
#

je veux que j'ai mon header avec un background img. Puis quand ma nav est dans le header celle-ci est transparent

tame forge
#

et ta nav est dans le header sous quelle condition ?

swift lava
#

comment ça sous quel condition

tame forge
swift lava
#

ma nav arrive après mon header et elle a son background color, mais avec le :hover qu'on a mis elle disparait pour devenir none dans le header mais je ne comprends pas pourquoi quand je quitte le header ma nav disparait sachant quelle est sticky

tame forge
#

bizarre...

swift lava
#

oui

# 
#nav{
    height: auto;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 10%;
    background-color: #222222;
    z-index: 10;
}
nav{ /*menu en haut */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: transparent;
}

#home{
    height: 900px;
    width: 100%;
    background: #2c1414;
    position: relative;
    z-index: 1;
}
.home_header{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;left: 0;
        background-color: #222222;
        /* background:url(/images/PC.jpg) center no-repeat; */
        background-size: cover;
        z-index: 2;
        opacity: 0.6;
}
#home:hover #nav {
    background-color: none;
}



<!-- Accueil -->
<div id="home">
    <div class="home_header">
        
<div id="nav">
<img class="logo" src="images/LOGOZE.png"></img>
    <nav>
        <ul class="nav_links">
            <li><a href="#">Accueil</a></li>
            <li><a href="#about">A Propos</a></li>
            <li><a href="#project">Projets</a></li>
            <li><a href="#skill">Mes Compétences</a></li>
        </ul>
        <a class="nav_button" href="#contacte"><button>Contact</button></a>
    </nav>
</div>
</div>
</div>
</div>
brave jay
#

Tu veux faire quoi enfaite ?

swift lava
#

j'aimerais si possible sans js,en étant sur mon header que ma nav sois en background none

mais que quand je quitte le header, j'aimerais que ma nav reprenne sa couleur

#

sauf que la quand je pars du header la nav bar part, alors que j'aimerais non seulement qu'elle reste mais qu'elle prenne sa couleur

#

je sais pas si c'est très clair mais la comme tu peux le voir quand je descends la nav part

swift lava
brave jay
#

pourquoi tu ne veux pas utiliser de js ?

swift lava
brave jay
#

Le code est tous simple : var navBar = document.getElementById('nav'); window.onscroll = function () { if (document.body.scrollTop >= 200 ) { navBar.classList.add("nav-colored"); navBar.classList.remove("nav-transparent"); } else { navBar.classList.add("nav-transparent"); navBar.classList.remove("nav-colored"); } };

#

nav-colored et nav-transparent tu dois les définir

swift lava
#

ok ok je vais essayer

swift lava
brave jay
#

css

swift lava
brave jay
#

un .

#

mais pour le coup tu devrais regarder des tutos 🙂

swift lava
#

okok

#

je vais essayer de me débrouiller merci 🙂

swift lava
#

actuellement je me pose a un nouveau souci c'est que comme ma nav je veux qu'elle soit sticky il ne faut pas que je la mette que au header sinon elle sera bloqué

copper warren
#

Bah si t'as pas de position relative sur le parent t'aura pas de soucis ça sera sticky sur l'ensemble de la page

brave jay
#

Position fixed sinon

copper warren
#

ça change rien à ce que j'ai dis au dessus de mémoire

#

si le parent est relatif tu peux mettre en fixed ça sera fixed dans le parent pas dans la page ( je crois à verifier )

swift lava
prime blade
#

coucou tout le monde je voulais demander si quelqu'un sait comment reproduire cette forme (le carré déformé)? merci d'avance :)

image.png
copper warren
#

Je dirais avec un clip-path

prime blade
#

ça a l'air d'être une bonne piste j'vais creuser merci!

forest echo
#

Tu peux effectivement utiliser un clip-path avec un fichier ou du code svg pour faire la forme que tu souhaites

# 
clip-path: path('code SVG');
ancient jackal
#

yo, j'ai un problème j'ai fait une page de login en utilisant les balise form et avec en action login.php mais quand le username et le password sont juste il n'envoie rien alors que si c'est faut il envoie au login.php

floral haven
ancient jackal
# floral haven Att laisse moi 2mins le temps de sortir ma boule de cristal pour deviner ton cod...

<!DOCTYPE html>
<html>
<head>
<title>Conexion - Fulgure</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="./img/favicon.png">
<link rel="stylesheet" type="text/css" href="./css/login.css">
</head>
<body>
<div class="login-box">
<h2>Connexion</h2>
<form action="login.php" method="post">
<div class="user-box">
<label>Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
</div>
<div class="user-box">
<label>Mot de passe:</label>
<input type="password" id="password" name="password">
</div>
<div class="button-form">
<input type="submit" id="register" value="Connecter">
<div class="register">
Pas encore de compte?
<a href="signup.html">Inscription</a>
</div>
</div>
</form>
</div>
</body>
</html>

supple crag
#

Salut, j'ai un problème avec ma scrollbar

#

j'aimerai la mettre pour mes div au lieu de la mettre a mon menu

#

CSS:

.bloc-routes {
        display: none;

        .drop-svg {
            transition: transform .3s;
        }

        &.open.active {
            
            border-radius: 10px 10px 0 0;

            .drop-svg {
                transform: rotate(180deg);
            }

            // .container {
            //     overflow: hidden auto;
            //     height: 100%;
            //     max-height: 760px;
            // }

            .container {
                .menu {
                    overflow: hidden auto;
                    height: 100%;
                    max-height: 760px;
                }
            }
        }
    }
    .bloc-routes.open {
        display: block;
        position: fixed;
        left: 10px;
        top: 13px;
        height: min-content;
        width: 330px;

        .container {
            box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.6);
            border-radius: 15px;
            overflow: hidden;
            
            // height: 95px;

            .menu {
                overflow: hidden;
                position: relative;
                display: block;
                height: 95px;

                div {
                    position: relative;
                    background: #1C2731;
                    height: 95px;

                    :nth-child(2n+1) {
                        background: #283A48;
                    }
                    :first-child {
                        z-index: 1;
                        top: 0;
                        position: sticky;
                    }
                }
            }
        }
    }
#

Si quelqu'un à des compétences, j'accepte son aide

sacred surge
sacred surge
supple crag
#

c’est à dire

#

j’ai pas compris

sacred surge
#

Bas les deux ne sont pas link de ton côté tu l'as fais ?

supple crag
#

à quoi sert de "link" comme tu dis ?

sacred surge
#

pour dire au html que le css c'est ce fichier

# 
<link rel="stylesheet" href="remplaceparlenondetonfichier.scss">
supple crag
#

ça a aucun rapport

#

avec mon problème

sacred surge
#

bas si que je ne peux pas t'aider si tu n'envoies pas les fichiers correctement

supple crag
#

mais je t'ai envoyé les codes simplement j'ai pas envoyé le head

#

je travaille avec react donc forcément

#

il faut juste que au lieu que ma scrollbar soit pour le menu j'aimerai qu'elle soit pour les div

sacred surge
#

ouais mais je n'ai pas le visuel pour comprendre ton probleme

supple crag
#

ah

supple crag
#

voila ce que j'ai

#

et voila ce que je voudrais :

image.png
sacred surge
#

tu es sur que le probleme vient du css ?

supple crag
#

oui puisque mon but est de mettre la scrollbar dans mes div du menu

#

et non directement dans le menu

#

sinon je vois directement l'extérieur de la div quand je mets un background transparent à la scrollbar

sacred surge
#

essaie

direction: ltr;
supple crag
#

ou ? exactement ?

sacred surge
#

je ne sais pas comment s'appel tes elements mais la ou il y a le overflow qui ajoute la scroll bar qui pose probleme

supple crag
#

oui d'accord

#

ça fait rien non

sacred surge
#

att je test

supple crag
# 
::-webkit-scrollbar {
    z-index: 14;
    width: 10px;
    background: transparent;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    margin-top: 98px;
}

::-webkit-scrollbar-thumb {
    margin: 20px;
    border-radius: 10px;
    /* background: #D9D9D955; */
    background: gray;
}
#

si tu veux le css de la scroll bar

brave jay
#

Je pourrais essayer de t’aider vers 15 heure si tu trouve pas

supple crag
#

oui merci

sacred surge
#

regarde le site je reviens après je vais mangé

supple crag
#

bon appétit

#

ou pire si c'est pas possible j'ai une solution

#

est-ce possible de faire un background qui change de couleur tout les x de hauteur

#

ex :
0-50 : black
50-100: white
100-150: black
etc..

copper warren
#

Tu met pas ton overflow scroll au bon endroit

supple crag
#

oui justement c'est la solution de base

copper warren
#

la solutions ça serait d'avoir une grosse div avec dedans une div qui a une taille fixé

supple crag
#

mais le truc c'est que j'arrive pas à mettre la scrollbar pour les div et non pour le menu

copper warren
#

Le menu c'est la div toute en haut ?

supple crag
#

j'aimerai prendre toute les div du menu et mettre une scrollbar pour ces élements

copper warren
#

C'est bien gentil mais je peux pas test fais un jsfiddle ou un codepen au pire

#

Bah tu fais une div qui les englobe avec une taille fixé et tu lui met overflow scroll

supple crag
#

mais la le truc que j'ai fait c'est de mettre une scrollbar pour le menu

supple crag
#

merci

copper warren
# 
<div class="menu">
   <div>
      <p>Je ne suis pas scrollable mdrrrr</p>
   </div>
   <div style="height: 35vmin; overflow-y: auto;">
      <!-- Ton truc ici -->
    </div>
</div>
#

T'aura un truc du genre

supple crag
# 
.bloc-routes {
        display: none;

        .drop-svg {
            transition: transform .3s;
        }

        &.open.active {
            
            border-radius: 10px 10px 0 0;

            .drop-svg {
                transform: rotate(180deg);
            }

            // .container {
            //     overflow: hidden auto;
            //     height: 100%;
            //     max-height: 760px;
            // }

            .container {
                .menu {
                    // overflow: hidden auto;
                    height: 100%;
                    max-height: 760px;
                }
            }
        }
    }

    .bloc-routes.open {
        display: block;
        position: fixed;
        left: 10px;
        top: 13px;
        height: min-content;
        width: 330px;

        .container {
            box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.6);
            border-radius: 15px;
            overflow: hidden;
            
            // height: 95px;

            .menu {
                .routes {
                    overflow-y: auto;
                    height: 185px;
                }
                z-index: 5;
                // overflow: hidden;
                background: #283A48;
                position: relative;
                display: block;
                height: 95px;

                div {
                    z-index: - 1;
                    position: relative;
                    background: #1C2731;
                    height: 95px;

                    :nth-child(2n+1) {
                        background: #283A48;
                    }
                    :first-child {
                        z-index: 1;
                        top: 0;
                        position: sticky;
                    }
                }
            }
        }
    }```
#

je sais pas pourquoi le premier de la div routes est fixé

image.png
#

ah non je viens de modif une truc ça le fait plus

#

faut juste que je modifie la taille

sacred surge
#

mdr

supple crag
#

je crois avoir réglé

#

merci quand même

sacred surge
#

C'est cool au moins c'était simple

tame forge
sacred surge
#

le btn qui disparait lors du over c´est pas dans le meme style que le reste

#

et celui la a des bordures donc c´est encore pas le même style après tu as peut être fais exprès

lapis burrow
tame forge
tame forge
#

Y’a 3 styles de boutons différents : ceux avec le fond gris, ceux avec la bordure jaune et enfin ceux avec le fond jaune

deft sigil
#

J'ai le href qui bug pourquoi ?

image.png image.png
void anvil
tame forge
#

x)

#

C’est vrai que ça l’est pas mal x)

lapis burrow
tame forge
#

Bizarre...

#

Normalement, y’a la homepage et la page des serveurs qui fonctionne

#

Le reste ne marche pas encore ^^

floral haven
#

Si ton site refresh à chaque navigation c'est que tu as un soucis avec ton React

tame forge
#

De mon côté, ça ne refresh pas

#

Par contre, j'ai bien eu une erreur 500 sur la page des serveurs

#

mais en rechargeant elle disparaît

lapis burrow
#

Page de base

tame forge
#

what

#

Trop bizarre x)

lapis burrow
#

t'utilise React ?

void anvil
tame forge
#

mais

lapis burrow
#

Ouais, donc React

tame forge
#

Je suis le seul à pas avoir de pb en fait xD

lapis burrow
#

Tu peux me montré comment tu fais la navigation entre tes pages ?

tame forge
lapis burrow
tame forge
#

Button est un composant dans lequel y'a un link

lapis burrow
#

ça

#

dégage le

tame forge
#

ok

iron stone
#

Le responsive...

lapis burrow
#

Sinon personne peut l'utilisez légalement

tame forge
tame forge
lapis burrow
tame forge
#

Si x)

#

Sur le github & dans le footer du site

lapis burrow
tame forge
lapis burrow
#

Wawww

#

faut le trouvé 😭

tame forge
#

Reste à savoir pk elle est plus sur github XD

lapis burrow
#

c'est un commit en dehors

tame forge
#

Yes....

#

Je remets ça demain 🤣

lapis burrow
tame forge
deft sigil
#

Hey est ce qu'il est possible de naviguer de section en section et c'est pas possible de naviguer entre section genre qu'on puisse s'arrêter au milieu de deux section ?

tame forge
#

Qu’est-ce que tu appelles une section ?

deft sigil
#

une partie

#

genre une section de partenariat

#

une section de banner, etc

tame forge
#

Et tu veux que ça scroll automatiquement?

deft sigil
#

nn je veux qu'on se déplace manuellement mais que le déplacement va jusqu'à une ancre comme

<section id="ancre"></section>
tame forge
#

Je comprends pas ce que tu veux faire 🤣

#

Tu veux bloquer le scroll ?

deft sigil
#

enfaite je veux que le scroll s'arrête à des positions définie

tame forge
#

Je pense que ça doit être faisable

deft sigil
#

mais c'est quoi le code pour faire ça ?

#

Je sais que c'est faisable mais je sais plus comment on fait

tame forge
# 
function disableScroll() {
    // Get the current page scroll position
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,

        // if any scroll is attempted, set this to the previous value
        window.onscroll = function() {
            window.scrollTo(scrollLeft, scrollTop);
        };
}

function enableScroll() {
    window.onscroll = function() {};
}```
#

J’ai trouvé ça sur Google. À voir si ça fonctionne ;)

deft sigil
#

C'est un truc dans ce genre là mais ça bug :

# 
var lastScrollTop = 0;
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop){
            // downscroll code
            console.log("Descend !");
            $('html,body').animate({scrollTop: $("#green").offset().top}, 1000);
        } else {
            // upscroll code
            console.log("Monte !");
            $('html,body').animate({scrollTop: $("#blue").offset().top}, 1000);
        }
        lastScrollTop = st;
    });
open nexus
#

Hello!
Quelqu’un connaît cette police ou comment faire cet effet “double” ?

image.png
tame forge
#

Après, sinon, tu veux toujours regarder dans le code de la page (si c'en est une)

proud raven
#

On dirais plus une image au vue de la superposition de la paire de chaussure

open nexus
open nexus
tame forge
#

ah x)

open nexus
tame forge
copper warren
copper warren
open nexus
copper warren
#

Quel double trait ?

#

Tu parles des contours

open nexus
#

Oui

copper warren
#

Y'a la réponse dans les commentaires

open nexus
#

Nickel merci !

cunning steppe
#

Bonjour ! J'aimerais faire en sorte d'aligner une div au millieu gauche de la page : J'utilise tailwindcss voici mon code pour afficher ce qui sur l'image jointe : (Juste la partie concerné) :

<div class="w-1/3 bg-stone-400" >
        <nav class="flex flex-wrap flex-col">
            <div class="border h-auto pb-4 border-transparent border-solid rounded-br-3xl">
                <div class="border-solid border-transparent rounded-br-3xl w-11/12 mt-4">
                    <a class="bg-stone-500 h-12 w-full flex justify-center items-center text-center border border-solid border-stone-300 rounded-tr-3xl text-stone-300" href="/">
                        Gestion d'employes
                    </a>
                    <a class="bg-stone-500 h-12 w-full flex justify-center items-center text-center border border-spacing-0 border-t-0 border-solid border-stone-300 text-stone-300" href="/">
                        Gestion des finances
                    </a>
                    <a class="bg-stone-500 h-12 w-full flex justify-center items-center text-center border border-spacing-0 border-t-0 border-solid border-stone-300 text-stone-300" href="/">
                        Gestion administrative
                    </a>
                </div>
            </div>
        </nav>
    </div>
Screenshot_2023-02-18_13.06.09.png
#

Je débute en html/css (et donc parallèlement tailwind)

#

Toute aide est bonne a prendre

brave jay
#

Tu mets ta div en flex

#

Oui items-center

#

H-screen pour que ta div prenne toute la hauteur de l’écran

#

Sinon absolute avec -translate-y-1/2 top-1/2

copper warren
#

Si il fait h-screen il aurra de l'overflow

#

tu peux faire une taille calculé t'enlève la hauteur de la div en haut

heavy musk
#

Renseigne toi sur le "calc()" en css

copper warren
#

Avec tailwind c'est h-[calc(100vh-50px)]

#

Si t'es en mode jit évidemment

heavy musk
#

Si tu es débutant je te déconseille Tailwind, tu l'utiliserais sûrement de la pire des manières possible

copper warren
#

Je suis pas d'accord avec toi niveau rapidité de compréhension ça reste plus simple à lire des class bien nommé que de chercher à chaque fois dans ton fichier style à quoi correspond chaque trucs. Pis la prise en main de Tailwind est vraiment simple mais un débutant peut commencer par ça

cunning steppe
#

Merci beaucoup, celà à fonctionner @brave jay et @Lucky.#0007

void anvil
#

le front c’est nul

tame forge
#

Très constructif harold

copper warren
void anvil
#

bonjour bonjour, j'aurai une question toute bete a posé mdr

#

je fais un blog en php et je n'arrive pas a mettre mes input de ma page d'inscription bien centré

#

je sais pas quoi mettre pour que ce sois pas décalé comme ça

#

svp

iron stone
#

Tu mets un width a tes textes

brave jay
#

Ou text align left

void anvil
#

ok j'essaierai ça

forest echo
brave jay
#

J’ai pas vus son code donc je peux pas énormément aider mais d’ailleurs c’est right

#

Si les div dont la même taille hein

fallow blaze
#

Coucou @void anvil Est-ce que tu peux partager du moins le code HTML pour qu'on puisse t'aider ?

gloomy kernel
#

j'ai besoin d'aide pour la protection d'un site

#

j'ai créé un site web mais il n'est pas sécuriser

#

ducoup je voudrais bien l'aide d'une personne pour sécuriser le site

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

    <div class="inscrit">
        <h1 class="text-center">Inscription</h1>

            <form action="../authentification/register.php" method="post">
                
                <div class="first">
                    <label for="firstname">Prénom</label>
                    <input id="firstname" type="text" name="firstname">
                </div>
                    <div class="last">
                        <label for="lastname">Nom</label>
                        <input id="lastname" type="text" name="lastname">
                    </div>
                        <div class="mail">
                            <label for="email">Email</label>
                            <input id="email" type="email" name="email">
                        </div>
                            <div class="pass">
                                <label for="password">Mot de passe</label>
                                <input id="password" type="password" name="password">
                            </div>
                                <div class="button">
                                    <button id="b" type="submit">S'inscrire</button>
                                </div>
                                    <a href="login.php">Je possède déjà un compte</a>

            </form>
    </div>

<?php require 'templates/layout-foot.php'; ?>

</body>
</html>
#

ça c le php

# 
.en-tete {
    height: 150px;
}

.middle {
    display: flex;
}

.container {
    border: 1px solid;
    width: 1600px;
    height: 450px;
}

.footer {
    border: solid 2px white;
    background: rgba(0, 0, 0, 0.911);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    display: flex;
    justify-content: space-around;
    padding: 30px;
    font-family: 'Signika Negative', sans-serif; 
}

.bouton {
    margin-top: 0px;
    margin-right: 45px;
}

#btnc {
    height: 35px;
    border-radius: 5px;
}

#btni {
    margin-top: 10px;
    height: 35px;
    border-radius: 5px;
}

.btnP {
    border-radius: 5px;
    height: 35px;
    margin-top: 10px;
    margin-left: 20px;
}
#

et ça le css

fallow blaze
#

@void anvil Désolé pour le délai de réponse. J'ai monté qqchose très rapidement. Ci-joint zip

tame forge
#

ça inspire pas vraiment confiance...

fallow blaze
#

@tame forge Entendu, c'est noté

void anvil
#

ta gerer

copper rune
#

Bonjour, je suis en train de m'entraîner à coder un site web, mais j'ai un petit soucis pour mon menu de navigation, voici sa structure HTML :

    <header class="header">
        <nav class="main-nav">
            <ul class="menu">
                <li class="menu-item"><a href="#" class="menu-link active">Accueuil</a></li>
                <li class="menu-item"><a href="#" class="menu-link">Notre équipe</a></li>
                <li class="menu-item"><a href="#" class="menu-link">Blacky Bot</a></li>
                <li class="menu-item"><a href="#" class="menu-link">Nos réseaux</a></li>
                <li class="menu-item"><a href="#" class="menu-link">Nous rejoindre</a></li>
            </ul>
        </nav>
    </header>

Et voici ce que ça rend sur la page web (avec le CSS) :

image.png
#

On peut voir qu'il y a des espaces entre chaque li, et je ne sais pas comment les enlever, et d'où ils proviennent...

Est-ce que quelqu'un pourrait m'aider s'il vous plaît, merci ^^

#

On les voit également lorsque j'inspecte l'élément.

image.png
fallow blaze
#

@copper rune Je vais regarder...

#

@copper rune Peux-tu me link ton CSS au passage stp ? Merci

copper rune
fallow blaze
#

Oui comme le HTML

copper rune
# 
/* Header */
.header {
    height: 50px;
    text-align: center;
}

.main-nav {
    position: fixed;
    background-color: #477b88;
    border-radius: 0 0 10px 10px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
  
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
  
.menu-item {
    display: inline-block;
}
  
.menu-link {
    display: block;
    text-align: center;
    padding: 14px 16px;
    border-radius: 0 0 10px 10px;
    transition: 0.3s;
}
  
.menu-link:hover {
    background-color: #2e5b68;
}

.menu-item .active {
    background-color: #22444d;
    color: #477b88
}
/* ----------------------- */
#

Voilà la partie de mon header ^^

fallow blaze
#

Je vais regarder, merci

copper rune
#

Merci à toi 🙂

fallow blaze
#

@copper rune Il existe plusieurs solutions pour contrer l'espace blanc entre les éléments <li> gérés via un display:Inline-block

#

La solution la plus simple est de mettre dans ta class [.main-nav] la propriété font-size:0;

copper rune
#

D'acc, merci beaucoup ! Je teste ça de ce pas 😉

fallow blaze
#

et ensuite de renseigner la nouvelle taille dans ta classe [.menu-item]

copper rune
#

Euh alors là, tous mes textes de mon main-nav ont disparut ^^

fallow blaze
#

genre : font-size:14px;

copper rune
#

ah oui okayy chuis con désolé

fallow blaze
#

Voici un article qui t'aidera à mieux comprendre et les différentes solutions

copper rune
brave jay
#

Dites moi le cahier des charges c'est vous qui le faites ou c'est le client ? ( c'est la première fois qu'on m'en demande un )

lapis burrow
#

le dev n'est pas devin

gloomy kernel
#

je voudrai savoir a quoi sert l'ipv6 sur l'hébergeur de mon site web et si je doit l'activer ou non et surtout a quoi sa sert

formal jewel
#

Salut ! J'ai pas vu de salon Wordpress :/ Je suis à la recherche d'une extension ftp/sftp VSCode capable de synchroniser mes fichiers avec mon dossier local correctement

left wigeon
formal jewel
#

Oulà...

left wigeon
#

En gros tu peux te connecter en ftp/sftp avec et relier ça à ton dossier local, en activant une synchronisation automatique

#

Et en + ça te permet de faire de la recherche globale

#

Si tu as Laragon tu l'as déjà

formal jewel
#

Je travaille à distance sur mon wordpress

left wigeon
#

Oui j'ai bien compris

#

@formal jewel tu t'en sors ?

formal jewel
#

Je ne vais pas utiliser WinSCP

left wigeon
#

Tu as trouvé une autre solution ?

#

Tu peux me le dire si tu as du mal à mettre WinSCP en place, je peux venir en vocal t'aider si tu as besoin 👍

ancient jackal
#

j'aimerais avoir un avis sur le design: https://fulgure.fr/

Fulgure

Le moteur de recherche qui garantie une protection des données et de votre vies privés

brave jay
#

Euh

#

perso je trouve qu'il n'y a rien qui va

#

Pourquoi c'est pas sur la meme ligne ? :

image.png
#

Ton text placeholder de la meme couleur qu'un text normal :

image.png
ancient jackal
brave jay
#

tu dois utiliser flex pour centrer

ancient jackal
brave jay
#

un gris

#

c'est quoi le projet avec analyseur de bourse ?

ancient jackal
dusky skiff
ancient jackal
brave jay
#

si je peux t'aider moi j'ai fait ca :

image.png
ancient jackal
supple crag
#

Salut, petite question ?

#

Quelqu'un connait mapboxgl ici ?

lapis burrow
ancient jackal
lapis burrow
ancient jackal
#

c'est encore en bêta, je me suis plus concentré sur le back-end (le moteur de recherche en lui même que le design )

lapis burrow
#

i see

forest echo
supple crag
#

De toute façon j'ai réglé le problème et je me doutait bien que quelqu'un allait me faire la remarque

weary haven
#

Salut les mec je début en HTML, CSS et j'aimerait fait un truc mais je ne trouve pas alors, je fait actuellement une navbar et je cherche a faire deux train en haut et en bas comme sur la photos ( c'est du paint ) alors si vous avez des chose a m'indiquer pas forcement la solution direct (j'aime découvrir)

image.png
left wigeon
#

Salut, je te conseille de te renseigner sur border en CSS

weary haven
#

J'aimerait un petit avis sur ma navbar (Je débute évidement je fait simple)

meager beacon
iron stone
#

Mets une transition

#

Pour que ça fasse moins brut

#

Je te conseil de mettre un logo

#

Tout a gauche

#

Après on ne peut pas donner un avis sur une navbar c'est trop petit ^^

weary haven
#

Okey je vais mettre tout ça 😄 merci

#

oui oui normal mais merci pour les petit détail deja c'est genial 😄

tame forge
lapis burrow
#

Tu fais un site en SSR ?

tame forge
tame forge
lapis burrow
#

Après tu gère pas la ram

#

Mais fait gaffe avec Vercel

#

t'es limité

tame forge
#

Ok

lapis burrow
#

Si un jour ton bot est beaucoup utilisé

tame forge
#

Ok ok

lapis burrow
#

Bah les "appel api" ne vont pas passé

#

après 100k par mois

tame forge
#

merci du conseil.

lapis burrow
#

faut être un fdp comme moi qui spam f5...

tame forge
lapis burrow
#

Mais après la tarification fait légérement mal XDD

tame forge
#

Je m'étais fait timeout par Discord la semaine dernière en faisant ça kapp

lapis burrow
#

Recycle les

tame forge
lapis burrow
#

Profite des fonctionnalité de React et utilise des context

#

(Tu fou le context au début de l'app et les donnée dedans sont accessible à travers tout le code)

tame forge
#

Chez netlify : Vous avrez atteint les limites de votre plan. Vous allez passer au plan supérieur. Ah vous voulez pas ? Ben vous avez pas le choix en fait kappo 25€/mois svp

lapis burrow
tame forge
#

Ok

#

Merci du conseil ^^

lapis burrow
#

Pour save les data de l'user tout ça

#

ça t'economisera beaucoup de ressources XD

tame forge
#

ça évitera d'utiliser une db x)

lapis burrow
#

Bah ce que tu save dans le context c'est local inh 😭

tame forge
#

tkt moi aussi c'est en local

lapis burrow
#

alors

#

c'est pas du sql

#

Mais tkt

tame forge
#

Au départ j’en voulais pas, mais j’avais plus de solution, donc j’ai du en mettre une. Mais je vais tester avec le cache, et si j’arrive à l’utiliser, la db => 🗑

floral haven
#

Un contexte n'a absolument aucune vocation à remplacer une db

lapis burrow
floral haven
forest echo
#

Misère

strong remnant
#

Hello,
Après plusieurs recherches sans succès je viens voir si quelqu'un sait m'aider pour ceci :
Je souhaite que mes notifications se "stack" l'une au dessus de l'autre et non en dessous comme c'est le cas sur l'image

image.png
#

En me renseignant sur google, j'ai vu que c'était peut-être une direction à changer, j'ai tester 2, 3 choses mais rien de concluant !

peak thorn
strong remnant
# 
#toast-container {
    flex-wrap: wrap-reverse;
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 999999;
    pointer-events: none
}

#toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
} 

/* CORE NOTIFICATION */
#toast-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 275px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    color: #FFF;
    opacity: .85;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
    font-family: MTS;
    /* font-weight: bold; */
    filter: alpha(opacity=80);
    font-size: 0.9rem;
    border-bottom: none;
    border-right: none;
    border-top: none;
    outline: none;
    -webkit-box-shadow: 11px 10px 58px -22px rgb(0, 0, 0);
    -moz-box-shadow: 11px 10px 58px -22px rgba(0, 0, 0);
    box-shadow: 2px 1px 9px 3px rgba(10, 10, 10);
    
    /* box-shadow: 2px 1px 9px 3px rgba(10,10,10,0.7); */
}

#toast-container>div.rtl {
    direction: rtl;
    padding: 15px 50px 15px 15px;
    background-position: right 15px center
}
strong remnant
peak thorn
#

et ton html ?

peak thorn
strong remnant
true schooner
#

hey,

#

je galère avec ma navbar voici un screen

#

sa veux pas se center au mileu a droite

Capturea.PNG
tame forge
brave jay
#

Et paf ça fait des chocapics

true schooner
#

mdr jais fait sa en me les éclatant sur la geule et ma mère ma juste dit: t con ptn

true schooner
true schooner
brave jay
#

Ouais non c’est pas comme ça

#

C’est display: flex

#

Justify-content: center

#

Mais tu dois le faire sur la div parent

true schooner
#

ok

true schooner
brave jay
#

Justify tu mets end

#

« end »

true schooner
#

ok

#

c bon et maintenant

brave jay
#

Le truc c’est que tu ne sais pas ce que tu fais

#

Donc maintenant je te conseille de regarder des tutos pour apprendre à lire une doc ou des tutos pour apprendre le css

#

Sans vouloir être méchant hein

true schooner
#

tkt

#

mais jais toujour pas réussi a le foutre au milieur se bordel

brave jay
#

C’est quoi que tu veux mettre au milieu enfaite ?

true schooner
#

ma navbar en gros le texte que je te montre depuit tt a l'heure jveus que il soit au milieu a coté de mon logo a droite

#

en gros sa donne sa

brave jay
#

Montre ton code html

true schooner
#

att jais fermer vsc j'arrive

#

bon c pas tout propre mais voila @brave jay

Captureb.PNG
brave jay
#

Ok alors le header doit être en display flex, justify center et align items center

true schooner
#

ok att

true schooner
brave jay
#

C’est bien ce que tu voulais non ?

true schooner
#

attention je suis chian,
jveux le logo a gauche et la navbar a droite mais je pensse que jvais laisser comme ça (sauf si tu trouve comment jpeu faire ça héhé)

brave jay
#

Justify between dans ces cas là

true schooner
#

ouaiiis merci

#

mdr tout sa pour sa

#

aumoi jais se que je veux

brave jay
#

Mouais

true schooner
#

okkk

tame forge
# lapis burrow pense à mettre en cache tes requêtes

J'ai trouvé ça sur Google, sachant que ça fonctionne. ça me changerait quoi de le mettre dans le _document.tsx ?

caches.open("cache").then((cache) => {
    cache.put("http://localhost:3000", new Response("Hello world!"));
    alert('Data Added into cache!')
});
lapis burrow
tame forge
#

🤔

#

Mais dcp, je peux utiliser ça nan ?

lapis burrow
#

Bah ça changera rien à ce que tu fais actuellement

tame forge
#

🤔

#

Effectivement pas utile donc

#

Comment je peux faire en faisant ce que tu me dis ?

forest echo
#

Hey, j'espère que vous allez bien. Pour ma part j'ai un problème un peu nul qui me casse la tête :

Mon bouton rouge est un anchor avec un padding. Sauf que mon navigateur ne prend pas en compte son padding mais juste le texte comme border... J'ai déjà essayé et le problème ne vient pas de la taille de l'image à coté, ni de la taille du div (il n'a pas de height définie).

Propriété du btn :

.btn{
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
}

Si quelqu'un a une solution je suis preneur ;
Merci d'avance myman

Capture_decran_3.png
lapis burrow
brave jay
tame forge
#

ok

#

mrc

ancient jackal
iron stone
#

Le responsive ..

#

Je trouve que ça ca rend mal

#

Faudrait mettre un style italic je pense

brisk forum
iron stone
#

Comment tu a centrer la search bar ?

#

Fais un menu hamburger au moins

#

Le footer mais lui un :
flex-direction : column ;

forest echo
# brisk forum yes je suis nul a chier en responsive

Non c'est juste que tu n'as pas essayé, c'est plutôt simple. Il suffit d'un tuto sur les flex-box ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) et de comprendre les media queries ( https://www.w3schools.com/css/css3_mediaqueries.asp ).

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

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

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

brisk forum
#

j'ai peur de me lancer mais bon faut je regarde

brave jay
#

C'est obligatoire mais le top c'est de faire du mobile-first

forest echo
#

Il y a un début à tout et c'est essentiel de maitriser ça si tu souhaites faire du front

forest echo
brave jay
#

essaye padding 100px ?

#

envois le css de la div parent

ancient jackal
ancient jackal
still kelp
brisk forum
dusky skiff
ancient jackal
brisk forum
forest echo
brave jay
#

Envois ton css

#

Ou ton site est déjà en ligne ?

brave jay
brisk forum
forest echo
# brave jay Envois ton css

Non mais mon css est divisé en 10 pages donc ca va être compliqué mais je viens de découvrir la ✨ fusion des marges✨

brisk forum
#

10 page de css tu est fort !

brave jay
#

Si c’est le cas malgré le fait que tu es 10 pages si tu as plusieurs class du même nom, l’ordre de priorité joue

forest echo
#

Oui mais enfaite c'est juste que les margin bottom et top de mes div fusionnent entre elles

brave jay
#

Bah ouais mais c’est pas normal enfaite

#

Monte ton projet met le en ligne et je regarderais quand j’ai 3 minutes si tu veux

forest echo
#

je peux pas te montrer le site comme ca pour le moment mais j'ai trouvé un article parlant du problème.
Et si la fusion des marges est normal

brave jay
#

Ah oui, c’est que je ne travaille pas dans ce style

forest echo
#

ok merci quand même

brave jay
#

Mais c’est vrai que je ne connaissais pas c’est bon à savoir

#

C’est intéressant ! Bon courage du coup

forest echo
#

merci (je viens aussi de découvrir ca, comme quoi on fait des découvertes tous les jours 😂 )

void anvil
#

selem

#

qui peut maider

#

en informatique

#

sur un site a faire

ancient jackal
#

je suis entrain de faire le responsive et j'ai un problème avec mon footer je sais pas pk ont voit que la moitier

image.png
void anvil
#

aled

marble ether
#

Bonjour, je suis en train de développer un quiz QCM, mais je n'arrive pas à faire en sorte qu'il y est plusieurs bonne réponse. Je ne sais pas si il faut le mettre dans ce salon ou dans le javascript car j'utilise html, css et js . Pouvez-vous m'aider merci

brave jay
void anvil
#

MAIS AIDEZ MOIII

brave jay
#

avec un bottom: 0

brave jay
ancient jackal
brave jay
ancient jackal
void anvil
brave jay
#

Mais encore ?

void anvil
#

enft

#

ma page dacueil

Capture_decran_63.png
#

et quand jappuie sur top 5

#

sa me met fichier in valide

#

alors que mon script est bien et tout

#

..

brave jay
#

Tu utilises quoi pour dev ?

exotic sentinel
brave jay
void anvil
void anvil
#

TU VOIS JSUIS SUR MA PAGE DACUEIL ETT ET QUAND JAPUIE SUR TOP 5 SA DOIT ME RAMENER DANS UNE AUTRE PAGE BAH AU LIEU DE SA SA MET FICHIER INTROUVABLE

#

SA

exotic sentinel
fickle void
dim canopy
void anvil
#

jdois le rendre demain s ame stresse.

#

c nimp

#

jai une qst aussi

#

pour faire le style dune de mes page jdois le mettre dans mon script ?

#

dans mon script ou c ecris les truc

#

genre attendez

#

donc jai ft un script ou jecris la biographie dune chanteur

#

et dans ce script jecris les codes pour le style ?

#

ou c ds un truc apar

dim canopy
void anvil
#

deh

#

wsh pk moi nana

#

nan

#

pour le style c dans le meme script ou pas

brisk forum
#

deja utilise pas le mot script

#

utilise le mot code

#

donc ton "style" qui est le css

#

fait un fichiers style.css

#

ou tu met ton code

#

d'apres se que je vois tu la deja fait

void anvil
#

wtf

#

donc

#

jfais une nouvelle page blanche

#

ou jecri

#

mon css

dim canopy
#

le style ne fonctionne pas car le path est incorrect

void anvil
#

..

#

alaide

brisk forum
#

je vois mal le code tu peut pas le coller sur discord ?

void anvil
#

c quoi qui est incorect

#

lequel code dcp

#

pour la biographie

#

?

#

<!DOCTYPE html>
<html lang="fr">

<head>
<title> Biographie </title
<meta charset="utf-8" />
<link rel="stylesheet" href=../styles/style-de-Tom.css" type="text/css" />
</head>

<body>
<div id="entete-de-page">
<p> Vie de The Weekend <br/>
</p>
</p>
</div>

<table id="bloc-menu" border="1">
<tr>
    <th> <a href="../index.html">Accueil </th></a>
    <th> <a href="pages/top10.html">Top 5 </th></a>
    <th> <a href="pages/reportages.html">Biographie </th></a>
    <th> <a href="pages/tutos.html">Albums</th></a>

</tr>
</table> <br/> 

<div id="contenu">
<p <div style="color:black"  <p>    
   <h1> 
   <B> Biographie</B> </h1>
    <h2> </h2></div>   </h2>        
</div> <br/> 


<div id="pied-de-page">
    <p> The Weeknd, est un chanteur, acteur, auteur-compositeur-interprète et producteur <br/>
 musical canadien, né le 16 février 1990 à Toronto. Il commence sa carrière musicale en 2009 en publiant anonymement de la musique sur YouTube.
  Son premier album studio, Kiss Land, sort en 2013. Son deuxième album, Beauty Behind the Madness, mis en vente en 2015 et comprenant les singles classés en tête du Billboard Hot 100 Can't Feel My Face et The Hills, remporte le prix du « meilleur album urbain contemporain » aux Grammy Awards. Il fait partie des albums les plus vendus de l'année. Starboy, le troisième album, connait un succès commercial et remporte également le prix du meilleur album urbain contemporain aux Grammy Awards. Son quatrième album, After Hours, affiche plusieurs chansons en tête du classement Billboard Hot 100 telles que Heartless, Save Your Tears et Blinding Lights ; ce single est d’ailleurs devenu la première chanson de l'histoire à passer plus d'un an dans le top 10 du Billboard Hot 100 et est la chanson la plus écoutée sur la plateforme musicale Spotify en 2020.</p>
</div> <br/>

</body>

</html>

#

c sa

brisk forum
#

ok

dim canopy
#

On est d'accord que ton css marche sur la page d'acceuil mais pas sur les autres pages ?

void anvil
#

ouii

#

psk mon style c sur un autre truc c pas sur mon code ou jai ecris lacueil

#

mais jsp cmt on fait

dim canopy
#

C'est parce que le href de ton css est pas bon

void anvil
#

ahh c quoi qui est pa sbon la

dim canopy
#

le chemin d'acces a ton fichier css

void anvil
#

jai pas fait de style encore

#

pour

#

les autres pages

brisk forum
#

je le re met bien ```html
<!DOCTYPE html>
<html lang="fr">

<head>
<title> Biographie </title
<meta charset="utf-8" />
<link rel="stylesheet" href=../styles/style-de-Tom.css" type="text/css" />
</head>

<body>
<div id="entete-de-page">
<p> Vie de The Weekend <br/>
</p>
</p>
</div>

<table id="bloc-menu" border="1">
<tr>
    <th> <a href="../index.html">Accueil </th></a>
    <th> <a href="pages/top10.html">Top 5 </th></a>
    <th> <a href="pages/reportages.html">Biographie </th></a>
    <th> <a href="pages/tutos.html">Albums</th></a>

</tr>
</table> <br/> 

<div id="contenu">
<p <div style="color:black"  <p>
   <h1> 
   <B> Biographie</B> </h1>
    <h2> </h2></div>   </h2>
</div> <br/> 


<div id="pied-de-page">
    <p> The Weeknd, est un chanteur, acteur, auteur-compositeur-interprète et producteur <br/>
 musical canadien, né le 16 février 1990 à Toronto. Il commence sa carrière musicale en 2009 en publiant anonymement de la musique sur YouTube.
  Son premier album studio, Kiss Land, sort en 2013. Son deuxième album, Beauty Behind the Madness, mis en vente en 2015 et comprenant les singles classés en tête du Billboard Hot 100 Can't Feel My Face et The Hills, remporte le prix du « meilleur album urbain contemporain » aux Grammy Awards. Il fait partie des albums les plus vendus de l'année. Starboy, le troisième album, connait un succès commercial et remporte également le prix du meilleur album urbain contemporain aux Grammy Awards. Son quatrième album, After Hours, affiche plusieurs chansons en tête du classement Billboard Hot 100 telles que Heartless, Save Your Tears et Blinding Lights ; ce single est d’ailleurs devenu la première chanson de l'histoire à passer plus d'un an dans le top 10 du Billboard Hot 100 et est la chanson la plus écoutée sur la plateforme musicale Spotify en 2020.</p>
</div> <br/>

</body>

</html>

void anvil
#

jsp ou jle met le script

#

fin le code

brisk forum
#

deja ton <title> Biographie </title il est pas fermé

void anvil
#

css

#

ah oui merde

#

apres

brisk forum
#

tu a tout mis dans 1 seul fichiers ?

void anvil
#

de quoi

#

le code?

brisk forum
#

tes page html et css

void anvil
#

pour chaque code ya un fichier

#

fin 1page = 1 code

brisk forum
#

mais pour quoi ? edit : a non j'avais mal compris

dim canopy
#

Pour tes autres pages, le css ne fonctionne pas car les href ne vise pas le fichier css

void anvil
#

comment je fait dcp

#

🥲

dim canopy
#

Bah tu te creuse la tête deux minute et tu écoute ce que je te dit

void anvil
#

maisss jai jms fait sa moi jcomprend r jdois le rendre demain

brisk forum
#

sa il faut qu'il soit dans toute les pages href=../styles/style-de-Tom.css

void anvil
#

pour le style jai sa

#

c le style de lacueil

#

enft jai envie de copier le fichier et jmet un autre style

#

a la place

dim canopy
#

Le projet c'est toi qui l'as fait entierement ?

void anvil
#

non de base ct le site de qlq et jdois remplacer pour mettre mes truc

dim canopy
#

ah bah dis lui que tu n'as pas les compétences point barre

brisk forum
#

c'est pour sa je préfaire avoir tout dans 1 seul fichiers mes index et mes style mélanger

void anvil
#

pureh..

dim canopy
brisk forum
void anvil
#

ololo

void anvil
brisk forum
#

j'arrive pas a capté c'est quelle page qui fonctionne pas ?

void anvil
#

le top 5

dim canopy
#

Le truc c'est que là tu n'as pas les connaissances minimum donc difficile de communiquer avec toi

void anvil
#

et pour le style jsp comment jle rajoute

#

..

brisk forum
#

envoie le code de ta page top5 avec au debut et a la fin ````
html

dim canopy
brisk forum
#

je doit download eheee

dim canopy
#

Je crois bien harold

brisk forum
#

bon ba ok on s'en fou de la secu mdr

dim canopy
#

Oh tqt je l'ai dl je pense que tu n'as rien a craindre

brisk forum
#

ok nice

void anvil
#

🥲

brisk forum
#

moi le top10 m'affiche sa

image.png
void anvil
#

merci dmaidez sah

#

PK MOI S AMARCHEPASS

#

jv serrer

dim canopy
dim canopy
void anvil
#

mais le style js comment on fait jsp ou on le rajoute

#

mais moi sa me met fichier introuvable

dim canopy
void anvil
#

dinguerie

brisk forum
brisk forum
void anvil
#

sa ma mis sa

#

wsh

dim canopy
brisk forum
#

ta chrome comme navigateur ?

void anvil
#

yahoo wsh

dim canopy
#

Non mais là de toute façon ça sers plus a rien de débattre, je vous ai dit le pb

#

Les href du css ne sont pas bon

#

C'est tout

brisk forum
#

mais ohhh mais ohhhhooooo

void anvil
#

mais

brisk forum
#

pour quoi tu a 2 top10.html !

#

et un fichiers css chelou

#

en .css.bak

dim canopy
#

C'est pour que ça marche deux fois mieux

brisk forum
#

ya trop d'erreur dans son code comme ici

image.png
#

ta oublier le debut du nom

#

la j'ai corriger 2-3 petit truc et sa donne sa

image.png
#

@void anvil

#

change toute cette parti de ton code ```html
<head>
<title> Top 5 </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style-de-Tom.css" type="text/css" />
</head>

void anvil
brisk forum
#

j'ai bien mis le nom de mon fichiers css

#

met sa a la place de ton head dans ta page top5

#

top10

void anvil
#

cke tu ma envoyer la

#

<head>
<title> Top 5 </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style-de-Tom.css" type="text/css" />
</head>

#

jmet sa ?

dim canopy
#

essaye

brisk forum
void anvil
#

tjr rien...

#

g mis sa

dim canopy
void anvil
#

cke tu ma dis wsh

#

MAIS

dim canopy
#

href="../styles/style-de-Tom.css"

#

...

brisk forum
#

ololoo pour sa je fait tout dans un fichiers

void anvil
#

regarde

brisk forum
#

et la essaye

void anvil
#

tjr rien eh jv canner

brisk forum
#

bon je vais te le faire et te l'envoyer

void anvil
#

merci bcp

dim canopy
void anvil
#

c pgrv

#

jv le faire 1 fois ds lanée c rien

dim canopy
void anvil
#

ouii

dim canopy
void anvil
#

vrmt pas

#

🥲

dim canopy
#

Ah bah ça va alors

void anvil
#

ui

sudden notch
# void anvil

Hello, mais du coup sur ta page ça t'affiche quoi ? Juste le contenu sans le css ?

void anvil
brisk forum
#

j'ai corriger et c moche comme sa

image.png
void anvil
#

ct plus beau lautre que tavais fait

void anvil
sudden notch
dim canopy
void anvil
#

jsuis ds mon accueil

#

et quand jappuie sur top 5

dim canopy
void anvil
#

sa affiche sa

brisk forum
#

yes erreur de ma part