IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Discussion :

Usage de pannel, div ou tables


Sujet :

ASP.NET

  1. #1
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut 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 )

  2. #2
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    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".

  3. #3
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    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.

  4. #4
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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

  5. #5
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    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.

  6. #6
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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 ...

  7. #7
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    Encore une petite question

    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

  8. #8
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    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.

  9. #9
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    Comme tu le dis c'est du design. Donc je dirais plutôt css.

  10. #10
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    Comme tu le dis c'est du design. Donc je dirais plutôt css.
    Voila autre chose !
    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 et d'essayer d'en faire la synthese

    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 ...

  11. #11
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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
    Fichiers attachés Fichiers attachés

  12. #12
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    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é ...

  13. #13
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    T'as une "image" de ce que ça devrait donner ?

  14. #14
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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
    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

  15. #15
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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)

  16. #16
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    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 : 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
    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 ...

  17. #17
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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

  18. #18
    Membre très actif
    Profil pro
    Inscrit en
    Août 2008
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 265
    Par défaut
    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.

  19. #19
    Membre expérimenté
    Profil pro
    Mangeur de gauffre
    Inscrit en
    Octobre 2007
    Messages
    4 413
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Mangeur de gauffre

    Informations forums :
    Inscription : Octobre 2007
    Messages : 4 413
    Par défaut
    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

Discussions similaires

  1. div et table, comportement different sous FF et IE
    Par gloubi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 01/08/2007, 23h05
  2. Spécification de DIV et TABLE
    Par {F-I} dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 05/06/2007, 16h52
  3. [HTML] div ou table ?
    Par roudoudouduo dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 08/11/2006, 14h28
  4. [W3C] Mise en page html avec div ou tables selon vous ?
    Par zais_ethael dans le forum Balisage (X)HTML et validation W3C
    Réponses: 15
    Dernier message: 19/10/2006, 16h34
  5. DIV ou TABLE
    Par rockingstone dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/05/2006, 18h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo