Web Page layout Help /Opinion needed

keithc · January 30th, 2006, 12:18 PM

Hi, This is the source code for site I am trying to layout. What I did is designed a banner for a fixed width of 950 px. I then created a 1 X 3 table in dreamweaver. I made the outer cells 33% and the middle cell a fixed with of 950 where I inserted the banner. This way the graphic stays same size when page is maximized. I then created another table below the table which has the included banner. I resized this table so that it would hold my main contents(I dragged the table handle down so I could add page content to it. If I draw a layer within this table the positioning of the layer gets all messed up in different resolutions. I am not sure if I am even doing the layout properly. Any help be appreciated

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

</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body bgcolor="#000033" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer1" style="position:absolute; left:589px; top:139px; width:351px; height:191px; background-color:#CCCCCC; layer-background-color:#CCCCCC; border:1px none #000000; z-index:1">
  <div align="left"></div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th width="33%" scope="col"></th>
    <th width="950" height="100%" scope="col"><table width="950" height="1100" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <th valign="top" scope="col"><div align="left">
              <table width="950" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <th scope="col"> </th>
                </tr>
              </table>
              <img src="Images/BrooksBanner2.gif" width="950" height="100" /><br />
              <table width="150" height="768" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                <tr>
                  <th align="left" valign="top" scope="col"> </th>
                </tr>
              </table>
          </div></th>
        </tr>
        <tr>
          <td> </td>
        </tr>
    </table></th>
    <th width="33%" scope="col"></th>
  </tr>
</table>

keithc · January 30th, 2006, 12:24 PM

Just a sidenote here, I think that because my layer is "absolute" that when the page is at a lower resoluion the layer stays in same position it was designed in but when tables adjust size the layer looks to get pushed off to a different position? Id like it to stay in same position wether page is max'd or not.

Imar · February 1st, 2006, 02:40 PM

Hi Keith,

Sorry for the late reply. I think I overlooked this post.

Can you elaborate a bit about what you're trying to accomplish? When you say fixed, do you mean fixed where it was when the page first loaded, or fixed relative to other elements?

Can you describe the layout of your final design? Maybe provide a link to a few versions (different resolutions) as a graphic?

Also, I think you can safely remove the Netscape 4 resize fix from your code...

A few other remarks: In your CSS, 0px should be 0. When something is 0, there is no need to specify a measurement. 0 px, 0 cm, 0 cats or 0 inch are all the same.

You're using a number of outdated properties like leftmargin and topmargin. It's better to use CSS for that (as you have already done).

Finally, why are you using absolute positioning? It's probably a lot easier to define the out box of your site with a fixed width, and then position other content inside that box with attributes like margin etc. For example:

Code:

<!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">
    #PageWrapper
    {
      width: 600px;
      margin: auto;
      border: 1px solid black;
    }

    #Menu
    {
      width: 200px;
      margin-left: 350px;
      margin-right: 48px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div id="PageWrapper">
  <div id="Menu">
    I'm the menu
  </div>
  <br />
  I am regular content
  <br />
</div>
</body>
</html>

In this example, the red "menu" box is fixed in position, relative to the rest of the page, without using absolute positioning. Is this the effect you're after?

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

keithc · February 3rd, 2006, 09:50 AM

Imar, Thanks so much again for the response. The site I have done so far is at http://tektown.net:86

I would appreciate more suggestions on what you see wrong with this layout. There are 2 tables in the site. The top table is 1 X 3 where the banner graphic is and outside cells are set to 33% and get there color from the boddy background attribute. Then I added another table below that top table with the same settings and dragged the table handles down to add height to the table. The middle cells on both tables are fixed widths pertaining to the banner image I created. Problem is I am not sure if i am even going about the layout for the site correctly or not and I can't seem to get layers in the bottom table to keep there positions? I guess the site looks the way i'd like it to look but I am unsure if the way I set it up is incorrect or not.

Imar · February 4th, 2006, 05:20 AM

If all you need is a centered logo and a centered content box right below it, why do you need all those tables and, more specific, multiple columns?

You can achieve the same effect with a few <div> tags and some CSS:

Code:

<!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
        {
            margin: 0;
            background-color: #000;
        }
        #PageWrapper
        {
            width: 950px;
            margin: auto;
        }

        #Content
        {
            background-color: #fff;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="PageWrapper">
    <div id="Logo"><img src="http://tektown.net:86/Images/BrooksBanner2.gif" /></div>
    <div id="Content">
        I am content
        <br /><br /><br /><br /><br /><br /><br />
        I am more content
        <br /><br /><br /><br /><br /><br /><br />
        I am more content
    </div>
</div>
</body>
</html>

In this example, the PageWrapper <div> is centered on the page by giving it an explicit width and a margin of auto.
Inside that <div>, there are two other, stacked, <div> tags: the logo and the Content <div>.

Does this help?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

keithc · February 5th, 2006, 10:20 AM

Imar thanks a ton that is indeed the layout I want for this particular site. The first question I have is if the Table'd site I did has the same effect as the css/Div code example you provided (Thanks a ton) why would one be better than the other? My thinking is that the code you provided is so much cleaner and easier to sort through.

Second question is within the "<div id = Content>" section if I want to do say like a Side Nav bar would you reccomend useing css/div or should I table it? Thanks for taking the time to respond. Helps us beginners so much and I for one really appreciate it.

Imar · February 5th, 2006, 10:40 AM

Hi again Keith,

You sort of answered the question yourself:

Quote:

quote:My thinking is that the code you provided is so much cleaner and easier to sort through.

Indeed, CSS based layouts are often a lot better to read, understand and maintain.

Table based layouts have always been around, but are now often considered a "thing of the past" or at least a nineties thing. There are lots of reasons why CSS is preferred over a table based design, including improved accessibility, slimmer pages, code that is easier to understand and maintain and improved "discoverability" by search engines.

Some people are almost religious about this. They advocate CSS designs as the only (proper) way forward. They insist that tables are only used for what they were designed for: presentation of (tabular) data.

Personally, I am somewhere in the middle. I understand and appreciate the benefits of a CSS based designed, and do most of my work that way. However, sometimes using a single table is *sooo* much easier than trying to accomplish the same thing in CSS. In those cases, I don't mind using a table.

This also brings me to your other question: the side bar. What you propose is a "two column layout" that is quite easy to implement in CSS. Take a look at this page for example: http://www.bluerobot.com/web/layouts/
If you search Google for two column layout css or three column layout css you'll find plenty of interesting stuff.

So in your case, you're probably better off implementing the SideBar as a <div> and position it with a bit of CSS next to the main content area.

In more complex layouts, with many different areas and side bars, a table based approach might be easier to implement. If you carefully design your site, you don't need more than 1 table for the entire site design. The rest of the layout should then be done with CSS.

HtH,

Imar