I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)
Related
This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.
I'm trying to make a horizontal layout (with columns) where the content scales based on the browser window height.
I came across answers about perfect ratio based on width, but I want to have an infinite width (as the amount of content won't always be the same).
Is this possible just using HTML/CSS?
It is going to be hard to maintain the aspect ratio with css, but if you set the height of the maincontent box to 90% and the height of the containers to 100%. They should respond to
the browser window. But only in height, never in width.
From there you can use javascript to set the with to be <height> * 1.5 (or similar) you will have to do this in the document ready event, but also in the window resize event.
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
There are many types of display that people use, so it is hard to expect what resolutions will your user use to view your site. To avoid this problem, I am thinking using percentage instead of pixels, em and pt to define the web layout. However, is this a good practice to do this? Including using the percentage, eg 80% for the main wrapper ?
I know it is hard to do it when it come to determine the width of the inner element. I'll have to calculate the percentages based on the each div's parent. How do you guys cope with this problem when it come to different browser's resolution?
Css media query is best solution for this check this http://css-tricks.com/css-media-queries/
There's obviously debate between fluid and fixed layouts, but fluid layouts can work very well as well.
An example is smashing magazine (try resizing your window with the site loaded).
I believe that it would be a lot easier if you use a framework of some sort. If you have used any grids CSS framework before, you can have a look at Liquid Blueprint. This allows you to work in a grid based manner, but have the page fluidly resize according to the browser's size.
I use percentages for every width within the outer container but have min-width: and max-width: for the container itself, so it scales a small amount. Say 960px for min width and 1160px for the max width. This way it works larger screen sizes better and if I want to I can go back and make it responsive because its already all in percentages.
Is it possible to set width in CSS in percents of height? Like on picture:
No, you can't do this with CSS.
You can not set height like that in css.
There is little use even if You can, because different users have different preferences about using toolbar which occupy height on monitor, some even have multiple lines of bookmarks, some view Web in full screen - therefore there is no point of setting page layout according to browser height.
Only good recommendation is setting width to 1000px because most current day monitor resolutions can display that without horizontal scroll.