Incompréhension sur le positionnement des contrôles

**zooffy** · 30/03/2011, 12h08

Bonjour à tous

Je suis devant un cas qui me dépasse complètement. Je souhaite faire un formulaire tout simple et je gère le positionnement de mes contrôles avec des <br />. Je sais que ce n'est pas trés "propre" mais j'ai vraiment pas besoins de faire autrement.

La particularité c'est que tout cela se trouve dans un DIV lui même dans un DIV et je ne comrpends pas pour quoi mes contrôles sont décalés à partir d'un moment. L'imbrication des DIV est obligatoire.

Je place le code complet de la page en fin de message, comme ça un simple copier collé dans une page vierge vous permettra de voir le résulat.

En gros, tout est dans le cadre jusqu'au TexteArea qui lui sort du cadre et va se mettre à gauche, assez loin. Je ne comprends pas pourquoi.
Si j'enlève le <br /> entre le texte le TexteArea, le bouton reste en dehors du cadre, sur la gauche et là, je ne sais plus quoi faire, je n'a plus rien à enlever.

Pouvez vous m'aider ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title></title>
<style type="text/css">
.FondOpaqueGene {
    background-image:url('/app_Themes/fond-opaque.png');
    background-repeat:repeat;
    position:absolute;
    top:0px; 
    bottom:0px; 
    left:0px;
    right:0px;
}
.FondOpaqueContact
{
}
.DivDevantGene {
    position:absolute;
    top:50%;
    left:50%;
    height:400px;
    width:500px;
    margin-top:-200px;
    margin-left:-250px;
}
.DivDevantContact
{
    background-color:#f8e57e;
    color:Gray;
    border:solid 5px Gray;
}
</style>
</head>
<body leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div id="ctl00_cphCentral_FicheBienSite1001_divFondContact" style="display:block;" class="FondOpaqueGene FondOpaqueContact">
    <div id="divDevantContact" class="DivDevantGene DivDevantContact">
        Contactez le vendeur.<br /><br />
        Votre nom : <input name="ctl00$cphCentral$FicheBienSite1001$txtNomContact" type="text" maxlength="100" id="ctl00_cphCentral_FicheBienSite1001_txtNomContact" /><br />
        Votre téléphone : <input name="ctl00$cphCentral$FicheBienSite1001$txtTelephoneContact" type="text" maxlength="15" id="ctl00_cphCentral_FicheBienSite1001_txtTelephoneContact" /><br />
        Votre message : <br />
        <textarea name="ctl00$cphCentral$FicheBienSite1001$txtMessageContact" rows="8" cols="20" id="ctl00_cphCentral_FicheBienSite1001_txtMessageContact"></textarea>
        <input type="submit" name="ctl00$cphCentral$FicheBienSite1001$btnEnvoiContact" value="Envoyer votre Message" id="ctl00_cphCentral_FicheBienSite1001_btnEnvoiContact" />
    </div>
</div>
</body>
</html>

**insane1** · 30/03/2011, 14h28

Bonjour,
Je viens de tester ton code sous IE et Firefox, chez moi tout est bien positionné dans le cadre. J'ai peux être mal compris ton problème ?

**zooffy** · 30/03/2011, 16h30

Non, visiblement, tu n'as pas mal compris le problème.

J'ai pratiqué des test sur IE, FF et CHROME et je dois dire qu'il n'y a que IE qui me pose de soucis.

Mais en même temps si tu n'as pas de souci sous IE, c'est qu'il y a un autre souci alors.
Ce n'est pas la première fois qu'on me dit qu'on a pas la même chose sous IE avec moi.

Pourrais je te demander ta version précise, pour comparer ?
La mienne est 8.0.7600.16385 et normalement à jour, j'ai mon Windows Update en automatique.

**NoSmoking** · 30/03/2011, 19h22

Bonjour,
problème de flux et/ou d'héritage sous EXPLORER (même sous V7.0.6)
la TEXTAREA hérite du margin-left : 250px; de la DIV contenante visiblement les <br /> font le garbage mais au départ il semblerait que le centrage avec les marges négatives soit en cause, ce qui arrive souvent, des avantages mais des inconvénients.

Pour régler ton soucis, plusieurs pistes,
- rétablir le margin-left en mettant dans le STYLE

Code css :

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

1
2
3
textarea {
  margin-left : 250px;
}

- utilisation des balises P au lieu de BR
- mettre les contrôles dans des balises LABEL
et surement encore bien d'autre...comme encapsuler dans une autre DIV, changer le mode de centrage...

Au passage ton

Code html :

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

<body leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0">

fait tâche, autant le mettre dans le STYLE

**zooffy** · 31/03/2011, 09h26

Merci beaucoup pour tes éclaircissements.

L'utilisation des balise <p> à suffit à rétablir le bon ordre des choses.
Pour le reste, je ne peux pas le mettre en place.
Ce qui n'est pas flagrant dans le bout de code que j'a mis, c'est que, à l'origine, ceci est un code ASP.NET, donc je ne choisi pas vraiment dans quel balise il va me mettre un contrôle.
Le TExteArear, par exemple, c'est pas moi qui décide, moi je met un <asp:TExteBox et c'estleserveur qui détecte ou pas le multilign et donc mets un TExteArae ou un Input.

**NoSmoking** · 31/03/2011, 19h09

en mettant comme style

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.DivDevantGene {
/*  position:absolute;  /* DEVIENT RELATIVE */
  position : relative;
  top : 50%;
/*  left:50%;           /* OUT */
  height : 400px;
  width : 500px;
  margin-top : -200px;
/*  margin-left:-250px; /* OUT */
  margin-left : auto;   /* AJOUT */
  margin-right : auto;  /* AJOUT */
}

cela baigne aussi sans rien changer, c'est donc bien un problème de marges négatives.

**zooffy** · 01/04/2011, 08h19

Ok, merci pour tout.

Incompréhension sur le positionnement des contrôles

HTML

Discussions similaires

Partager

Partager