0

I am updating a Wordpress webpage that I didn't make and I don't know PHP. I am having trouble adding a floating image to the bottom of the page above the empty footer. It should look like it does on the top:

enter image description here

CSS:

#uway-container {
    margin: 0px 0 0 0;
    overflow: visible;
    background: url(images/background-top.png) no-repeat 0 0;
    min-height: 250px;
    position:relative;
    z-index: 100;
}

I also have the bottom showing:

enter image description here

#test {
    background-image: url('images/combinedFooter.png');
    background-repeat: no-repeat;
    margin: 0px 0px 0px 0px;
    color: #000;
        overflow: visible;
    min-height: 300px;
    position:relative;
    z-index: 100;
}

When I add this second code/image It creates this extra space at the top:

enter image description here

When I try to reduce the space of the content in the middle it moves the bottom up with it:

Here is the footer.php:

<?php
/**
 * Footer Template
 *
 * The footer template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the bottom of the file. It is used mostly as a closing
 * wrapper, which is opened with the header.php file. It also executes key functions needed
 * by the theme, child themes, and plugins. 
 *
 * @package Hybrid
 * @subpackage Template
 */
?>
        <?php do_atomic( 'after_container' ); // hybrid_after_container ?>

    </div><!-- #container -->
<!--     </div> id="homepage-container"> -->

 </div> <!--id="uway-container"> -->
    <div id="spacer"></div>
    <div id="footer-container">
    <div id="test"></div>
        <?php do_atomic( 'before_footer' ); // hybrid_before_footer ?>

        <div id="footer">

            <?php do_atomic( 'footer' ); // hybrid_footer ?>

        </div><!-- #footer -->

        <?php do_atomic( 'after_footer' ); // hybrid_after_footer ?>
    </div><!-- #footer-container -->

</div><!-- #body-container -->

<?php do_atomic( 'after_html' ); // hybrid_after_html ?>
<?php wp_footer(); // wp_footer ?>

</body>
</html>

And here is the full css if it helps:

/* Get base CSS */
@import url('../hybrid/library/css/21px.css');

/* Get layout CSS */
@import url('../hybrid/library/css/2c-l-fixed.css');

/* Get plugins CSS */
@import url('../hybrid/library/css/plugins.css');

/* Get drop-downs CSS */
@import url('../hybrid/library/css/drop-downs.css');

/* Get default CSS */
@import url('../hybrid/library/css/screen.css');

body {
    background:#000
}

h2 {
    font-family: "Myriad Pro", arial;
}

.widget a {
    color:#ffffff;
    text-decoration: none;
    font-family: "Myriad Pro", arial;
    font-size: 100%;
}

.widget a:hover {
    color:#0fffff;
}

/* header stuff */
#site-title {
    float: right;
    width: 440px;
    height: 80px;
    margin-top: 10px;
/*  padding-right: 10px; */
    }
#site-title a {
    display: block;
    width: 440px;
    height: 80px;
    background: url(images/CampaignLogo.png) no-repeat 0 0;
    text-indent: -9999em;
    margin-top: 10px;
/*  padding-right: 10px; */
    }

#site-description {
    text-indent: -9999em;
    height: 0px;
}


/* navigation info */
#primary-menu, #navigation {
    position: absolute;
    top: 28px;
    padding-left: 10px;
    margin:0 0 40px 0;
    font-size: 1em;
    z-index: 1000;
    font-family: "Myriad Pro", arial;
}

#primary-menu li, #page-nav li {
    margin-left:0px;
}
#primary-menu li li, #page-nav li li {
    margin-right:0
}
#primary-menu li a, #page-nav li a {
    padding:8px 6px 8px 6px;
    color:#cfcccc;
    background:#000;
    background: url(images/MenuSlice.png) repeat-x;
    border:1px solid #ccc;
    border: none;
    width: 165px;
}
#primary-menu li:hover a, #primary-menu li.sfHover a, #page-nav li:hover a, #page-nav li.sfHover a {
    background: url(images/MenuSlice.png) repeat-x;
    color:#111;
    color:#cfcccc;
    border:1px solid #ccc;
}

/* main body */
#body-container {
    margin: 0 auto;
    width: 1024px;
}

/* homepage large images info */
#homepage-container {
    margin: 0px 0 10px 0;
    overflow: visible;
    position: relative;
/*  background: url(images/Home3-BG.jpg) no-repeat 0 0; */
    min-height: 773px;
}

/* site background info */
#uway-container {
    margin: 10px 0 0 0;
    overflow: visible;
    background: url(images/background-top.png) no-repeat 0 0;
    min-height: 250px;
    position:relative;
    z-index: 100;
}

#container {
    margin: -90px 0 0 25px;
    width: 980px;
    background: rgb(227,221,221);
    border-radius: 10px;
    position: relative;
    z-index: 50;
}


/* footer stuff*/
.widget {
    color:#0fffff;
    font-size: 15px;
}

#subsidiary h3 {
    margin: 0 0 5px;
    font-size: 15px;
}
#subsidiary .widget-title {
    color: #0fffff;
}

#subsidiary .widget {
    width: 315px;
    margin:0 5px 0 20px;
}

#right-link {
    padding-left: 110px;
}

#left-link {
    padding-left: 50px;
}

#subsidiary {
    margin: 90px 0 0px 0;
}

#test {
    background-image: url('images/combinedFooter.png');
    background-repeat: no-repeat;
        overflow: visible;
    min-height: 300px;
    position:relative;
    z-index: 100;
}

#footer-container {
    margin: -5px 0px 0px 0px;
    color: #000;
}


#footer .copyright {

    margin: 0 0 0 20px; 
    float: none;
    text-align: center;
    display: block;
}


#header-container {
    width: 1020px;
    height: 110px;
}

#menu-container {
    width: 980px;
}

.entry-content {
    margin: 0px 10px 0 28px;
    width: 920px;
}

.entry-content h2 {
    margin: 0px 10px 10px 300px;
    font-size: 2.5em;
    line-height: 2em;
    width: 920px;
    color: #fdba45;
}

.entry-content h2#LessIndent {
    margin: 0px 10px 10px 200px;
}

#content {
    margin: 0px;
    width: 980px;
    background-image: url('images/ContentText.png');
    background-repeat: repeat-y;
    margin-top: 47px;
}

#content-wrapper {
    background-image: url('images/ContentTop.png');
    background-repeat: no-repeat;
    min-height: 47px;
}

.page {
    background: url('images/ContentBottomLarge.png') bottom left no-repeat;
    min-height: 87px;
    z-index: 501;
}

#primary {
    margin-top: 10px;
}

.entry-title a {
    margin-left: 28px;
}

ul { 
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}


/* header sections on coordinator resource page */
.Coord {
    font-family: "Myriad Pro", arial;
    color: #00529b;
    font-size: 1.1em;
}

/* bullets for lists within content pages */
#content li {
    background: url('images/BlueButton.png') left center no-repeat;
    padding-left: 30px; 
}

li.BlueButton {
    margin-bottom: 15px;
}

li.BlueButton2 {
    margin-bottom: 5px;
}

/* social icons */

#SocialIcons {
    margin-top: 10px;
}

#SocialIcons a {
    display: inline-block;  
    width:40px;
    height:40px;
    background-repeat:no-repeat;
    background-position:0 0;
}

#FacebookIcon {
    background-image:url('images/Facebook.png');
    margin-left: 440px;
}

#TwitterIcon {
    background-image:url('images/Twitter.png');
    margin-left: 20px;
}
3
  • Create a jsfiddle.net for this. Can't you add top: 300px;, which, when combined with your existing position: relative would push the graphic down 300px. Jul 23, 2013 at 14:14
  • 2
    This happens 100% ON THE CLIENT. Your server-side PHP code does not help anyone answer your question. Show your HTML, not your PHP. Jul 23, 2013 at 14:16
  • Where can I get the HTML? Sorry I am new to wordpress. Jul 23, 2013 at 14:27

1 Answer 1

1

You have a #homepage-container div with position:relative already, so simply add your image before the closing </div> tag of #homepage-container and position it absolutely [bottom:0].

This will fix it to the bottom of the #homepage-container.

So your markup would look like this:

    <!-- You existing code -->
<div id="homepage-container">
    <div id="uway-container"></div>
    <div id="container"></div>

    <!-- This is the new element! (Positioned at the bottom!) -->
    <!-- Position is `absolute` to the `#homepage-container` and move it 15px down (so its flush with the bottom) -->
    <div id="static-footer-image" style="position:absolute; bottom: -15px;">
        <img src="http://placehold.it/850x150"/>
    </div>

 </div>

So basically, you already have the #homepage-container as a relative, so position your image absolutely to that from the bottom:-15px; (and also add the position:absolute property!).

You can copy and paste the div#static-footer-image div into your code and it should be positioned on top of the image, along the bottom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.