[SOLVED] Layout From Tables To Divs Issues

Xtremer360 · March 4, 2009

Wanting to turn this:

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

<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">
code all menu and all content into this cell.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:

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

Xtremer360 · March 4, 2009

Updated code. The link is http://kansasoutlawwrestling.com/KOW/coded-page/index.html however it should look like http://kansasoutlawwrestling.com/KOW/coded-page/index2.html (what I had with the tables)

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

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

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

Sign In

[SOLVED] Layout From Tables To Divs Issues

Recommended Posts

Xtremer360

Link to comment

Share on other sites

Xtremer360

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information