0

I'm working on an image heavy single page site and I'm trying to figure out a safe height/width ratio so I could get a rough idea of how tall the slideshow images could get if the width were set to 100% while accomodating all the page elements without pushing the "next" button below the fold. This takes into consideration the browser interface, taskbar and whatnot.

Here's what I mean: image link

I am wondering whether there are any proposed/researched/applied semi standards like the 960 grid for dealing with these layouts?

To clarify: example single page site

For my browser/screen (FF19 with menu and address bar on 1920x1080 resolution screen) the "more" button would be pushed below the fold, so I would have to scroll down in order to see it. This is what I'm trying to avoid. Obviously I could make the slideshow image very thin but that would leave a lot of blank space underneath in most cases, so I'm trying to find a useful balance, if any exists.

Cheers!

qwalter
  • 1
  • 1

1 Answers1

0

your page shouldn't be bigger than 1024 pixels in width. Take a look at any site and you would see that they don't make any page bigger than 1024*height. If you don't want your website to be scroll-able downwards stick to something less than 1024*768. You will have to try it out for yourself. Infact i prefer using something between 900 to 1000 pixels as width.

Sample CSS code:

*{
    margin:0;
    padding:0;
    backgroound:#fff;

}
body { 

    font: .8em Arial, Tahoma, Verdana; 
    background: #fff url(../images/img.gif) repeat-x; color: #777; 
    width: 970px;
    margin: 0 auto;

}

EDIT: As for answering your question if you set width to 100%, the image width will be inherited from the container div and the height would depend on the actual height of the image. For a image of height less than the width of the container div, the height will be less than the image width while for an image with height more than the container div's width the image height will be more than the image width.The aspect ratio will be conserved though. i suppose you would want to conserve the aspect ratio of all the images after re-sizing the images. You should provide a max-width and a max-height css property to the images to make sure they don't go out of their container divs and push down the more button.

If you don't want to conserve the aspect ratio just set width and height of image.

Or why don't you make the 'More' button float-able like the Facebook, Google and other links on the left hand side of your page?

thunderbird
  • 2,715
  • 5
  • 27
  • 51
  • Ah, sorry my wording was very misleading. I made some edits to clarify! – qwalter May 06 '13 at 10:53
  • i updated my answer. I have absolutely no ideas about 960 grids so cant help you there. – thunderbird May 06 '13 at 13:28
  • "your page shouldn't be bigger than 1024 pixels in width. Take a look at any site and you would see that they don't make any page bigger than 1024*height" --- I disagree. We make sites bigger than 1024 (height/width) all the time. It depends on the target audience. OP might have some analytics to help him out. – Nix May 06 '13 at 13:33
  • @Nix webpages bigger than 1024 target very special audience. I rarely come across a page where i have to scroll horizontally...maybe instead of 1024 its 1280..webpages on my desktop screen with 1920x1080 resolution appear puny while the same pages on my laptop with 1366x769 appear much larger. Generally, horizontally scrolling pages are avoided. – thunderbird May 06 '13 at 14:59
  • @thunderbird Thanks for the reply, however my query was more about whether there are any widely adopted methods for figuring out the height/width ratios of images when it comes to certain designs, rather than the CSS involved in positioning the elements, though I appreciate the technical suggestions – qwalter May 06 '13 at 15:54
  • I disagree that sites over 1024px target a special audience. In Denmark, where I work, large screens are normal, so no vertical scrolling is needed. This is why I think there is no absolute standard, OP should figure out what the norm for his users are. – Nix May 07 '13 at 07:14
  • @Nix i really find that hard to believe...i guess most internet users use their laptops to surf the internet and the most popular resolution for laptops today is 1336*768. The OP wants his 'More' button to be visible without the user having to scroll downwards so if he can get everything within say 768px height his problem will be solved.And could you please give me some links to horizontally scrolling webpages? just wanna know how they work for standard webpages on the web. – thunderbird May 07 '13 at 17:37