SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer messing up....

    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>

  2. #2
    SitePoint Member dikspence's Avatar
    Join Date
    Jun 2003
    Location
    Edmonton, Alberta, Canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Running Man Design - "It pays to run with us."

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •