PB alignement menu et contenu de mon site

Bonjour,

J'ai un petit problème, sur mon site, il y a un menu vertical à côté d'un contener, or, ce menu n'est pas correctement aligné, je souhaiterai qu'il soit au même niveau que le contener, j'ai essayé plein de choses mais j'arrive à rien donc je me tourne vers votre expertise.
Mon site :
http://boischautsudradio.fr

Que dois-je faire ?
Merci d'avance pour votre aide.

Salut,

Je ne sais pas trop par ou commencer...

Bon pour ton soucis d'alignement déjà tu as un vertical-align: 50%; mais j'imagine que tu sais pas trop pouvoir. Aligner les bloc par le haut avec un vertical-align: top; parrait etre une bonne piste.

Sur ta colonne tu as également un margin tout le tour, il faudrait l'enlever au top.

Ensuite ca se complique. Il reste un espace au dessus de ton menu. Et en creusant c'est parceque ton premier élément "Vie associative" est positionné a top 15% et non 0. De là, on se demande pourquoi tout les menu sont en absolute. Et a quoi sert le <svg> vide (et on a peur que le SVG ne soit là que pour donner une taille alors que tout les menus sont en absolute).

Il n'y a pas besoin d'absolute ici. Ton menu est beaucoup trop compliqué pour ce qu'il est...

<div class="square col-25">
  <svg xmlns="" viewBox="0 0 1 1"></svg>
  <div class="assos">
    <h5><a href="">Vie associative</a></h5>
  </div>
  <div class="culture">
    <h5><a href="">Culture</a></h5>
  </div>
  <div class="circuits-courts">
    <h5><a href="">Circuits courts</a></h5>
  </div>
  <div class="loupe">
    <h5><a href="">Loupe sur un entrepreneur</a></h5>
  </div>
  <div class="politique">
    <h5><a href="">Vie politique &amp; économique</a></h5>
  </div>
  <div class="sport">
    <h5><a href="">Rubrique sportive</a></h5>
  </div>
</div>

alors que :

<div class="col-25">
  <a href="">Vie associative</a>
  <a href="">Culture</a>
  <a href="">Circuits courts</a>
  <a href="">Loupe sur un entrepreneur</a>
  <a href="">Vie politique &amp; économique</a>
  <a href="">Rubrique sportive</a>
</div>

Suffit largement.

Et niveau CSS pareil on peut en dégager la moitié (surtout l'absolute).


Ou alors j'ai loupé un truc pour l'utilisation du absolute..
Modifié par _laurent (23 Mar 2022 - 17:03)

J'ai essayé de virer l'absolute dans le CSS mais ça fout le basard, sinon, j'ai didouillé comme j'ai pu et c'est nettement mieux.
J'ai essayé aussi de simplifier le menu mais c'est pareil, je ne suis pas arrivé à un résultat probant.
Disons que pour l'instant, ce que j'ai me va. C'est codé avec les pieds mais ça marche.

chabgyver2 a écrit :
J'ai essayé de virer l'absolute dans le CSS mais ça fout le basard, sinon, j'ai didouillé comme j'ai pu et c'est nettement mieux.
J'ai essayé aussi de simplifier le menu mais c'est pareil, je ne suis pas arrivé à un résultat probant.
Disons que pour l'instant, ce que j'ai me va. C'est codé avec les pieds mais ça marche.

C'est justement parce qu'il y a trop de chose que tu n'arrive pas a ce que tu veux ou que tu galère a aligner. En simplifiant tu y gagneras en clarté et en maintenance du coup.

https://jsfiddle.net/undless/Lu0gxhvw/


Bonne soirée