Jump to content

[SOLVED] Layout From Tables To Divs Issues

Xtremer360

By Xtremer360
in HTML Help

Recommended Posts

Xtremer360 Advanced Member

Xtremer360

Posted
Posted

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

Xtremer360

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.