how do I create Equal Height Columns with my Background Imag

[mellonboyles]

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

[JaredAM]

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.

[mellonboyles]

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?

[mellonboyles]

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.

[Author]

Posts