WordPress.org

Support

Support » Themes and Templates » [Resolved] how do I make my absolutely positioned divs stay in place?

[Resolved] how do I make my absolutely positioned divs stay in place?

  • Here is my wordpress site based on the Thematic theme:
    http://kasparovchessfoundation.org/

    I have two logos on the top right and a facebook ‘like’ btn that move out of place when the window is re-sized. I have them coded in this way:

    – In my functions.php file:

    function partner_logo_1() {
    echo ‘<span id=”europe-image”></span>‘;
    }
    add_action(‘thematic_header’, ‘partner_logo_1’);

    function partner_logo_2() {
    echo ‘<span id=”africa-image”></span>‘;
    }
    add_action(‘thematic_header’, ‘partner_logo_2’);

    function facebook_like_btn() {
    echo ‘<iframe src=”//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.kasparovchessfoundation.org%2F&send=false&layout=button_count&width=450&show_faces=false&font&colorscheme=light&action=like&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:21px; position:absolute; right:111px; top:200px;” allowTransparency=”true”></iframe>’;
    }
    add_action(‘thematic_header’, ‘facebook_like_btn’);

    and then in kasparov_style.css:

    #europe-image {
    background:url(“images/europe_logo_04.png”) no-repeat transparent;
    height: 103px;
    width: 92px;
    position:absolute;
    cursor: pointer;
    top:85px;
    right: 29%;
    */right:600px;*/
    }

    #africa-image {
    background:url(“images/africa_logo_06.png”) no-repeat transparent;
    height: 102px;
    width: 113px;
    position:absolute;
    cursor: pointer;
    top:85px;
    right: 22%;
    */right:480px;*/
    }

    Also, I have a div that says, “Kasparov Foundation Inc., is a non-profit educational organization…” that is added in the same way. In the fucntions.php file:
    function donate(){
    if ( is_front_page() ) {
    ?>
    <div id=”donate”><p>Kasparov Chess Foundation Inc. is a non-profit educational organization supported by charitable donations from concerned individuals and corporate sponsors.</p></div>
    <?php
    }
    }
    add_action(‘thematic_aboveheader’,’donate’);

    in kasparov_style.css:
    #donate {
    background: url(images/donations_back.png) no-repeat;
    font:11px “Trebuchet MS”, Helvetica, sans-serif;
    line-height: 20px;
    /*background-color: #DAEFEE;*/
    position:absolute;
    top: 566px;
    right: 13%;
    */right: 466px;*/
    height: 100px;
    width: 290px;
    z-index:9999;
    padding: 14px;
    padding-top: 12px;
    }

    How do I make these stay in place when the window is re-sized on when the site is viewed on a smaller screen than my 15 inch screen?

    Please help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi
    Forum Moderator

    @esmi

    I’m sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

    Thank you for the references! However, I am an experienced web designer and I have tried all the tricks to get this solved that I have used outside of the wordpress platform and they are not working… therefore I am let to believe that I am just not understanding how to work this out in wordpress in particular. Since I am placing the partner logos in the header: add_action(‘thematic_header’, ‘partner_logo_1’); shouldn’t they be inside the header and move or not move accordingly? How is the header element positioned in the thematic theme?
    Thanks!

    Andrew Nevins
    Forum moderator

    @anevins

    I don’t experience your issue of those elements moving when you resize the browser.

    Hi Andrew. Thank you for your response! Do you have your elements positioned any differently than I do (is your CSS the same as mine and are you using thematic_header as well)? My elements don’t move down but they move horizontally. You can see what’s happening if you go to the link (http://kasparovchessfoundation.org/) and re-size your window. I’ve tried to position them relatively but that breaks the layout. What I would do if I was building a regular html site is put them inside a relatively positioned element, but I am not sure where they are in wordpress when they are inside the header and how that element is positioned.

    Hi dinavep,

    If you’re having trouble with Thematic or Thematic child themes you can always find Thematic specific support here: http://thematictheme.com/forums

    After briefly looking at your site with firebug I can see that your issues are specifically related to your child theme’s CSS. It’s styles not plying nice with Thematic’s stylesheets that you have @imported.

    Aside from pointing you to the Thematic community forums, I can only offer the same advice as esmi, use Firefox w/firebug or the web inspector of your browser of choice to debug your CSS.

    Thank you Gene. and everyone.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] how do I make my absolutely positioned divs stay in place?’ is closed to new replies.