WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS (Guru?) to troubleshoot theme (9 posts)

  1. DesignLoud
    Member
    Posted 1 year ago #

    Hey, I have ran into a dilemma that I cant seem to get worked out..

    I am developing a theme for a client and have my main element being #content-area, inside of that I have #content which floats right and #sidebar which floats left. I also have the #footer located in the content-area div.

    So my problem: I need the sidebar height to be 100%, footer located at the bottom and obviously room for my #content div to grow depending on content. I was using the sticky footer hack which worked perfectly unless you put alot of content on the page, then the sidebar background would not span the full height of its parent element (#content-area) I have commented out the sticky footer hack and tried applying a height:100%; to my sidebar but I am not having any luck...

    Here is the live link: http://itestwebpageshere2.biz/accommodations/ Which you can see exactly my problem.. When I put the sticky footer in there the homepage and other pages with minimal content display fine but since this is for WordPress, that may not always be the case and they may have alot of content.

    I am pretty much looking for suggestions.. At this point you can mess around with the CSS I have and un-comment, add/remove as you see fit. I have ran into a similar situation like this before but cant remember the fix for the life of me.

    Any help would be greatly appreciated, thanks for looking ;)

  2. Doodlebee
    Member
    Posted 1 year ago #

    The *simplest* solution would be to make that sidebar a tiled background, and just apply the background to the content-area. Then, no matter what is longer (the sidebar or the content) the sidebar color will go all the way down.

    That's the easiest thing to do.

    I have a "sticky footer" tutorial on my site that's old, but it still works (just used it on a site not too long ago), and you can use straight CSS instead of images. The example uses 3 columns, but it's pretty simple to take it down to 2.

  3. Dominor Novus
    Member
    Posted 1 year ago #

    Though CSS can probably offer a cleaner solution, personally, I use jQuery to equalize the height of the widget sidebar with the main content container.

    You're already jQuery UI for your datepicker calenders so I can't think of a valid reason to not make further use of jQuery.

    I've previously documented the necessary code here: http://thematictheme.com/forums/topic/equal-height-for-widget-column-and-container-column/#post-2000

    The code is added to functions.php.

    Note that in the provided example, #primary refers to the sidebar and #container refers to whatever your main content container is called. Change these ids to match your own code.

    Also note that I've wrapped the jQuery in conditional tags to limit the equalization to specific pages (mainly those where the sidebar is present). Since all your pages have a sidebar, you can probably delete that aspect of code...

    ...delete these lines:

    // Use WordPress conditional tags to target specific blog pages onyly...
    if(is_home() || is_single() || is_archive() || is_search() ){

    ...and this line:

    } // end if is_home

  4. DesignLoud
    Member
    Posted 1 year ago #

    Hmm, both good options.. I was hoping to avoid having to many images on the page but it looks like currently that is my only option is to just tile the bg and artificially put a shadow on some of the inner elements like on the left of the footer and reservation area background.

    Dominor, your approach did seem like the better option but I could not get it to work, even after several revisions. Below is what I ended up using on my last attempt.

    I would love to be able to tackle this via CSS but it looks like until I find a better solution that the tiled background would be the way to go..

    JQuery Attempt:

    // Equal height for #primary and #container.
    // jQuery code from: http://web.enavu.com/tutorials/equal-column-height-with-jquery/
    // Modified for Thematic by http://www.dominornovus.com
    
    function equal_height_primary_and_container() {
    
    ?>
    <script type="text/javascript">
    jQuery$(window).load(function(){
    //#container and primary need to have the same class. Add class to each:
    jQuery("#content-area.wrap div#sidebar.fltleft ul.xoxo, #content-area.wrap div#content.fltright").addClass("equal_height");
    //set the starting bigestHeight variable
    var biggestHeight = 0;
    //check each of them
    jQuery('.equal_height').each(function(){
    //if the height of the current element is
    //bigger then the current biggestHeight value
    if(jQuery(this).height() > biggestHeight){
    //update the biggestHeight with the
    //height of the current elements
    biggestHeight = jQuery(this).height();
    }
    });
    //when checking for biggestHeight is done set that
    //height to all the elements
    jQuery('.equal_height').height(biggestHeight);
    });
    </script>
    <?php
    
    } 
    
    add_action('wp_head', 'equal_height_primary_and_container');
  5. Dominor Novus
    Member
    Posted 1 year ago #

    Refer to these lines in your attempted code:

    //#container and primary need to have the same class. Add class to each:
    jQuery("#content-area.wrap div#sidebar.fltleft ul.xoxo, #content-area.wrap div#content.fltright").addClass("equal_height");

    Bear in mind that you're equalizing the height of just two areas (i.e. #sidebar and #container). The jQuery height calculation has broken because you've targeted more than two elements.

    Change the above code to:

    //#container and #sidebar need to have the same class. Add class to each:
    jQuery("#container, #sidebar").addClass("equal_height");

    Another way of putting it, based on the original block of code I linked to, you're simply replacing #primary with #sidebar.

    All of this assumes that you're applying the background image to #sidebar.

    To confirm that it works, first check that #sidebar and #container have the .equal_height class added to them by viewing your source code. Secondly, apply your background image to #secondary via CSS and confirm that it stretches the same vertical height as #container.

    One thing to consider: The backgrounds (images or colors) of any elements contained in #sidebar (such as ul.xoxo), can potentially block out the background of #sidebar. Simply put, disable the backgrounds of any elements inside #sidebar when testing.

  6. DesignLoud
    Member
    Posted 1 year ago #

    Thanx guys, I ended up just using images which does the trick in the mean time until I can figure out a simple solution via CSS.

  7. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Other forum volunteers can't diagnose the problem without seeing it.

  8. DesignLoud
    Member
    Posted 1 year ago #

    Thanks Andrew but the link is in the first post and as I mentioned in the last post, I got it worked out with just using images like Doodlebee suggested, so I'm not sure what your asking for here..

    Thanks for looking though ;)

  9. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    I thought you were still looking for a solution via CSS, but as the thread is resolved, nevermind.

Topic Closed

This topic has been closed to new replies.

About this Topic