Ads 468x60px

Pages

Wednesday, October 11, 2006

How to put a wide image in the blog without causing the sidebar to slide to the bottom of the page

I am going to test to see if putting an image wider than the main column into a post will cause the sidebar to slide down to the bottom of the page by putting it into a scroll box. The photo I am going to put in the scrollbox below is 800x600 pixels whereas the main column width is only 410 pixels. Here goes:







800x600 photo




Well, I published it, and checked in Internet Explorer, FireFox and Opera, and in all 3 cases, the sidebar stayed where it is supposed to be - at the top of the page. So, if you ever want to put a large image in your blog without the problem of sidebar sliding to the bottom of the page, put it in a scroll box. To get HTML for the scroll box, go to How to make a scrollable box.

If you don't like this because your visitors have to scroll to see the rest of the photo, another way is to choose a template with the sidebar on the left and the main column at the right like Sand Dollar. Look at these 2 blogs which uses the Sand Dollar template. Notice how large the photos are, and they don't cause any problem with the sidebar:
Plus Toll Plaza (close the window to get back to this page)
After 1994 (close the new window to get back to this page)

Update: Rose commented that a better idea is to post a thumbnail so that visitors can click on the thumnail and go to another page to view the photo (see comments section). There are normally more than one way to solve a problem, and mine is one and Rose is another. But I think a better idea than posting a thumbnail is uploading the large photo via the normal Blogger way which will place something bigger than a thumbnail but which will be reduced in size by Blogger to fit the column, and visitors still have the option to click on the image to view the larger image. I normally include a message to click on screenshot (most images I post are screenshots) to enlarge.

NEWER POST    OLDER POST

0 comments:

Post a Comment