Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Layout From Tables To Divs Issues

    Wanting to turn this:

    Code:
    <html>
    <!-- Created on: 2/28/2009 -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Dog's Choice">
    <meta name="generator" content="AceHTML 6 Pro">
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <table class="main" width="1027px" height="971px" cellspacing="0px" cellpadding="0px">
    <tr>
    <td colspan="3" class="header"> 
    </td>
    </tr>
    <tr>
    <td class="leftside" rowspan="2">  
    </td>
    <td class="contentarea"> <br />code all menu and all content into this cell.<br><br>Cell height is 692px and width is 805px - code content according.
    </td>
    <td class="rightside" rowspan="2"> 
    </td>
    </tr>
    <tr>
    <td class="footer">link | link | link | link
    </td>
    </tr>
    </table>
    </body>
    </html>
    Into the same layout with having divs instead of tables. Here's what I have so far and it shows the divs but doesn't place them right.

    Code:
    <html>
    <!-- Created on: 2/28/2009 -->
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title></title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Dog's Choice">
      <meta name="generator" content="AceHTML 6 Pro">	
      <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>	  
    <div class = "main">
    <div class = "header"></div>
    <div class = "leftside"></div>
    <div class = "contentarea">
    <br />code all menu and all content into this cell.<br><br>Cell height is 692px and width is 805px - code content according.
    </div>
    <div class = "rightside"></div>		
    <div class = "footer"></div>
    </div>
    </body>
    </html>
    Here's my css:

    Code:
    @charset "windows-1252";   
    
    body {	   
    	background: #0a0d12;
    	text-align: center;
    	padding: 0px;
    	margin: 0px;
    }  
    
    .main {
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-top: 0px;
    	border-bottom: 0px;
    	width: 1027px;
    	height: 971px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .header {
    	width: 1027px;
    	height: 146px;
    	background: #0a0d12 url("images/header.jpg");
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    }
    	
    .leftside {
     	width: 110px;
    	height: 825px;
    	background: #0a0d12 url("images/left-side.jpg");
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    	float: top;
    }
    
    .rightside {
     	width: 110px;
    	height: 825px;
    	background: #0a0d12 url("images/right-side.jpg"); 
    	background-repeat: no-repeat;	
    	padding: 0;
    	margin: 0;
    }
    
    .contentarea {	  
    	color: #eeeeee;
    	width: 805px;
    	height: 692px;
    	background:  #0a0c0d;	
    	text-align: left;
    	vertical-align: top;
    	border-left: 2px solid #000000;
    	border-right: 2px solid #000000;
    	border-top: 0px;
    	border-bottom: 0px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .footer {
    	width: 807px;
    	height: 133px;	 	
    	color: #eeeeee;
    	text-align: center;
    	vertical-align: top;
    	background: #0a0d12 url("images/footer.jpg"); 
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    }
    Last edited by CoolAsCarlito; 03-04-2009 at 10:49 PM.

  • #2
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    .footer {
    width: 100%;
    height: 133px;
    color: #eeeeee;
    text-align: center;
    vertical-align: top;
    background: #0a0d12 url("images/footer.jpg");
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    }

  • Users who have thanked masterofollies for this post:

    CoolAsCarlito (03-04-2009)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Code:
    <html>
    <!-- Created on: 2/28/2009 -->
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title></title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Dog's Choice">
      <meta name="generator" content="AceHTML 6 Pro">	
      <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>	  
    <div class = "main">
    <div class = "header">
    <div class = "leftside">
    <div class = "contentarea">
    code all menu and all content into this cell.Cell height is 692px and width is 805px - code content according.
    <div class = "rightside">	
    </div>
    </div>
    </div>
    </div>
    </div>	
    <div class = "footer">link | link | link | link</div>
    </body>
    </html>
    Code:
    @charset "windows-1252";   
    
    body {	   
    	background: #0a0d12;
    	text-align: center;
    	padding: 0px;
    	margin: 0px;
    }  
    
    .main {
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-top: 0px;
    	border-bottom: 0px;
    	width: 1027px;
    	height: 971px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .header {
    	width: 1027px;
    	height: 146px;
    	background: #0a0d12 url("images/header.jpg");
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    	float: top;
    }
    	
    .leftside {
     	width: 110px;
    	height: 825px;
    	background: #0a0d12 url("images/left-side.jpg");
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    	float: left;
    }
    
    .rightside {
     	width: 110px;
    	height: 825px;
    	background: #0a0d12 url("images/right-side.jpg"); 
    	background-repeat: no-repeat;	
    	padding: 0;
    	margin: 0;
    	float: right;
    }
    
    .contentarea {	  
    	color: #eeeeee;
    	width: 805px;
    	height: 692px;
    	background:  #0a0c0d;	
    	text-align: left;
    	vertical-align: top;
    	border-left: 2px solid #000000;
    	border-right: 2px solid #000000;
    	border-top: 0px;
    	border-bottom: 0px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .footer {
    	width: 100%;
    	height: 133px;	 	
    	color: #eeeeee;
    	text-align: center;
    	vertical-align: top;
    	background: #0a0d12 url("images/footer.jpg"); 
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    }

  • #4
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    This will repair your header.

    PHP Code:
    <html>
    <!-- 
    Created on2/28/2009 -->
    <
    head>
      <
    meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <
    title></title>
      <
    meta name="description" content="">
      <
    meta name="keywords" content="">
      <
    meta name="author" content="Dog's Choice">
      <
    meta name="generator" content="AceHTML 6 Pro">    
      <
    link href="styles.css" rel="stylesheet" type="text/css" />
    </
    head>
    <
    body>      
    <
    div class = "main">
    <
    div class = "header"></div>
    <
    div class = "leftside">
    <
    div class = "contentarea">
    code all menu and all content into this cell.Cell height is 692px and width is 805px code content according.
    <
    div class = "rightside">    
    </
    div>
    </
    div>
    </
    div>
    </
    div>    
    <
    div class = "footer">link link link link</div>
    </
    body>
    </
    html
    Last edited by masterofollies; 03-04-2009 at 11:34 PM.

  • #5
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Good now change these two, to the new bold ones.

    Code:
    .leftside {
     	width: 110px;
    	height: 100%;
    	background: #0a0d12 url("images/left-side.jpg");
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    	float: left;
    }
    
    .rightside {
     	width: 110px;
    	height: 100%;
    	background: #0a0d12 url("images/right-side.jpg"); 
    	background-repeat: no-repeat;	
    	padding: 0;
    	margin: 0;
    	float: right;
    }

    and the script to this.

    Code:
    <html>
    <!-- Created on: 2/28/2009 -->
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title></title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Dog's Choice">
      <meta name="generator" content="AceHTML 6 Pro">    
      <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>      
    <div class = "main">
    <div class = "header"></div>
    <div class = "contentarea">
    <div class = "leftside">
    code all menu and all content into this cell.Cell height is 692px and width is 805px - code content according.
    <div class = "rightside">    
    </div>
    </div>
    </div>
    </div>    
    <div class = "footer">link | link | link | link</div>
    </body>
    </html>

  • #6
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Code:
    <html>
    <!-- Created on: 2/28/2009 -->
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title></title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Dog's Choice">
      <meta name="generator" content="AceHTML 6 Pro">    
      <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>      
    <div class = "main">
    <div class = "header"></div>
    <div class = "contentarea">
    <div class = "leftside">
    code all menu and all content into this cell.Cell height is 692px and width is 805px - code content according.
    <div class = "rightside">    
    </div>
    </div>
    </div>
    </div>    
    <div class = "footer">link | link | link | link</div>
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    This should fully fix it.

    Code:
    <html>
    <!-- Created on: 2/28/2009 -->
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title></title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Dog's Choice">
      <meta name="generator" content="AceHTML 6 Pro">    
      <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>      
    <div class = "main">
    <div class = "header"></div>
    <div class = "contentarea">
    <div class = "leftside"></div>
    <div class = "rightside"></div>
    code all menu and all content into this cell.Cell height is 692px and width is 805px - code content according.
    </div>
    </div>    
    <div class = "footer">link | link | link | link</div>
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Last Attempt, use this

    Code:
    body {	   
    	background: #0a0d12;
    	text-align: center;
    	padding: 0px;
    	margin: 0px;
    }  
    
    .main {
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-top: 0px;
    	border-bottom: 0px;
    	width: 100%;
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    }
    
    .header {
    	width: 1027px;
    	height: 146px;
    	background: #0a0d12 url("images/header.jpg");
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    	float: top;
    }
    	
    .leftside {
     	width: 110px;
    	height: 825px;
    	background: #0a0d12 url("images/left-side.jpg");
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    	float: left;
    }
    
    .rightside {
     	width: 110px;
    	height: 825px;
    	background: #0a0d12 url("images/right-side.jpg"); 
    	background-repeat: no-repeat;	
    	padding: 0;
    	margin: 0;
    	float: right;
    }
    
    .contentarea {	  
    	color: #eeeeee;
    	width: 100%;
    	height: 692px;
    	background:  #0a0c0d;	
    	text-align: left;
    	vertical-align: top;
    	border-left: 2px solid #000000;
    	border-right: 2px solid #000000;
    	border-top: 0px;
    	border-bottom: 0px;
    	margin: 0px;
    	padding: 0px;
    }
    
    .footer {
    	width: 100%;
    	height: 133px;	 	
    	color: #eeeeee;
    	text-align: center;
    	vertical-align: top;
    	background: #0a0d12 url("images/footer.jpg"); 
    	background-repeat: no-repeat;
    	padding: 0;
    	margin: 0;
    }


  •  

    Posting Permissions

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