Thursday, October 12, 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

2 comments:

  1. You are then dealing with an annoying scroll box where you need to scroll just to see the image. An easier solution would to make the image a thumbnail and click for a large view and have the image pop up in a new window.

    Rose
    http://www.bloggertalk.net

    Ps: Feel free to use that tip. You normally do!

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics