SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict sojomy's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Am I doing this right?

    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

  2. #2
    . gdape's Avatar
    Join Date
    Jan 2002
    Location
    in the outskirts, and in the fringes
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  3. #3
    SitePoint Addict sojomy's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Netscape 4 is probably the only one you have to worry about not using CSS. More people use this garbage browser than IE3.0.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  5. #5
    SitePoint Addict sojomy's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    . gdape's Avatar
    Join Date
    Jan 2002
    Location
    in the outskirts, and in the fringes
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote 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.

    Quote 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


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
  •