At work we had a situation in which a client required a web front for one of our products. None of use are web developers but since I was finishing up on my previous project I volunteered to give it a base.
I have spent the last week or so reading up on best practices and asp.net web forms. Based on requirements we settled on HTML 4 / ASP.NET / CSS 2.1. The customer is going to use the latest browsers so I got to concentrate on nice clean layout.
I have been working on samples using the 960.gs system and I am finding it pretty handy to lay out content without too much trouble, but, I have a major issue.
With all of the tutorials I have seen, they tend to stop or become quite vague as soon the inner most content layout is reached.
Is there any best practices here? or is there any tutorials regarding laying out the inner most content.
What I am talking about for instance is laying out the following:
<div id="question_1" >
<asp:Label runat="server">Question 1</asp:Label>
<asp:Label runat="server" >What is the name of the guy from the other thing?</asp:Label>
<asp:RadioButton runat="server" Text="Yes"></asp:RadioButton>
<asp:RadioButton runat="server" Text="No"></asp:RadioButton>
<asp:DropDownList runat="server"></asp:DropDownList>
</div>
The above html represents a fictional question object. This would be on a list of questions page, much like a survey. Currently, because I can't find the info I am pretty much using css to absolutely position the elements since, because I am using a grid system, I know the width of the box that this div is contained in.
EDIT: By absolutely positioned I mean within the containing element not the page as a whole... Just to clear that up.
From a form layout perspective there are two things to consider: usability and accessibility. Usability defines things like labels going on the left, fields on the right. The exception in this case being with radio buttons and check boxes when the label goes on the right.
Accessibility, defines that each field should have a label tag; fields should be logically grouped etc.
The RNIB have a collection of articles on web design which touch on accessibility and usability. Personally I think they are a great place to start.
EDIT:
Meat & veg answer: The ideal coders (should) try and achieve to style the form but maintain the flow, i.e. ensure that labels for text fields are styled to appear to the left but appear before the field in the HTML.
So, yes it is good practice to:
Wrap each label/field pair in a div, allowing you to clear/position this separate to other pairings.
Make the label display:block with a fixed width and float:left
Don't forget to add required * - I usually use a span within the label so I can control the style of the required * separately.
Use <fieldset> tags to group and style sets of label/field pairings
Unless you are trying to create a highly stylized form, avoid absolutely positioning anything you don't have to. I find that as soon as I absolutely position one thing, I have to absolutely position others for consistency so you should always first try and find a solution which allows elements to control the position of subsequent elements
I know developers who still use tables to arrange their forms. Is this bad? Yes, but it works and for a temporary solution or small, rarely used form this might be an appropriate trade-off.
Scott on Writing has a nice article on basic form styling. This guys is awesome and knows what he is talking about.
And also there are jQuery tools for creating nicer more responsive controls:
jQuery UI
Multi select
Related
Before anyone close this question or complain... I've been looking all over StackOverFlow site but couldn't find anything straight foward about tables and forms.
I have a form which has at least 20 to 35 labels and text boxes, in different categories. So to start using CSS for each element would be too much.
For some reason, I'm feeling like using tables to align all the fields with their respective labels, since some labels will be larger than others (i.e. 'First Name' is a larger word than 'Age'), and so the layout would be distorted. And I can't start applying css for each label and text box (circa 20 each... that's 40 individual css rules).
Unless someone can give me some techniques, I'll be greatful.
I know CSS is good for forms but what about the very big forms?
So long as you use the cascade to your advantage, there is nothing wrong with CSS for forms.
In fact, I recommend it over using table.
Just set up some base rules...
input {
padding: 3px;
float: right;
}
Then handle the exceptions to your rules...
input#age {
float: none;
}
Forms are not tabular data, simple forms just superficially look like they are.
CSS is just fine for long forms. Have styles for most data. Then more specific styles for short bits of data and/or long bits of data, and so on. Don't style everything individually.
try using UL and LI instead of table, such as explained in the following article Click to see article
It provides the CSS too.
You wouldn't need 40 individual CSS rules. You could have one rule for all the labels, and one for all text boxes.
BUT - having said that - this sort of layout, where you have two columns of stuff, and you want all the stuff in column 1 (the labels in this example) aligned with each other, and all the stuff in col 2 (the text boxes) aligned with each other, while keeping the rows aligned - well that's exactly the sort of thing that the the good ol' table excels at.
I am a big advocate of CSS, and I believe that abuse of tables (to layout a page for example) is evil, evil, evil - but I would definitely go with tables on this one.
At the end of the day, it's all about preference and functionality. My personal preference are divs/CSS. The cascading nature of CSS, and cleanliness of the code, etc..
But hey, if you like tables - shout it from a rooftop!
You can use jQuery Masonry.
As far as I can see, it will achieve the layout you need and all you have to do is add classes and single line of JS code.
You can create good, accessible forms using CSS without too many CSS rules (for the alignment part, anyway). You basically just need to set the width of all the labels -- with one rule -- and define how they interact with the input elements. There a nice article at http://www.websiteoptimization.com/speed/tweak/forms/ (just the first one I found, I'm sure there are many others).
For a form IMO i'd rather use a table its cleaner. Use CSS for your websites layout. But again thats my opinion...
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.
I've want to know what is the best practice or approach in dealing with multiple and complex columns with a form inside.
here's an example of the form I'm dealing with
How to properly write a HTML markup for this? If I wrap every form element with a 'DIV' for every column it would take a lot 'DIVs' and styles; and the width for every column that is not repeating.
So what I did is, I put all form element in the table. And I think that is not the standard way to do it.
If your in my shoes,
How would you deal with the columns with non-repeating width?
There is no standard for complex forms, but there are plenty of blog posts claiming to have figured out the perfect way to approach this problem. Most of them are well thought out, but ultimately you have to pick the one you're most comfortable with. I have some suggestions though:
Check out the US postal service change of address form. It's surprisingly well done
If you have lots of forms, using a grid system like 960.gs, blueprint.css, or YUI grids (shudder) is an easy way to implement a form. However grid systems are definitely considered bloat if that's the only place you'll use them.
Do a search for "tableless forms" on Google. You will see a lot of different implementations. Choose the one you like.
I would probably put each form element in a list item within an unordered list (I think semantically, it is a list of input elements that need to be filled in.)
I would then add classes to them for positioning and width etc - the columned ones would need to be given a width and floated left...
so:
<ul>
<li class="iName"><label for="name">Full name:</label><input name="name"/></li>
<li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
etc etc...
</ul>
I believe this would be semantically correct and the most accessible way to do it.
I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.
I've seen quite a few answers on this site which advocate using tables for a design because it can't be done using CSS and Divs... when in actual fact it can be done with a bit of ingenuity.
What are examples of things that genuinely can't be done?
The only one I've ever come across is vertically aligning a box within another box.
*edit: I suppose I'm mostly interested in unachievable layouts using CSS2
Vertical alignment of blocks or text.
Having elastic containers that stretch to the width of their content.
Having several "rows" with the same structure where "cells" are synchronized in width throughout all rows.
Having several "columns" synchronize their height (up to the length of the longest text block).
These are quite basic designer needs that appear in even basic design concepts.
Cells/columns issues can possibly be solved with CSS if you take IE8 into account, but it will be many years until its wide spread (even IE7 in 2-3 years hasn't reached the desired market share).
As for "ingenuity", it is not that good thing in software development. Tricks that your colleagues and you yourself after a couple of months will not be able to understand usually build up that code base that everyone either is scared to touch or determined to refactor/rewrite completely.
Remember the KISS principle. The simpliest way you do this, the more reliably it will work.
The answer to this question depends on a number of things:
How backwards compatible do you need to be? Including IE6 will decrease the capacity of pure CSS; and
How much of your site is fixed-width and/or fixed-height. There are certain things in CSS that become hard if not impossible in variable width and/or height situations.
Side-by-side content is a problem for CSS. You can use floats for this but if the sum of widths exceeds the width of the container, the tail end floats will fall down below. Tables are more capable in this regard as they will squeeze columns where possible to make things fit and cells will never be split onto new rows.
Vertical centering you mentioned. Its trivial with tables and hard or impossible (depending on compatibility and fixed or variable heights of the container and the item) in pure CSS.
You may also be referring to hover content. IE6 only supports the :hover pseudo element on anchors. Javascript is required for that browser for :hover-like behaviour.
Basically if what you need to do can be done fairly trivially with pure CSS then do it. If not, don't feel bad if you have to use tables despite all the anti-table fanatics (and they are fanatics) jumping up and down in horror.
If you want a relatively simple exmaple of this check out Can you do this HTML layout without using tables?. This is a conceptually simple layout problem that is trivial with tables and noone has yet posted a solution meeting the requirements with pure CSS.
"... when in actual fact it can be done
with a bit of ingenuity."
How about 'avoiding the need for ingenuity' as a thing that's hard to do in CSS.
;)
tables should be used for tabular data! We should always try to use the correct HTML for the given content in which to markup. So not just div's (span, ul, li, dl, strong, em ... etc) This ensures that the content is not just looking right but is right (for SEO and accesibile reasons)
By not using tables it allows us to transform the content from one look and feel to the next without having to change the HTML, see Zen Garden
For now though with current browsers CSS table like layouts can be done but are tricky. there are techniques to get round many of the issues, weather they are done though global wrappers with background images, or positioning fixes... where both articles also refer to using Javascript to progressively enhance a page to get those additional classes you may require.
or of course you could use some XSL as a middle ware to help do formating if processing from a CMS.
Alternate row colors in a table without manually (or with the aid of a script) assigning alternate styles to each row.
Determine one element's position relative to another. For example you can't use CSS to determine which position one box is in a bunch of floated boxes using the same class. Would be nice to for example know if one box is the first box floated, or the second, or the last.
Handle widows. A widow is a word that dangles off the end of a paragraph, that is a single word starts the last line on a paragraph. It's a big nono on print design, but in the world of web it's hard to control.
Floating elements in multiple columns, where text in each cell can expand the height of the element, but the entire row below must be pushed down if this happens.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
An image cannot placed in exact center of a cell with align attribute.It can be done with some brute force .
Sounds obvious but you can't change content with CSS, it can only be used for styling.
Rory, I think you're absolutely right. Vertical alignment can be done with line-height, and creating lay-outs in CSS really isn't that hard. In fact, it's far more flexible when using absolute/relative positioning and floats.
People still using tables for design should really brush up with the current standards.
Going on topic, with CSS3 coming up it's hard to think of stuff CSS can't do. Image manipulation, content manipulation, advanced selectors, it's all going to be possible. But if I had to name one thing, it's that with CSS you can't (and won't) be able to rotate elements.
I was unable to use a transparency to create a variable-height text area across all pages. I believe it's impossible. I ultimately just wrote a quick javascript function to reset the height after the page load, to get the layout to work. See http://peterchristopher.com to see what I mean by transparency for the text area.
There is absolutely nothing tables can do that CSS can't.
There seems to be a common misconception that HTML & CSS should be easy. It isn't. If you find yourself wanting to use tables then its your CSS skills that need improving not the technology (although the technology does obviously have plenty of holes that could do with improving).