Wickham's HTML & CSS tutorial

Sitemap | Home | Search

Images in a row with a scrollbar

Many designers want to show lots of images in a row without widening the main page. This might be to show icons of products with links to product details.
In all the examples below the image could be an image link to another page or enlarged image.

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE


Div with overflow: scroll or overflow: auto and images (no separate html file)

1 green icon containing div:- <div class="noborder" style="overflow: auto; width: 730px; height: 70px;">
inner div:- <div class="noborder" style="width: 1510px;"> image codes here </div></div>.
The images each have <img src="images/filename200x50.jpg" style="float: left; width: 200px; height: 50px; margin: 0 5px;" alt="image name">

Swans Red admiral Beetle Pheasant Horses Tortoise Little Egret Slow worm Lark Coots

2 red icon <div class="background" style="width: 710px; height: 70px; white-space: nowrap; overflow-x: scroll; border: 0; padding: 10px;"> image codes here </div>.
The problem with this solution is that IE and Firefox create a default space between the images although the div has padding:10px all round.

Swans Red admiral Beetle Pheasant Horses Tortoise Little Egret Slow worm Lark Coots

3 gold icon <div class="background" style="width: 710px; height: 70px; white-space: nowrap; overflow-x: scroll; border: 0; padding: 10px;"> image codes here </div>.
The images have margin: 0 5px; for the center images (ie sides but not top or bottom); left image has margin-right: 5px; right image has margin-left: 5px; so that margin between images is 2*5px but none at the ends as container div padding provides 10px padding all round.
This creates background between the images equal to the outside padding but the background padding at the far right does not show unless fully scrolled and background padding at the left side disappears when scrolling.

Swans Red admiral Beetle Pheasant Horses Tortoise Little Egret Slow worm Lark Coots

4 green icon A containing div has been provided: <div class="background" style="width: 710px; height: 70px; border: 0; padding: 10px;"> outside the inner div: <div class="background" style="width: 710px; height: 70px; white-space: nowrap; overflow-x: scroll; border: 0; padding: 0;"> image codes here </div></div>
This creates a 10px background padding around the inner div with the scrollbar.
Images have margin: 0 5px; for the center images (ie sides but not top or bottom); left image has margin-right: 5px; right image has margin-left: 5px; as in the previous example.

Swans Red admiral Beetle Pheasant Horses Tortoise Little Egret Slow worm Lark Coots

Object tag inserting another html file

5 gold icon <object style="width: 730px; height: 91px;" type="text/html" data="photosinarow.html"> Warning: photosinarow.html could not be embedded. Adjust your security settings. </object>. The linked file is photosinarow.html (images are 50px high plus 10px padding all round) and has body margin: 0; so that a margin does not carry over to the object. The object needs a height and it needs to allow for the scrollbar (as browsers provide a vertical scrollbar if the horizontal scrollbar is not allowed for) totalling 91px.
The background padding at the far right does not show unless fully scrolled and background padding at the left side disappears when scrolling.
IE provides a border to the object that seems impossible to delete although Firefox does not. It is a known IE bug.
One disadvantage is that a link in the object will open inside the object which will probably be too small if you want the link to open as a full page. target="_parent" or target="_new" in a link tag works with frames and iFrames but not with objects.

Warning: photosinarow.html could not be embedded. Adjust your security settings.

Note that in my WIN 98 computer the scrollbar is set as 13px, in WIN XP it is set at 16px and in Vista it is set at 17px in the overall appearance settings so that I have set the object or iframe to suit 17px which means that W98 and XP show a space between the horizontal scrollbar and the object or iframe box. It appears that the iframe height needs to allow for the total height of the inserted file, 70px, plus 17px for a scrollbar to suit Vista totalling 87px but the object tag requires extra height for its border, totalling 91px to make a neat fit without a vertical scrollbar or a space.

You can check your computer:- in W98 and XP right click desktop, Properties, Appearance, Advanced (not shown in W98), Item and select scrollbar in drop down list; or in Vista right click desktop, Personalise, Window Color and Appearance, Open Classic appearance..., Advanced, Item and select scrollbar in drop down list. There is not much reason to adjust these, but the problem for webpage designers is that this is out of the control of the designer as scrollbar widths cannot be fixed with CSS; possibly only with complicated script.


iFrame tag inserting another html file

6 gold icon iframe is not supported in HTML or XHTML Strict so although this works, it will not validate with the Strict Doctype. You need to use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
which has been used for this page. iframe code is:-
<iframe width="730" height="87" frameborder="0" src="photosinarow.html" title="Test of wide image file">
<!-- Alternate content for non-supporting browsers here -->
<noframes> <p>This iframe contains photosinarow.html</p> </noframes>
</iframe>
.
The linked file is photosinarow.html (images are 50px high plus 10px padding all round) and has body margin: 0; so that a margin does not carry over to the iframe. The iframe needs a height and it needs to allow for the scrollbar (see the note at the end of the previous item) totalling 87px.
The background padding at the far right does not show unless fully scrolled and background padding at the left side disappears when scrolling.
Both IE and Firefox provide a border to the iframe unless frameborder="0" is stated.


There is a scrolling photograph gallery code with a large size popup at CSSplay which is a good way to show a lot of photos.


Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2007


top | Sitemap | prev | next

 

Google
web www.wickham43.net/