Jump to content


Photo

Layout Problems


  • Please log in to reply
8 replies to this topic

#1 Skatecrazy1

Skatecrazy1
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts
  • LocationSouthern California

Posted 16 October 2006 - 02:16 AM

Hi, I'm having some problems with the center content box in a layout at http://www.snapskate.com/v2/.  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 Here

Here's the HTML code

I'd greatly appreciate any help.

<!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>
       

fuck it or fight it

#2 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 16 October 2006 - 02:38 AM

Are you sure this isn't a CSS issue?
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#3 Skatecrazy1

Skatecrazy1
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts
  • LocationSouthern California

Posted 16 October 2006 - 04:50 AM

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:

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;
}



fuck it or fight it

#4 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 16 October 2006 - 02:34 PM

Then I don't understand what I'm seeing.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#5 Skatecrazy1

Skatecrazy1
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts
  • LocationSouthern California

Posted 16 October 2006 - 06:28 PM

Um.. you're seeing that on the layout at http://www.snapskate.com/v2/ 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?
fuck it or fight it

#6 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 16 October 2006 - 06:42 PM

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.

#7 Skatecrazy1

Skatecrazy1
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts
  • LocationSouthern California

Posted 16 October 2006 - 10:52 PM

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

  <!--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-->

fuck it or fight it

#8 Skatecrazy1

Skatecrazy1
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts
  • LocationSouthern California

Posted 17 October 2006 - 12:34 AM

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  ;)
fuck it or fight it

#9 anatak

anatak
  • Members
  • PipPipPip
  • Advanced Member
  • 406 posts
  • LocationJapan, Fukuoka prefecture, Kitakyushu City

Posted 19 October 2006 - 07:18 AM

Is this from http://css.maxdesign...u/floatutorial/
( I think I recognise the content )
how hard was this to get to work ?
takasi.8008@docomo.ne.jp
tourokum@0508.jp




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users