J'ai un site à faire en HTML/CSS pour vendredi..

Le 30 juin 2022 à 00:29:35 Mikwars a écrit :

Le 30 juin 2022 à 00:26:44 :

Le 30 juin 2022 à 00:24:56 Mikwars a écrit :

Le 30 juin 2022 à 00:18:03 :

Le 30 juin 2022 à 00:16:32 Mikwars a écrit :
Je veux bien t'aider s'il faut kheyou mais t'as pas l'air motivé du tout
En soi ton exo est un peu "poussé" vu que ca demande du flexbox et de la grid mais c'est amplement faisable

pour la flexbox et la grid : tu tape sur google "css flexbox generator" ou "css grid generator"https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
et tu genère tes grilles comme tu le souhaite sans te prendre la tête avec le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

AHI
Pire méthode pour ne jamais comprendre ce que tu faishttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png
Ce sont de bons outils hein je dis pas, mais par exemple l'intérêt d'une grid est le responsive. En utilisant un generator, tu pourras jamais prévoir un cas qui fonctionne pour ton template sur tous les écrans.

tu génère 3 codes : 1 pour mobile, 1 pour tablettes, 1 pour desktophttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
meilleur générateur : https://cssgrid-generator.netlify.app/ (déjà utilisé il est good)https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et puis tu met les média queries et c'est bon, tu t'es pas cassé la tête dans le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ta méthode fonctionne pour un projet perso.
Pour un projet pro, laisse tomber je voudrais pas devoir faire des modifs sur ton css

t'inquiète pas, j'ai pas refait de dev web depuis le DUT bien heureusementhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Le 29 juin 2022 à 23:52:41 :
Comprenez que j'ai eu que 6 cours que j"ai fais il y'a un mois c'est largement insuffisant et j'ai tout oublierhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

je regrette d'avoir fais ce genre de formation car le travail est full autonome donc quasiment que du travail a la maison, et comme j'ai jamais rien branléhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

J'ai fais une formation web et j'ai pas trop bosser chez moi le css, ca vient tout seul lors des projets en cours

Ahi t'arrives vraiment pas à comprendre le HTML et CSS ? C'est même pas de la proghttps://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png

Après peut-être que la formation est nulle aussi, te décourages pas khey !

Mais dis toi que tous les cours en info, même à la fac, sont comme ça. Tu dois juste apprendre à te dépatouiller avec ce que tu trouves sur Internet. OpenClassroom, Youtube et Stack deviendront vite tes amis

Le 30 juin 2022 à 00:30:21 :

Le 30 juin 2022 à 00:29:35 Mikwars a écrit :

Le 30 juin 2022 à 00:26:44 :

Le 30 juin 2022 à 00:24:56 Mikwars a écrit :

Le 30 juin 2022 à 00:18:03 :

Le 30 juin 2022 à 00:16:32 Mikwars a écrit :
Je veux bien t'aider s'il faut kheyou mais t'as pas l'air motivé du tout
En soi ton exo est un peu "poussé" vu que ca demande du flexbox et de la grid mais c'est amplement faisable

pour la flexbox et la grid : tu tape sur google "css flexbox generator" ou "css grid generator"https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
et tu genère tes grilles comme tu le souhaite sans te prendre la tête avec le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

AHI
Pire méthode pour ne jamais comprendre ce que tu faishttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png
Ce sont de bons outils hein je dis pas, mais par exemple l'intérêt d'une grid est le responsive. En utilisant un generator, tu pourras jamais prévoir un cas qui fonctionne pour ton template sur tous les écrans.

tu génère 3 codes : 1 pour mobile, 1 pour tablettes, 1 pour desktophttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
meilleur générateur : https://cssgrid-generator.netlify.app/ (déjà utilisé il est good)https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et puis tu met les média queries et c'est bon, tu t'es pas cassé la tête dans le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ta méthode fonctionne pour un projet perso.
Pour un projet pro, laisse tomber je voudrais pas devoir faire des modifs sur ton css

t'inquiète pas, j'ai pas refait de dev web depuis le DUT bien heureusementhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

ton site est hyper mal expliqué et oui ça va juste te faire un truc de merde
apres pour l'auteur oui ça va l'aider mais il comprendra que dalle
La l'auteur, il arrive sur le site il va cliquer 6 fois sur chaque case de la premiere ligne au lieu de cliquer une fois sur la premiere case et de glisser vers la 6 pour faire une ligne complete
Rien indique sur le site que tu peux faire ça

Par contre 2 mois et vous êtes que sur html css js vanilla ? Chaud

Le 30 juin 2022 à 00:28:44 :

Le 30 juin 2022 à 00:24:48 :

Le 30 juin 2022 à 00:08:34 :
Dossier A > Sous-Dossier B
"> Sous-dossier X > Sous-dossier F > image.svg
"> Sous-dossier Y > html + css

Les clés, comment j'insère mon image.svg dans mon code html ?https://image.noelshack.com/fichiers/2016/47/1480097042-encoreunmalaise.gif

Bon y a personne sur le forom de l'élite nationale du dev qui sait me donner un chemin pour insérer une image sur html ?https://image.noelshack.com/fichiers/2020/27/1/1593433982-marlou-bras.png

../ pour te placer dans Sous-Dossier B puis tu mets Sous-dossier X/Sous-dossier F/image.svg

donc <img src="../Sous-dossier X/Sous-dossier F/image.svg" alt="mon super img" />

si j'ai bien compris ta structure c'est ça

Oui tu as bien compris, merci pour ta réponse clé, malheureusement ça ne fonctionne pashttps://image.noelshack.com/fichiers/2018/27/4/1530827992-jesusreup.png

Le 30 juin 2022 à 00:33:07 09h02 a écrit :

Le 30 juin 2022 à 00:30:21 :

Le 30 juin 2022 à 00:29:35 Mikwars a écrit :

Le 30 juin 2022 à 00:26:44 :

Le 30 juin 2022 à 00:24:56 Mikwars a écrit :

Le 30 juin 2022 à 00:18:03 :

Le 30 juin 2022 à 00:16:32 Mikwars a écrit :
Je veux bien t'aider s'il faut kheyou mais t'as pas l'air motivé du tout
En soi ton exo est un peu "poussé" vu que ca demande du flexbox et de la grid mais c'est amplement faisable

pour la flexbox et la grid : tu tape sur google "css flexbox generator" ou "css grid generator"https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
et tu genère tes grilles comme tu le souhaite sans te prendre la tête avec le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

AHI
Pire méthode pour ne jamais comprendre ce que tu faishttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png
Ce sont de bons outils hein je dis pas, mais par exemple l'intérêt d'une grid est le responsive. En utilisant un generator, tu pourras jamais prévoir un cas qui fonctionne pour ton template sur tous les écrans.

tu génère 3 codes : 1 pour mobile, 1 pour tablettes, 1 pour desktophttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
meilleur générateur : https://cssgrid-generator.netlify.app/ (déjà utilisé il est good)https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et puis tu met les média queries et c'est bon, tu t'es pas cassé la tête dans le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ta méthode fonctionne pour un projet perso.
Pour un projet pro, laisse tomber je voudrais pas devoir faire des modifs sur ton css

t'inquiète pas, j'ai pas refait de dev web depuis le DUT bien heureusementhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

ton site est hyper mal expliqué et oui ça va juste te faire un truc de merde
apres pour l'auteur oui ça va l'aider mais il comprendra que dalle
La l'auteur, il arrive sur le site il va cliquer 6 fois sur chaque case de la premiere ligne au lieu de cliquer une fois sur la premiere case et de glisser vers la 6 pour faire une ligne complete
Rien indique sur le site que tu peux faire ça

évidemment faut maitriser l'outilhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
mais croit moi que ce générateur peut faire quasi n'importe quelle grille possible, en un rien de tempshttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Le 30 juin 2022 à 00:34:26 :

Le 30 juin 2022 à 00:33:07 09h02 a écrit :

Le 30 juin 2022 à 00:30:21 :

Le 30 juin 2022 à 00:29:35 Mikwars a écrit :

Le 30 juin 2022 à 00:26:44 :

Le 30 juin 2022 à 00:24:56 Mikwars a écrit :

Le 30 juin 2022 à 00:18:03 :

Le 30 juin 2022 à 00:16:32 Mikwars a écrit :
Je veux bien t'aider s'il faut kheyou mais t'as pas l'air motivé du tout
En soi ton exo est un peu "poussé" vu que ca demande du flexbox et de la grid mais c'est amplement faisable

pour la flexbox et la grid : tu tape sur google "css flexbox generator" ou "css grid generator"https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
et tu genère tes grilles comme tu le souhaite sans te prendre la tête avec le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

AHI
Pire méthode pour ne jamais comprendre ce que tu faishttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png
Ce sont de bons outils hein je dis pas, mais par exemple l'intérêt d'une grid est le responsive. En utilisant un generator, tu pourras jamais prévoir un cas qui fonctionne pour ton template sur tous les écrans.

tu génère 3 codes : 1 pour mobile, 1 pour tablettes, 1 pour desktophttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
meilleur générateur : https://cssgrid-generator.netlify.app/ (déjà utilisé il est good)https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et puis tu met les média queries et c'est bon, tu t'es pas cassé la tête dans le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ta méthode fonctionne pour un projet perso.
Pour un projet pro, laisse tomber je voudrais pas devoir faire des modifs sur ton css

t'inquiète pas, j'ai pas refait de dev web depuis le DUT bien heureusementhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

ton site est hyper mal expliqué et oui ça va juste te faire un truc de merde
apres pour l'auteur oui ça va l'aider mais il comprendra que dalle
La l'auteur, il arrive sur le site il va cliquer 6 fois sur chaque case de la premiere ligne au lieu de cliquer une fois sur la premiere case et de glisser vers la 6 pour faire une ligne complete
Rien indique sur le site que tu peux faire ça

évidemment faut maitriser l'outilhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
mais croit moi que ce générateur peut faire quasi n'importe quelle grille possible, en un rien de tempshttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ba fais la mienne cléhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Le 30 juin 2022 à 00:34:53 MadeInPolska a écrit :

Le 30 juin 2022 à 00:34:26 :

Le 30 juin 2022 à 00:33:07 09h02 a écrit :

Le 30 juin 2022 à 00:30:21 :

Le 30 juin 2022 à 00:29:35 Mikwars a écrit :

Le 30 juin 2022 à 00:26:44 :

Le 30 juin 2022 à 00:24:56 Mikwars a écrit :

Le 30 juin 2022 à 00:18:03 :

Le 30 juin 2022 à 00:16:32 Mikwars a écrit :
Je veux bien t'aider s'il faut kheyou mais t'as pas l'air motivé du tout
En soi ton exo est un peu "poussé" vu que ca demande du flexbox et de la grid mais c'est amplement faisable

pour la flexbox et la grid : tu tape sur google "css flexbox generator" ou "css grid generator"https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
et tu genère tes grilles comme tu le souhaite sans te prendre la tête avec le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

AHI
Pire méthode pour ne jamais comprendre ce que tu faishttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png
Ce sont de bons outils hein je dis pas, mais par exemple l'intérêt d'une grid est le responsive. En utilisant un generator, tu pourras jamais prévoir un cas qui fonctionne pour ton template sur tous les écrans.

tu génère 3 codes : 1 pour mobile, 1 pour tablettes, 1 pour desktophttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
meilleur générateur : https://cssgrid-generator.netlify.app/ (déjà utilisé il est good)https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et puis tu met les média queries et c'est bon, tu t'es pas cassé la tête dans le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ta méthode fonctionne pour un projet perso.
Pour un projet pro, laisse tomber je voudrais pas devoir faire des modifs sur ton css

t'inquiète pas, j'ai pas refait de dev web depuis le DUT bien heureusementhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

ton site est hyper mal expliqué et oui ça va juste te faire un truc de merde
apres pour l'auteur oui ça va l'aider mais il comprendra que dalle
La l'auteur, il arrive sur le site il va cliquer 6 fois sur chaque case de la premiere ligne au lieu de cliquer une fois sur la premiere case et de glisser vers la 6 pour faire une ligne complete
Rien indique sur le site que tu peux faire ça

évidemment faut maitriser l'outilhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
mais croit moi que ce générateur peut faire quasi n'importe quelle grille possible, en un rien de tempshttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ba fais la mienne cléhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

ok je vais essayer, mais faudra que tu nome bien tes divs dans le HTML, car ça génère que le CSS heinhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Le 30 juin 2022 à 00:35:39 :

Le 30 juin 2022 à 00:34:53 MadeInPolska a écrit :

Le 30 juin 2022 à 00:34:26 :

Le 30 juin 2022 à 00:33:07 09h02 a écrit :

Le 30 juin 2022 à 00:30:21 :

Le 30 juin 2022 à 00:29:35 Mikwars a écrit :

Le 30 juin 2022 à 00:26:44 :

Le 30 juin 2022 à 00:24:56 Mikwars a écrit :

Le 30 juin 2022 à 00:18:03 :

Le 30 juin 2022 à 00:16:32 Mikwars a écrit :
Je veux bien t'aider s'il faut kheyou mais t'as pas l'air motivé du tout
En soi ton exo est un peu "poussé" vu que ca demande du flexbox et de la grid mais c'est amplement faisable

pour la flexbox et la grid : tu tape sur google "css flexbox generator" ou "css grid generator"https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
et tu genère tes grilles comme tu le souhaite sans te prendre la tête avec le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

AHI
Pire méthode pour ne jamais comprendre ce que tu faishttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png
Ce sont de bons outils hein je dis pas, mais par exemple l'intérêt d'une grid est le responsive. En utilisant un generator, tu pourras jamais prévoir un cas qui fonctionne pour ton template sur tous les écrans.

tu génère 3 codes : 1 pour mobile, 1 pour tablettes, 1 pour desktophttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
meilleur générateur : https://cssgrid-generator.netlify.app/ (déjà utilisé il est good)https://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et puis tu met les média queries et c'est bon, tu t'es pas cassé la tête dans le CSShttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ta méthode fonctionne pour un projet perso.
Pour un projet pro, laisse tomber je voudrais pas devoir faire des modifs sur ton css

t'inquiète pas, j'ai pas refait de dev web depuis le DUT bien heureusementhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

ton site est hyper mal expliqué et oui ça va juste te faire un truc de merde
apres pour l'auteur oui ça va l'aider mais il comprendra que dalle
La l'auteur, il arrive sur le site il va cliquer 6 fois sur chaque case de la premiere ligne au lieu de cliquer une fois sur la premiere case et de glisser vers la 6 pour faire une ligne complete
Rien indique sur le site que tu peux faire ça

évidemment faut maitriser l'outilhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png
mais croit moi que ce générateur peut faire quasi n'importe quelle grille possible, en un rien de tempshttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Ba fais la mienne cléhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

ok je vais essayer, mais faudra que tu nome bien tes divs dans le HTML, car ça génère que le CSS heinhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

C'est a dire ?https://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

https://image.noelshack.com/fichiers/2022/26/4/1656542455-image.pngvoilà la version desktop

le CSS :

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

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

et le HTML :

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

Le 30 juin 2022 à 00:41:33 Benku a écrit :
Qui a supprimé ahi

moi parce que j'avais fait une erreur en étirant une colonne dans le générateur donc générer un code mauvais

ayaa merde fallait paramétrer le nombre de colonnes et lignes dans le générateurhttps://image.noelshack.com/fichiers/2016/26/1467335935-jesus1.png
et pas laisser 5 et 5https://image.noelshack.com/fichiers/2017/10/1488919054-sans-titre-50.jpg

version mobile :https://image.noelshack.com/fichiers/2022/26/4/1656542747-image.png

HTML :

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

CSS :

.parent {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

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

voilà ça c'est bon à 100%

Le 30 juin 2022 à 00:44:58 :
ayaa merde fallait paramétrer le nombre de colonnes et lignes dans le générateurhttps://image.noelshack.com/fichiers/2016/26/1467335935-jesus1.png
et pas laisser 5 et 5https://image.noelshack.com/fichiers/2017/10/1488919054-sans-titre-50.jpg

Je croyais c'était simplehttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Le 30 juin 2022 à 00:47:06 MadeInPolska a écrit :

Le 30 juin 2022 à 00:44:58 :
ayaa merde fallait paramétrer le nombre de colonnes et lignes dans le générateurhttps://image.noelshack.com/fichiers/2016/26/1467335935-jesus1.png
et pas laisser 5 et 5https://image.noelshack.com/fichiers/2017/10/1488919054-sans-titre-50.jpg

Je croyais c'était simplehttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

si si t'inquiete :
VERSION TABLETTE :https://image.noelshack.com/fichiers/2022/26/4/1656542888-image.png

HTML :
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

CSS :
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr repeat(2, 2fr) 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

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

100% bon aussihttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

et je vais refaire la version desktophttps://image.noelshack.com/fichiers/2021/30/2/1627388202-risitouffe2contour.png

VERSION DEKTOP :https://image.noelshack.com/fichiers/2022/26/4/1656543053-image.png

HTML :

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

CSS :

.parent {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 4fr 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

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

100% bon aussi, voilàhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

voilà comment économiser des heures de travailhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

L'op connait les medias queries ?