[Résolu] Marge haute pour élément sous flottants

Bonjour,

Dans mon codepen, c'est uns structure ancienne, antérieure à la généralisation des flexbox et display grid, supposée marcher partout.

Mon problème : dans la version responsive petit écran je perds la marge haute de <ul id="menuhaut">

Y a-t-il une solution CSS pour conserver cette marge ?

Ou faut-il changer la structure html ?

Merci de votre aide.

Salut,

La marge est toujours présente, ce sont les éléments en float qui fusionnent avec.
Tu peux par exemple :
- Augmenter la marge (il faut un overflow:hidden; sur le parent sinon -> fusion des marges)
- Ne plus utiliser le float pour les élément du haut (au mois un des deux)
- en profiter pour justement passer à du flexbox / grid (ce n'est que du css aussi hein )

Bonjour _laurent,

_laurent a écrit :
La marge est toujours présente, ce sont les éléments en float qui fusionnent avec.

Ben non, justement c'est ce qui m'étonne, la margin-top n'est pas prise en compte, je peux l'agrandir tant que je veux elle disparait en mode petit écran.
Ce n'est pas une fusion c'est une disparition.
Une idée sur ce comportement étrange, peut-être dû à mes block qui passetn en display none ?

En 2022 je peux passer en flexbox.
Je ne suis pas expert de flexbox mais j'ai le petit bouquin de Raphaël, donc ça devrait aller.

Une seule question avant de m'y plonger.
Pour positionner sur la même ligne qui fait la largeur de l'écran trois éléments dont un aligné à gauche et deux alignés à droite, flexbox est-il le meilleur choix ?
Ou Grid ?
En traditionnel cela me semble impossible en display table-cell (d'où mes float).

Salut,

C'est pas une disparition elle est toujours là, elle passe juste au travers de son parent : https://www.alsacreations.com/article/lire/629-fusion-des-marges.html

Le truc marrant c'est que c'est les élements en float qui font que ca passe aussi a travers du body en plus du #header. Si on enlève les float, il n'y a qu'une fusion de marge entre #header et le #menuhaut.

Si tu rajoute overflow:hidden; sur le #header tu vas retrouver ta marge à l'intérieur.

Sinon pour la baston flex vs grid tant que ca reste en 1 seule ligne le flex suffit largement mais le grid marche aussi. Si a un moment tu veux le passer sur 2 lignes le grid sera plus simple a gérer je trouve.

Bonjour _laurent,

Merci pour ton suivi.

_laurent a écrit :
Si tu rajoutes overflow:hidden; sur le #header tu vas retrouver ta marge à l'intérieur.

Exact, j'ai ajouté cette déclaration dans le codepen et cela fonctionne.

J'attaque ce soir une variante, je vous tiens informés.

Bonjour,

J'essaye à présent de placer #menuhaut en position: sticky; top: 0

Comme je sais qu'un bloc en position sticky se cale par rapport à son parent je sors #menuhaut de #header, body est le parent de #menuhaut et de #header.

Comme il n'est pas question de mettre body en overflow: hidden je suis contraint de passer #header en flexbox (ou grid) pour aligner p#tel à gauche et p#ras à droite sans avoir besoin de les faire flotter.

J'en suis là pour l'instant, voir le codepen.

Au fait, position: sticky, j'espère que c'est bien reconnu par les téléphones ?

boteha_2 a écrit :
Comme il n'est pas question de mettre body en overflow: hidden je suis contraint de passer #header en flexbox (ou grid) pour aligner p#tel à gauche et p#ras à droite sans avoir besoin de les faire flotter.

Overflow auto marche également. Le tout est de donner un contexte, tout est marqué dans l'article au milieu des solutions possible (il y en a d'autre que overflow) :

l'article a écrit :
L’utilisation d’un contexte de formatage, via la propriété overflow et les valeurs auto ou hidden, empêche la fusion des marges.

boteha_2 a écrit :
Au fait, position: sticky, j'espère que c'est bien reconnu par les téléphones ?

A toi d'en juger : https://caniuse.com/css-sticky
Modifié par _laurent (20 Jan 2022 - 22:31)

Bonjour _laurent,

Encore merci de ton suivi.

Le support de sticky semble correct.
Détail :
A parent with overflow set to auto will prevent position: sticky from working in Safari

De toutes façons, que se passe-t-il si sticky n'est pas reconnu ?
Je suppose que le bloc défile sans s'arrêter en position fixed, ce n'est pas trop grave et à mon avis ne nécessite pas une couche de JS qui remplacerait le code CSS.

Pour empêcher la fusion des marges dans le codepen j'ai pris l'option du padding: 1px 0 sur le parent (mais je n'aime pas trop)
Mon prochain boulot est d'attaquer la flexbox.
Modifié par boteha_2 (21 Jan 2022 - 20:02)

Bonjour _laurent,

Nouvelle version du codepen avec la première ligne en display flex, ce qui évite les flottants et simplifie le code.

Pour aligner les deux éléments p#trust et p#ras à droite je me contente de déclarer flex: 1 pour le premier élément.

Valides-ru ?

J'aurais pensé pouvoir obtenir le même résultat en déclarant align-self: flex-end pour p#trust et p#ras mais cela ne marche pas (et à vrai dire je ne comprends pas bien align-self).

Bonjour,

Sous le bloc en position sticky j'aimerais avoir un espace opaque blanc de 20px de haut.

Comme j'ai une border je ne peux pas faire cela avec le padding.

Avec margin, la marge est transparente et à ma connaissance il n'y a pas de moyen de changer cette valeur.

J'ai essayé :

ul#menuhaut::after 
{
content: "";
display: block;
background-color: #FFF;
height: 20px
}

Mais bizarrement cela revient à ajouter du padding-bottom, voir le codepen.

Avez-vous une autre idée ?
Modifié par boteha_2 (23 Jan 2022 - 23:17)

boteha_2 a écrit :
Pour aligner les deux éléments p#trust et p#ras à droite je me contente de déclarer flex: 1 pour le premier élément.

Comme tu as un troisieme élément ou i c'est bien de faire comme ça.

boteha_2 a écrit :
J'aurais pensé pouvoir obtenir le même résultat en déclarant align-self: flex-end pour p#trust et p#ras mais cela ne marche pas (et à vrai dire je ne comprends pas bien align-self).

Align-self va agir comme align-items mais pour un seul élément. Il affecte l'alignement sur l'axe perpendiculaire à celui du flex. Dans l'exemple de l'article c'est un flex en colonne. Toi tu as un flex en ligne. tu aurais pu utiliser justify-content: space-between; pôur avoir un expace entre deux bloc mais comme tu en as 3 ca ne fonctionne pas. Ta solution du flex:1; est bonne.

boteha_2 a écrit :

Sous le bloc en position sticky j'aimerais avoir un espace opaque blanc de 20px de haut.
Comme j'ai une border je ne peux pas faire cela avec le padding.

Tu as un border pour les test mais vas-tu le garder comme ça ?
Sinon tu peux passer par un box-shadow.

Bonjour _laurent,

Merci de ton suivi.

_laurent a écrit :
Tu as un border pour les test mais vas-tu le garder comme ça ?

J'ai un border en production.
Je peux toujours ajouter dans le code HTML un div vide avec hauteur voulue en position fixed sous le menu mais je trouve cela assez horrible, un peu comme un spacer (pour ceux qui ont connu cette époque).

Si une solution purement css était possible je préférerais.

::after est peut-être une bonne piste mais avec un autre display que block.
Modifié par boteha_2 (24 Jan 2022 - 12:02)

T'as loupé la dernière phrase ?

_laurent a écrit :
Sinon tu peux passer par un box-shadow.

sinon oui un ::after fera l'affaire, c'est à mi-chemin entre la div vide et le box-shadow a mon sens

Je précise ma réponse paracerque c'est pas clair en me relisant et en plus j'avais compris de travers ce matin je pense...

margin + box-shadow pour masquer je pense que c'est al meilleure solution.

::after va effectivement se rajouter à l'intérieur.

Tu peux sinon faire un wrapper. Mettre ton ul dans une div quoi. Placer cette div en sticky avec le border blanc qui va bien et laisse ton border de décors sur le ul

Bonjour _laurent,

Box-shadow, très bonne idée, je l'ai intégrée avec succès au codepen.

Je me suis permis d'introduire une difficulté supplémentaire.

Le V en haut à droite est un lien d'évitement vers le texte "Lorem etc..."

En version grand écran, cliquer sur le lien produit l'effet attendu.
En version petit écran, le début du texte se trouve caché derrière le menu en position sticky, normal.

Une solution simple et euristique serait de déplacer l'ancre plus haut dans la page mais dans mon exemple cela semble impossible.

Il faudrait pouvoir ajouter de façon dynamique une marge haute à l'élément pointé par le lien d'évitement.

Je ne vois pas trop comment faire avec les CSS.
Peut-être une animation avec la pseudo-class :target, je vais chercher mais si cela te prend 5 minutes de donner le truc merci d'avance.
Modifié par boteha_2 (24 Jan 2022 - 22:11)

C'est le soucis avec le sticky oui...

Tu peux rajouter un padding top de la taille de ton menu sur ton bloc lorem ipsum mais bon selon ton design c'est peut etre pas hyper esthétique

Sinon tu peux aussi refaire un scrollTo en Js

Bonjour _laurent,

Encore merci de ton suivi.

Ajouter un padding c'est impossible pour la mise en page.

Et pourquoi pas une animation ?

@keyframes trg
{
0% {background-color: #FFF; margin-top: 100px}
50% {background-color: #EDF0F1; margin-top: 100px}
100% {background-color: #FFF; margin-top: 100px}
}

p#lorem:target {animation: trg 6s step-start both; background-color: #EDF0F1} 

Cela marche si je remplace margin-top par padding-top, mais je ne veux pas toucher au padding.

Sais-tu pourquoi margin-top ne fonctionne pas, encore une histoire de fusion des marges ?

Voir le codepen.
Modifié par boteha_2 (25 Jan 2022 - 20:00)

Oui le margin ne compte pas dans la position de l'encre. C'est pour ca que j'ai parlé du padding. Sinon je suis tombé complètement par hasard sur les propriétés scroll-padding-top et scroll-margin-top que je ne connaissais pas et qui, je pense, mérite qu'on s'y attarde un peu.

Voici l'article en question : https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

Et un test que j'ai fait : https://codepen.io/undless/pen/yLPLEgB

Ca a l'air franchement concluant je suis cloué... le support à meme l'air plutôt bon : https://caniuse.com/?search=scroll-padding-top

Bonjour _laurent,

Encore merci de ton suivi.

Je vais regarder ce soir ces nouvelles propriétés.

Autrement je pensais à une autre stratégie.

Le clic sur le lien d'évitement repasse le #menuhaut en position: static.
Mais il faudrait ensuite que le scroll le remette en position: sticky.

Cela me semble impossible en CSS (animation ?), sans doute possible en JS.

Bon j'ai hâte de découvrir de soir scroll-padding-top et scroll-margin-top.

Je te tiens informé.

Bonsoir _laurent,

Idéales les propriétés scroll-padding-top et scroll-margin-top !

Comme l'indique ton article c'est le complément indispensable de position: sticky.

scroll-padding-top n'ajoute du padding que quand c'est nécessaire.
Si l'ancre est assez basse dans la page pour que lien d'évitement ne puisse pas la monter en haut aucun padding n'est ajouté.
Très bien conçu.
Et le support semble bon.

J'ai employé une autre propriété assez peu connue.
html {scroll-behavior: smooth}
Cela donne un effet de défilement sympa quand on clique sur un lien d'évitement.

Et j'espère dernier détail il faut appliquer à l'élément en position sticky un z-index positif.
Autrement, j'ai constaté cela sur mon site de test, certains éléments vont selon des règles mystérieuses s'afficher au dessus de l'élément sticky.

Voilà la dernière version du codepen.

J'aurai peut-être d'autres questions, j'attends pour cocher Résolu.