By cloneofsnake on

Really appreciate if someone can explain these to me...

I understand sometimes it's easier to have a bigger container to wrap around blocks on a page... but why is Zen using so many seemingly redundant "wraps"? eg: page, page-inner; header, header-inner; main, main-inner... etc.

Also, another thing is the negative right margin... it's like they're counteracting the left side or something... eg: 

#content {
  width: 100%;
  margin-right: -100%; /* Negative value of #content's width + left margin. */
}
#sidebar-left {
  width: 200px;
  margin-right: -200px; /* Negative value of #sidebar-left's width + left margin. */
}

This is what I did with the subtheme so far, with just the layout.css and the page.tpl.php. http://iswack.com/drupal-60/

Still a long way to go...

⋅ Categories: Drupal 6.x

Comments

Wolfflow’s picture

Wolfflow commented

Me beginner too...
Yes CSS is great exactly for the possibility to play around with styles in many different ways.
I guess after a time taking a look at the many different styles.css of many Themes to learn
that here in your case while the content-width is given a percentage value
the siderbars always goes adjusted in relation with the percentage of the width of content field.
That is why you have -(negative)values.

You may find more infos at: http://www.w3schools.com/css/css_intro.asp

Cheers

Beginners Tutorial Site

edit: changed link to new & valid.

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

ztyx’s picture

ztyx commented

Hi cloneofsnake,

I found your post now as I was wondering the same. I thought this tutorial taught me about negative CSS values pretty well:
http://www.communitymx.com/content/article.cfm?page=1&cid=B0029

Good luck,

Jens

prestonso’s picture

prestonso commented

Just looking at names like header, header-inner, etc., I can think of multiple reasons why an expert themer or CSS designer would want to use such a theme, but I won't go into those. Zen is meant to be an extremely versatile, extremely expandable base theme that provides a lot of starter points. Although I don't go this route, some themers choose to start with base themes like Zen to make producing the CSS a lot easier, and in some ways, faster.
___________________

Preston So
Web/Print Designer
Monarch Digital, Colorado Springs
My near-dead non-Drupal site

___________________

Preston So

lucidmedia’s picture

lucidmedia commented

one reason for redundant divs is that it makes for a more consistent page layout, especially when using fixed div sizes. IE and Firefox measure padding differently, for example, so it is a well known technique to set the width of an item in the outside div and then set the padding values in the inside. This will give a more consistent layout across multiple browsers

mailme.eva’s picture

mailme.eva commented

hi!
a reason for various wrapers can be if you went to use for example this solution for vertical centering: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
anotherone, i use quite regualrly, is to split background image layers according to special functionality.

i do wonder about the leftmargin though. is that some positioning trick?
if i find out i let you know ;-)

coxw’s picture

coxw commented

With the Zen themes, you will notice that the content div comes before the left and right sidebar. This is done on purpose, as to insure for SEO reasons the content sections are found before the sidebars. This has a large impact on why there is so much negative-ness going on.