7 Replies - 863 Views - Last Post: 15 March 2013 - 09:33 AM

#1 jskidd3  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 16-September 12

Fix Images in Position

Posted 15 March 2013 - 07:56 AM

Hi,

I've recently been working on a web design for my cousin: http://joelkidd.co.uk/liv/ and I have stumbled on a problem. When zooming out in the browser you will see that the pictures shuffle around and the page looks unprofessional. Ideally, I want the pictures to stay in the same place like if you do the same thing here: http://www.hm.com/gb/

This is probably something simple. I imagine it's because I'm floating everything to the left?

If anyone could enlighten me on how to do this I'd really appreciate it.

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Fix Images in Position

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3624
  • View blog
  • Posts: 12,527
  • Joined: 12-December 12

Re: Fix Images in Position

Posted 15 March 2013 - 08:28 AM

Your wrapper is 960px but the combined width of the images within it match to 960px (or possibly more - I didn't check every measurement). You are not allowing breathing space or, more importantly, for rounding errors from the browser. Allow 1 or 2 pixels elbow-room.

I would also correct your HTML. IDs must be unique on the page and you have a DIV (a block-level element) within an UL or, at least, nested within an in-line element. Only LIs can be first-child elements of a UL.
Was This Post Helpful? 1
  • +
  • -

#3 jskidd3  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 16-September 12

Re: Fix Images in Position

Posted 15 March 2013 - 08:29 AM

Brilliant thanks buddy. Yeah haven't got a chance to run a markup validation it yet but will do that. Thanks very much :)
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3624
  • View blog
  • Posts: 12,527
  • Joined: 12-December 12

Re: Fix Images in Position

Posted 15 March 2013 - 08:30 AM

Actually, your #content (which contains the images) doesn't have a fixed width and so will contract, causing the images to suffer float-drop and drop underneath each other.
Was This Post Helpful? 0
  • +
  • -

#5 jskidd3  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 16-September 12

Re: Fix Images in Position

Posted 15 March 2013 - 08:52 AM

Hmm. I gave the content div a fixed width and it seems to give the same effect. At 100% zoom the pictures display correctly so do I actually need to give the images more slack?

Thanks

Ahh, it looks like the navigation bar has something to do with this?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3624
  • View blog
  • Posts: 12,527
  • Joined: 12-December 12

Re: Fix Images in Position

Posted 15 March 2013 - 09:18 AM

Actually, if someone zooms-out the page, I would expect the images to shuffle around, so I'm not the best person to ask. Maybe someone else might contribute. Andy.

It looks okay in my browser until about 70% zoom; if someone zooms less than this (why would they?) then they should expect a little mis-behaviour (IMO). Otherwise, you may want investigate something like responsive design.

http://webdesignerwa...sign-in-3-steps
Was This Post Helpful? 1
  • +
  • -

#7 jskidd3  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 16-September 12

Re: Fix Images in Position

Posted 15 March 2013 - 09:18 AM

Yeah sure, to be honest I was only doing it because I'm a perfectionist and just wanted to find a way around it :tt2:

Thanks for your help though, and any other contributions are gratefully welcomed. I shall also look more into fluid/responsive designs so I get a better understanding in this area :)

This post has been edited by jskidd3: 15 March 2013 - 09:19 AM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3624
  • View blog
  • Posts: 12,527
  • Joined: 12-December 12

Re: Fix Images in Position

Posted 15 March 2013 - 09:33 AM

My limited understanding is that responsive design is about getting a site to work well on desktops, tablet and mobile-phones, by using targeted CSS rules and careful planning!

I believe that there is an amount of work that can be done to handle zooming, such as using em-measurements rather than pixels and, again, careful planning and lots of testing :) but (again, IMO) I would probably just test the page at a zoom of +/- 20% to see that it at least looks reasonable/legible.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1