Can't figure this one out

HTML & CSS
1

I need to get three HTML tables shown like this:

using these images for the borders and background:
background:

Left border:

top left corner:

top:

top right corner:

right border:

bottom right corner:

bottom:

bottom left corner:

Here’s the HTML and CSS I currently have.
I want all three columns in the bottom table to have that treatment.
If it could be done with no tables that would be better…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Sir Stinks Alot Home Page</title>
    <link href="style.css"         media="screen" rel="stylesheet" type="text/css" >
  </head>
  <body>
    <table cellspacing="0" cellpadding="0" border="0" width="950" height="20">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td align="center">
          <img src='images/logo.png' alt='Logo' />
        </td>
      </tr>
    </table>
    <table cellspacing="0" cellpadding="0" border="0" width="950">
      <tr>
        <td width="132">
          <table cellspacing="0" cellpadding="0" border="0" width="100%" class="bodytable">
            <tr>
              <td>Skin this table</td>
            </tr>
          </table>
        </td>
        <td width="20">&nbsp;</td>
        <td width="646">
          <table cellspacing="0" cellpadding="0" border="0" class="bodycr">
            <tr>
              <td align="center"> <!-- and skin this table, too -->
                <h1>Sir Stinks Alot's Home page</h1>
              </td>
            </tr>
          </table>
        </td>
        <td width="20">&nbsp;</td>
        <td width="132">
          <table cellspacing="0" cellpadding="0" border="0" width="100%" class="bodycr">
            <tr>
              <td>Skin this table</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

a {
    background-color: transparent;
    color: #FFFFFF;
    font-family: verdana, arial, sans-serif;
    font-style: bold;
    text-decoration: underline;
}

a:link {
    background-color: transparent;
    color: #2EEC82;
    font-size: 12px;
    text-decoration: none;
}

a:visited {
    background-color: transparent;
    color: #2EEC82;
    text-decoration: none;
}

a:hover {
    background-color: transparent;
    color: #00ffff;
    text-decoration: none;
}

a:active {
    background-color: transparent;
    color: #2EEC82;
    text-decoration: none;
}

div, ul, li, table, tr, td, p, img, h2, h3, h4, h5, h6
{
  margin:0px; 
  padding:0px; 
  margin:0 auto;
}

body
{
    background-attachment: scroll;
    background-image: url(images/background.jpg);
    background-position: top left;
    background-repeat: repeat;
    scrollbar-3dlight-color: #383821;
    scrollbar-arrow-color: #7b3908;
    scrollbar-base-color: #4F472F;
    scrollbar-darkshadow-color: #4a2e26;
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #282812;
    scrollbar-shadow-color: #7b3908;
    scrollbar-track-color: #21210B;
    background-color: #000000;
    color: #FFFFC0;
    font-family: tahoma, verdana, arial, sans-serif;
    font-size: 14px;
}

td {
    background: transparent;
    color: #FFFFFF;
    font-family: verdana, tahoma, arial, helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-align: left;
}

.bodycr{
    background: transparent;
    background-image: url(images/tablebg.png);
    color: #00ffff;
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 12px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

.bodylt{
    background-image: url(images/left.png);
    background-repeat: repeat-y;
    width: 34px;
}

.bodyrt{
    background-image: url(images/right.png);
    background-repeat: repeat-y;
    width: 34px;
}

.bodytable {
    background-color: transparent;
    background-image: url(images/tablebg.png);
    color: #0099bb;
    font-family: verdana, tahoma, arial, helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

.border {
    border-bottom: #FFFFFF 1px solid;
    border-left: #FFFFFF 1px solid;
    border-right: #FFFFFF 1px solid;
    border-top: #FFFFFF 1px solid;
}

.bottomcr{
    background-image: url(images/bottom.png);
    background-repeat: repeat-x;
    width: 100%;
}

.bottomlt{
    background-image: url(images/bottomleft.png);
    width: 34px;
}

.bottomrt{
    background-image: url(images/bottomright.png);
    width: 34px;
}

.topcr{
    background-image: url(images/top.png);
    background-repeat: repeat-x;
    width: 100%;
}

.toplf {
    background-image: url(images/topleft.png);
    width: 34px;
}

.toprt {
    background-image: url(images/topright.png);
    width: 34px;
}
2

Before any questions asked, let me say that I think It is a good idea, as you suggested yourself, if this would be done, in divs. But it depends on many things of course.

Okay, time for questions.

First of all do you have the original images? Secondly what should be the size of every div, e.g. are the all equal or do they have a different size.

If you could provide the original images and give answers to the above, maybe something can be done.

3

Two Ways of Doing It:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>


<style>
	.css3{ min-height:500px;
	     padding:40px;
		background: url(bottomright.png) no-repeat bottom right,url(topright.png) no-repeat top right,url(top.png) repeat-x top left, url(bottom.png) repeat-x bottom left,url(left.png) repeat-y top left,url(right.png) repeat-y top right,url(tablebg.png)  ;}
	.table{ background:url(tablebg.png)  ;}
	.table .rt{ background: url(right.png) repeat-y top right;}
	.table .lft{background: url(left.png) repeat-y top left;}
	.table .bottom{background: url(bottom.png) repeat-x bottom left;}
	.table .top{background: url(top.png) repeat-x top left;  }
	.table .br{background: url(bottomright.png) no-repeat bottom right; }
	.table .tr{background: url(topright.png) no-repeat top right;  min-height:500px; padding:40px;}


.content p { margin:0; padding:0 0 1em  0; color:#fff; font-size:130%}
</style>


</head>

<body>
<div class="table">
	<div class="rt">
          <div  class="lft">
          	<div class="bottom">
               	<div class="top">
                    	<div class="br">
                              <div class="tr content">
                              	<p> I reperenst some content</p>
                              	<p> If  you are  goung to give .table a fixed dimention (height or width) remove the padding and add it to  the .content children OR  recalculate the width  to account for the padding. </p>
                              
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>



<p>or you could do this with CSS3</p>

<div class="css3 content">
	<p> I reperenst some content</p>
                                   	<p> If  you are  goung to give .table a fixed dimention (height or width) remove the padding and add it to  the .content children OR  recalculate the width  to account for the padding. </p>

</div>




</body>
</html>

CSS3 gives you , of curse, the neater code but is not entirely cross browser, tho with PIE you might be able to give decent support to IE…

You WILL HAVE to get rid of the extra transparent space in your bottom.png and bottomright.png. you also WONT NEED bottomleft.png, topleft.png ( that saves you 2divs in the old way…and to 2 server calls!)

Hope this helps.

4

Thanks. I was able to get things going right. What I had was an e107 CMS template. I downloaded e107 and installed the template, then looked at the way the HTML was done.

Kind of screwy but at least it’s done. It was for my boss’ kids.