Problème positionnement footer version mobile

Fermé
dilakk Messages postés 9 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 26 juillet 2015 - 25 juil. 2015 à 20:23
dilakk Messages postés 9 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 26 juillet 2015 - 26 juil. 2015 à 12:51
Bonjour,

J'ai un problème sur la version mobile de mon site. Par exemple sur cette page http://opihunter.com/registration.php le footer remonte et chevauche mes blocs lorsqu'on clique sur une zone de texte.

J'ai cherché partout sans résultat.

voici le code de mon footer:

 


footer
{
width: 100%;
height:60px;
border: 1px black inset;
background-color: rgb(249, 255, 250) ;
position: absolute;
bottom:0;
}

A voir également:

1 réponse

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
25 juil. 2015 à 20:40
'lut, c'est la faute à ton
.registration_form
que tu as mis en
position: absolute
, ça le fait sortir de la mise en page standard de la page et tu te vois obligé de créer artificiellement l'occupation horizontale avec la règle
min-height: 100%;
de ton
#container
, ce qui fait que l'emplacement de ton footer n'est pas bon et repasse certains champs.
Il faut donc ré-inclure ton formulaire dans le flux de la page en le retirant de son positionnement absolu ainsi que ses coordonnées manuelles, en le mettant en
display: inline-block
et attribuant
text-align: center;
à son parent,
#body
pour le centrer.
2
dilakk Messages postés 9 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 26 juillet 2015
25 juil. 2015 à 22:21
Salut,

Merci pour ta réponse. Mais je n'obtiens pas le résultat souhaité. Le "registration_form" se retrouve dans le coin en haut à droite
0
ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
25 juil. 2015 à 22:49
Ma démarche: (ça marche chez moi si j'utilise l'inspecteur d'objet de FF et modifie les styles):
.registration_form
/* À enlever de ta feuille de style générale ET responsive! */
- position: absolute;
- top: 5%;
- right: 33%;
+ display: inline-block;
#body
+ text-align: center;
Soit dit en passant le style et l'organisation des balises HTML actuel est... heu... mauvaise.
0
dilakk Messages postés 9 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 26 juillet 2015
25 juil. 2015 à 23:49
Ca marche ! Merci !

Que me conseille tu pour mes balises HTML ?
0
ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225 > dilakk Messages postés 9 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 26 juillet 2015
26 juil. 2015 à 00:47
La redondance <body>/élément nommé "body", le container qui est peut-être en trop...
0
dilakk Messages postés 9 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 26 juillet 2015
26 juil. 2015 à 12:51
Okok je vois à peu près. Merci
0