PDA

View Full Version : HTML/CSS: Preferences dialog form layout


senocular
November 23rd, 2006, 01:43 PM
What would be the "correct" way to layout a preferences dialog in HTML/CSS?
Currently, I'm using tables, but I imagine that's not the best way to do it (you know, tables for tabular data only etc.). See the attached picture for a better idea of what I mean.

Tables, here, let you easily separate sides and keep alignment correct with labels and their respective options. The one place where they fail is labels across the divide. In the image, for example, the "No break after td" label corresponds to the check box to the right, so clicking that text selects the check box. In the options above that, Tags and Attributes are the lables (and they aren't so hard to do, but you can see the difference).

Anyway, I think you get the general idea, and this might over complicate the basic underlying question: how do you set these kinds of interfaces up in HTML?

Thanks :p:
skrolikowski
November 23rd, 2006, 02:18 PM
Do you "code" or "design"? If you are a coder, ignore this menu (except for Tab Size). If you are a designer, this menu ask you how you want Dreamweaver to write the code for you. I'd add a "No Break" after the TD and keep everything else the same.
bwh2
November 23rd, 2006, 03:34 PM
i'm all for the table-less layout method... except for forms. tables just make forms exponentially easier to code. i find that table layouts for forms are lighter weight than table-less versions.
duncanhall
November 23rd, 2006, 07:04 PM
In this kind of scenario it is fairly acceptable to use tables, as it is quite tabular data. But with some good CSS I definately wouldn't say table layouts offer lighter code. Assuming you keep all CSS in an external stylesheet, you're left with just what's needed on the page - the whole point of CSS. Plus using CSS can offer some extra options for useability and appearance.

Try something like this:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

body {
font-family: Tahoma, helvetica, geneva;
font-size: 11px;
}

#theForm {
line-height: 25px;
}

#theForm input {
height: 15px;
width: 30px;
border: 1px solid #666666;
color: #333333;
}
#theForm input:Focus {
background: #6699FF;
color: #FFFFFF;
}

#theForm label {
margin: 0 10px 0 0;
}

.checkbox {
margin: 0 0 0 0;
}

.radio {
margin: 0 0 -3px 0;
padding: 0 0 0 0;
}

</style>

</head>

<body>

<form id="theForm">
<label for="check_1">Indent:</label><input type="checkbox" class="checkbox" id="check_1" />
<label for="text_1">with</label><input type="text" id="text_1" />
<select id="select_1"><option>Something1</option><option>Something2</option><option>Something3</option></select><br/>
<label for="text_2">Tab size:</label><input type="text" id="text_2" /><br />
<label for="check_2">Automatic wrapping</label><input type="checkbox" class="checkbox" id="check_2" />
<label for="text_3">after column</label><input type="text" id="text_3" /><br />
<label for="select_2">Line Break type:</label><select id="select_2"><option>Something1</option><option>Something2</option><option>Something3</option></select></select><br/>
<label for="select_3">Default Tag case</label><select id="select_3"><option>Something1</option><option>Something2</option><option>Something3</option></select></select><br />
Override Case of:<input type="checkbox" class="checkbox" id="check_3" /><label for="check_3">Tags</label>
<input type="checkbox" class="checkbox" id="check_4" /><label for="check_4">Attributes</label><br />
Centering:<input type="radio" class="radio" id="radio_1" /><label for="radio_1">Div Tag</label>
<input type="radio" class="radio" id="radio_2" /><label for="radio_2">Center Tag</label>
</form>

</body>
</html>



Notice the focus highlighting on the input boxes for extra points. As far I know, this doesn't work for Internet Explorer but they might have updated it for the new version.
bwh2
November 23rd, 2006, 10:18 PM
^ yeah, but that doesn't look like what sen had in the image. i would go with tables like this:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

body {
font-family: Tahoma, helvetica, geneva;
font-size: 11px;
}

#theForm {
line-height: 25px;
}

#theForm input {
height: 15px;
width: 30px;
border: 1px solid #666;
color: #333;
}
#theForm input:Focus {
background: #69f;
color: #fff;
}

#theForm label {
margin: 0;
}

.checkbox {
margin: 0 0 0 -7px;
}

.radio {
margin: 0 0 -3px -7px;
}

.left {
text-align: right;
margin: 0;
padding: 0 5px 0 0;
}

</style>

</head>

<body>

<form id="theForm">
<table>
<tr>
<td class="left"><label for="check_1">Indent:</label></td>
<td class="right"><input type="checkbox" class="checkbox" id="check_1" /><label for="text_1">with</label><input type="text" id="text_1" /> <select id="select_1"><option>Something1</option><option>Something2</option><option>Something3</option></select></td>
</tr>
<tr>
<td class="left"><label for="text_2">Tab size:</label></td>
<td class="right"><input type="text" id="text_2" /></td>
</tr>
<tr>
<td class="left"><label for="check_2">Automatic wrapping:</label></td>
<td class="right"><input type="checkbox" class="checkbox" id="check_2" /><label for="text_3">after column</label> <input type="text" id="text_3" /></td>
</tr>
<tr>
<td class="left"><label for="select_2">Line Break type:</label></td>
<td class="right"><select id="select_2"><option>Something1</option><option>Something2</option><option>Something3</option></select></select></td>
</tr>
<tr>
<td class="left"><label for="select_3">Default Tag case:</label></td>
<td class="right"><select id="select_3"><option>Something1</option><option>Something2</option><option>Something3</option></select></select></td>
</tr>
<tr>
<td class="left">Override Case of:</td>
<td class="right"><input type="checkbox" class="checkbox" id="check_3" /><label for="check_3">Tags</label>&nbsp;&nbsp;<input type="checkbox" class="checkbox" id="check_4" /><label for="check_4">Attributes</label></td>
</tr>
<tr>
<td class="left">Centering:</td>
<td class="right"><input type="radio" class="radio" id="radio_1" /><label for="radio_1">Div Tag</label> <input type="radio" class="radio" id="radio_2" /><label for="radio_2">Center Tag</label></td>
</tr>
</table>
</form>

</body>
</html>
simplistik
November 23rd, 2006, 10:35 PM
Assuming you keep all CSS in an external stylesheet, you're left with just what's needed on the page - the whole point of CSS. Plus using CSS can offer some extra options for useability and appearance.
I'm not sure if someone is goin around tellin' ppl this same thing but I see it everywhere. Where people don't/won't associate tables w/ CSS. CSS can manipulate tables as easily as it can any other element in HTML. And they can in fact co-exist on in the same markup :P

I'd agree w/ using tables in a form... where as in fact the are tabular data. Of course if you want to be trendy an "uber cool" you can do it w/ DIVs as well... although it's not neccessary. Using a DIV or a table will more than likely yield the same result in load time and efficiency in this case, and if it doesn't it'll be milliseconds in difference.
senocular
November 24th, 2006, 12:37 AM
Ok, good to know :) Tables it is.. and actually, I wasn't aware of the for attribute in labels. Thanks for that bwh2 :D
Jeff Wheeler
November 24th, 2006, 12:43 AM
For once, I also vote for tables. That layout is simply too difficult to do with css easily. You'll save so many hours by using tables, and it'll work so much better.
duncanhall
November 24th, 2006, 05:36 AM
Not that I want to be "Mr Disagreement", but...


^ yeah, but that doesn't look like what sen had in the image. i would go with tables like this:

Really? In Firefox, my code and your version look pretty much exactly the same, and mine has less markup. In IE, the only difference is a border around checkboxes/radios, which was simply an oversight and can be fixed with 1 line of CSS. Granted it's not exactly like the example, but it was just supposed to be a starting point to show how it can be done. I really can't see any advantage your tabled version is offering at the price of more code.



I'm not sure if someone is goin around tellin' ppl this same thing but I see it everywhere. Where people don't/won't associate tables w/ CSS. CSS can manipulate tables as easily as it can any other element in HTML. And they can in fact co-exist on in the same markup.


I didn't mean to imply that you can't use tables and CSS, although I can see how it could be construed this way. What I was getting at is that If you're using CSS to manipulate styles and useability formats, you may as well be using it for structural purposes as well. If you can lay out your site without using tables, you should be able to do the same with your forms.



For once, I also vote for tables. That layout is simply too difficult to do with css easily. You'll save so many hours by using tables, and it'll work so much better.


I still disagree that tables are going to work better and save you time. bwh2's example simply takes my code and adds tabular markup to it. How can this be quicker and what benefits is it offering?
bwh2
November 24th, 2006, 09:41 AM
Really? In Firefox, my code and your version look pretty much exactly the same, and mine has less markupi'm testing it in FF2, IE7, and Opera 8.5. in all 3, the alignment on your items is off.

i think most of us agree with you that tables aren't an ideal answer. in theory, we should be using different markup for form layout. but practically speaking, tables are the best option for something like this.