SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal form styling with top aligned label

    I've been struggling to get a form layout like shown in my attachment whilst keeping it accesible and useable, Any pointers?

    My markup is as follows...

    Code:
    <fieldset>
    <legend>Search</legend>
    <ol>
      <li>
        <label for="input_1">Label 1</label>
        <select id="input_1"></select>
      </li>
      <li>
        <label for="input_2">Label 2</label>
        <select id="input_2"></select>
      </li>
      <li>
        <label for="input_3">Label 3</label>
        <select id="input_3"></select>
      </li>
    </ol
    </fieldset>
    display:inline works to make the list horizontal with list-style:none to remove the numbering

    What I can't figure out is how to have the label top aligned with the form elements.

    I have tried adding a line break between the label and the form elements but the form then appears like declining steps.

    Thanks in advance

    - Andy
    Attached Images Attached Images

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Gah! Stupid pending... I can't see it.

    Do you want the label and the inputs in one line?

    Or do you want a label
    then an input

    then a label
    then an input??

    I wouldn't use a list inside a form-- is it because you want the numbers??

    *Edit, I re-read what you said about removing the numbers and trying display: inline so I think you might want something like this (I made for someone else as an example based on their image):
    http://stommepoes.jobva.nl/Tests/form.html

    Real basic HTML form with basically the CSS floating the labels left, giving them a width, and letting the inputs (which are inline anyway) line up behind them. Divs wrap each group of label+input for easier styling.

  3. #3
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    heaven
    Posts
    953
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you using a list?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've seen lists used but personally I don't find them very semantic and would tend to go for an approach like this...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><title>Form Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body {
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 100&#37;;	
    }
    #fieldset {
    	font-size: 0.8em;
    	border: solid 1px #000;	
    	float: left;
    	padding: 1em;
    }
    #fieldset fieldset {
    	border: 0; padding: 0; margin: 0;
    	float: left;
    }
    #fieldset legend span {
    	position: absolute;
    	left: -999em;
    }
    #fieldset label {
    	float: left;
    	margin-right: 20px;
    	font-weight: bold;
    }
    #input_1 {
    	width: 15em;	
    }
    #input_2 {
    	width: 7em;	
    }
    #input_3 {
    	width: 7em;	
    }
    #fieldset input {
            float: left;
    	margin-top: 1.2em;	
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="fieldset">
    		<fieldset>
    		<legend><span>Search</span></legend>
    		    <label for="input_1">Label 1<br>
    		    <select id="input_1"></select></label>
    		    <label for="input_2">Label 2<br>
    		    <select id="input_2"></select></label>
    		    <label for="input_3">Label 3<br>
    		    <select id="input_3"></select></label>
    		    <input type="submit" value="submit">
    		</fieldset>
    	</div>
    </div>
    </body>
    </html>
    It doesn't validate but that's only because there's not currently any <option>'s within the selects so once you've added those, it'll validate fine.

    I'd also personally get rid of the width's for the input's and let this be controlled by the length of the text within the options but I've tried to represent your image as best as possible.

    Hope that helps.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginethis View Post
    Why are you using a list?
    Because it is a list. Going off the advice of http://www.sitepoint.com/article/fancy-form-design-css to add an extra level of semantics.

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz - Thanks I am currently trying out your method and will report back.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Andrew Millne View Post
    Because it is a list. Going off the advice of http://www.sitepoint.com/article/fancy-form-design-css to add an extra level of semantics.
    Which I also had the distinct pleasure of chewing Cameron Adams out for when it was published as well.

    Trust me, you don't want to follow the "advice" in that article. Lists are not the proper container for styling forms.

    Instead, I'd use this as a foundation:
    http://www.tyssendesign.com.au/artic...ends-of-style/

    And then for the labels/selects, I'd either just insert a BR element after the label, or the text, but include the select as part of the label.

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Instead, I'd use this as a foundation:
    http://www.tyssendesign.com.au/artic...ends-of-style/

    And then for the labels/selects, I'd either just insert a BR element after the label, or the text, but include the select as part of the label.
    You mean like I have done in my example above?

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant working a treat thanks! I am still undecided over the list versus no list argument, I'll read through that suggested article Dan and try to come to a conclusion. Thanks folks.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andrew, the article I linked to deals far moe with legends and fieldsets than lists or no-lists.

    But to make a long story short, just ask yourself if a form is a list of items (and form controls are not items, they're just containers).

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    But to make a long story short, just ask yourself if a form is a list of items (and form controls are not items, they're just containers).
    I agree with Dan on this one. One way of thinking about it is to switch off CSS. Does it still make sense with the bullets alongside them?

    You can style anything to look however you want with CSS but if you view a page without CSS and something looks wrong, then you're probably using the wrong markup.


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
  •