Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Position problem for the footer area

  1. #1
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Position problem for the footer area

    Hi!

    I am working at a new wordpress theme and I have a problem that I can't figure out.

    This is the the HTML code I have:

    Code:
    //this is in the header.php file
    	<div class="logo">
    		<div class="logo-inner">
    			<a href="<?php echo get_option('home'); ?>"><img src="LOGO_HERE" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a>
    			<span><a href="AD_URL" target="_blank"><img src="AD_IMG"/></a></span>
    		</div>
    	</div>
    <div id="page-wrap">
    	<div class="content">
    //this is in index.php, single.php, page.php and so on
    <div class="leftside-content">
    //the loop here
    </div>
    //and this is in the footer.php file
    </div>
    <?php get_sidebar(); ?>
    	<div id="footer">
    	<center>&copy;<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>
    			<?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>
    	</div>
    </div>
    And here is my CSS code:

    Code:
    #page-wrap { 
    width: 960px;
    margin: 20px auto;
    }
    .logo{
    width: 100%;
    position: absolute;
    z-index: 999;
    }
    .logo-inner{
    width: 1050px;
    margin: auto;
    }
    .logo-inner span{
    float: right;
    z-index: -999;
    }
    .content{
    margin-top: 90px;
    padding-top: 30px;
    margin-bottom: 10px;
    width: 960px;
    background: white;
    outline:rgba(0, 0, 0, 0.1) solid 6px;
    position: absolute;
    z-index: 8;
    }
    .leftside-content{
    width: 620px;
    margin-top: 10px;
    margin-left: 5px;
    float: left;
    z-index: -1;
    }
    #sidebar{
    margin-top: 110px;margin-right: -25px;
    padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;
    background: url('images/scribble_light.png');
    outline:rgba(0, 0, 0, 0.1) solid 6px;
    width: 280px;
    float: right;
    position: relative;
    z-index: 9;
    }
    #footer{
    background: url('images/footer_bg.png') repeat-x;
    width: 900px;
    height: 25px;
    top:100%;
    clear: both;
    position: absolute;
    z-index: 10;
    }
    I can't figure out how to make the footer to stay under the page-wrap div, on the bottom of the page.
    The clear property clear doesn't work, I also tried with overflow: auto in the page-wrap, positioning the footer, :after for the page-wrap and :before for the footer.
    Here is a picture of the design with the current code:


    Thanks in advance for your help!

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    332
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    Part of your code:
    Code:
    <div id="page-wrap">
    	<div class="content">
    //this is in index.php, single.php, page.php and so on
    <div class="leftside-content">
    //the loop here
    </div>
    //and this is in the footer.php file
    </div>
    <?php get_sidebar(); ?>
    	<div id="footer">
    	<center>&copy;<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>
    			<?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>
    	</div>
    </div>
    Your code with my comments this:
    Code:
    <div id="page-wrap">
    	<div class="content">
    //this is in index.php, single.php, page.php and so on
    <div class="leftside-content">
    //the loop here
    </div><!-- End leftside-content -->
    //and this is in the footer.php file
    </div><!-- End content -->
    <?php get_sidebar(); ?>
    	<div id="footer">
    	<center>&copy;<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>
    			<?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>
    	</div><!-- End Footer -->
    </div><!-- End page-wrap -->
    I think you need to do something like this:
    Code:
    <div id="page-wrap">
    	<div class="content">
    //this is in index.php, single.php, page.php and so on
    <div class="leftside-content">
    //the loop here
    </div><!-- End leftside-content -->
    //and this is in the footer.php file
    </div><!-- End content -->
    <?php get_sidebar(); ?>
    </div><!-- End page-wrap -->
    <div id="footer">
    	<center>&copy;<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>
    			<?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>
    	</div><!-- End Footer -->

  3. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Since we're talking about styling and layout, it would be much more helpful if you shared your HTML markup, rather than the contents of your PHP scripts.

  4. #4
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @Crazykld69
    I have tried that and it doesn't work.
    @traq
    Sorry, I thought that it's enought to show only the divs and css code from my wordpress theme.
    HTML & CSS Files
    Sorry, I didn't uploaded via attachment because the archive is 200 Kb and the limit for attachments is 97 Kb

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,336
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    JS and CSS for footers:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Footer</title>
    <script>
    if(navigator.userAgent.indexOf('Chrome')>-1)
    {document.body.style.overflow-y=scroll} // needed for Google Chrome
    </script>
    </head>
    <body >
    <!-- You may change all styles in the footer div except 'position: fixed' and 'bottom: 0px' -->
    <div id="footer" style="position: fixed; left: 0px; right: 0px; bottom:0px; background: darkred; color: white; text-align: center; font-family: verdana; font-size: 12px; ">I'm a footer<br>Yes I am</div>
    content<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>con tent<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br >content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>co ntent<br>contentcontent<br>content<br>content<br>content<br>content<br>contentcontent<br>content<br>content<br>content<br>content<br>content
    </body>
    </html>

  6. #6
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is making the footer fixed, I want to make it to stay on the bottom of the page, after the content area, but the position from the content div and from the sidebar div is not letting the clear property to work...

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,336
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    What happens if you move this:
    <div id="footer">
    <center>&copy;<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>
    <?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>
    </div>
    to the end of the div having class="leftside-content", just above its closing div-tag?

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    332
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    Hey its me again. Try my idea again and change the css to this:
    Code:
    #footer{
    background: url('images/footer_bg.png') repeat-x;
    width: 900px;
    height: 25px;
    clear: both;
    z-index: 10;
    }
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  9. #9
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @molendijk - If I move the footer after the leftside-content div the footer will hang over the text and under the sidebar div.
    @Crazykld69 - Now the footer is under the content div in the middle of the page, not at the bottom of the page.

  10. #10
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    332
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    Ok give me a sec. Ill actually make it so it works. xD
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. white area under footer
    By spuryou in forum CSS
    Replies: 1
    Last Post: 05-13-2010, 02:07 PM
  2. Replies: 0
    Last Post: 04-01-2010, 09:53 PM
  3. Dynamic Footer position
    By Spionred in forum CSS
    Replies: 2
    Last Post: 10-04-2009, 02:28 AM
  4. Replies: 2
    Last Post: 08-20-2009, 03:08 AM
  5. Replies: 1
    Last Post: 05-30-2008, 04:33 PM

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
  •