absolute and relative positioning of div's

Hello,

I’d like to position a div wrapper.

http://www.michaelwalz.org/eng/jazz-n-cheers please. I placed the skyline image as kind of a header and want the wordpress page content to start below the image.

I thought I throw the page content into a wrapper and adjust the wrapper’s positioned accordingly. The skyline image is not coded in the page content since it belongs to the customized template page.

However, I wasn’t able to move the text down. It would be nice if someone had a look at the source code.

In wordpress page:

<style type=”text/css”>

wrapper {

top: 680px;

right: 200px;

position: absolute;

}

</style>

<div class=”wrapper”>

<div class=”soundcloudholder”>

<h3>Darn That Dream (Live)</h3>

<iframe src=”https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F89601556%3Fsecret_token%3Ds-iXbv4&color=121aab&auto_play=true&show_comments=false&show_artwork=false&show_playcount=false&show_user=false” height=”60″ width=”60″ frameborder=”no” scrolling=”no”> </iframe>

</div>

<div class=”textPageContent”>

<p>Jazz Standards and own compositions from Bebop to Fusion, from Latin to World music Michael Walz and band perform concerts for private and corporate events. Jazz ‘n’ Cheers!, as the name implies, is Jazz music that suits your festivity.</p>

<img src=”http://www.michaelwalz.org/eng/wp-content/uploads/2013/04/Acoustic-Guitar-300×199.jpg” alt=”Michael Walz playing Nylon String Guitar” width=”300″ height=”199″ class=”alignright size-medium wp-image-1501″ />

</div>

</div>

Thanks,

mikkolaus

  • mikkolaus
    • Flash Drive

    Hi Edgar,

    Thanks for the feedback. You are right I missed that and in fact it helped and I fixed the layout.

    Please let me ask you. I see that the footer is not coming down. Is there a way how I can fix that? Perhaps in the customized post format or in the footer.php itself?

    It would be nice to have the footer always at the bottom of the page independent from having content or not.

    Thanks,

    mikkolaus

    This is my customized post format:

    <?php

    /*

    Template Name: Page Customized

    */

    ?>

    <?php

    get_header(); ?>

    <style type=”text/css”>

    .page-id-1097 #wrapper{

    position:relative;

    margin:0px auto;

    }

    #main .inner {

    padding-top: 0px;

    margin-top: -110px;

    }

    #skyline{

    position: absolute;

    top: 70px;

    }

    .nav ul li > a {

    padding:0px 8px;

    line-height:40px;

    text-decoration:none;

    display:block;

    }

    p{text-align: justify}

    .soundcloudholder {

    position:absolute;

    top: -150px;

    left: 40px;

    }

    div.sound {

    display: none;

    }

    </style>

    <div id=”skyline”><img src=”http://www.michaelwalz.org/eng/wp-content/uploads/2013/04/Central-Park-Manhattan-Skyline-Michael-Walz.png” alt=”Central Park New York Michael Walz” width=”980″ height=”683″ class=”alignnone size-full wp-image-1438″ />

    </div>

    <div class=”inner custom_content”>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <?php the_content(); ?>

    <div class=”divider”></div>

    <?php endwhile; endif; ?>

    <?php get_footer(); ?>

    /////////////////////////////////////////

    And this is the footer.php

    </div><!– .inner End –>

    </div><!– #main End –>

    <!– MAIN CONTENT END –>

    <div class=”footer_divider”></div>

    <!– FOOTER START –>

    <div id=”footer”>

    <?php if(!get_option_tree(‘footer_disabled’:wink:) : ?>

    <div class=”inner”>

    <ul class=”<?php

    if ( function_exists( ‘get_option_tree’:wink: ) {

    $footer = get_option_tree( ‘footer_cols’ );

    $footer = strtolower((str_replace (” “, “”, $footer)));

    echo “$footer”;

    }

    ?>”>

    <?php if ( !function_exists(‘dynamic_sidebar’:wink: || !dynamic_sidebar(“Footer Widgets Area”:wink: ) : ?>

    <div class=”clear”></div>

    <?php endif; ?>

    </div><!– .inner End –>

    <?php endif; ?>

    <div class=”footer_small <?php echo strtolower((str_replace (” “, “”, get_option_tree(‘footer_style’:wink:))); ?>”>

    <div class=”copyright”><?php echo get_option_tree(‘copyright’:wink:; ?></div>

    <?php if(!get_option_tree(‘social_disabled’:wink:) : ?>

    <div class=”social”>

    <?php

    foreach (range(1, 17) as $v ){

    if(get_option_tree(“social_”.$v)) :

    echo ‘<img src=”‘.get_template_directory_uri().’/img/social/social_’.$v.’.png” alt>‘;

    endif;

    }

    ?>

    </div>

    <?php endif; ?>

    </div> <!– #footer_small End –>

    </div><!– #footer End –>

    <!– FOOTER END –>

    </div><!– #holder End –>

    <!– PAGE END –>

    <?php

    /* Always have wp_footer() just before the closing </body>

    * tag of your theme, or you will break many plugins, which

    * generally use this hook to reference JavaScript files.

    */

    wp_footer();

    ?>

    </body>

    </html>

  • Elliott Bristow
    • The Bug Hunter

    Do you mean you want the footer to appear at the bottom of the window? If so you need to look at using position: fixed or position: absolute with bottom: 0;

    If you are saying you want it to appear below the content you might want to look at sticky footers (http://ryanfait.com/sticky-footer/). Bear in mind however, because you have an absolute positioned DIV, the normal page flow has been interrupted. You will need to wrap the whole page (excluding the footer) in a relative postioned div to push the footer down below the content.

    PS.. it’s Elliott :slight_smile:

  • mikkolaus
    • Flash Drive

    Oh sorry Elliot, I don’t know why I named you Edgar. :slight_smile:

    Where would I add the code in the first case and where would I add it in the second case?

    Would you just add it in the wordpress content page or in the template? I think it would be nice to have the footer always after the last entry or if there’s not enough text than at a minimum height of 800px or so.

    Thanks, I am looking into the CSS footer link example.

  • mikkolaus
    • Flash Drive

    To find a solution for the current site (mentioned above), I thought I can solve it like that:

    adding whether the class or id of footer (as it is in the footer.php) to the css code in my wordpress content page. However, it does not make any change. Do you have any advise on that? Thanks

    .footer {bottom: 0;}

    #footer_divider {bottom: 0;}

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.