Nemau crée un p'tit site

[Nemau]

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. (à 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)



(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. °°"

[trotter]

Ca peut être :



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. */
}

[Roi of the Suisse]

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é...

[trotter]

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.

[Nemau]

Oki, merki, je vais regarder tout ça.

[Nemau]

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é.

[Roi of the Suisse]

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

[trotter]

Te noies pas dans le cours.



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.

[Roi of the Suisse]

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; …

[Nemau]

Oki oki.