Discussion :

[Abac_Angelique]

Bonjour,

Je debute dans le developpement Web et j'aimerais savoir s'il existe une solution pour pouvoir placer les composants dans Visual studio sur un page ASP comme on le ferait avec une application windows pour avoir un "what you see what you get".

Parce que la je galere à placer mes edit avec des espaces entre elles et je suis pas sur qu'avec tous les navigateurs le resultat soi le meme.


Merci

[dinbougre]

Bah via la vue Design du VS

[LefortLudovic]

Bonjour,

En dévelopement web tu es en FlowLayout c'est à dire que tu places tes contrôles comme dans un traitement de texte (de haut en bas et de gauche à droite).

Le meilleur moyen pour conserver un layout compatible avec un maximum de navigateur et de placer tes controles dans des tableau.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<Table>
  <tr>
    <td>
      [LABEL]
    </td>
    <td>
      [TEXTBOX]
    </td>
  </tr>
</table>

Ludovic,

[Abac_Angelique]

Merci pour vos reponses

C'est bien ce que je fesais je met un tableau pour mes panels et dans chaque panel un tableau pour mes composants mais je trouvais ca lourd donc je me demandais s'il n'y avais pas quelque chose que je ne connaissais pas.

[Philippe Vialatte]

Petit ajout "maison", si tu veux que ca garde le formatage sur les differents navigateurs, tu as en plus interet a ajouter des images transparentes dans tes td, de facon a ce que d'un navigateur a l'autre, il ne te squeeze pas les td selon son envie...

Un p'tit exemple "made in prod"

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
49
50
 
 
 <table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td>
      <asp:Image ID="Image66" runat="server" SkinID="Dot" Width="10" Height="7" /></td>
    <td>
      <asp:Image ID="Image107" runat="server" SkinID="Dot" Width="50" Height="7" /></td>
    <td>
      <asp:Image ID="Image108" runat="server" SkinID="Dot" Width="10" Height="7" /></td>
    <td>
      <asp:Image ID="Image109" runat="server" SkinID="Dot" Width="70" Height="7" /></td>
    <td>
      <asp:Image ID="Image172" runat="server" SkinID="Dot" Width="10" Height="7" /></td>
    <td>
      <asp:Image ID="Image173" runat="server" SkinID="Dot" Width="10" Height="7" /></td>
    <td>
      <asp:Image ID="Image174" runat="server" SkinID="Dot" Width="70" Height="7" /></td>
    <td>
      <asp:Image ID="Image3" runat="server" SkinID="Dot" Width="10" Height="7" /></td>
  </tr>
  <tr>
    <td>
    </td>
    <td align="right">
      <asp:Label ID="Lbl_TypeTree" runat="server" meta:resourceKey="Lbl_TypeTree"> </asp:Label></td>
    <td>
      <asp:Image ID="Image27" runat="server" SkinID="Dot" Width="5" />
    </td>
    <td>
      <asp:DropDownList ID="Drop_Type" runat="server" CssClass="Text">
      </asp:DropDownList>
    </td>
    <td>
    </td>
    <td align="right">
      <asp:CheckBox ID="Chk_Hierarchic" runat="server" Checked="true" />
    </td>
    <td>
      <asp:Label ID="lbl_Hierarchic" meta:resourcekey="Lbl_Tree" runat="server"></asp:Label>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td colspan="9">
      <asp:Image ID="Image170" runat="server" SkinID="Dot" Height="7" /></td>
  </tr>
.........
</table>

Apres...on aime ou on aime pas , mais tu peux developper des interfaces qui vont a priori rester les memes quel aue soit le navigateur

[LefortLudovic]

Je ne suis pas trop pour les images transparentes

Si tu veux t'assurer que la taille des colonnes reste identique d'un navigateur tu peux forcer leurs largeurs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<Table>
  <tr>
    <td width="100">
      [LABEL]
    </td>
    <td width="100">
      [TEXTBOX]
    </td>
  </tr>
</table>

100px dans IE6 = 100px dans firefox = 100px dans IE7

Ludovic,