Size of my website

I made a mockup of my web site using photoshop and size of my phosotoshop template is 1250px x 750px.
How would i set this up in html?
For example what would i set the div size that will hold all of my content etc?

I know that this seems vague but any ingo to get me started would be great

1250px is relatively small for a mockup layout, it neither factors in super-size monitors (such as Apple’s goliath 2500px resolution screens) nor mobile screens if you wanted to take the ‘mobile first’ approach. In fact, it kind of neatly falls slap-bang in the middle.

Working off of the 1250px width however, just create a wrapper/parent element that will house all other content and set its width to 1250px, and go from there.

Tip: To make sure it’s fluid on smaller devices, set it to ‘max-width: 1250px;’ and ‘width: 100%;’.

I would like to take exception to assigning width:100% to the outer wrapper or any block element unless it has been assigned display:table or some quality other than block. Width:100% simply isn’t necessary and in fact can cause problems if paddings and margins have not been judiciously applied.

Likewise, I take exception to assinging resets with the universal selector. It hits too many elements and always requires the user to set his own defaults. I would advocate a reset such as Eric Meyer’s which targets reset values to specific elements.

Don’t forget, box-sizing for padding. :slight_smile:

I haven’t. I use it quite often. But there are occasions where it needs to be “reset” to box-sizing:content-box.

No matter how you see it, it doesn’t change the fact that applying width:100% indescriminately to block elements is unnecessary and can be a hinderance.

It would be more constructive for new coders to learn the default properties and values applied to elements and make an informed decision about whether a “reset” works for them.

Sure. Although I never actually recommended applying 100% width to every single block element.

We all code differently to often produce similar to identical results.

How would max-width:1250px make it fluid on smaller screens??

It doesn’t, it just means that it won’t get any bigger than that on larger screens, max-width is very useful in responsive design, to put a cap on how big things can get on big screens. Images may start to get ugly if blown up, or pages with little content get a bit short when too wide. It’s the width:100%; that is supposed to make it fluid, by making it fit full width on any screen smaller than 1250. But bear in mind ronpat’s comments on this:-

Can I be a bother and also ask how would i go about making ti for smaller screens? I would like to cover iPhones and iPads and majority of office screens. Now I know that this is impossible to determine but I am aiming to cover office employees which suggest bigger size of screen as well as iPad and iPhones.

It’s not impossible, if you have a fluid layout (what Simon was pointing to). That is what we aim for with Responsive Design. It is a fairly big subject to cover in one post, but there are many about it already. Read up on that, and if you then have any questions, ask.

In fluid design does everty element in page need to be set in percentage? What about wrapper that I mentioned above?

Can I set child divs in percentage even if parent div is set in percentage?

Yes, as shown in code samples provided to you by several posters in your other threads. Try this example posted recently for another member who asked the same question:

Designing with percentages - #3 by ronpat

You might read the comments at the top of the file. They might answer some of your questions or lead to new ones.

that example shows how to use percentage in one of the divs…but how do you divide child element of the parent whose width is also in percentage

Did you create a page and open the page in your browser and watch it work?

That is a simple example that applies a percent value to the width of 3 divs, two of which are nested.

No, I avoid too many percentages as they too often get to small. I prefer min and max-widths and a more fluid approach like this.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrap {
	max-width:1200px;
	margin:20px auto;
	padding:10px;
	border:1px solid #000;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
}
.columns {
	width:100%;
	display:table;
}
.tc {
	display:table-cell;
	vertical-align:top;
	padding:10px;
}
.sidebar {
	width:350px;
	background:#ccc;
}
.main{background:#eee}
@media screen and (max-width:768px) {
	.tc {display:block;width:auto;}
}
</style>
</head>

<body>
<div class="wrap">
		<h1>Heading</h1>
		<p>lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here </p>
		<div class="columns">
				<div class="tc sidebar">
						<h2>Sidebar</h2>
						<p>lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here </p>
				</div>
				<div class="tc main">
						<h2>main column</h2>
						<p>lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here </p>
						<p>lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here </p>
						<p>lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here lorem ispum content goes here </p>
				</div>
		</div>
		
</div>
</body>
</html>

The percentage will always apply to the immediate parent so if you want to divide by 4 then each will be 25%.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrap {
	max-width:1200px;
	margin:20px auto;
	padding:10px;
	border:1px solid #000;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
}
.child {
	width:50%;
	margin:auto;
	background:red
}
.grandchild {
	width:25%;
	float:left
}

.one {background:green}
.two {background:orange}
.three {background:teal}
.four {background:yellow}
.footer {clear:both}
</style>
</head>

<body>
<div class="wrap">
		<div class="child">
				<div class="grandchild one">1</div>
				<div class="grandchild two">2</div>
				<div class="grandchild three">3</div>
				<div class="grandchild four">4</div>
		</div>
		<div class="footer">footer</div>
</div>
</body>
</html>

If you have fixed width elements that you need to accommodate then you won’t want percentages and should use the display:table-cell method shown in my first example.

The important thing to remember is that content is foremost so don’t try to squash your content into a wireframe design but instead try and let the content dictate how the design should evolve. There is obviously a trade off between design and function but don’t lose sight that its the content that is most important; not the design.

2 Likes

Hey Stribor45. I would recommend designing your web page with a mobile first format, then with the use of media queries, you can design for the other platforms. It’s a lot easier to build up then it is to build down. Google today’s popular screen resolutions, and use that for a guide to design your mock up. Good luck.

A lot of people say this but I actually find it easier the other way around :smile: Maybe its just me;)

1 Like

And me.

I’ve always figured it’s a “what works best for you” thing.

Though I guess for old-timing folks such as myself having started with desktop before there even was mobile (remember all the “can I stop designing for 800x600 yet” threads?) I feel more at home with desktop so that seems like it would be the natural place to start.

2 Likes

There is a certain elegance to the mobile first approach – adding rather than subtracting or negating properties to “grow” the size of a page – however, my brain finds it easier to construct a fluid desktop layout then reduce it to fit smaller devices as needed by the layout than to go the reverse route. I do not care to rely on today’s popular screen resolutions to determine breakpoints, etc… screen resolutions are a moving, evolving target. Fluid first, as opposed to mobile first (as the latter usually implies using a grid with predetermined breakpoints) is my preferred strategy It’s simpler… and I have not found the difference in the amount of code used by the two techniques to be significant.