SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't figure this one out

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

    Code:
    <!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;
    }
    MrBaseball34
    Hook'Em Horns!

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Two Ways of Doing It:

    Code:
    <!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. #4
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    MrBaseball34
    Hook'Em Horns!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •