tuto design de page aspx

Version imprimable

Voir 40 message(s) de cette discussion en une page

Encore une petite question monsieur le professeur ;)

J'apprécie beaucoup ton aide et ta patience, : grace a des personnes comme toi, on parviens souvent en quelques heures a gagner des jours ou des semaines d'acharnement ...:ccool:

Tu me suggerait d'utiliser ul et li pour ma checkboxlist
Code:

1 2 3 <li><input type="checkbox" /><label>unbound</label></li> <li><input type="checkbox" /><label>zondag</label></li> <li><input type="checkbox" /><label>etc...</label></li>
Etant doné que je fais une page aspx n'est-il pas plus simple d'utiliser directement CheckBoxList particulierement losqu'il faudra gerer le code derriere ?
Code:

1 2 3 4 5 6 7 8 9 <asp:CheckBoxList ID="chklb_ForbidDays" runat="server" Width="166px" 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>

15/12/2009, 19h31
12monkeys

Bonsoir

Citation:

Envoyé par kohsaka

ah ben les 2 sont correctes mais dépendent de la dtd que tu utilises et j'ai trou de mémoire quand a celle a utiliser avec la dtd transitional, surement celle du tuto developpez.com en fait.

Ce n'est pas plutôt lorsque on utilise le XHTML au lieu du HTML... http://a-pellegrini.developpez.com/t...ls/xhtml/#L3.3
15/12/2009, 21h14
olibara

Citation:

Ce n'est pas plutôt lorsque on utilise le XHTML au lieu du HTML

Bien vu on dirait que oui !

Je ne peux que remercier tout ceux qui interviennent et kohsaka en particulier car ma connaissance avance a grand pas !

Citation:
Envoyé par olibara
Encore une petite question monsieur le professeur ;)

J'apprécie beaucoup ton aide et ta patience, : grace a des personnes comme toi, on parviens souvent en quelques heures a gagner des jours ou des semaines d'acharnement ...:ccool:

Tu me suggerait d'utiliser ul et li pour ma checkboxlist
Code:

1 2 3 <li><input type="checkbox" /><label>unbound</label></li> <li><input type="checkbox" /><label>zondag</label></li> <li><input type="checkbox" /><label>etc...</label></li>
Etant doné que je fais une page aspx n'est-il pas plus simple d'utiliser directement CheckBoxList particulierement losqu'il faudra gerer le code derriere ?
Code:

1 2 3 4 5 6 7 8 9 <asp:CheckBoxList ID="chklb_ForbidDays" runat="server" Width="166px" 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>
en fait, des balises dot net de ce type sont des genres de raccourcis pour générer du code html.
ca ne m'étonnerait pas que dans le code renvoyé par le serveur, tu retrouves des <ul> et <li> justement ;)
et c'est avec ces éléments que tu dois faire ta feuille de style css

Citation:

Ce n'est pas plutôt lorsque on utilise le XHTML au lieu du HTML... http://a-pellegrini.developpez.com/t...ls/xhtml/#L3.3

bien vu

15/12/2009, 22h33
olibara

Citation:

en fait, des balises dot net de ce type sont des genres de raccourcis pour générer du code html.
ca ne m'étonnerait pas que dans le code renvoyé par le serveur, tu retrouves des <ul> et <li> justement

Ce que je comprends donc la c'est que aspx offre un abstraction sur le language html de plus bas niveau
L'intéret aspx dans le cas present, c'est que je suppose qu'au niveau du code je peux recuperer des valeurs des elements de chklb_ForbidDays sans trop tripoter a un niveau plus bas (ma premiere impression de l'HTML c'etait de retrouver la logique assembleur de mes débuts ;))

Citation:

et c'est avec ces éléments que tu dois faire ta feuille de style css

Heuu la structure de ma feuille de style tu veux dire ?
Car mes checkbox qu'ils soient
<ul> - <li> ou <asp:CheckBoxList> - <asp:ListItem>
Sont dans ma page, pas dans ma feuille de style ?

oui, son sens premier est de simplifier le développement, mais il peut arriver qu'au final il complexifie plus le travail qu'autre chose.

d'ailleurs, je me suis renseigné et le asp:checkboxlist semble générer des <table>, <tr>, <td>.

Citation:

Heuu la structure de ma feuille de style tu veux dire ?
Car mes checkbox qu'ils soient
<ul> - <li> ou <asp:CheckBoxList> - <asp:ListItem>
Sont dans ma page, pas dans ma feuille de style ?

je vais donner un exemple, ca sera plus parlant que de longue explication :

tu as ta page .aspx comme cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 ... <div> <asp:CheckBoxList ID="chklb_ForbidDays" runat="server" Width="166px" 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> ...
ce code va générer du html dans le navigateur
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ... <div class="container"> <table> <tr> <td><span><input type="checkbox" /></td> <td class="monLabel"><label>Zondag</label></td> </tr> <tr> <td><span><input type="checkbox" /></td> <td class="monLabel"><label>Zondag</label></td> </tr> ... etc <table> </div> ...
et dans ta feuille de styles .css, pour mettre en forme tout ca tu utiliseras
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .container { background: #000; } .container table { border: 2px solid #f00; } .container td { /* va s'appliquer a tous les td dans la div container */ padding: 3px; } .container td.monLabel { /* va s'appliquer uniquement au td avec la class 'monLabel' de la div 'container' */ background: #fff; }

16/12/2009, 09h51
olibara

Salut

Je comprends, mais je reviens a mon analogie avec l'assembleur, car en definitive, un language de haut nieveau ce n'est rien d'autre qu'un certain nombre de couche d'abstraction permettant au développeur de se concentrer sur une logique a language humain sans se perdre dans les meandre du language machine. (et pourtant je maitrise asser bien l'assembleur)

Si j'écris A=2*B; je n'ai plus besoin de savoir comment c'est traduit en language machine pour esperer avoir un résultat correct.

Mais ce que je comprends c'est que chaque navigateur ayant ses petites particularité, la technologie de design web reste tirée vers le bas par les standards fondamentaux et qu'il est donc tres difficile d'avoir un environnement de design "humanisé" permettant comme avec winform de composer une page visuellement tres rapidement en quelques clicks
16/12/2009, 10h43
kohsaka

ton analogie avec l'assembleur n'est pas correct alors, car dans le web, le framework .net ne te permettra pas d'ignorer ce qu'il génère, du moins pour la mise en forme de la page.

le design web est tiré vers le bas par ie6 et ie7, les autres navigateurs sont assez en phases les uns avec les autres pour oublier le peu de différences qui les sépares au niveau du rendu.
mais c'est clair qu'une IHM réalisée en winform sera plus simple a réaliser puisqu'elle se suffit à elle même la ou le web doit composer avec plusieurs acteurs. mais elle est moins interopérable en contre partie.
16/12/2009, 10h57
olibara

Citation:

mais c'est clair qu'une IHM réalisée en winform sera plus simple a réaliser puisqu'elle se suffit à elle même la ou le web doit composer avec plusieurs acteurs. mais elle est moins interopérable en contre partie.

Ouf ! ca fait du bien de l'entendre ;)

Mais tu a raison et de toute façon me voila embarqué dans la galere et j'espere bientot pouvoir bientot faire un formulaire en moins d'une journée !

Le mien n'est toujous pas fini car apres avoir continué sur tes precieuse indications je dois encore maintenant comprendre comment reproduire la deuxieme partie droite de mon formulaire, celle qui se trouve dans le deuxieme group box

Si j'ai bien compris je vais encore devoir ajouter trois div,:
les parties gauche droite actuelle regroupées dans une div gauche de tout le formulaire et une nouvelle div droite du formulaire contenant deux nouvelles div gauche droite

Bonjour

Desolé de venir a nouveau vous casser les pieds avec mes questions de débutant.

Dans le code ci-apres, largement inspiré par kohsaka, je voulais ajouter à droite de mon formulaire une troisième division avec un deuxieme checkboxlist.

J''ai naivement fait un cut / paste de ma premiere division gauche que j'ai replacé a la fin de ma div principale

Je n'ai presque rien changé d'autre mais je ne comprends pas par quelle magie, cette division s'affiche d'office à l'extreme droite de mon formulaire

Je n'ai donc toujours pas bien compris ce qui affecte le positionement d'une division !!

Merci de vos conseils avisés

Voici le code

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
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DeDommelReport.WebForm2" %>
 
<!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 runat="server">
  <link rel="stylesheet" type="text/css" href="/Stylesheet1.css" />
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div class="container">
    <!-- bloc qui représente la colonne de gauche -->
    <div class="left">
      <!-- les p et les ul peuvent être considérés comme des blocs -->
      <p style="text-align: center">
        Niet toegelaten volle dagen</p>
      <asp:CheckBoxList ID="chklb_ForbidDays" runat="server" Width="166px" 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>
      <p>
        <asp:DropDownList ID="DropDownList1" runat="server" Width="181px">
        </asp:DropDownList>
      </p>
    </div>
    <!-- bloc qui représente la colonne de droite -->
    <div class="right">
      <div class="van">
        <p style="text-align: center">
          N.T uur van<br />
          (hh:mm)</p>
        <p>
          <input type="text" style="width: 74px" /></p>
        <p>
          <input type="text" style="width: 74px" /></p>
      </div>
      <div class="tot">
        <p style="text-align: center">
          N.T uur tot<br />
          (hh:mm)</p>
        <p>
          <input type="text" style="width: 74px" /></p>
        <p>
          <input type="text" style="width: 74px" /></p>
      </div>
    </div>
    <!-- bloc qui représente la colonne extreme droite -->
    <div class="left">
      <!-- les p et les ul peuvent être considérés comme des blocs -->
      <p style="text-align: center">
        Rapport dagen</p>
      <asp:CheckBoxList ID="CheckBoxList2" runat="server" Width="166px" Height="155px">
        <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:CheckBoxList>
    </div>
  </div>
  </form>
</body>
</html>

17/12/2009, 09h34
kohsaka

à première vu je ne vois pas de ou peut venir l'erreur
poste le contenu de ta feuille css s'il te plait.

et si tu peux faire un screenshot de ce que tu obtiens ca serait nickel :)

Salut Kohsaka

Il n'y a pas a proprement parler d'erreur
Mais ce que je ne comprends pas c'est pourquoi une nouvelle div vient se mettre par magie a droite des deux autres !
D'apres ce que j'avais compris, le positionnement des div etait défini dans le CSS et tu m'avais donné le code permettant de definir une Div gauche et une div droite.
N'ayant rien defini pour la nouvelle, je m'attendais a ce qu'elle se positionne en dessous des deux autres ?

Ci apres le code actuel, et en attaché l'image via le designer et celle via le browser

N.B. : dans ce code j'ai essaye d'ajouter a la fin un label "Uur" et un textbox en utilisant des td pour les alligner mais je ne sais pas si j'ai bien fait ?

Merci de ton aide

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
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DeDommelReport.WebForm2" %>
 
<!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 runat="server">
  <link rel="stylesheet" type="text/css" href="/Stylesheet1.css" />
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div class="container">
    <!-- bloc qui reprÃ©sente la colonne de gauche -->
    <div class="left">
      <!-- les p et les ul peuvent Ãªtre considÃ©rÃ©s comme des blocs -->
      <p style="text-align: center">
        Niet toegelaten volle dagen</p>
      <asp:CheckBoxList ID="chklb_ForbidDays" runat="server" Width="166px" 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>
      <p>
        <asp:DropDownList ID="DropDownList1" runat="server" Width="181px">
        </asp:DropDownList>
      </p>
    </div>
    <!-- bloc qui reprÃ©sente la colonne de droite -->
    <div class="right">
      <div class="van">
        <p style="text-align: center">
          N.T uur van<br />
          (hh:mm)</p>
        <p>
          <input type="text" style="width: 74px" /></p>
        <p>
          <input type="text" style="width: 74px" /></p>
      </div>
      <div class="tot">
        <p style="text-align: center">
          N.T uur tot<br />
          (hh:mm)</p>
        <p>
          <input type="text" style="width: 74px" /></p>
        <p>
          <input type="text" style="width: 74px" /></p>
      </div>
    </div>
    <!-- bloc qui reprÃ©sente la colonne extreme droite -->
    <div class="left">
      <!-- les p et les ul peuvent Ãªtre considÃ©rÃ©s comme des blocs -->
      <p style="text-align: center">
        Rapport dagen</p>
      <asp:CheckBoxList ID="CheckBoxList2" runat="server" Width="166px" Height="155px">
        <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:CheckBoxList>
      <p>
        <tr>
          <td>
            <asp:Label ID="Label1" runat="server" Text="Uur   " Style="text-align: justify"></asp:Label>
          </td>
          <td>
            <asp:TextBox ID="TextBoxRptUur" runat="server" Style="text-align: right" 
          Width="85px"></asp:TextBox>
          </td>
        </tr>
      </p>
    </div>
  </div>
  </form>
</body>
</html>

17/12/2009, 10h32
kohsaka
ah mais alors le comportement est tout a fait logique ici :

tu as copié le block qui comporte la class "left"
par consequent, il va prendre les valeurs de cette class.

si on regarde dans le css on tombe la dessus
Code:

1 2 3 4 5 .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote Ã cote */ }
pour tout les éléments qui ont la class left ou right dans container, on les positionnent les uns à coté des autres.
c'est d'ailleurs pas très optimisé de faire ca, le code suivant serait mieux (a condition de remplacer class="right" par left dans la page aspx)
Code:

1 2 3 4 5 .container .left { float: left; /* avec ca tu dis a tes blocs de se mettre cote Ã cote */ }
sinon pour que ton bloc se retrouve en dessous du premier, il faut lui ajouter une class différente, disons class="clear", et rajouter ca dans le css
Code:

1 2 3 4 .container .clear { clear: both; }
17/12/2009, 10h43
olibara

:ccool: Bon je vais me plonger dans un tuto CSS :oops:

Voir 40 message(s) de cette discussion en une page