SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning VS tables

    Should I even try to use CSS positioning alone to create the layout of a page, or I should stick to tables? I don’t care about old browsers, but it should look good with IE5+, NS6+ and the new versions of Opera and Mozilla. The layout will be rather complex.

    Will there be any advantages if I use CSS only and no tables?

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables should be used to mark up truly tabular information ("data tables").
    W3C Web Content Accessibility Guidelines
    => using tables for layout is bad

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the matter is not only what is bad and what is good according to W3C. The matter is what works in reality and what doesn't. The ideal is to have something "good" that works. But if i had to choose between something good that doesn't work, and something "bad" that works in real life, then i would have to choose the second.

    So the question remains: Is it possible to create complex layouts just with CSS that will look good with IE5+, NS6+ and the new versions of Opera and Mozilla? What will be the real world advantages of using only CSS and no tables?

  4. #4
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally -- at least until Internet Explorer, Mozilla/Netscape, and Opera really begin to support standards equally -- I would use tables. They're still valid in the XHTML version, and will work with all browsers. If you have a complex layout and try to get it to work using only CSS and such, you're going to have a very difficult time.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  5. #5
    webality...dunno what it means bcp_2005's Avatar
    Join Date
    Jun 2002
    Location
    Huntsville Alabama
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Aes
    Personally -- at least until Internet Explorer, Mozilla/Netscape, and Opera really begin to support standards equally -- I would use tables. They're still valid in the XHTML version, and will work with all browsers. If you have a complex layout and try to get it to work using only CSS and such, you're going to have a very difficult time.
    Yes, I've found that out the hard way. I'm going to start experimenting with CSS layouts again just to see if I can figure out how to build conplex layouts with it. I've learned a lot since I've experimented with it before.
    [ metabahn ] : changing the course of the web.

  6. #6
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find css much more precise then tables

  7. #7
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As do I. I only use tables for tabular data also. My latest site (not my blog) was built using CSS for all the positioning...
    russell.cz.cc - coming soon (I promise!)

  8. #8
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you show me some examples of layouts done with CSS only? I tried to do some, and there was no problem when the design was fixed. But when i tried to use percentages to make it liquid (resizable) I had some problems.

  9. #9
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by S7even
    can you show me some examples of layouts done with CSS only? I tried to do some, and there was no problem when the design was fixed. But when i tried to use percentages to make it liquid (resizable) I had some problems.
    My latest site uses CSS only, and no tables. I don't know what you'd consider complex positioning.... I think it's all easy, so I guess it's relative.
    ----Adopt-a-Sig----
    Your message here!

  10. #10
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My latest site: http://www.ruraltech.info is done using css positioning. I have to fix it so it works in 800x600 though. Shouldn't be to hard.
    russell.cz.cc - coming soon (I promise!)

  11. #11
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the examples. I will study them.

    Russell, you have to fix it for resolutions above 1024x768 also. I am using 1280x1024 and the main part gets a bit messed up.

    So, you can make anything that could be done with tables with just CSS, or there are some limitations/problems?

  12. #12
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    taken from your example randem:
    Code:
    <div class="menu">
      <strong>This Site</strong>
      <a href="/">Home</a>
      <a href="/fun.php">Poetry Fun</a>
      <a href="/members.php">Poets</a>
      <a href="/search.php">Search</a>
      <a href="/faq.php">FAQs</a>
      <a href="/etiquette.php">Etiquette</a>
      <a href="/privacy.php">Privacy</a>
      <a href="/submissions.php">Submissions</a>
      <a href="/links.php">Links</a>
      <br />
    </div>
    i am trying to do something similar (but with a javascript inside the <div>), but i can't really get my head round it yet...
    ...for instance the positionings of the <div>s

    it's alright to do them individually, and i even managed to put them above each other, but when i try to put them next to each other i seem to do something wrong

    this is what an empty template looks like so far:
    (bearing in mind that i keep the css somewhere else usually)
    Code:
    <html>
    
    <head><title>test</title>
    
    <style type="text/css">
    
    <!--
    
    p, body, h1, h2, a, th, td {	font-family: Veranda, Geneva, Arial, Helvetica, sans-serif;
    				font-size: 12px;
    			   }
    h1 {	font-size: 16px;
    	margin: 10, 10
       }
    h2 {	font-size: 14px;
    	margin: 0, 20 }
    body { 	margin: 0, 150;
    	text-align: justify}
    p {	margin: 10, 10 }
    
    p:first-letter {	font-size: 300%;
    			float: left
    		}
    SPAN { text-transform: uppercase }
    
    a:link, a:visited, a:hover {	font-family: Veranda, Geneva, Arial, Helvetica, sans-serif;
    				font-size: 12px;
    				font-weight: bold
    			   }
    a:link 		{ color: red;
    		  text-decoration: none
    		}
    a:visited 	{ color: #069;
    		  text-decoration: none
    		}
    a:hover 	{ color: #000000;
    		  text-decoration: underline
    		}
    
    BODY {		background: #66CC99;
    		margin-top: 0px;
    		margin-bottom: 0px;
    		margin-right: 0px;
    		padding-right: 0px;
    		padding-bottom: 0px;
    		
    		SCROLLBAR-FACE-COLOR: #6699CC;
    		SCROLLBAR-HIGHLIGHT-COLOR: #66cc99;
    		SCROLLBAR-SHADOW-COLOR: #66cc99;
    		SCROLLBAR-TRACK-COLOR: #66cc99;
    		SCROLLBAR-BASE-COLOR: #6699CC;
    		scrollbar-dark-shadow-color: #66CC99;
    		scrollbar-3d-light-color: #6699CC
    	}
    
    something like this here(?):
    #nav   {        height: 100%;
                    width: 140px;   -->body px needs to reduce
                    background: same as body;
                    ...???;
            }
    
    #main  {	height: 100%;
    		width: 100%;
    		float: right;
    		border-top: 5px solid #69C;
    		border-left: 15px solid #69C;
    		border-right: 2px solid #69C;
    		border-color: #69C;
    		background: #fff;
    		margin-bottom: 0px
    	}
    
    -->
    </style>
    
    </head>
    
    <body>
    
    <center>
     <font color="red">
      |: &nbsp;
       <a href="http://www.link1.com">Link1</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link2.com">Link2</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link3.com">Link3</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link4.com">Link4</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link5.com">Link5</a>
      :| &nbsp;
     </font>
    </center>
    
    <div id="main">
    
    <center>
    <hr width="75%">
     <font color="red">
      |: &nbsp;
       <a href="http://www.link1.com">Link1</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link2.com">Link2</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link3.com">Link3</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link4.com">Link4</a>
      &nbsp; :|: &nbsp;
       <a href="http://www.link5.com">Link5</a>
      :| &nbsp;
     </font>
    </center>
    
    </div>
    
    </body>
    
    </html>
    on the left side, where the body has got 150px before the div starts, i'd like to insert another div, in order to put another javascript based navigation in

    i have tried to put one <div> into the other, which didn't work...
    ...basically i am stuck with the #nav and where to place it
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  13. #13
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really don't understand what you're trying to accomplish, and my motto has always been "if it's hard, you're doing it wrong."
    ----Adopt-a-Sig----
    Your message here!

  14. #14
    @russellg RussellG's Avatar
    Join Date
    Jun 2000
    Location
    Gold Coast, Queensland
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by S7even
    Thanks for the examples. I will study them.

    Russell, you have to fix it for resolutions above 1024x768 also. I am using 1280x1024 and the main part gets a bit messed up.

    So, you can make anything that could be done with tables with just CSS, or there are some limitations/problems?
    Thanks for the heads up!

    Unless you are creating say, a memberlist or something similiar where you are using lots of columns and rows, then using <div>'s should be fine.
    russell.cz.cc - coming soon (I promise!)


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
  •