Grow your CSS skills. Land your dream job.

how do I create Equal Height Columns with my Background Imag

  • # December 12, 2009 at 11:57 am

    Hi there,

    here is my page http://www.allthingsprintuk.co.uk/ATPHome.html

    My problem is that the side bar HTML list is coming off the page in IE. & also the html in the header can look awful due to browser settings.

    My question is how do I create Equal Height Columns with my Background Images so that they fit with the HTML text? Is there a good link you can point me to, or a tutorial?

    The only way I can see by doing it is slicing my images up into 3 (top middle & bottom) & then setting the middle to repeat y????

    Or does anyone know of a way to create rounded corners WITH drop shadows in CSS that will work on all browsers?

    Thanks in advance

    Louisa

    # December 12, 2009 at 5:00 pm

    The list is also extending past in firefox.

    Humm, interesting issue you have there. My suggestion: jQuery. jQuery will work in every browser, rounded corners and dropshadows are simple and plus, you wouldn’t have the overhead of extra code + extra images to maintain.

    First download jQuery
    Second download the dropshadow plugin
    Third download the curvy corners plugin.

    Include the packages in your header, then you can write code to do what you want:

    Code:
    $(document).ready(function(){
    $(‘.header, .sidebar, .mainimage, .footer’).css({background: ‘#3f3f3f’}).corner(’round 8px’).dropShadow({left: 5, top:5, blur: 1, color: ‘black’, opacity: 1, swap: false});
    });

    Note: add a background for your div’s so that you’ll get a nice dropshadow. However, I haven’t tried both drop shadows AND rounded corners, so you might have to play with my code a little bit until you get what you want.

    # December 14, 2009 at 3:34 am

    Thanks for your reply Jared. I will have a look at JQuery. I have never used jQuery before so wish me luck!

    With regards to "Note: add a background for your div’s so that you’ll get a nice dropshadow". I am not sure what you mean by this, do you mean background colour?

    # December 15, 2009 at 4:01 pm

    This is my first time using jQuery.

    Here is my link http://www.allthingsprintuk.co.uk/sidebartest.html

    I am trying to achieve rounded corners on my sidebarcontainer (that houses my sidebarcontent list & my main image (the Boat)) using jQuery.
    Not sure what I have done to my code to not make it work. Any Ideas?

    Thanks in advance.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".