I'm trying to convert a psd mockup file into html & css, but the width of page is 1700 px, too big to be rendered without horizontal scrollbars. So I want to limit the width or to set a percentage value for it, but doing so I'd have to change sizes of all the elements.
As Justinas says, you should fit your site to maximum 1200px, so you need do redo your design.
I can recommend 960 grid system. All the important things should be within 960px.
Related
If I want my website to look the same on many different screen sizes and want my divs to all be the same height and width regardless of if it's on a 11 inch macbook or a 27 inch monitor.
Do I set my height and width in pixels or in percentages in my CSS?
I'm guessing percentages, but just want to make sure.
It depends on exactly what you mean by "same height". If you want something to always take the full width of the page regardless of resolution, use 100%. If you want something to always take x number of pixels, specify in px. If you want something to use relative sizing so that as fonts get bigger, everything scales, then use ems.
As it is worded, your question and intent isn't clear. You should decide what it is you want to do and then implement it.
Web development is about making content usable in a variety of formats and sizes. Consider why you want a fixed size, and work to achieve your goals within the constraints of CSS. And remember, you can always mix metrics if you need to.
Simple question but I cant seem to find the answer, sorry about the bad title.
When designing a website can you set the width properties as a percent value and the height properties as a pixel value, in the same layout? If so what type of layout is this called?
Thanks in advance!
It is a common practice to do something like this in a responsive layout, but this technique by itself doesn't have a special name. It's only one small part of a responsive layout.
I use this technique frequently for headers where I want the header container to fill the screen horizontally but only take up a fixed space vertically. If you give it a position: relative then you can also size the content responsively, so the content can then reflow depending on the width.
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.
I'm looking for a fluid CSS grid generator that's based a percentage width like 100%. Everything I've found so far requires a specified pixel width or min/max pixel width.
These grid generators are all pixel based: http://www.gridsystemgenerator.com/
If you want to make a grid based on a percentage width, you don't need a generator.
Just count.
If you want a column that is half of the body, make it width:50%;. Quarter? width:25%;
I made a demo for you.
However, making a design entirely depended on percentages to leads to some problems. While a paragraph might look fine with width:50%; on your screen, someone with a huge monitor might see that entire paragraph on one line, which would be obnoxious to read.
I would recommend The 1140 Grid. It's based on pixels, but is also fluid, and may suit your needs. Also, by using max-width everything will remain easy to read for everyone.
Foundation has a percentage-based grid system: http://foundation.zurb.com/
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)