Page is a not externally linkable
xboxingman - 1:18 am on Sep 29, 2011 (gmt 0)
I really appreciate the help rocknbil, you code is very clean :) I tried sticking that in and playing with it. A few adjustments and it's good to go. The text-indent doesn't do as desired? it should be off screen at text-indent:-50000px?
Otherwise here is my final code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
https://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/index2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head">
<div id="box">
<p id="logo"><a href="#">SITE NAME</a></p>
<ul id="list">
<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><!-- box -->
</div><!-- head -->
<div id="outer">
<div id="center">
<div id="redbar"></div>
<!-- don't use br, use margins - you probably did
that because the margins weren't taking effect? -->
<p><?php @include(''); ?></p>
</div><!-- center -->
<div id="footer">
<ul id="sitemap">
<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><!-- footer -->
<div class="clear-div"></div>
</div><!-- outer -->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
/* text-align:center; This will center ALL TEXT */
}
#outer,#footer,#box
#sitemap { margin:0; padding:0; width: 865px; }
#box { margin:0px auto; width:860px }
#head,#center,#footer,#redbar,
#sitemap { float: left; overflow:hidden; }
/* min-height ignored by older IE */
#outer { background-color:#fff; margin: 0px auto; min-height:500px; }
#head { width:100%; height:149px; margin:0; padding:0; background: url("../images/cp_des1_01.gif"); }
#center {
background: #fff url("../images/cent_bg.gif") repeat-y top left;
min-height:600px;
/* With the padding it must be container width - padding */
width:860px;
padding-right: 5px;
}
#footer { height:80px; background: url("../images/cent_bot.gif") no-repeat top left; }
#logo { width:303px; height:60px; display: block; float:left; outline:none; border:none; background: url("../images/logo.png") no-repeat top left; }
#logo { padding:20px; margin:0 auto; }
#logo a {
background: url("../images/logo.png") no-repeat top left;
/* is this why you did the negative margin? */
text-indent:-50000px; outline:none;
}
#redbar {
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
margin: 0 0 25px 5px;
}
#list { display: block; height:30px; width:500px; font-size:18px; float:right;}
#list li { display: inline; list-style-type: none; }
#sitemap { margin-left:240px; margin-top:50px; }
#sitemap li { display: inline; list-style-type: none; border:1px solid #7AF; padding: 2px; }
#sitemap a:link, #sitemap a:visited { color:#7AF; text-decoration:none;padding:2px; }
#sitemap a:hover { background-color:#7AF; color:#FFF; padding:2px; text-decoration:none; }
#list li { padding: 12px 4px; }
#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;
}
/* A clearing div becomes handy working with floats */
.clear-div { clear: both; }