SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Redheadskater's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    First attempt at table-less layout

    Hi everyone-

    My first attempt at a table-less design has not gone well. I've been reading CSS articles all day and I'm not getting anywhere. Since there's a book out about how to design using strictly CSS, I know it can be done - but what if you have a IE browser? Thought I read somewhere that IE doesn't support CSS2 - therefore we are stuck with tables. Can someone clarify this for me?

    Big question of the day - is there a difference between div id and div class? Do you use id only for div and class for items like <p>???

    Also - here's my code - feel free to pick apart.....I'm off to do some more reading.

    (You can go to http://www.st-bridget.org/test/redesign.htm to see the html code)

    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	left: 0px;
    	top: 0px;
    	right: 0px;
    	bottom: 0px;
    	background-color: #FFFFFF;
    }
    
    #navigation {
    	position: absolute;
    	top: 30px;
    	margin: 0px;
    	right: 20px;
    	font-weight: bold;
    }
    #content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #006699;
    	position: absolute;
    	width: 60%;
    	left: 205px;
    	top: 100px;
    	background-color: #FFFFFF;
    	padding: 5px;
    	right: 20px;
    }
    p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	letter-spacing: normal;
    	text-align: justify;
    	margin: 0px;
    	padding: 0px;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #B18E79;
    }
    #header {
    	position: absolute;
    	left: 205px;
    	top: 0px;
    }
    #leftcol {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #0099CC;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	line-height: normal;
    	height: 600px;
    	width: 200px;
    	background-color: #FFFFFF;
    	border: 1px outset #000000;
    
    }
    a:link {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #0066CC;
    	text-decoration: none;
    }
    a:visited {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #CCCCCC;
    	text-decoration: none;
    }
    a:hover {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #B18E79;
    }
    .addy {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #000000;
    	text-align: justify;
    }
    #line {
    	position: absolute;
    	top: 40px;
    	margin: 0px;
    	right: 0px;
    	left: 205px;
    }
    #date {
    	position: absolute;
    	top: 50px;
    	margin: 0px;
    	right: 20px;
    }
    Lisa
    ~~~~~~~~~~
    Time flies - it's up to you to be the navigator.

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    104 Post(s)
    Tagged
    1 Thread(s)
    id allows you to specify one specific instance. There can be one and only one occurrence of an id per page (without an error in validation).

    class allows you to apply a style to a group of tags (p, td, tr whatever). You can have multiple occurrences of a class per page.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    104 Post(s)
    Tagged
    1 Thread(s)
    Sorry, didn't see the rest of your post. IE5+ will handle MOST of the CSS specs and SOME of the css2 specs. You just need to figure out which ones are handled and how. You can use w3schools for a reference or you can look at the examples in this thread for some good inspiration and to see how things work.

    as for your specific css:
    1. since your font is the same, apply it to the body tag only. You can remove it everywhere else
    2. left, right, top and bottom aren't the correct tags. Correct tags are margin-left, margin-right, margin-top and margin-bottom. There's a short hand for margin which allows you to specify all four on one line, but I don't remember the order.
    3. I personally would get away from some of the absolute positioning, but I prefer liquid designs myself.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell
    1. left, right, top and bottom aren't the correct tags. Correct tags are margin-left, margin-right, margin-top and margin-bottom. There's a short hand for margin which allows you to specify all four on one line, but I don't remember the order.
    2. I personally would get away from some of the absolute positioning, but I prefer liquid designs myself.
    Think of it like a clock - the short hand:
    Code:
    margin: 0 20px 10px 0
    is the same as:
    Code:
    margin-top: 0;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0
    If only two values are specified (e.g. margin: 0 10px) then the first value corresponds to margin-top/bottom and the second value corresponds to margin-left/right.

    If three values are specified (e.g. margin: 0 10px 10px) then the first is margin-top, the second is margin-left/right and the third is margin-bottom.

    The same rules apply when using the shortcut for padding and border.

    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  5. #5
    SitePoint Enthusiast Redheadskater's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks for the critique

    DaveMaxwell
    I personally would get away from some of the absolute positioning, but I prefer liquid designs myself.
    in one of the many articles I read (maybe one of K.Yank's??), I believe that someone else said doing absolute positions isn't the way to go with a complete CSS layout. But I just can't kick my desire to see liquid layouts. I guess it's because for so long we were stuck with fixed widths - and now it's so easy to do a resizable layout, it feels so much more ... ummmm... hip and cool for lack of better words.

    Quote Originally Posted by Tygger2512
    Think of it like a clock - the short hand:
    Code:
    margin: 0 20px 10px 0
    is the same as:
    Code:
    margin-top: 0;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0
    If only two values are specified (e.g. margin: 0 10px) then the first value corresponds to margin-top/bottom and the second value corresponds to margin-left/right.

    If three values are specified (e.g. margin: 0 10px 10px) then the first is margin-top, the second is margin-left/right and the third is margin-bottom.

    The same rules apply when using the shortcut for padding and border.

    Andy.
    Thanks for the clear explanation of how this works, Andy. I use Dreamweaver MX and I was using the 'fill in the blank' CSS fields. Now I know I need to do some hand coding here in order to get it to validate.

    This is starting to get fun now!
    Lisa
    ~~~~~~~~~~
    Time flies - it's up to you to be the navigator.


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
  •