Jump to content

Layout Problems

Skatecrazy1

By Skatecrazy1
in HTML Help

 Share

Recommended Posts

Skatecrazy1 Member

Skatecrazy1

Posted
Posted
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]
Link to comment
Share on other sites
Skatecrazy1 Member

Skatecrazy1

Posted
  • Author
Posted
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]
Link to comment
Share on other sites
Skatecrazy1 Member

Skatecrazy1

Posted
  • Author
Posted
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?
Link to comment
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted
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.
Link to comment
Share on other sites
Skatecrazy1 Member

Skatecrazy1

Posted
  • Author
Posted
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]
Link to comment
Share on other sites
Skatecrazy1 Member

Skatecrazy1

Posted
  • Author
Posted
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  ;)
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.