PDA

View Full Version : images distorting in liquid layout


benjipie
01-30-2009, 12:01 PM
Hi,

I have a site with a liquid layout. The width of the site was initially 1100px, i totally forgot about different resolutions for different monitors and so i changed this to a liquid layout with a div wrapper set to 80% width thinking this would stop the horizontal scroll bars appearing on smaller resolutions/monitors and help the site fit the smaller resolutions (all the content in the page is in this div wrapper).

My problem is when i view the page on a monitor of say 1024x768 the images are distorted and stretched and some of them appear lower on the screen than they should..What am i doing wrong?

I'm not at my home computer so i cant post any code so im just fishing for some ideas...

Any help is appreciated.
Thanks.

d a v e
01-30-2009, 01:02 PM
are you settings percentages on your image dimensions?

a url would help ...

benjipie
01-30-2009, 02:12 PM
Hi, Thanks for the reply...

Yes, i am using percentages. I have a percentage (80%) in a wrapper tag with all content inside that. Within the wrapper i have set the percentage of other elements (footer, header, sidebar etc) so they fit nicely in my monitor (completely forgot about other resolutions!!). They look something like this.

#sidebar {
left: 10%;
width: 20%;
}

Im i on the right track?

I will post some code and a url tonight when i get home, i understand its a bit hit and miss without it..

Thanks .

chriskq
01-31-2009, 09:05 AM
maybe you should check out:
http://www.blueprintcss.org/

or

http://developer.yahoo.com/yui/examples/grids/grids-doc3.html

:)