960 Grid Question, not aligning

Discussion in 'Web Design and Development' started by wheelhot, May 8, 2009.

  1. wheelhot macrumors 68020

    Joined:
    Nov 23, 2007
    #1
    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:

    That code is suppose to center the wrapped element rite?

    Like if I type in html

    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
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    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?
     
  3. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #3
    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?
     
  4. memco macrumors 6502

    Joined:
    May 1, 2008
    #4
    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.
     
  5. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #5
    nope, sorry didn't work, even Background : red; doesn't work, I seriously confused on how CSS can give such a problem
     
  6. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #6
    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.
     
  7. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #7
    You could post the entire code for us to check? May be the only way...
     
  8. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #8
    Well as I mentioned I tried using 960 CSS Grid system so you can actually check it there but since you all asked:

     
  9. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #9
    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.
     
  10. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #10
    Okay, I shall post my HTML, it's very basic though:

     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    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.
     
  12. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #12
    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
     
  13. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #13
    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.
     
  14. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #14
    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
     
  15. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #15
    Well, I do link it just I don't named it as 960.css
     
  16. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #16
    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.
     
  17. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #17
    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
     
  18. effenay macrumors newbie

    Joined:
    May 13, 2009
    #18
    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>.
     
  19. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #19
    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 :(
     

Share This Page