Page is a not externally linkable
xboxingman - 2:44 am on Sep 27, 2011 (gmt 0)
I have always used tables and am trying to only use divs to build the layout, the problem is positioning just doesn't act how you would expect. The issue I'm having is the only way I could get this to look right was to use mainly absolute position, I assume float is what I really want. I want the div to expand to the content, currently I have to make each page the exact dimensions and doesn't work well with my ajax as the content expands the site stays the same.. So if I could get a little help making this work right I would really appreciate it.
I have to change the height in #center & #footer & #sitemap per page. Those are the divs I would prefer to use a percentage on.
Also once I added the #list & li I got a 10 or 15px margin at the top I cannot get rid of.
css file
@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
text-align:center;
}
#head {
position:relative;
width:100%;
height:149px;
margin:0;
background: url("../images/cp_des1_01.gif");
}
#bgtop {
position:absolute;
width:100%;
height:149px;
margin:0, auto;
background: url("../images/cp_des1_01.gif");
}
#outer {
margin: 0px auto;
background-color:#fff;
width:865px;
height:500px;
}
#center {
background-color:#fff;
background: url("../images/cent_bg.gif") repeat-y top left;
position:absolute;
height:600px;
width:865px;
padding-right: 5px;
}
#footer {
position:absolute;
left:auto;
top:700px;
height:80px;
width:867px;
margin:0, auto;
background: url("../images/cent_bot.gif") no-repeat top left;
}
#logo {
position:absolute;
padding:20px;
text-align:left;
margin:0px auto;
width:180ex;
height:6ex;
left:3em;
display:block;
background: url("../images/logo.png") no-repeat top left;
}
h1#logo {
font-size:16px;
}
#logo span
{
position: absolute;
top: -999em;
}
#redbar {
position:absolute;
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
left:5px;
margin-bottom:25px;
}
#list {
position:relative;
top:110px;
left:355px;
height:30px;
width:500px;
font-size:18px;
}
#list li
{
display: inline;
list-style-type: none;
}
#list a { padding: 4px 12px; }
#list a:link, #list a:visited
{
border: 1px solid #135eff;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #135eff;
font-weight:bold;
text-decoration: none;
background-color:#7AF;
}
#list a:hover
{
border: 1px solid #fff;
color: #fff;
font-weight:bold;
text-decoration: none;
}
#sitemap
{
position:relative;
top:750px;
margin:0, auto;
}
#sitemap li
{
display: inline;
list-style-type: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITE NAME</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bgtop"></div>
<div id="outer">
<div id="head">
<div id="logo"><span>SITE NAME</span>
</div>
<div id="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="center">
<div id="redbar"></div><br /><br />
<p><?php @include(''); ?></p>
</div>
<div id="footer">
</div>
<div id="sitemap">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
THANKS a lot
Mike