Bonjour,
Avant d'abandonner l'idée, j'en viens à vos lumières.
Voici une nav (20vh ) sur un site one page ( full screen, le site fait 100 vh sur tout écran )
En litérale :
Une nav avec hauteur 20vh
Qui contient une ul à heigth 100% et un background image ( la chaine de rond blanc ) que je centre et/ou positionne sur hlargeur et hauteur
Cette ul contient des li qui doivent se positionner au centre des rond blanc du background
Voici une synthèse du code
<nav>
<ul>
<li><a>No contacts</a></li>
<li><a>Nos réalistions</a></i>
<li><a>Grilles tarifaires</a></li>
<ul>
</nav>
CSS ultra schématique :
nav { height : 20vh }
ul {
background:url('rond_blanc.png') no-repeat 50% 25%;
height: 100%
}
li{
position:relative;
display:inline-block;
left:25%; /* positionnement des li */
top:13% /*positionnement des li */
}
Quand je réduis la hauteur de l'écran. La taille de la nav réduit. Logique.
Mon but et mon problème => que les li soit toujours caller au centre du rond du background.
Si j'utilise un positionnement top sur les deux élements en métrique fixes ( px ). Tout est ok. Sauf que le fixe, c'est gentil mais il faudrait que j'utilsie des mediaqueries tout les 40px pour garder un ensemble harmonieux. On parle responsive, donc regardons coté %.
Monc ode utilise ici des % sur les positionnement top du background et des li. . Dans l'idée, les deux éléments sont frère avec un parent ul.
Cool ? et bin non, car avec la réduction de la hauteur de la lu, la distance entre li et background se rétrécie ( logique )...et graphiquement, en moisn de 50px de changement de résolution, c'est devenu moche, et l'écrit n'est plus au centre du rond.
Je n'ai trouvé aucun lien mathématique ( en même temps c'est pas mon fort ) pour contrer cette réduction d'écart avec calc()
Il y a ptêtre une logique simple mais à force de faire des test avec toute sorte de métrique, des before, des afters...je vois flous.
Dpnc, génies du css, si vous me trouvé comment faire pour caler graphiquement deux éléements frères de manière fixe, lors de la réductionen hauteur du parent ( ici une ul )., je vous serez super reconnaissant.
Merci par avançe
Edit : pour info, j'ai actuellement choisis la répartition un peu lourde du partage en media queries... 6 division de hauteur ..:D
Zigo Zigomario