Jump to content

Archived

This topic is now archived and is closed to further replies.

Skatecrazy1

Layout Problems

Recommended Posts

Hi, I'm having some problems with the center content box in a layout at [url=http://www.snapskate.com/v2/]http://www.snapskate.com/v2/[/url].  I can't get the bottom row of the table for the center box to stay the same size as the top bar for it.  It all validates as XHTML [url=http://validator.w3.org/check?uri=http%3A%2F%2Fwww.snapskate.com%2Fv2%2F&charset=%28detect+automatically%29&doctype=Inline]Here[/url]

Here's the HTML code

I'd greatly appreciate any help.

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Snap</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0">
      <tr>
      <!--start of blue header-->
      <td class="logo"><img src="images/logo.png" alt="" /></td>
      <td class="header"></td>
      </tr>
      <!--end of blue header-->
     
      <!--start of grey link bar-->
      <tr>
      <td colspan="2" class="headerbar"></td>
      </tr>
      </table>
      <!--end of grey link bar-->
      <!--start of main content area-->
      <table width="100%" cellspacing="0" cellpadding="0">
      <tr>
      <!--beginning of left side content-->
      <td class="leftside" valign="top" width="220">
      <table cellspacing="0" cellpadding="0" width="200">
      <tr>
      <td width="4%"><img src="images/lborder.png" alt="" /></td>
      <td class="boxheaderbg">Content Box</td>
      <td width="6%" class="rborder"><img src="images/rborder.png" width="2" height="24" alt="" /></td>
      </tr>
      <tr>
      <td colspan="3" class="box">
      Navigation here!
      </td>
      </tr>
      </table>
      </td>
      <!--end of left side content-->
      <td width="100%" valign="top">
      <!--start of main content box-->
      <div align="center">
      <table width="95%" cellspacing="0" cellpadding="0">
      <tr>
      <td width="4%"><img src="images/lborder.png" alt="" /></td>
      <td class="boxheaderbg"><div align="center">Box Title</div></td>
      <td><img src="images/rborder.png" width="2" height="24" alt="" /></td>
      </tr>
      <tr>
      <td colspan="3">
          <table cellspacing="0" cellpadding="0" width="100%">
          <tr>
          <td width="100%" class="box">
          Main area content
          </td>
          </tr>
          </table>
      </td>
      </tr>
      </table>
      </div>
      <!--end of main content box-->
      </td>
      <td width="220" valign="top">
      <!-- beginning of right side content-->
      <!--BEGIN ONE CONTENT BOX -->
      <table cellspacing="0" cellpadding="0" width="200">
      <tr>
      <td width="4%"><img src="images/lborder.png" alt="" /></td>
      <td class="boxheaderbg"><div align="center">Rightside</div></td>
      <td width="6%" class="rborder"><img src="images/rborder.png" width="2" height="24" alt="" /></td>
      </tr>
      <tr>
      <td colspan="3" class="box">
      Content and stuff!
      </td>
      </tr>
      </table>
      <!--END ONE CONTENT BOX-->
      <!--end of right side content-->

      </td>
      </tr>
      <!--end of main content area-->
      </table>
</body>
</html>
     
[/code]

Share this post


Link to post
Share on other sites
Are you sure this isn't a CSS issue?

Share this post


Link to post
Share on other sites
I've double and triple checked it, it doesn't seem to be, but if you want to check yourself, then here's my stylesheet:

[code]
body,html {
background-color: #FFFFFF;
margin: 0px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: black;
}

td {
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: black;
}

td.logo {
background-image: url("images/header_tile.png");
height: 112px;
}

td.header {
background-image: url("images/header_tile.png");
height: 112px;
}

td.headerbar {
background-image: url("images/header_bar_tile.png");
height: 42px;
}

td.boxheaderbg {
background-image: url("images/bgborder.png");
width: 90%;
}

td.rborder {
background-image: url("images/rborder.png");
background-repeat: no-repeat;
height: 24px;
width: 2px;
}

td.box {
border: black 1px solid;
border-collapse: collapse;
}


[/code]

Share this post


Link to post
Share on other sites
Then I don't understand what I'm seeing.

Share this post


Link to post
Share on other sites
Um.. you're seeing that on the layout at [url=http://www.snapskate.com/v2/]http://www.snapskate.com/v2/[/url] that the main content box like hangs over on the bottom, and the rest of them don't, it's weird.

It's all valid xhtml which is more weird.

and i gave the stylesheet and the html so wha?

Share this post


Link to post
Share on other sites
It "over hanges" because there is another tabled cell above where it over hangs. it actually doing what you're telling it do. Just pad it out by sticking an extra tabel cell (<td></td>) after the closing td tag for .box nsd amke it colspan 2 cells rather than 3.

Share this post


Link to post
Share on other sites
Hm... did what you said and it doesn't make any difference.  What I can see when I go to view it in internet explorer is that the rborder.png image is like centered in a table cell that is too wide, but my code doesn't reflect anything of the sort... it's strange.

well.... see this entire layout was from a tutorial, and I was trying to just type the code out  myself, so that I would understand it for later, and so it would be xhtml valid (the original author uses the background attribute, which isn't valid in xhtml) (I'm not big on html and css, just php, and i was trying to fix that.)

This code somehow seems to work (it replaces the <!--main content area begin--> to <!--main content area end-->)

I've examined the code a number of times and can't find a difference except for the fact that I use CSS to make the td backgrounds.

if you can find what this code has that mine doesn't then the problem should be solved

the only problem is I can't find any differences between my code and the code in the tutorial that would make this kind of weird change

but whatever you can make of it, please do.

below is the code from the tutorial
you can view my code above in the first post

[code]
  <!--MAIN CENTER CONTENT AREA START-->
            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><img src="images/lborder.gif" width="34" height="24"></td>
                <td width="100%" background="images/bgborder.gif"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Main
                    Content Area</font></div></td>
                <td><img src="images/rborder.gif" width="2" height="24"></td>
              </tr>
              <tr>
                <td colspan="3"><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse: collapse">
                    <tr>
                      <td> <div align="center"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">Your Content! </font>
                        </div></td>
                    </tr>
                    <tr>
                      <td bgcolor="#E8E8E8"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Copyright
                          2005 - Your Site - All Rights Reserved </font></div></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <!--MAIN CENTER CONTENT AREA END-->
[/code]

Share this post


Link to post
Share on other sites
Okay, I seemed to get it to work, all i did was put a <div align="right"> tag around the rborder.png image, then fill in what was empty with the background by changing the td to class="boxheaderbg".  Thanks for your guys' help though, but I guess this was just one of those problems that works itself out  ;)

Share this post


Link to post
Share on other sites
Is this from http://css.maxdesign.com.au/floatutorial/
( I think I recognise the content )
how hard was this to get to work ?

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.