SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow css (no tables) form layout

    So I'm looking for a little CSS design help. I understand the importance and significance of CSS and XHTML, and table-less layouts, etc, and I have even taken classes on the subject. The problem I have is I can't translate that knowledge into real world application, and I feel that's crucial to be a good web designer. I'd like to post some code and see if anyone can help me sort all of this out.

    Inside a form tag: (Don't mind the ASP if you will...)
    HTML Code:
    <div id="divHeader">
       <img id="imgLogo" src="images/logo.gif" alt="Logo" />
       <h2 id="h2Title">TITLE</h2>
    </div>
    <div id="divBody">
       <p>This form is only to be used by an ....</p>
       <p>All fields are required before saving (except for those fields that accompany a Yes/No question...</p>
       <fieldset><label>Originating Site:</label><asp:DropDownList id="ddlOrigSite" runat="server"></asp:DropDownList></fieldset>
       <fieldset><label>Client Requesting:</label><asp:DropDownList id="ddlClientReq" runat="server"></asp:DropDownList></fieldset>
       <fieldset><label>Date:</label><asp:Textbox id="txtDate" runat="server"></asp:Textbox></fieldset>
       <fieldset><label>Technology:</label><asp:DropDownList id="ddlTechArea" runat="server"></asp:DropDownList></fieldset>
       <fieldset><label>Attorney:</label><asp:Textbox id="txtAttorney" runat="server"></asp:Textbox></fieldset>
       <fieldset><label>Something:</label><asp:DropDownList id="ddlSomething" runat="server"></asp:DropDownList></fieldset>
       <fieldset>
          <asp:radiobuttonlist ID="rdoGrp1" runat="server">
             <asp:radiobutton />
             <asp:radiobutton />
          </asp:radiobuttonlist>
       </fieldset>
    </div>
    This, to me, is pretty straightforward, meaningful markup for a form. I have my Header for the form in a DIV with a title and a logo. I want the layout of this to have the logo in the top left, and title centered with the remaining top right space. Next comes my Body of the form. The two paragraphs are fine just below the header, left justified with page breaks, which is the way they'd display without CSS. Now, what I would like to do next is where my understanding of CSS and XHTML ends. The first three fieldsets I would like to have each one take up approximately 1/3 of the screen, and be in a row 3 across. The next two fieldsets I would like on the next line taking up about 50% each, same with the last two fieldsets. If I had a table, the layout would look like the psuedo-code below:
    HTML Code:
    NOTE: 6 EQUAL WIDTH COLUMN TABLE **PSUEDO-CODE**
    <table>
       <tr>
          <td colspan="6">**divHeader***</td>
       </tr>
       <tr>
          <td colspan="6">**p's**</td>
       </tr>
       <tr>
          <td colspan="2">**fieldset1**</td>
          <td colspan="2">**fieldset2**</td>
          <td colspan="2">**fieldset3**</td>
       </tr>
       <tr>
          <td colspan="3">**fieldset4**</td>
          <td colspan="3">**fieldset5**</td>
       </tr>
       <tr>
          <td colspan="3">**fieldset6**</td>
          <td colspan="3">**fieldset7**</td>
       </tr>
    </table>
    The webpage is bigger than this, but I wanted to keep it simple here. I know I could probably put DIVs around the fieldsets I want to appear in a single row, but wouldnt a DIV around those fieldsets represent unnecessary markup? I'll also go in and give every tag an ID before the page is finished, so take that into consideration. One other thing I know I don't use efficiently is classes. It's my understanding classes are used to 'group' similar elements together... but I know classes shouldnt be named based on the "style" they will represent, and i feel I have a tendency to do that as well. To me, it seems a fieldset that has a textbox would have the same class as another fieldset with a textbox, different from the fieldsets with Option buttons in them, therefore making a single page have multiple styles available to it.

    I guess after all this explanation, my real question is how do I make this markup I provided in the first HTML box look anything like the way the table would print out in the second html box, trying to stick as best I can to CSS/XHTML best practices.......?

    Any help is much appreciated... this is a huge learning process for me. Thanks.

    -Dave P

  2. #2
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Oh yes you can...

    The problem I have is I can't translate that knowledge into real world application, and I feel that's crucial to be a good web designer.
    Well David, I was about to do same thing you mentioned above and that is to say I can't. You can! You have made a pretty clear explanation of a solution to your problem already. Let me see if I can give you what I know and see if anyone else will confirm or clarify this approach...

    You basically are needing to make boxes and float them to one side to make them align in sequence. Your first three fieldsets will need to be put in divs and I think you're on the ball about using a class for styling these with one set of declarations to make clean, necessary markup. Now I am unsure of how to set the lenghth of your fieldsets... Perhaps someone can comment on that... Let's see if this is clean and clear enough:

    HTML Code:
    <head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    .fieldset1 {
    float:left;
    width: 33%;
    }
    .fieldset2 {
    float:left;
    width: 50%;
    }
    </style>
    </head>
    <body>
    <div class:"fieldset1">
    <fieldset><label>Originating Site:</label><asp:DropDownList id="ddlOrigSite" runat="server"></asp:DropDownList></fieldset>
    </div>
    <div class:"fieldset1"><fieldset><label>Client Requesting:</label><asp:DropDownList id="ddlClientReq" runat="server"></asp:DropDownList></fieldset>
    </div>
    <div class:"fieldset1"><fieldset><label>Date:</label><asp:Textbox id="txtDate" runat="server"></asp:Textbox></fieldset>
    </div>
    /*Just keep making your divs for each class in your css*/
    </body>
    I am learning one of the greatest revealed truths: The Creator of all things can give us the power to do all things when we let him dwell in us - "I can do all things through Christ who strengthens me." That's the only reason I repsonded... If someone has a better suggestion than my css then I welcom there knowledge, but I am still here to tell you that you can...

    Best regards David, Keep at it!

    Billy

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your quick response...
    I considered using floats, and this is probably the best solution, but I have a few ideas on this. First of all, the extra DIVs are being added FOR STYLE which is really against CSS/XHTML standards that I mentioned, and are really just enclosing what the FIELDSET is anyways (a box). The way I understand it is that I should be able to obtain my layout editing ONLY the CSS file, or adding MEANINGFUL class names or ID attributes to certain elements. Although fieldset1 and fieldset2 arent really descriptive of a design, they are named based on what the design should be... If I'm going that route, it almost seems I would be better off doing: (PSUEDOCODE AGAIN)
    HTML Code:
    <style>
    #fieldset1, #fieldset2, #fieldset3 {float:left;width:33%;}
    #fieldset4, #fieldset5 {float:left; width:50%}
    </style>
    
    <.....>   
    
       <fieldset id="fieldset1"><label>Originating Site:</label><asp:DropDownList id="ddlOrigSite" runat="server"></asp:DropDownList></fieldset>
       <fieldset id="fieldset2"><label>Client Requesting:</label><asp:DropDownList id="ddlClientReq" runat="server"></asp:DropDownList></fieldset>
       <fieldset id="fieldset3"><label>Date:</label><asp:Textbox id="txtDate" runat="server"></asp:Textbox></fieldset>
       <fieldset id="fieldset4"><label>Technology:</label><asp:DropDownList id="ddlTechArea" runat="server"></asp:DropDownList></fieldset>
       <fieldset id="fieldset5"><label>Attorney:</label><asp:Textbox id="txtAttorney" runat="server"></asp:Textbox></fieldset>
       
    I am going to try out the float approach, and I definitely appreciate the help... Just trying to understand the CONCEPT and provide some constructive arguements to stimulate conversation...

    Thanks,

    Dave

  4. #4
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you got it! Nice!

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tradnbillies, you're misusing the fieldset element. It should be used to group related fields, not surround just one. You also aren't using its legend element, which is not good either.

    Also, you need to associate the <label> element with the form control it labels.

    I suggest you read these:
    Simple Tricks for More Usable Forms: Labels
    Accessible HTML/XHTML Forms
    Creating Accessible Forms
    Prettier Accessible Forms

    Quote Originally Posted by onebit View Post
    Your first three fieldsets will need to be put in divs
    Why? Can't you apply styles directly to the fieldset(s)? (Rhetorical question -- the answer is "yes".)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz... thank you for your response. I'd like to make a few comments based on what you've replied with.

    First, I'd like to remind you this is a very simple example of the entire form I'm using, and I actually feel that I'm using the fieldset element correctly based on the w3c recommendation. You're correct in saying a) I should use the for attribute of the labels, and b) my fieldsets should use a legend. Let's assume I do that... I have the option of setting the legends to "display:none;" in the CSS where I don't need the contents to show, and the for attribute has no effect visually. Given all of that, I'd like to go back to the original intent of this thread... which was to get advice on taking the XHTML and modifying the look of the form to what I want with only a CSS file. I'm aware there are a few issues with the markup, but the intent was to provide a basic example and get help with the css. Thanks much!

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get the look you want, just use classes like onebit showed in his example, though without the unnecessary extra <div>s.

    I agree that giving them semantic names can be difficult. In this case it's not very important, because I don't think the presentation has any semantic significance, you just want some fieldsets to be wider than others.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Meriden, CT
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone maybe have suggestions w/o using float? j/w

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you want to use floats? They are the best way to do this. Any other CSS only way would require a lot more code.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •