Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

960 Grid Question, not aligning

W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
hello, well recently I have been trying out 960 grid and I seem to have a problem that is truthfully speaking, very very odd.

Here is an example page created by 960 Grid website. click here

Okay so I downloaded the CSS, linked it to a test page and even tested to see if it was linked.
Here is the problem:

.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
Click to expand...

That code is suppose to center the wrapped element rite?

Like if I type in html

<div class = container_12>
<p>Test</p>
</div>
Click to expand...
It's suppose to align to the middle of the page rite? But it doesn't.

Another odd thing is that if I were to copy the CSS listed above and write it as .container instead, that code works. So what gives?

Also if I deliberately write background: red, it wont work in .container_12 but it will if I type it in .container
 
Darth.Titan

Darth.Titan

macrumors 68030
Oct 31, 2007
2,905
753
Austin, TX
wheelhot said:
<div class = container_12>
<p>Test</p>
</div>
Click to expand...
I know this is probably just a typo on your part but "container_12" should be quoted in your class declaration.

Also, while I personally use them myself sometimes, underscores are not technically permitted in class and id names. W3C Info

Any chance you have a link to the problem site?
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
Thanks for the reply, and yea that was a typo when I wrote it here.

And nope, I tried changing Doctypes and even remove the _ and made it to container12. No luck :(

I wonder how CSS is not working like it should, this is just plain odd! And CSS is not even a programming language :eek:

Sorry, I don't have a link to the problem site, Im just testing out how to use this 960 Grid thing and it seems its giving me more headaches then supposedly "breeze up" my work amount, seems to do the opposite though. Anyone else had this problem?
 
M

memco

macrumors 6502
May 1, 2008
259
2
For the margin:auto centering to work, text-align:center; must be set on the parent. You can reset the text-alignment on the element itself to get the text to display as it should.
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
nope, sorry didn't work, even Background : red; doesn't work, I seriously confused on how CSS can give such a problem
 
Darth.Titan

Darth.Titan

macrumors 68030
Oct 31, 2007
2,905
753
Austin, TX
Is the .container_12 class the only declaration in your CSS right now? If not there could be a problem like a missing semicolon farther up the line messing things up.

I made a quick test html file and the .container_12 class works as it's supposed to.

Try the CSS Validator.
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
Well as I mentioned I tried using 960 CSS Grid system so you can actually check it there but since you all asked:

/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_1 {
width:70px;
}

.container_12 .grid_2 {
width:150px;
}

.container_12 .grid_3 {
width:230px;
}

.container_12 .grid_4 {
width:310px;
}

.container_12 .grid_5 {
width:390px;
}

.container_12 .grid_6 {
width:470px;
}

.container_12 .grid_7 {
width:550px;
}

.container_12 .grid_8 {
width:630px;
}

.container_12 .grid_9 {
width:710px;
}

.container_12 .grid_10 {
width:790px;
}

.container_12 .grid_11 {
width:870px;
}

.container_12 .grid_12 {
width:950px;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .prefix_1 {
padding-left:80px;
}

.container_12 .prefix_2 {
padding-left:160px;
}

.container_12 .prefix_3 {
padding-left:240px;
}

.container_12 .prefix_4 {
padding-left:320px;
}

.container_12 .prefix_5 {
padding-left:400px;
}

.container_12 .prefix_6 {
padding-left:480px;
}

.container_12 .prefix_7 {
padding-left:560px;
}

.container_12 .prefix_8 {
padding-left:640px;
}

.container_12 .prefix_9 {
padding-left:720px;
}

.container_12 .prefix_10 {
padding-left:800px;
}

.container_12 .prefix_11 {
padding-left:880px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .suffix_1 {
padding-right:80px;
}

.container_12 .suffix_2 {
padding-right:160px;
}

.container_12 .suffix_3 {
padding-right:240px;
}

.container_12 .suffix_4 {
padding-right:320px;
}

.container_12 .suffix_5 {
padding-right:400px;
}

.container_12 .suffix_6 {
padding-right:480px;
}

.container_12 .suffix_7 {
padding-right:560px;
}

.container_12 .suffix_8 {
padding-right:640px;
}

.container_12 .suffix_9 {
padding-right:720px;
}

.container_12 .suffix_10 {
padding-right:800px;
}

.container_12 .suffix_11 {
padding-right:880px;
}



/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}
Click to expand...
 
design-is

design-is

macrumors 65816
Oct 17, 2007
1,219
1
London / U.K.
Yeh, sorry to encourage another long post, I should have been more specific - could you post your HTML? or is that the stock, unchanged code from the site you linked to originally?

It works on the site you linked to, so it's a case of finding what you may have changed to 'break' it, if you get what I mean.
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
Okay, I shall post my HTML, it's very basic though:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testing</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class = "container_12">
<p>Testing Testing 123...</p>
</div>
</body>
</html>
Click to expand...
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Just a couple notes on your HTML, that may not help, but ...

Since you're using a DOCTYPE of HTML 4 the link tag doesn't need the closing piece "/>" Just delete that "/" part at the end. That's only needed when using a DOCTYPE of XHTML.

Another note, on your div tag, don't use any spaces around the = as I believe it confuses some browsers.

I'm not saying this will fix your problem, but it will make the HTML valid.
 
D

davethewave

macrumors member
Jul 30, 2007
50
0
Trieste, Italy
wheelhot said:
Okay, I shall post my HTML, it's very basic though:
Click to expand...

960 is very simple.
you have to add a div with class="container_12".
then, inside this div, you can add as many div you want.
say you want three "boxes": add first div with class="grid_3", then second with class="grid_5" and last with "grid_4". (sum must be 12...)
at every "end of boxes line" you have to add a div with class="clear" to go to a "newline".
another thing is that, with a "boxes line", the css must know what box is the first in line and what is the last one.
so you have to add to the class declaration "alpha" or "omega" to tag the box.
last thing: if you want a box positioned in the fourth grid without other "boxes" before just add "prefix_3" to the class declaration. This way the framework knows that have to "jump" three spaces before the point where the box has to be drawn.
hoping this helps you
bye, DaVe
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
thanks dave, that clears some things up, but if I am correct, .container_12 is suppose to align in the center right? but it's not doing that right now. As you can see from the html and css above.
 
D

davethewave

macrumors member
Jul 30, 2007
50
0
Trieste, Italy
wheelhot said:
thanks dave, that clears some things up, but if I am correct, .container_12 is suppose to align in the center right? but it's not doing that right now. As you can see from the html and css above.
Click to expand...

well, if you don't link the 960.css file, it will be hard!
you need:
Code: 
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="960.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
bye
DV
 
design-is

design-is

macrumors 65816
Oct 17, 2007
1,219
1
London / U.K.
Your only using
HTML: 
<link rel="stylesheet" href="main.css" type="text/css" />

You need all three is what I believe Dave is trying to say.
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
Hmm, good point, but I find it odd that it doesn't work even if I copy the CSS exactly and just name it as main.css
 
E

effenay

macrumors newbie
May 13, 2009
6
0
wheelhot said:
That code is suppose to center the wrapped element rite?
Click to expand...

I am assuming that you're trying to center your <p> within the <div>, correct? If so, memco has already provided the solution in the fourth post of this thread. Just declare:

Code: 
p { text-align: center; }

and the <p> should be centered within the <div>.

<p> is a block element by default, and will therefore take up the entire width of its parent. The auto margins specified in your styles will center the <div> within its parent, but not the <p> within the <div>.
 
W

wheelhot

macrumors 68020
Original poster
Nov 23, 2007
2,082
269
I am assuming that you're trying to center your <p> within the <div>, correct? If so, memco has already provided the solution in the fourth post of this thread. Just declare:
Click to expand...
Actually no, what I am trying to do is just adding a basic text and see if it auto aligns the 960px in the middle, I want the text to be on the left just for testing but when I resize my browser it should be on the left of the 960px but I shall start seeing blank left and right space so it should mean the body of 960px should be auto align to the middle. Damn I need to learn how to explain technical stuffs properly :(
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom