Div qui se superpose

Fermé
substanciel Messages postés 7 Date d'inscription mardi 6 décembre 2016 Statut Membre Dernière intervention 16 août 2017 - 6 déc. 2016 à 15:56
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 6 déc. 2016 à 17:36
bonjour

J'ai une div qui est faite pour pourvoir se redimensionner en fonction de la taille du navigateur pour le responsive, cela fonctionne bien.

En revanche le texte qui est situé après cette div passe en dessous ce celle ci ...

Comment faire pour que le texte s'affiche après sans que la div passe par dessus (il faut savoir que je n'ai pas la main sur le text (pas moyen d'entourer ce texte d'une div)


je vous invite à regarder mon code sur codepen : http://codepen.io/anon/pen/jVzgqe

Merci beaucoup pour votre aide !

Olivier du site http://www.unforfait.com

3 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 déc. 2016 à 16:14
Salut,

Le problème de superposition vient du fait que la bannière est positionné en absolute, elle sort donc du flux et le texte en dessous ne prend pas en compte la taille de la bannière.

L'idéale serait si possible de ne pas positionner cette bannière en absolute.
Une solution alternative est d'appliquer un margin-top sur le texte de la hauteur de la bannière.

Bonne journée,
0
substanciel Messages postés 7 Date d'inscription mardi 6 décembre 2016 Statut Membre Dernière intervention 16 août 2017
6 déc. 2016 à 16:21
Exact, le problème est que si je met cette div en relative, les éléments quelle contient sorte de la boite en cas de redimensionnement du navigateur en responsive ...
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 déc. 2016 à 17:10
Oui les éléments sortent de la boite si tu définis cette dernière en relative ou static (valeur par défaut) car ces éléments sont tous positionnés via float. Un peu comme pour le positionnement absolu, la hauteur du conteneur (la boite) ne prend pas en compte les éléments positionnés en float par défaut.

Tu peux facilement corriger ceci via plusieurs méthodes, la plus simple étant d'appliquer un overflow: hidden; sur le conteneur.
Plus de détails : https://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
0
substanciel Messages postés 7 Date d'inscription mardi 6 décembre 2016 Statut Membre Dernière intervention 16 août 2017
6 déc. 2016 à 17:19
Merci beaucoup ca marche Nikel !
0
substanciel Messages postés 7 Date d'inscription mardi 6 décembre 2016 Statut Membre Dernière intervention 16 août 2017
6 déc. 2016 à 17:31
Pitet, j'abuse de ta gentillesse mais en mettant le overflow en hidden, il y a ma fleche après la div qui saute ... Regarde : http://codepen.io/anon/pen/jVzgqe

Merci !
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 déc. 2016 à 17:36
Effectivement, la propriété overflow: hidden; va cacher tout ce qui sort du bloc.
Essaye dans ce cas d'utiliser une des deux autres techniques décrites dans le lien alsacreations.
0