Displaying Picture in box

Popular Searches: FrontPage Hosting | FrontPage Templates | FrontPage Training | Free FrontPage

Logged in as: Guest

Printable Version

All Forums >>FrontPage Specific Issues >>FrontPage Newbies >>

Page: [1]

Name:

Message

<< Newer Topic Older Topic >>

Palmstead

Posts: 22
Member since: 7/23/2006

Displaying Picture in box

I asked this question last week and got no response.

This seems real easy. I want to place 4 equal size pictures side by side within a box. It is my understanding that if I make the width a % then they will shrink or grow equally with the users screen.

However when I define them in CSS the get pregressive smaller from left to right.

Am I working in the right ballpark or am I lost?

Report Abuse | Date: 10/21/2008 12:11:56 PM

d a v e

Posts: 883
Member since: 9/24/2002
From: Finland

RE: Displaying Picture in box (in reply to Palmstead)

are you growing and shrinking the pictures too?

post a link to what you have so far so we can see...

_____________________________

d a v e

Report Abuse | Date: 10/21/2008 1:31:16 PM

Palmstead

Posts: 22
Member since: 7/23/2006

RE: Displaying Picture in box (in reply to Palmstead)

Today I went and looked at they site from another computer and the whole box under the top photo is empty white. I don't know what your getting.

The web site address is

http://www.rockypointreview.com/beach_houses.html

I don't believe the pictures are all the same size? If I define them by in a css page by %, does each picture need to be the same size. Thus they would all fit together equally.

But I still don't know why some computers make them (the pics) skinny as nothing, thus making the box look white?

Report Abuse | Date: 10/21/2008 9:50:34 PM

TexasWebDevelopers

Posts: 7040
Member since: 9/24/2002
From: USA

RE: Displaying Picture in box (in reply to Palmstead)

Visually your images are progressively smaller by 20% each so check the divs they are wrapped in to ferret out the error. You have also set the height in the CSS for img id="bxsz1" as a fixed height. This means that as the page is resized the height remains fixed but the width of the images will change and distort the image.

Growing and shrinking images using CSS widths is very interesting (and not often used).
I'm not sure why this technique isn't used more often as it is very powerful. As long as the "largest" image is clear then reducing the size has a nice effect. Take a look at this site as a nice example: http://www.rock-on-rock-on.com/
Simply resize the browser window to see the images scale using CSS.

The generic CSS would look something like this:

div {width:90%;}
div img {width:90%;}

There are some caveats:
IE6 does not inherit the width of a parent with an undeclared width so be careful with percentages on child elements. Also, in IE, four images each at 25% may wrap to a second line because of rounding errors--so set the widths at 24.9% to adjust.

_____________________________