[resolved] how do I make my absolutely positioned divs stay in place? (7 posts)

  1. dinavep
    Posted 3 years ago #

    Here is my wordpress site based on the Thematic theme:

    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;
    cursor: pointer;
    right: 29%;

    #africa-image {
    background:url("images/africa_logo_06.png") no-repeat transparent;
    height: 102px;
    width: 113px;
    cursor: pointer;
    right: 22%;

    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>

    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;*/
    top: 566px;
    right: 13%;
    */right: 466px;*/
    height: 100px;
    width: 290px;
    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!

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  3. dinavep
    Posted 3 years ago #

    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?

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

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

  5. dinavep
    Posted 3 years ago #

    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.

  6. Gene
    Posted 3 years ago #

    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.

  7. dinavep
    Posted 3 years ago #

    Thank you Gene. and everyone.

Topic Closed

This topic has been closed to new replies.

About this Topic