...

View Full Version : Layout From Tables To Divs Issues



CoolAsCarlito
03-04-2009, 09:47 PM
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">
<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:


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

masterofollies
03-04-2009, 10:25 PM
.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;
}

CoolAsCarlito
03-04-2009, 10:31 PM
<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>


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

masterofollies
03-04-2009, 10:32 PM
This will repair your header.


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

masterofollies
03-04-2009, 10:38 PM
Good now change these two, to the new bold ones.


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


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

CoolAsCarlito
03-04-2009, 10:42 PM
<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>

masterofollies
03-04-2009, 10:43 PM
This should fully fix it.


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

masterofollies
03-04-2009, 10:50 PM
Last Attempt, use this


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum