this is really a knowledge for knowledge's sake question. i can change the margins without any problem, but i don't quite understand how it works. for example, the no sidebars layout has this css:
width: 960px;
left-margin: 0px;
right-margin: -960px
this produces a box that is 960 pixels wide. i don't quite understand the negative margin in this case. i personally would have made the right margin 0, since the box fills the entire container.
i've tried changing the margins on some of the other examples (like left-sidebar), and i found that if i remove the negative margins, the left-sidebar is forced down below the main content. so obviously the negative margin is necessary, but i don't quite understand why.
so i suppose my question is: what function does the negative margin serve?
Comments
It's a technique that I
It's a technique that I wouldn't be able to explain. See:
http://www.alistapart.com/articles/negativemargins
I don't agree with a lot of
I don't agree with a lot of the CSS that the core and popular themes like Garland and Zen use. It's a bitch to have to weed it all out not to mention the divitis effect with some modules..
===========
read my thoughts
my guess, maybe compatible col switch
The negative margin concept is not uncommon and, as stated, the AList Apart link is a good example of when it really became popular.
Someone else would be better at explaining then myself, but, My guess is the #content section is spelled out that way simply to be able to switch through 1-2-3 columns on the fly and be compatible.
If it was only 3 column, another way of doing it would be ----
by not adding a specific width, unless fixed and applying a simple margin
I think the new Zen theme is awesome, but,
if you don't want to go that route...
here's a short brief of just how easy it is to make up your own.
http://www.designdog.net/beta/content/blank-3-column-template-for-drupal...
Building 3 columns is easy
Building 3 columns is easy with a two column mindset.
Two columns, and inside one would be your one or two column layout depending on what page it is with the css to make it able to fit 1 or 2 in while filling the content of the page.
I am not a fan of multiple float lefts because it doesn't always work out the way it should.
I tend to do RTL CSS positioning, so if I had 3 columns:
[column left][ column right]
column right would come first in my document, floated right with a set width. then, column left comes, margin righted to the width of the right column. this tends to work perfectly every time and is also on ALA somewhere. then, if i needed 3 columns, i split the column right into two with another div, with the same method. works in every single browser no sweat.
===========
read my thoughts
Yeah, poorly explained
I have a fair understanding of negative margins (but not a great one). It would be really helpful if this approach was properly documented within the Zen theme. I'd also love to know why the hell the navbar code appears after the content area code and it's relation to the negative margins.
I'm currently looking at removing all the negative margin stuff from then theme as I don't like the idea of having code which I don't fully understand in my themes. Also, I've experienced the nav bar skipping to the bottom of the page from the top and I need to ensure that this doesn't happen.
Negative margins may be the best approach, and I'm sure that the writer fo the zen theme has a sound understanding of them, but if they are to be used the implementation should be comprehensively explained in the code.
I can't believe my post was a
I can't believe my post was a year ago.
I wound up just using blank TPL files, page/node variables (listed in the theming handbook) and a css reset and going from there. For the admin, I use the admin.module so the backend is intact and ready to go.
It takes too long, in my opinion, to try and find the reasoning to negative margins and other grey area CSS techniques when deadlines are ticking away.
===========
read my thoughts
...
Neg margin techniques are used to create content source ordered layouts, I think I figured out neg margin techniques in about 10 minutes, but then again I am web designer, its my job to know these things, and lets face it, its not exactly rocket science.
As for float left layouts not working out - take a look at any grids framework, the vast majority work on a simple float left technique, never been a problem for me.
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
-Why- are negative margins
-Why- are negative margins required? It's like solving a problem that doesn't even exist.
===========
read my thoughts
...
If you don't understand them, you are hardly in a position to critique their use-case or benefit, wouldn't you say?
Why not use them, that is a better question, I mean any designer worth his salt knows 3 or 4 off by heart, they certainly beat the crap out jacking about with ugly opposing float layouts, yuk...
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
You haven't even answered why
You haven't even answered why its a 'necessity'. As for floating, it's not as needed as it used to be before the advent of Panels 2 and now 3. It's not a matter of right or wrong, but why?
===========
read my thoughts
...
Panels uses floats mate, a simple float left technique for most of its layouts. Why do you think using Panels is not using floats? Of course it uses floats!
I already answered your question - content source ordered layouts that are rock solid across browser and dont rely on other techniques such as absolutely positioned boxes (not very useful for Drupals expanding blocks, nodes and lists).
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
hmm
I realise that the reasoning by the negative margins is obvious to you Jeff, but to the average css developer who has just come across the Zen theme it seems a little contrived. After all, on the face of it you can ask the simple question 'why have negative margins to put everything in order when we could have just ordered them correctly in the html in the first place?'.
I'm just a bit confused as to how this approach results in a more stable, cross-browser compliant layout than the alternatives. Then again, I've only got about 4 months of CSS experience. In a year I'm guessing that the answer will be obvious to me too.
The menu drop down problem I have his odd. It happends on some PCs but not on others (even if the browsers are the same). I also get it occasionally when I create a new node. Moving the contents around a bit sometimes solves it. Very odd.
There is history. Documented history. From before Zen
The negative margin technique is not unique to Zen. Variations of it are used by various top-level designers, and the link to alistapart is a good place to start if you want to grok it.
It has been concluded and explained by developers who have worked through several generations of browsers and recommendations that it is beneficial to have the content of the page early in the code and the sidebars and supplementary stuff later if possible.
This is better for :
- screen readers
- accessibility
- Search engines and SEO
- handhelds and small screens
- keyboard navigation
- clients with limited css support
Negative margins is one way to achieve this in the code, while still visually putting a sidebar on the left and supporting variable widths and heights. There are other methods, but they have their own disadvantages.
It is harder to get your head around, and it's not an approach you will learn from "HTML for Dummies" or from FrontPage or Dreamweaver - sliced sites.
(It's also a reason why I don't understand Zen theme being touted as an excellent 'beginner' theme - it's not, it's a power-user theme)
It is possible to mess it up in strange ways until you learn which bits to leave alone, so I don't think of it as 'robust' myself, unless in the hands of someone who already knows what's going on. It's easy for a CSS cowboy to destroy accidentally with a few bad tweaks.
But the negative margins trick is there for a reason. Just because you may not understand what the reason is doesn't mean it's a bad choice.
See the link to alistapart and you'll see that there is a lot of history and testing gone into this.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
Sure RichieRich, I see your
Sure RichieRich, I see your point, I am a power user so for me its easy to understand.
There was a cheat sheet card floating around for Zen which came with a diagram showing how its neg margin technique works. Spending an hour or two making your own digram would really clarify things, just work through the layout CSS and make changes (following the instructional comments in the in CSS) and draw a little digram on paper.
I tend to agree that for layout, neg margin themes/content source ordered layouts are for power users, but they are just too useful and have too many benefits to not start getting your hands dirty with sooner rather than later.
Regarding your drop down issue, well, cant say for sure, but one thing I see new CSS users doing all the time is adding more and more CSS to "solve" their issues, whereas the opposite is often the right way to go. If you find yourself with gnarly great big declaration blocks for something that should otherwise be quite simple, think about that and consider a different approach.
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Here is a link to the cheat
Here is a link to the cheat sheet you may have been referring to:
http://www.palantir.net/blog/free-scratch-n-sniff-stickers-zen-plus-prin...
The explanation is really fairly simple ...
... once you get your head around the basic premise of what negative margins are for.
Basically, using negative margins reset the starting point for the following html element. In effect this allows you to use the margins on elements in a way similar to absolute positioning because the negative margins have set the starting point back to 0. Usually a left-floated element uses the previous elements right side as a starting point - the negative margin on the previous element shifts this back to the 0 point of the parent element.
It's not an absolute rule, but in general: negative right-margin = left-margin + width
Using this method lets you change the visual ordering/positioning of elements without modifying the html source.
There are also a couple of good resources:
http://www.slideshare.net/JohnAlbin/new-adventures-in-drupal-theming (see the slides later in the presentation)
http://idcminnovations.com/article/zen-negative-margins (details several different use cases)
Hope that helps.