Discussion :

[mat2424]

Bonjour !

J'utilises des boites flottante couplée avec du php pour afficher des vignettes de produits. (plusieurs vignette les une a coté des autres.)

les vignettes sont générées en boucle par php en fonction d'une base de donnée,
Jusque la pas de soucis tout fonctionne
Lorsque j'integre un nom ou une image pas de soucis
mais dès que je rajoute un formulaire tout se decale , les vignettes se mettent en cascade et le contenu du formulaire sort de la boite ? !

voila le css des flottantes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
p {margin: 0 0 10px 0;}
 
.flottante {
  background-color: #00ff00;
  border: 2px dotted #ffff00;
  margin: 2px;
  float: left;
  width: 120px;
  height:200px;
  text-align: center;
  overflow : hidden;
}

voila le code d'affichage

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
echo '<p class="flottante">
'.$p_n.'<br>
<img src='.$img.'>
<FORM ACTION="'.$_SERVER['PHP_SELF'].'" METHOD="POST" TARGET="_top">
<input type="hidden" name="id_p" value="'.$id_p.'">
<input type="hidden" name="qte" value="1">
<input type="hidden" name="name" value="KAPORAL CAMPH">
<input type="hidden" name="taille" value=" S">
<input type="hidden" name="couleur" value=" KAKI">
<input type="hidden" name="prix" value="39">
<input type="hidden" name="choix" value="'.$choix.'">
<input type="image" SRC="img/b_ajout.jpg" border=0>
</FORM>
</p>

En piece jointe l'apperçu sans formulaire
et l'aperçu decalé avec le formulaire !

merci !

[trotters213]

Tu pourrais nous montrer le code HTML généré plutôt ?

[mat2424]

Bonjour !

en fait j'ai modifié la balise
p
et je l'ai remplacé par un div ...

ça fonctionne ... mais je ne comprends pas pourquoi
ça ne fonctionnait pas correctement .
je vais faire une modif pour remettre la balise d'origine .
histoire d'essayer de comprendre !!!

[Tober]

La balise <p> est faite pour mettre en page du texte, et peut être même que des élements qui ne sont pas de type block, alors que <div> est le conteneur par défaut !
en gros on peut dire que <p> dérive de <div>.
Donc le fait d'utiliser des balises pour faire de la mise en page qui ne sont pas fait pour ça, on finit par avoir des problèmes
(exemple des tables pour mettre en forme une page html entiere)

[mat2424]

Ok !!
c'est clair ...
j'ai po pris la bonne balise !!!
je m'étais inspiré d'un tuto donc du coup comme un brave petit élève j'ai suivi a la lettre ... .

merci pour les explications !!!!