Usage of gridpx.css

Hi there,

I am going to build a new site using 960 pixel grid. I am creating a page-template with 960 fixed width and a left column of 240. Then I adjusted the gridpx.css a bit to have 16 columns. Then I can use g6 and g12 in the main column.

Now so far so good. I can attach the custom classes to articles (I added the names wide and small for g12 and g6 to make it a little easier for other editors)

Then I added first basic.css and second gridpx.css to the page layout.

In the gridpx.css there's a line that says that every article has a default margin:

Code:

---

.mod_article<.block {
      margin-right:10px;
      margin-left:10px;
}

---

This makes that every normal article has a default margin to it, even if it doesn't have a custom class. But I wonder if this is correct? Because, when I use a teaser article for example, the magins won't apply. Also, articles in the #left section have the default margin.

I also understood that the < in the css isn't used/understood by IE? How's that interpreted then?

When I use modules in the main section, they now outdent (is that the opposite of indent???) 10px to the left and right of normal articles. The same goes for article teasers.

How do I solve this in a correct manner? Should I change the default gridpx.css to set the default margin to other elements as well? But then I leave the standard gridpx, which is there for a reason. Can someone please explain why it is like that, cause I can't see it, not even after watching the slides from the grid system.

Thanks very much in advance.

Paul

Quote:

---

Originally Posted by prijke

Hi there,
I am going to build a new site using 960 pixel grid. I am creating a page-template with 960 fixed width and a left column of 240. Then I adjusted the gridpx.css a bit to have 16 columns. Then I can use g6 and g12 in the main column.

---

I THINK you want g4 and g12 instead of g6 and g12.

Quote:

---

Originally Posted by prijke

This makes that every normal article has a default margin to it, even if it doesn't have a custom class. But I wonder if this is correct? Because, when I use a teaser article for example, the magins won't apply. Also, articles in the #left section have the default margin.

---

All parts of an article -- including the teaser -- are contained within div.mod_article. So any margins you apply to .mod_article will apply to everything in the article including the teaser.

Quote:

---

Originally Posted by prijke

I also understood that the < in the css isn't used/understood by IE? How's that interpreted then?

---

"<" Isn't an actual selector. I think you are referring to ">" which means "direct descendant". This would not work as you intend in this instance. (FYI it is simply ignored by IE).

If you just want to indent all of your articles by 10px on either side, all you really need is:

Code:

---

.mod_article {
margin: 0 10px; /* Shorthand for "Indent to and bottom by 0, Indent left and right by 10" */
}

---

Quote:

---

Originally Posted by prijke

When I use modules in the main section, they now outdent (is that the opposite of indent???) 10px to the left and right of normal articles. The same goes for article teasers.

---

I suspect this may be due to your use of g6 instead of g4 (making the columns too wide).

Quote:

---

Originally Posted by prijke

How do I solve this in a correct manner? Should I change the default gridpx.css to set the default margin to other elements as well? But then I leave the standard gridpx, which is there for a reason. Can someone please explain why it is like that, cause I can't see it, not even after watching the slides from the grid system.

---

If the above doesn't answer your questions, please write back and let me know exactly what you want to happen, and what actually happening as I'm not 100% sure I understand. Better yet if you have an example URL or screenshot pass along.

Hi Medianomaly,

You're right, I ment > instead of <.

I adjusted the gridpx a little so I have G1 ... G16 (240px leftbar so two times G6 ore one G12 in the main section)

When this rule is in the gridpx.css

Code:

---

/**
* Give content elements inside articles a default margin so we
* do not have to assign class “g12” to every one-column element.
*/
.mod_article>.block {
margin-left:10px;
margin-right:10px;
}

---

It gives default margins to all articles, but NOT to modules like mod_newsreader and so on (as far as I can predict).

Quote:

---

Originally Posted by prijke

It gives default margins to all articles, but NOT to modules like mod_newsreader and so on (as far as I can predict).

---

Correct -- if you want to apply a left and right margin of 10px to ALL modules, then you need to include them in the definition as well, for example:

Code:

---

.mod_article, .mod_newsreader, .mod_newslist, (etc.) {
    margin: 0 10px;
}

---

Again, I wouldn't use the '>' because I think it is confusing you. The way you are currently using it, you are saying "Apply the following styles to any element that has a class of "block" and IS A DIRECT DESCENDANT of any element that has a class of ".mod_article". Since not all elements inside of ".mod_article" have a class of "block" it won't work as you want.

What I'm suggesting is, if you apply the margin directly to ".mod_article" instead of trying to apply a margin individually to everything inside it, it will be much simpler for you.

Better still -- if you want to apply a default margin to ALL MODULES (which is what you seem to be asking), just apply a margin or padding to the container of all of these modules, and it will be much easier.

For example, if you have 5 different kinds of modules inside your left column, just do the following:

Code:

---

#left .inside {
padding: 0 10px;
}

---

So everything inside the left column will be indented 10px from either side -- which achieves the same thing and is much simpler than trying to do this individually to each module.

Regarding the grid -- I misunderstood your original post. I thought you used G6 for your left column and G12 for your main column -- I understand now having read it again.

Quote:

---

Better still -- if you want to apply a default margin to ALL MODULES (which is what you seem to be asking), just apply a margin or padding to the container of all of these modules, and it will be much easier.

For example, if you have 5 different kinds of modules inside your left column, just do the following:

Code:

---

#left .inside {
padding: 0 10px;
}

---

So everything inside the left column will be indented 10px from either side -- which achieves the same thing and is much simpler than trying to do this individually to each module.

---

Hi Medianomaly,

This is exactly what is bothering me.... This is namely exactly what a did.... but when I publish an article then in the left column, it added the margin's also, ending up with 20 px distance for articles and 10px for other content...

I don't want to use '>' on purpose..... it is default in the gridpx.css which I donwloaded from the TypoLight side.

I think I will do the former.... apply margins to alle modules.....

I publish the draft soon online, maybe you can peek and give me some hints how I should use the gridpx system.

Thanks for thinking with me

Paul

Quote:

---

Code:

---

#left .inside {
padding: 0 10px;
}

---

---

I got this implemented as said on http://www.mkbeyond.nl/tl which is showing latest news (no margins) with 10px distance and articles in #left with 20px distance

Paul,

I went to that link, but it says "no pages".

Let me know if you get something back up and want me to take a look.

Also, just so I'm sure I understand the issue, can you briefly describe what you would like to happen on that page? Am I understanding this correctly -- you want all of your modules to have a 10px margin on the right and left, but instead some modules are showing 10px margins and others (such as the articles) are showing 20px margins?

Hi Medianomaly,

I think it was a language setting.... Is it showing now?

Indeed, I want all content (events / news / articles) to have 10px margin. I am using a slightly modified gridpx.css (just added more colum settings, G1-G16 instead of G1-G12.

I am not an expert on css, so there are probably finetunings possible.

Because of the css entry in gridpx.css, all articles (but only articles) get a default margin of 10px left and right. Therefor, if I use padding on #left .inside, the margin adds to the padding.....

I cannot figure out how it is ment to be used with articles and modules.

OK -- I see the link now.

So your "Breaking News" section is displaying correctly, but your articles are not, and you want them all to line up.

All you need to do is remove the left and right margins completely from the ".mod_article > .block" style definition, and that should do the trick. (Leave the margins for "#left .inside" as is).

The use of the '>' makes a little more sense to me now, seeing it in action. That is being used as a way to add a 20px margin in between each content element inside your article module.

Right now, you have 2 articles, and they both have classes of "ce_teaser", "ce_text", and "block". However, since you can put ANY TYPE of content element in that article, the classes would change -- and therefore you can only count on the "block" class always being there, not matter what type of content element you add.

so the simple way to add 20px to the bottom of every content element is:

Code:

---

.mod_article .block { // Any element that has a class of 'block' and is inside of .mod_article
    margin-bottom: 20px;
}

---

But you can probably see the issue with this -- your individual content elements could feasibly have stuff inside them ALSO with a class of block, and your margins would get applied to them as well (so the margin would appear to double up).

So hence the '>' is added:

Code:

---

.mod_article > .block { // Any element that has a class of 'block' and is a DIRECT CHILD ONLY of .mod_article
    margin-bottom: 20px;
}

---

Hope this helps,
Brian

Hi Brian,

Thanks for your explenation.... it helps a lot, although I am still a novice/intermediate an css.... But I am learning and getting better....

I lined up the left colum by adding a new css rule:

Code:

---

// Any element that has a class of 'block' and is inside of .mod_article
#left .mod_article > .block {
    margin-left: 0px;
    margin-right: 0px;
}

---

This way, the default margins won't apply in the left bar so I can use the #left .inside padding.

Thanks for helping me with this.... I will probably have more questions about this soon.....

Best regards and all the best wishes for 2010!

Paul