Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering a div at the bottom of a page.

    I have an image I am using as a footer for a page I am building and I am trying to tack it to the bottom of the page, with a margin and also have it stay centered. I read through some old posts about making floaters stick to the bottom and tried the guide found on <http://www.cssstickyfooter.com/using-sticky-footer-code.html> however, this is not the look I am going for. Any ways here's what I have. I am sure there are other issues with the code so far but right now I am just trying to work out the bottom footer.

    I currently have it working using absolute positioning but it throws off the page layout when I open the site on a phone or computer with different resolution.

    http://canyonbgc.com/

    <code>

    /*html*/
    <!Doctype html>
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
    <div id="page">
    <div id="container">
    <!-- start header -->
    <div id="top">
    </div>
    <div id="header">
    </div>
    <hr>

    <!-- Layout -->
    <div id="menu">
    <a href="#">Home</a><br>
    <a href="#">Biological</a><br>
    <a href="#">Geospatial</a><br>
    <a href="#">Services</a><br>
    <a href="#">Contact Us</a>
    </div>

    <div id="splitline">
    </div>

    <div id="content">
    <div id="textcontent">
    <h1 style="text-align:center">March 2013 Was a Big Month For Us</h1>
    <hr>
    <p>
    Canyon Biological and Geospatial Consultants is proud to annouce our formation! Our experienced pricinpal staff envisoned a company geared to handle compliance monitoring, research and restoration services that focus on providing the highest quality, solution oriented, services and deliverables. The team at Canyon Biological and Geospatial Consultants wants to bring practical, scienctifically rigorous anwsers to your project. We are looking forward to working with you.
    </p>
    <h1 style="text-align:center">How We Can Help on Your Project</h1>
    <hr>
    Canyon Biological and Geospatial Consultants provides biological and geospatial services, consulting and deliverbles to any client from large firms to small research teams.
    <br/>
    Our Services:
    <ul>
    <li>Biological Monitoring</li>
    <li>Wildlife and Botanical Surveys</li>
    <li>Project Compliance</li>
    <li>Restoration</li>
    <li>Project Mapping</li>
    <li>Geospatial Analysis</li>
    </ul>
    <br/>
    Contact us at (651)210-8959 or by email
    </p>
    </div>
    </div>

    <div id="splitline">
    </div>

    <div id="menuright">
    <div id="textrightmenu">
    <h2>Website</h2>
    <p>
    Please bear with us as we finish the construction of our webpage.
    </p>
    </div>
    </div>

    <div id="menuright">
    <div id="textrightmenu">
    <h2>About Us</h2>
    <p>
    Canyon Biological and Geospatial Consultants was registered as an LLC during March of 2013.
    </p>
    </div>
    </div>

    <!-- Footer -->
    <div id="footer">
    <div id="textfooter">
    <p>
    Website Created by Canyon Biological and Geospatial Consultants .LLC |
    </p>
    </div>
    </div>

    </div>
    </div>

    <!-- This is a comment -->
    </body>
    </html>

    /* CSS */

    <! CSS Canyon>


    body{
    margin:0px;
    background-color:#444444;
    background-size: 100%;
    }


    h1,h3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #F8F8F8;
    }

    h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #000000;
    }

    a {
    color: #000000;
    }

    a:hover {
    color: #000066;
    }

    #page{
    background-size: 100%;
    background-color:#444444;
    font-family: Georgia, 'Times New Roman', Times, serif;
    }

    /* Header */

    #top {
    width: 900px;
    height: 300px;
    margin: 0 auto;
    padding: 0;
    background: url(images/1.jpg) no-repeat left top;
    }

    #header {
    width: 900px;
    height: 90px;
    margin: 0 auto;
    background: url(images/2.jpg) no-repeat left top;
    }

    /* Format */

    #container{
    width:900px;
    height:1400px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    }


    #menu {
    float:left;
    margin-left:10px;
    margin-top:10px;
    width: 120px;
    height:304px;
    background-image:url('images/LEFTMENU.jpg');
    padding-left: 5px;
    }



    #menuright {
    float:right;
    margin-right:10px;
    margin-top:10px;
    width: 160px;
    height:202px;
    background-image:url('images/RIGHTMENU.jpg');
    padding-left: 5px;
    }

    #splitline {
    float:left;
    margin-left:5px;
    margin-top:10px;
    margin-right:5px;
    width: 1px;
    height:800px;
    background-image:url('images/Splitline.jpg');
    }

    #content {
    float:left;
    margin-top:10px;
    width: 555px;
    height:800px;
    background-image:url('images/CONTENT.jpg');
    padding-left: 5px;
    padding-right: 5px;
    }

    #footer {position:absolute;
    top:1350px;
    left:442px;
    margin-left:auto;
    margin-right:auto;
    width: 700px;
    height:50px;
    background-image:url('images/FOOTER.jpg');
    }

    #textcontent {
    color: #F8F8F8;
    }

    #textrightmenu {
    color: #000000;
    }

    #textfooter {
    font-size:small;
    color: #000000;
    text-align:center;
    }

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Please wrap your code in code brackets. Try reading this.
    http://css-tricks.com/snippets/css/sticky-footer/
    Thanks!

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    120
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi Wevils,

    Two ways you can handle this. First code shown removes the position:absolute - which may be the cause for your difficulty:

    Code:
    #footer {
    	clear:both;
    	width: 700px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:940px;
    	height:50px;
    	background-image:url('/images/FOOTER.jpg');
    }
    Second solution, if you want to keep your position absolute (and is more similar to what you have already):
    Code:
    #footer {
    	position:absolute;
            left:0;
            right:0;
    	top:1350px;
    	width: 700px;
    	background-image:url('images/FOOTER.jpg');
            margin-left:auto;
            margin-right:auto;
    }
    Hope these help
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • Users who have thanked Brandnew for this post:

    Wevils (08-14-2013)

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Brandnew,

    Such a simple solution to the issue. I was so caught up in trying to position it in the same way as everything else I hadn't even considered that .


  •  

    Posting Permissions

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