15 replies [Last post]
martha
martha's picture
Offline
Enthusiast
Athens, Greece
Last seen: 4 years 8 weeks ago
Athens, Greece
Timezone: GMT+3
Joined: 2005-05-14
Posts: 66
Points: 0

Hi everyone!
I ve created a liquid layout for the first time and Im dealing with some problems on displaying images properly and I need your help. For example, on this page the image on the right does not reduce its size when resizing window.

My html

Lineage c4 (Scions of Destiny)
?? Servers ????? ??????? ????? ???????? ????? ?? ????:


  • Bnb

  • E-Global

  • Elite

  • Eternal Sin

  • Forever

  • Reborn - Eternal

  • Revenge

  • The Game

  • Ultimate

  • Vendetta



My css

.line {
float:right;
max-width:100%;
overflow:hidden
}

Thank you in advance

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I must first comment that

I must first comment that this seems a strange way to make a fluid layout, but to each his own.

The image does in fact start to shrink, but not until it's container is less than the image's native width - which is exactly what you've declared.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Images are fixed in size.

Images are fixed in size. You can hard-code them to show in different sizes but unless you do some very clever JavaScript trickery, your layout will need to make allowances for the fixed size of your images. That said, you can set a repeating background image for a fluid element such that it will appear to expand and contract, but not in the way that you want.

Life's a b*tch and then you die!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

wolfcry911 wrote:The image

wolfcry911 wrote:
The image does in fact start to shrink

Eh - what am I missing here? ...what image shrinks?

Life's a b*tch and then you die!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the images in the left hand

the images in the left hand nav start to shrink when the viewport approaches 1000px and under, while the images in the right column will not start to shrink until that column becomes smaller in width than the image (140px).

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Well I stand corrected then.

Well I stand corrected then. I never knew one could size images in that way!

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's interesting; if img

It's interesting; if img attribute dimensions are omitted and the img tag width is declared as relative (width:100%) of a parent width which is also relative or fluid in nature then the image tag will resize along with the actual image which then shows actual image pixel size and specified pixel sizes to be different.

for this to work in IE though you will need to change min-width to plain width

I would be careful though, this layout is slightly left-field and is slightly fragile, you will need to prevent the layout as a whole narrowing too far.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

It is also worth noting that

It is also worth noting that your images will only be sharp if they are being shown at 100%, due to interpolation (distortions in the picture detail as one pixel grid is mapped by the browser to another). Interpolation is not such an issue at print levels of image resolution, but web graphics are already optimised and low in resolution, so any interpolation at all is going to have a noticeable effect on the resized image.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I was slightly surprised

I was slightly surprised that the images seemed to hold up so well; in the past when I have played with this the distortions introduced made it little more than a curiosity

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

To get a good chance of

To get a good chance of minimising distortion through interpolation one would need to start with a reasonably high-res image, which adds to the page loading time of course. It also depends on the interpolation algorithms used by the browser (fractal interpolation being the best), which presumably have been getting better over the years. Thus some people will see a better image than others.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is this where SVG steps into

Is this where SVG steps into the picture (pun sort of intended Smile )

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Not for photos, but for

Not for photos, but for logos and vector graphics then yes.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No not for photos, but gif

No not for photos, but gif type stuff, it's sort of an advanced clipart thing

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 13 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Scalable Vector Graphics

Scalable Vector Graphics have been around for donkey's years, it's just a case of agreeing web file format standards, equipping browsers with interpretors, and then sitting back and watching M$ ignoring the standards as usual and not adding the necessary interpretor to their browsers as usual. Nothing changes!

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Same old story.

Same old story.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Pssst, Firefox has quite

Pssst, Firefox has quite wonderful SVG support.

http://svg-whiz.com/svg/firefox-logo.svg

Verschwindende wrote:
  • CSS doesn't make pies