Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how do I create Equal Height Columns with my Background Imag

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27176
    mellonboyles
    Member

    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

    #68049
    JaredAM
    Member

    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.

    #68101
    mellonboyles
    Member

    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?

    #68192
    mellonboyles
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.