Nemau crée un p'tit site

Pour toutes vos créations diverses
Répondre
Avatar du membre
Nemau
Administrateur du site
Messages : 768
Enregistré le : 28 avr. 2019, 14:40

Nemau crée un p'tit site

Message par Nemau » 19 oct. 2021, 22:48

Je souhaite créer un site très simple pour partager ma collection d'images sur Zelda. Le site comprendra une page pour le menu principal et différentes pages pour les différentes catégories.

J'ai un très faible niveau en programmation de site, j'avais suivi en entier le cours sur le xhtml et le css du Site du Zéro, mais c'est tout et c'était il y a longtemps. Du coup je vise une programmation très simple, et j'aurai quand même besoin de votre aide. :x3: (à noter qu'en bon maniaque j'aimerais des pages valides W3C, enfn si possible)

Pour commencer j'aimerais faire les pages des différentes catégories, pour la page principale je verrai ça dans un second temps.

Voici une maquette d'une page de catégorie, voir en dessous pour les divers remarques à son sujet :

(ouvrez l'image dans un nouvel onglet si le forum l'écrase)

Image

(version sans indications : https://zupimages.net/up/21/42/cobp.png)

- Les miniatures des images sont faites manuellement et rangées dans un dossier.
- L'image de titre ("Koholint") et les miniatures sont entourés d'un cadre d'une même couleur unie et de deux pixels de large. J'aimerais ajouter ce cadre via le CSS, mais au pire je pourrai le rajouter directement sur les images elles-mêmes.
- Tout est écrit en Arial gras taille 8.
- En blanc ce sont les liens, par exemple un lien vers le site de l'auteur d'une image (quand j'ignore l'auteur je ne mettrai rien).
- Pour l'écart vertical entre deux lignes d'images : le code exigera peut-être d'indiquer la valeur entre la ligne de noms des auteurs et la ligne d'images suivante, mais ce n'est évidemment pas un souci.


Je vais essayer de commencer tout seul, en cherchant sur le net, mais si vous êtes motivés j'accepte dès à présent de l'aide. °°"

Avatar du membre
trotter
Messages : 1580
Enregistré le : 09 juil. 2019, 19:38

Re: Nemau crée un p'tit site

Message par trotter » 20 oct. 2021, 00:05

Ca peut être :
Image


https://jsfiddle.net/9pkcuyxv/

Code : Tout sélectionner

<div id="maBelleGrille">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Code : Tout sélectionner

/** Concernant l'élément qui s'appelle maBelleGrille.... */
#maBelleGrille {
  display: grid; /** ...sa façon se s'afficher est en grid */
  row-gap: 30px; /** ...avec 30px d'écart entre les lignes */
  column-gap: 10px; /** ...et 10px entre les colonnes */
  grid-template-columns: repeat(auto-fill, 200px); /** ...et toutes les colonnes sont à 200px et se démerdent pour remplir */
}

/** Concernant chacun des enfants de maBelleGrille... */
#maBelleGrille>* { 
  background-color: green; /** ...ils auront un fond vert */
  height: 200px; /** ...et 200px de hauteur. */
}


Avatar du membre
Roi of the Suisse
Messages : 2003
Enregistré le : 28 avr. 2019, 23:38
Contact :

Re: Nemau crée un p'tit site

Message par Roi of the Suisse » 20 oct. 2021, 09:22

Je n'aurais pas pensé à utiliser display: grid comme trottaire, mais en effet c'est la manière moderne de faire. J'aurais archaïquement mis un margin-left: 8px sur chaque petit carré...

:popcorn:

Avatar du membre
trotter
Messages : 1580
Enregistré le : 09 juil. 2019, 19:38

Re: Nemau crée un p'tit site

Message par trotter » 20 oct. 2021, 10:37

Ah oui c'est peut être plus simple.


Le plus fun ça sera le texte qui dépasse sous chaque image mais ne doit pas impacter la marge.

Moi je le mettrai dans le carré et le décalerait vers le bas au point dele faire sortir je pense.

Avatar du membre
Nemau
Administrateur du site
Messages : 768
Enregistré le : 28 avr. 2019, 14:40

Re: Nemau crée un p'tit site

Message par Nemau » 20 oct. 2021, 15:27

Oki, merki, je vais regarder tout ça.

Avatar du membre
Nemau
Administrateur du site
Messages : 768
Enregistré le : 28 avr. 2019, 14:40

Re: Nemau crée un p'tit site

Message par Nemau » 28 oct. 2021, 21:48

Bon du coup je me fais tout le cours HTML 5 et CSS 3 d'Openclassroom, c'est pas la solution la plus rapide mais y en a pas pour si longtemps et comme ça je pourrai faire un truc bien, et sans vous saouler avec des questions toutes les cinq minutes. ^^

Je ne pars pas de 0 car j'avais déjà fait ce cours, en entier. Mais c'était il y a 15 ans, du coup j'ai oublié pas mal de trucs, sans compter que ces deux langages ont évolué.

Avatar du membre
Roi of the Suisse
Messages : 2003
Enregistré le : 28 avr. 2019, 23:38
Contact :

Re: Nemau crée un p'tit site

Message par Roi of the Suisse » 29 oct. 2021, 09:15

C'est cool.
Tu vas peut-être devenir un pro du développement web et réparer les bugs d'Oniro :king:

Avatar du membre
trotter
Messages : 1580
Enregistré le : 09 juil. 2019, 19:38

Re: Nemau crée un p'tit site

Message par trotter » 07 nov. 2021, 19:04

Te noies pas dans le cours.

Image

Ya énormément de truc possibles, et des trucs qui t'intéressent pas forcément.

Une fois que t'as les bases (ça devrait pas prendre plus d'une journée : c'est quoi une balise html ? à quoi sert le css ?) cherche ce dont tu as spécifiquement besoin.

Avatar du membre
Roi of the Suisse
Messages : 2003
Enregistré le : 28 avr. 2019, 23:38
Contact :

Re: Nemau crée un p'tit site

Message par Roi of the Suisse » 07 nov. 2021, 23:32

Oué quand tu sais pas faire un truc tu tapes ta question en anglais dans Google et tu cliques sur le résultat StackOverflow.

90% d’un site c’est des width:75%; des margin-bottom:16px; et autres float:right; …
:popcorn:

Avatar du membre
Nemau
Administrateur du site
Messages : 768
Enregistré le : 28 avr. 2019, 14:40

Re: Nemau crée un p'tit site

Message par Nemau » 12 nov. 2021, 17:11

Oki oki.

Répondre