Usage de pannel, div ou tables

Version imprimable

07/01/2010, 11h23
olibara

Usage de pannel, div ou tables

Bonjour

Venant de WinForm et C# je continue mon apprentissage en design d'application WEB ASP

J'ai quelques interrogations sur l'usage des Pannel, DIV, et tables

Le but etant de segmenter le mieux possible mon formulaire

Si j'ai bien compris, il faut eviter les tables et preferer les DIV
Mais quelle est la difference entre un DIV et un Pannel outre que le pannel me semble spécifique a ASP ??

Ci joint un exemple de ma form en WinForm et son equivalent WEB

Je me demande si je dois essayer de reproduire le panneau de gauche (qui est actuellement un tableau dans un div) en utilisant des DIV, des Pannel ou une table ?

Merci de vos conseils ;)

N.B. : J'espere qu'un modo voyant mon post ne va pas le deplacer en HTML en disant que c'est du design et que ca n'a rien a voir avec ASP pour qu'un autre modo me le renvoie en ASP en disant que ASP ce n'est pas de l' HTML (saveur de vécu 8O :aie:)
07/01/2010, 11h48
Larger

Bonjour,

Une table, c'est une table. Si tu construis ta page avec ça, c'est déjà sémantiquement faux (sauf si ta page est effectivement entièrement un tableau). Même si tu peux arriver au même résultat, il est fortement conseillé d'utiliser les div. Les div n'ont pas vraiment de sens si ce n'est qu'elles servent à créer des "ensembles". Peut-être que des gens ne seront pas d'accord avec moi, mais je trouve que des divs sont plus facilement manipulables avec le css que des tables (sauf dans le cas où on on veut construire un tableau, évidemment).

Le panel crée une div par défaut. L'avantage de ce contrôle, c'est qu'il contient des options très utiles que tu peux manipuler facilement en behind. C'est donc un peu la même chose qu'une div, mais en plus maniable.

Donc dans ton cas, je verrais bien deux div verticales. La première séparée en trois parties horizontales et la deuxième contenant ton bouton. Après c'est un peu comme chacun le "sent".
07/01/2010, 12h29
calagan99

Je suis assez d'accord avec Larger, même si je suis plus nuancé sur l'usage des Tables.

Un Panel est un rendu en tant que div au moment de la génération. Son avantage est que tu y accèdes en code behind et qu'il possède pas mal de propriétés bien utiles.

Pour ma part, sur les miniatures en PJ j'utiliserai des Panels, par habitude.
07/01/2010, 12h37
olibara

Merci pour vos reponses

Ce qui me preoccupe le plus pour le moment c'est la bonne maniere de convertir la premiere DIV (le panneau de gauche) de mon webform pour qu'elle corresponde au premier GroupBox ("Niet toegelaten Periode") de ma WinForm

Actuellement cette DIV contient un tableau mais comme de toute facon je dois la chambouler, je suis partant pour la meilleure formule !

Merci de votre aide
07/01/2010, 12h40
Larger

Panel ou div, ça revient en général à la même chose, sauf si tu changes le html généré par ton panel.

Après div ou panel, je pense que mettre un div quand tu as juste besoin d'appliquer une propriété spécifique à son contenu c'est plus judicieux qu'un panel. Après je ne pense pas qu'il y ait de règles pour ça ...

EDIT :

Pour ta page, j'utiliserais seulement une table pour les deux cases du "tot" et du "van". Le reste c'est que du div (ou du panel à la rigueur) et de la css.
07/01/2010, 12h55
olibara

Ok

Donc si je comprends bien je devrais ajouter dans ma premiere div de gauche au minimum 16 div complementaire

2 pour les titres Algemeen / Selected
2 pour les deux listbox

et 12 autres pour les textbox complementaires avec leurs titres

Ais-je bien compris ?
Le cas échéant, comment faire pour que ces 16 div se positionnent comme il le faut sans faire du positionnement absolu ?

Je vais me faire violence pour ne plus jamais faire de commentaire sur ma perception du design de Form en HTML actuel mais je n'en pense pas moins et j'espère que dans quelques années on rira des contorsion auquelles il faut se plier aujour'hui pour arriver a de maigres résultats pas toujours fiables !

A partir d'aujourd'hui je promet que je me contenterai de question factuelles pour essayer d'apprendre a nager correctement dans ce ... ;)
07/01/2010, 14h01
olibara

Encore une petite question :oops:

Pour ces question qui touchent essentiellement au design visuel (l'organisation de l"emplacement des control dans un formulaire), vaut-il mieux poster dans ce forum ci ou dans un Forum HTML ?

Parce que j'ai déja vecu que quand on evoque des controle asp dans un forum HTML on se fait jeter comme un impur mais que quand on pose des questions de design en ASP on est gentillement poussé dans le département HTML :(
07/01/2010, 14h10
Larger

Faut avouer que c'est pas évident au départ. Surtout qu'il faut que ça marche pour tous les navigateurs ...

Bref, sans rentrer dans les détails, il te faut utiliser des propriétés des css tels que le float. Met un float:left pour les trois divs du haut. Met un clear:both pour celle du bas contenant ton bouton.

Ça c'est globalement le schéma à suivre. Après faut jouer avec les width, etc.
J'essaye de te trouver un bon tuto là-dessus, mais c'est pas évident. :?

Si tu me postes vite fait ton aspx (en div si possible), je dois pouvoir te donner un petit exemple.
07/01/2010, 14h11
Larger

Comme tu le dis c'est du design. Donc je dirais plutôt css.
07/01/2010, 14h27
olibara

Citation:

Comme tu le dis c'est du design. Donc je dirais plutôt css.

Voila autre chose :roll:!
Est ce que cela signifie que des que l'on veut organiser des control dans un
formulaire il faut définir un CSS ?

J'avais cru comprendre que le CSS c'etait plutot pour définir un style général réutilisable ?

Mais c'est parce que je sais que c'est tres difficile d'avoir un consensus dans ce domaine que j'ai mis un exemple concret (voir post précédents) afin de recueillir les meilleurs avis 8O et d'essayer d'en faire la synthese 8-)

Merci en tout cas pour votre patience a essayer de m'aider à y voir clair, j'espère qu'un jour je pourrai aider les autres ...
07/01/2010, 14h32
olibara

2 pièce(s) jointe(s)

Pour repondre a la gentille proposition d'aide de Larger, voici mon aspx actuel ou je bricole déja pour essayer de transformer mon DIV gauche (j'ai essayé avec une table mais je suis pas convaincu)

Merci en tout cas
07/01/2010, 14h42
Larger
C'est peut-être un peu basique mon raisonnement mais :
- contenu = html ou asp
- design = css
Ce que je fais c'est que j'essaye de mettre mes divs les unes à la suite des autres, dans l'ordre.
Ensuite je crée mon css pour les organiser correctement dans ma page et les habiller.

Bon ça reste de la théorie. Dans la pratique, c'est toujours un peu plus compliqué ...
07/01/2010, 14h49
Larger

T'as une "image" de ce que ça devrait donner ?
07/01/2010, 14h55
olibara

Citation:

Ce que je fais c'est que j'essaye de mettre mes divs les unes à la suite des autres, dans l'ordre.
Ensuite je crée mon css pour les organiser correctement dans ma page et les habiller.

Intéressant 8O
Tu veux dire qu'a la base tu te cree +/- autant de div que de controles et qu'ensuite tu cree un CSS pour organiser les div les uns par rapport aux autres ?

Cette approche me plait asser, même si je ne maitrise pas encore du tout le CSS en général et cette approche en particulier.

Je suis déja passé par beaucoup de language, d'habitude j'aprends asser vite, mais j'avoue qu'avec l'HTML pour de la conception de formulaire, c'est la premiere fois que je rame autant pour trouver une piste d'espoir
07/01/2010, 15h05
olibara

Citation:

T'as une "image" de ce que ça devrait donner ?

Regarde le premier post il y a deux image

1- Version Web
2- Nouvelle version WinForm (la div de gauche)

Voilà un truc très rapide. A compléter et à améliorer. C'est pas parfait mais ça devrait pouvoir te montrer le chemin.

Code:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<head id="Head1" runat="server">
  <link rel="stylesheet" type="text/css" href="/Stylesheet1.css" />
  <title></title>
  <style type="text/css">
    body
    {
		margin: 20px 0 0; /*une marge en haut c'est quand même mieux qu'un <br />*/
		width: 1000px;
		text-align: center;
    }
    div
    {
 
    }
    .horDiv
    {
    	float: left;
    	border: black 1px solid;
    	height: 330px;
    	width: 33%;
    }
    .horDiv2
    {
		float: left;
    }
    table
    {
		float: left;
		margin: 5px;
    }
    .clearDiv
    {
    	clear: both;
    }
    .style1
    {
      width: 124px;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
	<div>
		<div class="horDiv">
			<h2>Niet toegelaten volle ...</h2>
			<div class="horDiv2">
			<asp:CheckBoxList ID="chklb_ForbidDays" runat="server" Width="105px" Height="155px">
                <asp:ListItem>Zondag</asp:ListItem>
                <asp:ListItem>Maandag</asp:ListItem>
                <asp:ListItem>Dindsdag</asp:ListItem>
                <asp:ListItem>Woensdag</asp:ListItem>
                <asp:ListItem>Donderdag</asp:ListItem>
                <asp:ListItem>Vrijdag</asp:ListItem>
                <asp:ListItem>Zaterdag</asp:ListItem>
             </asp:CheckBoxList>
             </div>
             <div class="horDiv2">
				<table border="1px">
					<tr><td>truc</td></tr>
					<tr><td>truc</td></tr>
				</table>
				<table border="1px">
					<tr><td>truc</td></tr>
					<tr><td>truc</td></tr>
				</table>
             </div>
		</div>
		<div class="horDiv">
			<asp:DropDownList ID="cmbVehi" runat="server" Height="20px" Width="229px">
          </asp:DropDownList>
			<asp:DataGrid ID="DataGrid1" runat="server">
			</asp:DataGrid>
			<div>
				<button>Apply to selection</button>
				<button>Remove sel</button>
			</div>
		</div>
		<div class="horDiv">
			blabla
		</div>
	</div>
	<div class="clearDiv">
		<button>Bewaar instellingen</button>
	</div>
  </form>
</body>
</html>

Après faut savoir qu'il n'y a pas UNE façon de faire. Et celle-là c'est juste la mienne, avec la valeur que ça a ...

07/01/2010, 16h21
olibara

Bonjour

Je te remercie ta proposition que je viens de voir

Maleureusement ca ne correspond pas à ce que j'esperais

Dans ma premiere DIV div left, j'aimerais placer mes deux listbox cote a cote (c'est fait actuellement a l'aide d'une table)

et en dessous de chacune des listbox les textbox comme montré dans l'exemple WinForm
07/01/2010, 16h30
Larger

J'ai fait un exemple rapidos. J'ai pas le temps non plus de te faire toute ta page, d'autant que je ne connais pas tous les composants.

Mais avec mon exemple tu dois quand même pouvoir te débrouiller pour agencer tes éléments comme tu le souhaites.

Après je te le répètes, c'est pas LA méthode. Ca reste quand même la meilleure à mes yeux.
07/01/2010, 16h47
olibara

Merci Larger

Je suis certainement encore un peu limité dans ma compréhension mais je ne vois rien de nouveau dans ta méthode par rapport a mon exemple original.

Et je vois que tu utilise aussi des tables

Et la mise en page que tu obtiens est encore plus eloignée de ce que je cherche a faire dans mon exemple

Je vais switcher dans le forum HTML peut etre que je comprendrai mieux