Issues using the 960 grid system

enat · 11-29-2011, 09:03 PM

Hello everyone, after a good bit of browsing around in an attempt to understand how to apply push/pull as supporter by the 960 css FW I've utterly failed.

I'm simply doing the layout right now to see where to place elements and so forth, and as far as I understand the following code would push the logo box 3 columns up (3*60=180px +60 px for gutters):

HTML Code:

<div class="grid_6 push_3">
		<p>logo</p>
	</div>

Whilst this here, would pull one of my textboxes back 6 columns (6*60=360px + 120px for gutters so, 360+120=480 = middle of a 960 wide grid));

HTML Code:

	<div class="grid_3 pull_6">
		<p>text column</p>
	</div>

Yet while using dreamweaved and previewing the page in firefox, for some reason, even after saving the index page, i still get the logo box on the top left corner, so anyone able to tell me why it wont adhere to the pushes and pulls?

Oh btw, these DIV's are place inside of the <body> tags.
And here's the full code of body so far:

HTML Code:

<body>
	<div class="grid_6 push_3">
		<p>logo</p>
	</div>

	<div class="grid_3 pull_6">
		<p>text column</p>
	</div>

	<div class="grid_3">
		<p>text column</p>
	</div>

	<div class="grid_12">
		<p>big box</p>
	</div>
</body>

enat · 11-30-2011, 03:35 PM

Ok so, silly me forgot to lead with:

HTML Code:

<div class="container_12">

Which meant that the 960 grid didn't know what i wanted to use, 12, 16 or 24 columns, hence no interpretation of push/pull.

So, fixed it on my own =)

ronaldroe · 11-30-2011, 03:51 PM

Thanks for posting your answer. A lot of people don't.

enat · 11-30-2011, 03:53 PM

Quote:

Originally Posted by ronaldroe

Thanks for posting your answer. A lot of people don't.

Shame on them, invoice sent thru paypal =)

11-29-2011, 09:03 PM	#1
enat New Member Join Date: Nov 2011 Posts: 12	Issues using the 960 grid system Hello everyone, after a good bit of browsing around in an attempt to understand how to apply push/pull as supporter by the 960 css FW I've utterly failed. I'm simply doing the layout right now to see where to place elements and so forth, and as far as I understand the following code would push the logo box 3 columns up (360=180px +60 px for gutters): HTML Code: <div class="grid_6 push_3"> <p>logo</p> </div> Whilst this here, would pull one of my textboxes back 6 columns (660=360px + 120px for gutters so, 360+120=480 = middle of a 960 wide grid)); HTML Code: <div class="grid_3 pull_6"> <p>text column</p> </div> Yet while using dreamweaved and previewing the page in firefox, for some reason, even after saving the index page, i still get the logo box on the top left corner, so anyone able to tell me why it wont adhere to the pushes and pulls? Oh btw, these DIV's are place inside of the <body> tags. And here's the full code of body so far: HTML Code: <body> <div class="grid_6 push_3"> <p>logo</p> </div> <div class="grid_3 pull_6"> <p>text column</p> </div> <div class="grid_3"> <p>text column</p> </div> <div class="grid_12"> <p>big box</p> </div> </body> Last edited by enat; 11-30-2011 at 03:58 PM. Reason: Added full code of body

11-30-2011, 03:35 PM	#2
enat New Member Join Date: Nov 2011 Posts: 12	Ok so, silly me forgot to lead with: HTML Code: <div class="container_12"> Which meant that the 960 grid didn't know what i wanted to use, 12, 16 or 24 columns, hence no interpretation of push/pull. So, fixed it on my own =) Last edited by enat; 11-30-2011 at 03:54 PM. Reason: Corrected the explanation.

11-30-2011, 03:51 PM	#3
ronaldroe Platinum Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 677	Thanks for posting your answer. A lot of people don't. __________________ Ronald Roe Small Business Web Design

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode