Am I doing this right?

**sojomy** · Aug 11, 2004 22:51

Ok, I have a page that I am writing and I'm trying to use CSS instead of using Tables for my layout. I am having a hard time when it comes to arranging and grouping my CSS DIVs. I just don't quite understand what I am supposed to group together and what I am not. Here is my test page

This is the page as it is supposed to look. It should look the same in all browsers, I am guessing, because I use absolute positioning for everything.
http://www.gtoro.com/test/TestBordersOff.html

Here is the same page with borders turned on so you can see what I have grouped and where it is.
http://www.gtoro.com/test/TestBordersOn.html

Here is the code from the first page in case you cannot see it yourself

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>gtoro</TITLE>
  <LINK REL="stylesheet" TYPE="text/css" HREF="gtoro.css">
  <style type="text/css">
  <!--
	body {
	  background-color: #FFFFFF;
	  color: #666666;
	  font-family: helvetica, arial, georgia, courier;
	  font-size: 11px;
	}
	input, select { font-size:11px; }
	#BoxBorder {
	  position: absolute;
	  margin-left: -288px;
	  margin-top: -144px;
	  top: 50%; left: 50%;
	  width: 576px;
	  height: 288px;
	  border : 1px solid black;
	  overflow: hidden;
	}
	#TitleBar {
	  position: absolute;
	  background-color: #FF9900;
	  color:	#FFFFFF;
	  left: 0px;
	  top: 0px;
	  width: 574px;
	  height: 20px;
	  padding: 5px 10px 5px 10px;
	  overflow:hidden;
	}
	#TitleBar div a {
	  color: #000000;
	  text-decoration: none;
	}
	#TitleBar div a:hover {
	  color: #FFFFFF;
	}
	#FormHeading {
	  position: absolute;
	  color: #000000;
	  left: 20px;
	  top: 30px;
	  width: 310px;
	  height: 20px;
	  font-weight: bold;
	  font-size: 12px;
	  overflow:hidden;
	  border : 1px solid black;
	}
	#FormLeftTitles {
	  position: absolute;
	  left: 20px;
	  top: 50px;
	  width: 55px;
	  height: 90px;
	  line-height: 21px;
	  overflow:hidden;
	  border : 1px solid black;
	}
	#FormLeftInputs {
	  position: absolute;
	  left: 80px;
	  top: 50px;
	  width: 200px;
	  height: 90px;
	  overflow:hidden;
	  border : 1px solid black;
	}
	#FormRight1 {
	  position: absolute;
	  left: 300px;
	  top: 50px;
	  width: 180px;
	  height: 90px;
	  overflow:hidden;
	  border : 1px solid black;
	}
	#FormRight2 {
	  position: absolute;
	  left: 390px;
	  top: 65px;
	  width: 80px;
	  height: 65px;
	  overflow:hidden;
	  border : 1px solid black;
	}
	#FormComments {
	  position: absolute;
	  left: 20px;
	  top: 170px;
	  width: 410px;
	  height: 110px;
	  overflow:hidden;
	  border : 1px solid black;
	}
	#FormSubmit {
	  position: absolute;
	  left: 500px;
	  top: 255px;
	  width: 55px;
	  height: 25px;
	  overflow:hidden;
	  border : 1px solid black;
	}
  -->
  </style>
</HEAD>
<BODY>
<div id="BoxBorder">
  <div id="TitleBar">
	<div style="float:left;"><a href="mailto:x@x.com">smith dave</a></div>
	<div style="float:right;"><a href="mailto:x@x.com">dave smith</a></div>
  </div>
  <div id="FormHeading">For more information, please fill out the form below.</div>
  <form name="ContactForm" action="/Contact.php">
  <div id="FormLeftTitles">
	Name :<br>
	Company :<br>
	Phone :<br>
	Website :<br>
  </div>
  <div id="FormLeftInputs">
	<input type="text" size="30" name="Name"><br>
	<input type="text" size="30" name="Company"><br>
	<input type="text" size="30" name="Phone"><br>
	<input type="text" size="30" name="Website"><br>
  </div>
  <div id="FormRight1">
	I would like more information on<br>
	<input type="checkbox" name="Print"> Print<br>
	<input type="checkbox" name="DirectMail"> Direct Mail<br>
	<input type="checkbox" name="Collateral"> Collateral
  </div>
  <div id="FormRight2">
	<input type="checkbox" name="Packaging"> Packaging<br>
	<input type="checkbox" name="Logos"> Logos<br>
	<input type="checkbox" name="Websites"> Websites
  </div>
  <div id="FormComments">
	Other Comments<BR>
	<textarea name="Comments" ROWS=5 COLS=47></textarea>
  </div>
  <div id="FormSubmit">
	<input type=submit value="Submit">
  </div>
  </form>
</div>
</BODY>
</HTML>

So does any experienced CSS developer have any suggestions on what I am doing right and wrong with using CSS for my layout?

Thanks in advance for any suggestions

**gdape** · Aug 11, 2004 23:28

With forms, get to know the fieldset, legend and label tags, there's a simple demo on cameronmoll.com which once you look at you'll go "oh, that's cool".

You have separated your labels from your inputs in divs, which doesn't degrade too well. (If you have Firefox download the web developer extension which allows you to disable styles; in any case you can remove the css to see what I mean).

**sojomy** · Aug 12, 2004 07:30

So in browsers that don't support CSS or have it disabled, it looks hideous (and probably unusable), right? Which browsers would not support CSS or allow it to be disabled?

**The New Guy** · Aug 12, 2004 07:54

Netscape 4 is probably the only one you have to worry about not using CSS. More people use this garbage browser than IE3.0.

**sojomy** · Aug 12, 2004 09:25

gdape, thanks for the info on the fieldset, legend and label tags. I didn't see an example on that site, but I did when I searched for it.

Does anyone know what browsers do or do not support fieldset, legend and label tags?

**gdape** · Aug 14, 2004 19:25

I think IE4.0 was the first to implement proper form markup. I think NN 4 displays the content even if it doesn't understand the tags, but do your own testing.

**Paul O'B** · Aug 15, 2004 07:43

Originally Posted by gdape

but do your own testing

True : Even though it sounds a bit harsh the only way you will know for certain is to test in the browsers you want to support

You should test each element as you go in the browsers you want to support and not wait until the page is finished before testing. In this way you will actually save time in the end and avoid the possibility of designing pages that only work in one browser.

CSS has very good (but varied) support now and is likely to work in more browsers than javascript does.

Originally Posted by sojomy

So in browsers that don't support CSS or have it disabled, it looks hideous (and probably unusable

It looks even worse in browsers that don't have electricity either

and probably unusable

Far from it! When I turn off styles in firefox the form display linearly and I actually think it looks easier than your styled form because everything follows logically.

Obviously in browsers that have a partial undertanding of css then you may have some display problems if they only render some elements and in these cases you should be using the import hack to hide styles from nn4 for example.

As gdape said the fieldset, legend and label tags are ideal for grouping form elements and aid usability and accessibility.

You should always aim to have the html make as much structural and semantically correct sense as possible.

A div is just a generic container (division) that you can use to style elements or groups of elements but don't get carried away with them otherwise the page will suffer from divitus.

Paul

User Tag List

Thread: Am I doing this right?

Thread Tools

Display

Am I doing this right?

Bookmarks

Bookmarks

Posting Permissions