Fit all resolutions?

Aruffell

Aruffell

Aruffell

Soldato
Joined
29 Dec 2004
Posts
5,653
Location
Chatham, Kent
My site www.eteknix.com

If you shrink your browser window or change your resolution, you will see that it will completely mess the site up with images overlapping etc...

How can i get it to be fluid and adjust to the resolution?

Here's my CSS code for the layout:

Code: 
/*
LAYOUT: Three-Column Wide
DESCRIPTION: Three-column 950px fixed layout with two sidebars on either side of content
*/

body {
    min-width:960px;
}
#main {
    /*width:1260px;*/
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
#container {
    width:100%;
    float:left;
    margin:0;
}
#content {
    margin: 0 220px 0 235px;
    overflow:hidden;
}
#primary {
    width:220px;
    float:left;
    position:relative;
    margin: 0 0 0 -100%;
    padding-left:5px;
}
* html #primary {
    left: 20px;
    position: relative;
}
#secondary {
    width:220px;
    float:left;
    margin: 0 0 0 -220px;
}
#footer {    
    clear:both;
}
#subsidiary {
   /* width:1260px;*/
    margin:0 auto;
    overflow:hidden;
}
#subsidiary .aside {
    width:300px;
    float:left;
    margin:0 10px 0 10px;
}
#subsidiary #third {
    margin:0 0 0 10px;
}
#siteinfo {
    clear:both;
    /*width:1240px;*/
    margin:0 auto;
}
.fixed {
    /*width:1260px; */
    margin:0 auto;
}

Hope someone can help.

Looks brilliant on my 1920x1080 res, but heard that lower is bad.

Thanks.

Andy
 
think a big deal of the problem is you seem to have designed the site with a large screen res in mind, most people on intarweb have smaller screens (1280*1024 is a kind of standard size these days, that's a fairly typical res for a 17" screen)

This is why a lot of designers code the page content to be 960px wide, so that even on these smaller screens the site still looks like the designer intends.

Anyway no solution from here i'm afraid just my musings :P
 
I'd agree with Eulogy - you should always design your site with the lowest resolution in mind. At work, all ours pages are written for 1024*768, and we simply put expanding divs around the main content div to crate borders. Check out JelloCSS (iirc) for a good fluid page that handles different resolutions.
 
I didn't design it sadly, i tinkered with the colour scheme but that's about it.

Just i know that code above is for all the widths etc... but im not quite sure where to start with it.

Andy
 
Shrink it right down and the youtube video and some of the images on the reviews stay big, is there anyway to resize this?

Andy
 
Images won't shrink down like a div will. The only fix is to make the image the correct size for the site at it's smallest width - which according to firebug means your images need to be a maximum of 473px wide. This should be pretty easy to do as most of them have a lot of whitespace along the sides anyway.
 
As an alternative you could add this rule:
Code: 
img {
    max-width: 100%;
}

This does pretty much what it says. The maximum width an image can be is 100% the width of it's container. Caveat: it doesn't work in Internet Explorer 6 (and possibly 7, not sure)

You won't be able to resize the flash Youtube videos, and if an image is inside another container/div which is bigger, then it won't work.

For example
Code: 
.entry-photo {
    width:630px;
    max-width:100%; /* need to add this */
}

and for a couple of other classes, such as .featured. I'll leave that as an excersize for you :D

Hope this helps
 
Bah! Sorry yes you're right. Although as you say, it won't work in IE6.

*edit*
Just checked in IE6 and it looks like the whole site doesn't layout properly at all :(
 
It's a nice theme but, in my opinion, for a "latest technology" site you really want something a bit lighter, with a "cleaner" feel.

Also: check your logs. How many people who visit are using IE6? And if you are reviewing the latest tech, those kind of people, I would say, are likely to be using newer browsers. It may not be worth wasting the time on IE6.
 
so far this month (2 days) i've had 5000 hits from IE 8 and half as much for IE6 (2300) and 19000 hits from Firefox 3.5 and 9000 from FF 3.0.

Andy
 
You must log in or register to reply here.
Back
Top Bottom