Création d'un menu verticale en HTML et positionement image

Bonjour à toutes et à tous,

J'ai du faire un site avec un design prédéfini par notre université (le design est moche mais j'ai pas le droit de le changer donc bon ).

J'aurais besoin d'aide sur plusieurs points.

Voici l'url du site : https://website.yj.fr
Lorsqu'on scroll vers le bas le menu verticale laisse un blanc entre le menu et le header. Comment puis-je résoudre ce problème (j'ai beau chercher sur internet mais je n'arrive vraiment pas à trouver).

De deux, j'aurais besoin que mes images soit plus espacé les une des autres et que la dernière image ce retrouve en bas (j'ai pensé à faire des div à chaque fois mais ca ferais moche dans le code source... même chose pour le &nsap).

Merci de bien vouloir m'aider.

Ps: Je suis débutant en css donc faut pas trop m'en vouloir si vous voyez des fautes ou des bouts de codes qui servent à rien dans le style.css

Bonjour,

Pour le blanc entre le menu et le header :
- Mettre une height: 100% sur la balise html et body, pour travailler sur une bonne base
- Faire fonctionner le positionnement sticky du header en rajoutant top: 0; actuellement le sticky ne fonctionne pas vu que aucune coordonnée n'est précisée
- Rajouter également un z-index: 1; sur le header, ce qui permettra de mettre le header au-dessus du contenu

Pour les espacements des images :
- Mettre du margin sur tes img, exemple :

img {
    margin: 0 15px;
}

Pour mettre la dernière image en bas :

img:last-child {
    display: block;
}

Modifié par Friesstyle (07 Feb 2020 - 09:43)

Bonjour,

si tu veux faire fonctionner le header sticky, Friesstyle a tout expliqué. Actuellement dans ta page, c'est l'équivalent de position: absolute mais jamais fixed et… est-ce que tu as vraiment besoin de ça ? Je te déconseille niveau design de faire cela, ne serait-ce que sur mobile où ça occupe toute la surface affichable (oups).

Le contenu flottant à droite fait qu'il sort du flux : pas souhaitable.
Vu que tu dis débuter, un conseil => position: absolute; (et équivalent) et float = source de problème pour de la mise en page.

Pour la colonne de gauche qui ne fait pas toute la hauteur (en desktop largeur 1280px par exemple parce qu'en 1920px c'est bon (pour l'instant avec ce contenu)) : height: 100% est un bon palliatif mais je partirais plutôt sur l'utilisation de CSS3 Grid Layout et un des templates de https://schnaps.it (j'ai pas vu la toute dernière version mais Raphaël me dit que c'est bien à base de display: grid;).
Par défaut, les grid items font toute la hauteur de l'emplacement qu'ils occupent et c'est tellement plus simple d'apprendre les bases de Grid Layout que de déboguer pourquoi height: 100% s'applique pas sur un descendant.

EDIT: astuce de débogage. J'ai utilisé les Devtools de Firefox (F12) et survolé dans l'inspecteur des éléments clés comme body ou ton contenu fond blanc ou un élément dans ce contenu.
Là je remarque des choses "bizarres" comme "tiens body est bien moins haut que le contenu " (parce qu'un enfant est flottant et sort du flux => la suite sera plus compliquée) ou "tiens ça fait 0 de hauteur alors qu'il y a bien du contenu", etc
Si tu te mets à Grid (et Flexbox), les Devtools de Firefox permettent de surligner et donc de VOIR ce que tu fais, c'est hachement supérieur à Chrome ou Edgium sur ces points-là (pour JS ou box-shadow par contre c'est Chrome, pour 95% de nos besoins c'est équivalent )

EDIT2: l'astuce n°1 avant toute résolution de bug est d'avoir un code HTML et CSS valide https://validator.w3.org/ et http://jigsaw.w3.org/css-validator/ (aucun rapport direct avec le sujet mais ça fait plus de 15 ans que ce conseil est valable )
Modifié par Felipe (07 Feb 2020 - 09:59)