tuto design de page aspx

Bonjour

Il y a un truc que je ne comprends pas bien
J'ai l'habitude de travailler en C# et WinForm. Quand j'ai du faire il y a un petit temps déja mon premier design WinForm j'ai tres facilement compris tout seul comment faire et en moins d'une heure j'avais ma premiere WinForm opérationele.
Par ci par là j'entends dire WinForm c'est dépassé que le language de design HTML c'est beaucoup plus mieux, ASPX c'est plus facile etc...

Personellement ca fait +/- 48 heure que j'essaye d'elaborer le design de ma premiere page aspx on posant des questions sur tous les forums et je constate helas que personne n'est capable de me donner la moindre indication sur les rudiment de de design d'une page aspx ni meme de me donner le lien vers un tuto qui m'aiderait

Personellement j'ai le sentiment que faire un design de form aspx c'est l'age de la pierre par rapport a WinForm !

:?:oops:

Citation:

---

Envoyé par olibara

Personellement ca fait +/- 48 heure que j'essaye d'elaborer le design de ma premiere page aspx on posant des questions sur tous les forums et je constate helas que personne n'est capable de me donner la moindre indication sur les rudiment de de design d'une page aspx ni meme de me donner le lien vers un tuto qui m'aiderait

---

Un tuto :fleche: http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/.

Merci pour ce tuto, ca m'éclaire un peu plus

Est ce que cela signifie que quand je veux reproduire +/- une WinForm je dois creer une div pour chaque composant ?

Exemple :
j'ai deux checklistbox cote a cote
en dessous du premier listbox un combo
en dessous de chaque listbox un bouton
Et deux textbox que je dois visuellement associer au premier checklistbox

Comme je suis tout a fait debutant dans ce type de design et que je constate qu'il est tres dificile de trouver UNE maniere de faire j'aimerais commencer par LA bonne maniere

Merci de votre aide

Bonjour

Le design d'une page WEB ne peut être fait qu'en HTML et CSS. ASpx, c'est du DOTNET (comme déjà précisé). winform, c'est une invention microsoft, qui a mon sens ne veut rien dire. De plus ces deux termes se réfèrent au côté serveur.

"checklistbox" kesako ?
"combo" tu veux peut-être parler d'un select ? Utiliser la balise HTML <select></select>
"textbox" : un champs input ? Utiliser la balise <input type="text">
Pour le bouton, deux possibilités : la balise <input type="button"> ou <button></button>



Je déplace donc ce post dans la partie HTML, où tu trouveras toute l'aide nécessaire.

Merci roro06

Citation:

---

"checklistbox" kesako ?

---

Je voulais dire CheckBoxList

Citation:

---

"combo" tu veux peut-être parler d'un select ? Utiliser la balise HTML <select></select>

---

Effectivement ;)

Mais mon problème reside moins dans le choix du composant et son utilisation que le positionnement du composant dans la page

Exemple

Mon select doit se trouvé EN DESSOUS du CheckBoxList, je dois placer deux CheckBoxList l'un A COTE de l'autre
On vient de m'aiguiller vers les tables, mais j'ai lu ailleurs qu'il vallait mieux eviter les tables :?

Citation:

---

winform, c'est une invention microsoft

---

Sans doute ! Mais c'est tres pratique et quand tu a appris a faire du design en WinForm t'est un peu perdu avec le design HTML (et c'est peu dire ..) !!
C'est comme avoir pris l'habitude de développer en language de haut niveau C++, C# ou autre et tout d'un coup devoir reecrire l'application en assembleur, sans compter qu'il semble que dans ce domaine il n'y a aucune approche normalisée :calim2:

Re :

Citation:

---

On vient de m'aiguiller vers les tables, mais j'ai lu ailleurs qu'il vallait mieux eviter les tables

---

... Vieux débat ...:roll:

Il y a effectivement 2 possibilités Principales pour aligner des éléments sur une page, les tableaux ou les CSS.

Pour les tableaux, c'est un peu la solution de facilité, mais ça marche nickel :

Code:

---

1 2 3 4 5 6 7 8 9

<table> <tr> <td><select>gnagnagna</select> </td> </tr> <tr> <td align="center"><input type="checkbox"> gnagnagna</td> </tr> </table>

---

C'est la méthode basique, des millions de débutants, amateurs, pros s'en contentent.

L'autre est l'approche CSS, qui apporte l'avantage indéniable d'être maléable. c'est à dire que tu peux refaire entièrement le design de ta page (couleur, disposition de chaque élément) sans y toucher : un simple changement de la feuille de style permet ce changement. En retour l'approche est plus difficile.
Le tuto donné en lien par Macmillenium constitue un bon départ.

Bonjour

Ci-joint le modele de ma form en WinForm, j'imagine qu'il est tout a fait illusoire de reproduire ce design de maniere simple a l'aide d'un tableau et qu'il vaut mieux repenser completement l'organisation de la page afin de regrouper les éléments selon la taille des lignes et colonnes du tableau

J'ose cependant imaginer qu'il devrait y avoir comme en excell un possibilité de fusionner des cellules mais que c'est partir dans une autre galère :aie:

Je commence a comprendre pourquoi tant de formulaires web sont si peu ergonomique on incompréhensible..... Quand je vois l'energie a consacrer pour placer simplement quelques elément !

Mais je garde le secret espoir que quelqu'un me dise que je n'ai rien compris et que c'est beaucoup plus simple que je ne le pense !

En tout cas juste pour tester je viens de m'amuser a reproduire a l'identique le design de ma form en WebForm : 3 minutes montre en main !!

Si je parvenais a le reproduire en moins de deux heure en WebForm, je serais déja tres heureux :D

Re

Citation:

---

Mais je garde le secret espoir que quelqu'un me dise que je n'ai rien compris et que c'est beaucoup plus simple que je ne le pense !

---

Oui, c'est faisable. Un simple clic droit sur la fenêtre --> "Afficher la source" te fera apparaître le code HTML/CSS généré par ton visual Studio préféré.

Citation:

---

j'imagine qu'il est tout a fait illusoire de reproduire ce design de maniere simple a l'aide d'un tableau

---

La question qui se pose maintenant est : As-tu les bases nécessaires en HTML et CSS pour développer un page Web, avec formulaire ? un petit tour ici t'ouvrira certainement quelques horizons (oublies pour l'instant HTML5, pas encore complètement implémenté)

Citation:

---

Oui, c'est faisable. Un simple clic droit sur la fenêtre --> "Afficher la source" te fera apparaître le code HTML/CSS généré par ton visual Studio préféré.

---

Ca j'avais déja trouvé heureusement ;)

Citation:

---

La question qui se pose maintenant est : As-tu les bases nécessaires en HTML et CSS pour développer un page Web, avec formulaire ?

---

Certainement pas et c'est la que le gouffre apparait : on a beau avoir des année d'expèrience de développement et dans différents languages, afronter le design en HTML c'est se retrouver dans un autre monde avec des gens qui parlent dans une autre langue avec une autre logique et qui se comprennent difficilement :calim2:

Il me semble que le mieux c'est de commencer par ceci :

Citation:

---

http://a-pellegrini.developpez.com/t...-css/tableaux/

---

Bonjour,

Je viens encore de ramer pendant deux heures sur le principe de design en tableaux.

Si j'ai bien compris, je dois de preference faire mon design sur papier d'abord ensuite evaluer combien de lignes et colonnes au total seront necessaire pour placer tous mes elements du formulaires 'labels, textbox, select etc..'

Ensuite creer la table, fusionner les cellules prenant plus de place horizontalement ou verticalement et placer mes elément

J'ai du mal a croire que le design HTML soit une telle galere !!

J'ai l'impression de devoir faire des brouillon a la mains pour ecrire une lettre sur la machine a écrire a ruban de mon arriere grand pere :?

OU puis-je trouver un tuto qui explique comment faire un formulaire simple du style de mon exemple ??

Je veux dire, pas simplement une serie de textbox pour introduire un pavé d'adresse ?

Voici +/- 20 heures effective que je cherche a reproduire en HTML ASPX ce que je peux faire en 3 minutes en WinForm

Je pose probablement beaucoup de questions idiotes et les spécialiste doivent certainement sourire d'ironie en m'écoutant me débatre dans cette galere !

Je me demande quand meme combien de temps il faudrais a un specialiste HTML et ASPX pour reproduire mon petit modele WinForm
(presenté quelques post plus haut)

Ci-joint un modele de la voie sur laquelle je me suis embarqué a l'aide d'une table
Un spécialiste aurait-il l'immense bonté d'un peu de bienveillance dans mes débuts difficiles en HTML et me dire si je suis sur la bonne piste
Ou me corriger si nécessaire car avec ca j'ai pas l'impression de programmer et encore moins de développer mais plutot de me flageller !
J'ose penser que tous les développeurs utilisant HTML ne sont pas forcément masochistes ! :bug::sm::furieux::traine::aie:

Merci

C'est pas facile d'expliquer comment faire une interface web, ce n'est pas magique il n'y a pas de méthodes précisent, l'expérience est la meilleur des solution.

en tout cas, si tu veux te mettre a faire des page aspx, autant oublier tout de suite la mise en page en tableau, ce n'est pas la bonne solution.

conçoit plus l'intégration comme un découpage en plusieurs blocks qui peuvent eux meme contenir d'autres blocks.

Par rapport a ce que tu as fait ca pourrait donner un truc comme ca :

le squelette de ta page

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

<!-- 1er bloc qui contient tout --> <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>Dagen</p> <!-- les ul sont recommandés pour faire une liste --> <ul> <li><input type="checkbox" /><label>unbound</label></li> <li><input type="checkbox" /><label>zondag</label></li> <li><input type="checkbox" /><label>etc...</label></li> </ul> <p> <select> <option>unbound</option> <option>autre</option> </select> </p> </div> <!-- bloc qui représente la colonne de droite --> <div class="right"> <div class="van"> <p>van<br />(hh:mm)</p> <p><input type="text" /></p> </div> <div class="tot"> <p>tot<br />(hh:mm)</p> <p><input type="text" /></p> </div> </div> </div>

---

les styles qui vont mettre tout ca un minimum en forme

Code:

---

1 2 3 4 5 6 7 8 9 10

.container{}   .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */ }   .container .right .van, .container .right .tot { float: left; }

---

voila en gros comment réaliser ce que tu souhaites obtenir jusqu'à présent
a toi ensuite de rajouter d'autres blocs au bon endroit pour étoffer ton interface.

j'ai pas tout détaillé, y'a quelques subtilités a connaitre ensuite, mais comme je t'ai dit, seul l'expérience pourra te les apporter.

Merci Beaucoup kohsaka

Voilà une réponse qui m'aide a dissiper le brouillard et qui me confirme que les tableaux ce n'est pas une bonne idée !!

Je repasse en <div>
Ca viendra je le veux ! :D

Bonjour kohsaka

Je me replonge la dedans et j'ai fais une nouvelle form en organisant les <div> comme tu me l'a suggeré
De ce coté la ca va et je commence a voir ma form dans le designer

Par contre ou et comment dois-je declarer les styles (je travaille avec Visual Web developper 2008)

Merci de votre aide

Code:

---

1 2 3 4 5 6 7 8 9

.container{}   .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */ }   .container .right .van, .container .right .tot { float: left; }

---

le code ci-dessous est la base de ta page aspx.
pour ce qui est des styles, je te conseille de les mettre dans une feuille de style (add>new item>style sheet).

ensuite tu dois appeler cette feuille dans ton projet.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Site.WebForm1" %> <!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"> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>

---

pour l'instant tu t'occupes du cœur de ton application, il est plus pratique de commencer par les éléments commun a ton interface. pour ca, je t'encourage vivement à utiliser une masterpage.

Salut kohsaka

Citation:

---

le code ci-dessous est la base de ta page aspx.

---

Ca (heureusement ;)) je l'avais déja assimili et j'ai deja en partie recommencé ma page sur base de tes conseil

Citation:

---

pour ce qui est des styles, je te conseille de les mettre dans une feuille de style (add>new item>style sheet).

---

Ca je vais essayer

Citation:

---

pour l'instant tu t'occupes du cœur de ton application, il est plus pratique de commencer par les éléments commun a ton interface. pour ca, je t'encourage vivement à utiliser une masterpage.

---

Mon application est ecrite en csharp et est déja fonctionelle, pour bien séparer les chose j'avais prévu de me baser sur un fichier de settings serialisée depuis une WinForm (ca je maitrise :roll:)

Ce que je dois faire maintenant c'est offrir une interface Web qui permet de modifier ces settings
Et c'est a ca que je travaille !

Merci de ton aide en tout cas

Salut dans le tutoriel CSS la syntaxe est sensiblement différente ?

Code:

---

1 2 3

<link rel="stylesheet" type="text/css" href="style_div.css"> <link rel="stylesheet" type="text/css" href="/style.css" />

---

A quoi servent ces slash que tu mentionne ?


Dans la feuille de style je reprends ton code betement car je n'ai pas encore saisi la syntaxe et je fais certainement une erreur qq part

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

body { .container{} .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */ }   .container .right .van, .container .right .tot { float: left; } }

---

alors :

Citation:

---

Mon application est ecrite en csharp et est déja fonctionelle, pour bien séparer les chose j'avais prévu de me baser sur un fichier de settings serialisée depuis une WinForm (ca je maitrise )

Ce que je dois faire maintenant c'est offrir une interface Web qui permet de modifier ces settings
Et c'est a ca que je travaille !

---

Je parlais bien de ton interface web, je me suis peut etre mal exprimé, mais en gros dans la masterpage, tu dois pouvoir retrouver ton header, ton menu ... tous les éléments communs a l'ensemble des pages de ton interface.

Citation:

---

A quoi servent ces slash que tu mentionne ?

---

/style.css va aller chercher le fichier a la racine du serveur.
/styles/style.css ira lui chercher le fichier dans le dossier styles qui se trouve a la racine du serveur.

est ce que c'est plus clair avec ces exemple ?
et aussi la syntaxe est la même que dans le tuto c'est juste que l'emplacement sur le serveur et le nom du fichier est diffèrent.

enfin revenons a ce que tu dois mettre dans ta feuille style.css :

Citation:

---

body
{
font-size: 11px;
background: #000000;
}

.container{}
.container .left, .container .right
{
float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */
}

.container .right .van, .container .right .tot
{
float: left;
}

---

il ne faut pas voir le css comme une fonction
on pourrait le traduire plutot comme ca :

Code:

---

1 2 3 4 5

cible { attribut: valeur; }

---

l'élément(s) que tu cibles est toujours suivi d'une accolade ouvrante/fermante et ne peut pas lui même en contenir

Merci kohsaka

Yep ca avance !

Bonne idée d'avoir laisse le backround a 000000 ca m'a permis de rapidement decouvrir son effet !!

Je parlais surtout du slash de fermeture

Code:

---

<link rel="stylesheet" type="text/css" href="/style.css" />

---

Citation:

---

Envoyé par olibara

Merci kohsaka

Yep ca avance !

Bonne idée d'avoir laisse le backround a 000000 ca m'a permis de rapidement decouvrir son effet !!

Je parlais surtout du slash de fermeture

Code:

---

<link rel="stylesheet" type="text/css" href="/style.css" />

---

---

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.

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>

---

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

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

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; }

---

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

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.

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>

---

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

---

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; }

---

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