[Résolu] Float fait apparaître un formulaire

Bonjour à tous et toutes,

J'ai rajouté un formulaire de contact sur une page html en mettant la marge du haut à -6000px pour ne le faire apparaître que lorsqu'il y a besoin. Les pages sont générées par php. Quelquefois, elles comportent des images avec un commentaire.
PHP

echo '<span class="diskwel"><img src='.$orin.' border="0" /><p>'.$imaj[islinenn].'</p></span>'."\n";

CSS

.diskwel  {
float: left;
margin-right: 30px;
}
.diskwel p {
margin: 0px 0px 0px 0px;
text-align: center;
font-size: 0.8rem;
opacity:.55;
}

Et lorsqu'il y a une image, mon formulaire apparaît en-dessous !!??!! Du moins une partie : il n'y a pas les labels. Le pire c'est qu'en utilisant les outils de chrome ou de firefox, mon formulaire a toujours son margin-top à 6000px.
Après moult tâtonnements, je me suis rendu compte que virer float: left; de la feuille de style suffisait à remettre les choses dans l'ordre, sauf que les images s'affichent les unes sous les autres évidemment...
Quelqu'un aurait une explication ?
Modifié par Titen (11 Jun 2021 - 14:36)

Salut!

Est-ce qu'il ne serait pas plus simple d'enlever ton histoire de margin, mettre un "display: none;" et de switcher sur "display: inline-block;" ou autre selon ton cas, au besoin?
En ajoutant une classe supplémentaire, par exemple.

Si bien sûr, mais...
1 - j'aimerais quand même bien comprendre, d'autant que....
2 - j'ai beau mettre un display:none; dans ma feuille de style, il n'est pas pris en compte : les outils de débugage me montre ma déclaration rayée et au-dessus, un element.style {display:block;} qui sort je ne sais d'où !

bonjour,

sans ton code pour se faire une idée de ce qu'il se passe réellement, la seule interrogation qui me vient à propos de float c'est: As tu pris en compte les effets de bords de float avec clear ou le contexte de formatage des parents ?

cdt
Modifié par gcyrillus (11 Jun 2021 - 18:47)

Bonjour !
Le projet est visible à l'adresse geriaoueg.free.fr/hezoug.php. C'est la version avec un display:none; (qui ne fonctionne pas !).

Ici la version avec une margin-top:-600px : geriaoueg.free.fr/hezoug2.php. Avec cette version, taper "abad" là où il y a marqué arglask. Ça marche sans problème. Puis taper "abati". Il y a des images et le formulaire pointe son nez...

a écrit :
As tu pris en compte les effets de bords de float avec clear ou le contexte de formatage des parents ?

Hé non, car je ne vois pas du tout ce que c'est ... mais ça m'intéresse bougrement d'autant que l'image ou le groupe d'image est suivi d'un hr stylé comme ça :

hr {clear: both; visibility: hidden;}

Modifié par Titen (11 Jun 2021 - 20:33)

Bon bon bon... J'ai résolu le problème en utilisant visibility: hidenn/visible; au lieu de display. J'ai pu le faire parce que le formulaire est en bas de page, sans rien dessous.
N'empêche qu'il va falloir que je me plonge dans ces histoires de contexte de formatage sérieusement : j'ai essayé des display: flex et le débugage m'indiquait toujours display:block...

Merci à tous de votre attention.