Footer messing up....

**deronsizemore** · Oct 25, 2004 22:16

Here is the code for the page:

Code:

<!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" lang="en" xml:lang="en">
<head>
<title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {height: 100%;}
body {
margin: 0;
padding: 0;
color: #000000;
background: url(images/bg2.gif);
}
#outer {
width: 700px;
background: url(images/bg.gif) repeat-y left top;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
_height: 100%;
min-height: 100%;
margin: auto;
clear: both;
position: relative;
}
html>#outer {height:auto;}
#header {
border-bottom: 1px solid #000000;
background: #ffffff;
height: 30px;
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-top: 2px
}
#leftheader {
float: left;
margin-right: 200px;
}
#rightheader {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #000000;
padding-top: 8px;
}
#rightheader a:link {
color: #6666ff; 
text-decoration: none;
}
#rightheader a:hover {
color: #6666ff; 
text-decoration: underline; 
}
#rightheader a:visited {
color: #6666ff; 
text-decoration: none;
}
#rightheader a:visited:hover {
color: #6666ff; 
text-decoration: underline;
}
#picheader {
height: 150px;
background: url(images/blueback4.gif);
border-bottom: 1px solid #000000;
}
#picheader img {
border-right: 1px solid #000000;
float: left;
}
#content {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
width: 500px;
margin-left: 99px;
margin-top: 2px;
clear: both;
}
#content a:link {
color: #6666ff; 
text-decoration: none;
}
#content a:hover {
color: #6666ff; 
text-decoration: underline; 
}
#content a:visited {
color: #6666ff; 
text-decoration: none;
}
#content a:visited:hover {
color: #6666ff; 
text-decoration: underline;
}
#content p {
padding-left: 10px;
padding-right: 10px;
}
.wrap {
font-size: 11px;
margin-bottom: 20px;
}
.title {
font-size: 16px;
color: #999999;
padding-left: 10px;
}
.top {
font-size: 10px; 
height: 15px; 
border-bottom: 1px solid #F0F1EF; 
margin-bottom: 10px;
}
.topleft {
padding-left: 10px;
}
.pic {
margin-left: 10px;
margin-right: 10px; 
float: left;
}
.pic1 {
margin-left: 85px;
}
.pic2 {
margin-left: 45px;
}
.pic3 {
margin-left: 45px;
}
.pic4 {
margin-left: 140px;
}
.pic5 {
margin-left: 2px;
}
.text {
font-size: 11px;
padding-right: 10px;
}
.natchoicesthumb {
float: left;
display: inline;
margin-right: 4px;
}
.clearer {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
#footer {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
width: 501px;
margin-left: 98px;
border-top: 1px solid #9999ff;
text-align: center;
margin-top: 15px;
height: 15px;
position: absolute;
bottom: 0;
}
#footer a:link {
color: #6666ff; 
text-decoration: none;
}
#footer a:hover {
color: #6666ff; 
text-decoration: underline; 
}
#footer a:visited {
color: #6666ff; 
text-decoration: none;
}
#footer a:visited:hover {
color: #6666ff; 
text-decoration: underline;
}
#clearfooter {
height: 35px;
}
</style>
</head>

<body>
<div id="outer"> 
  <div id="header"> 
    <div id="leftheader"> <img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" /> 
    </div>
    <div id="rightheader"> <a href="index.php">Home</a> | <a href="resume.php">Resume</a> 
      | <a href="portfolio.php">Portfolio</a> | <a href="services.php">Services</a> 
      | <a href="contact.php">Contact</a> </div>
  </div>
  <div id="picheader"> <img src="images/watersplash.jpg" alt="" title="water splash" /> 
  </div>
  <div id="content"> 
    <p>Below are some examples of my designs. Feel free to browse and even leave 
      feedback in the <a href="contact.php">contact</a> section if you want.</p>
    <p><strong>WEBSITES</strong></p>
    <div class="wrap"> 
      <div class="title"><strong>Natural Choices</strong></div>
      <div class="top"><span class="topleft"><a href="http://www.natural-choices.com" target="_blank">View 
        Website</a> | <a href="natchoicesscreenshot.php" target="_blank">View 
        Image</a></span></div>
      <img src="images/naturalchoicesthumb.jpg" alt="Screenshot for Natural-Choices website" class="pic" />	
      <div class="text">
        <p>Natural-Choices is a site dedicated to the work of Carol Perkins who 
          is a Naturopathic Physician (N.D.) located in Lexington, KY. She is 
          educated, trained, and specializes in natural medicine.<br />
          <br />
          This site consists of various products, tests, and treatments which 
          may improve your health.</p>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="wrap"> 
      <div class="title"><strong>Deronsizemore.com version 1.0</strong></div>
      <div class="top"><span class="topleft"><a href="dsizemov1.php" target="_blank">View 
        Image</a></span></div>
      <img src="images/dsizemov1thumb.gif" alt="Screenshot for deronsizemore.com v.1" class="pic" />	
      <div class="text">
        <p>Deronsizemore.com version 1.0 was never finished. It was my first experience 
          with CSS. While designing that site, I had the idea for the current 
          one, therefore stopped designs on version 1.0.<br />
          <br />
          Although you cannot browse the site, feel free to check out the image.</p>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="wrap"> 
      <div class="title"><strong>The Amish Barn</strong></div>
      <div class="top"><span class="topleft"><a href="http://www.theamishbarn.com" target="_blank">View 
        Website</a> | <a href="theamishbarnscreenshot.php" target="_blank">View 
        Image</a></span></div>
      <img src="images/theamishbarnthumb.gif" alt="Screenshot for The Amish Barn website" class="pic" />	
      <div class="text">
        <p>The Amish Barn site was my senior project at Morehead State University. 
          This site was designed to give customers an idea of what the Amish Barn 
          has to offer as they have "The Best Amish Craftsmen in Three States" 
          making their funiture.</p>
      </div>
      <div class="clearer"></div>
    </div>
	<p><strong>LOGOS</strong></p>
	<div class="wrap"> 
      <div class="title"><strong>Morehead State University</strong></div>
	  <div class="top"></div>
      <img src="images/ub1.gif" alt="Morehead State Bookstore Logo" class="pic1" /><br /><br /><br /><img src="images/ub2.gif" alt="Morehead State Bookstore Logo" class="pic2" /><br /><br /><br /><img src="images/ub3.gif" alt="Morehead State Bookstore Logo" class="pic3" />	
      <div class="clearer"></div>
    </div>
	<div class="wrap"> 
      <div class="title"><strong>Kentucky.gov</strong></div>
	  <div class="top"></div>
      <img src="images/kentuckygov.gif" alt="Kentucky.gov Logo" class="pic4" /><br /><br /><br /><img src="images/kgov1.jpg" alt="Kentucky.gov Logo" class="pic5" />	
      <div class="clearer"></div>
    </div>
  <div id="clearfooter"></div>
  <div id="footer"> All Content &copy; Deron Sizemore - 2004 </div>
  </div>
</div>
</body>
</html>

I basically just want the footer to line up in the center of the page. I have a border-top assigned so that everything matches up real nice. You'll see if you past the code in your browswer. Everything was exactly the way I wanted it, until I added this part of the code, then the footer moved right for some reason. Here's the code which I added that evidently screwed things up:

Code:

<p><strong>LOGOS</strong></p>
	<div class="wrap"> 
      <div class="title"><strong>Morehead State University</strong></div>
	  <div class="top"></div>
      <img src="images/ub1.gif" alt="Morehead State Bookstore Logo" class="pic1" /><br /><br /><br /><img src="images/ub2.gif" alt="Morehead State Bookstore Logo" class="pic2" /><br /><br /><br /><img src="images/ub3.gif" alt="Morehead State Bookstore Logo" class="pic3" />	
      <div class="clearer"></div>
    </div>
	<div class="wrap"> 
      <div class="title"><strong>Kentucky.gov</strong></div>
	  <div class="top"></div>
      <img src="images/kentuckygov.gif" alt="Kentucky.gov Logo" class="pic4" /><br /><br /><br /><img src="images/kgov1.jpg" alt="Kentucky.gov Logo" class="pic5" />	
      <div class="clearer"></div>
    </div>

**dikspence** · Oct 25, 2004 23:27

Hello,

If you take out "margin-left: 98px" from #footer it should make it center properly. I'm not to sure if this is what your asking for but its the best I could come up with.

Code:

#footer {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
width: 501px;
margin-left: 98px;
border-top: 1px solid #9999ff;
text-align: center;
margin-top: 15px;
height: 15px;
position: absolute;
bottom: 0;
}

**deronsizemore** · Oct 26, 2004 07:57

Well I think I need that margin width in there because the footer sits in the middle of the page (98px from the left side of the page) I have this on every other page and its fine, just now its decided to do this...? lol

Check out www.geocities.com/deronsizemore/index.htm for how the footer is suppose to look.

Check out www.geocities.com/deronsizemore/portfolio.htm for how it isn't suppose to look. (may have to refresh your browswer when this page loads the first time. For some reason the footer is up in the middle of the page, refreshing it takes care of that)

User Tag List

Thread: Footer messing up....

Thread Tools

Display

Footer messing up....

Bookmarks

Bookmarks

Posting Permissions