Normally I separate the website into two parts. A header which contains the logo and the body which contains the rest.
It looks somewhat like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>My Site</title>
<link rel="STYLESHEET" href="defaultTheme.css" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="mainbody"></div>
</div>
</body>
</html>
Unfortunately CSS will not let you simply set high properties on an element. Often it requires you to create a table if you want the content container to expand with the content.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>My Site</title>
<link rel="STYLESHEET" href="defaultTheme.css" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="mainbody">
<table id="maintable">
<tr><td id="content">Content Area
</td></tr>
<tr><td id="sidebar">Links
</td></tr>
</table>
</div>
</div>
</body>
</html>
This is also important if you want different columns like a sidebar or something similar. If anyone does have a better method for this let me know
.
CSS:
Code:
body
{
background-color: #00000;
}
#maincontainer
{
margin-left:auto;
margin-right:auto;
width:780px;
height: 100%;
border: 1px solid black;
}
#maintable
{
width: 100%;
height: 100%;
}
07-20-2008, 12:53 PM
Similar Threads
Linear Mode
