I like your new (to v2.x) negative margin trick to change the source order of navigation. I successfully used the same trick to create a Leaderboard region, in source order at the bottom but positioned at the very top.

But how do I add another "featured" region above #content and sidebars? I've tried a few things but each time navigation remains positioned below the "featured" region, which I don't want (otherwise I would just use the existing header region of course).

Any ideas?

Thanks.

Comments

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Status: Active » Needs review

You need to do few little things to achieve this with this method :

1/ PLace your 'featured' regions right after the navigation region
2/ Apply exactly the same style as navigation to the feature region :

#navigation, #content-top {                        
  float: left;                       
  margin-left: 0;
  margin-right: -100%;
  padding: 0;
  width: 100%;
}

3/ Add some margin top to the feature region, and add this value to the margin top of the content and sidebars.

Makes sense ?

glennr’s picture

glennr CreditAttribution: glennr commented

That makes perfect sense and it works well, thanks.

Just a couple of small problems: Because of the type of content that will go into it, I would have preferred for the 'featured' region to be higher in the source order. And the region isn't collapsible.

However, as it's only likely to be used on certain pages, eg the front page, I can always just include the region in those page templates only.

Or I could just push the new region and the navigation back up the top in the source order. Not ideal but not a huge problem.

Thanks for your help.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Assigned: Unassigned »
Status: Needs review » Fixed

Regarding the source order, I'm fairly confident that you could place this anywhere in your page template and have it show at the same spot. floating everything leaves you with some flexibility.
Have faith in CSS, there's always a way :)
Happy I could help !

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

harcher’s picture

harcher CreditAttribution: harcher commented

I have the same issue as couzinhub. The solution here makes sence and works. However, since we are hard-coding the top-margin of the content/sidebars, we are assuming that the height of 'navi' + 'feature' is always the same.

What if the 'feature' region has varied height? How do we tell the content and sidebars to always drop under nav/feature regardless of thier height?

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Well in that case, you might have to bring the navigation up.

harcher’s picture

harcher CreditAttribution: harcher commented

I thought so...

duntuk’s picture

duntuk CreditAttribution: duntuk commented
Title: Navigation Bar Position » Positioning a new region above #content and sidebars?
Status: Needs work » Closed (fixed)

That's the problem with zen using content above nav...

SEO speaking this really doesn't make any difference anymore (it may have a few years ago) as long as your html uses proper semantic markup and structure... e.g. 

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="sidebar-first"></div>
<div id="sidebar-last"></div>

This is where HTML5 is headed, and Google loves HTML5.

Google algorithm is smart enough to know the difference between 'content' (or 'article') and 'nav' ... it's ridiculously advanced and constantly getting better... Plus if you're still not convinced that google can't tell the difference, then check out the source code of any top SEO sites, or highest ranked sites, and see how they are structured. You'll probably get no penalty for now, but you most likely will not get any benefit either--just headaches trying to use this inflexible css formatting.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Title: Positioning a new region above #content and sidebars? » Navigation Bar Position
Status: Closed (fixed) » Needs work

There you go, I didn't need much more to be convinced to remove this from BASIC. It was just getting too complicated anyway.
Thanks for the inspiration @duntuk. Not sure if I should roll this into a BASIC 3 or stick it into BASIC 2..

harcher’s picture

harcher CreditAttribution: harcher commented

Thanks duntuk that makes perfect sence.

I've tweaked Zen to do just that, header, nav then content... All the minus margins and adding/subtracting element widths is plain overkill for what its worth.

duntuk’s picture

duntuk CreditAttribution: duntuk commented
Title: Positioning a new region above #content and sidebars? » Navigation Bar Position
Status: Closed (fixed) » Needs work

Happy to be of assistance. And... I see no reason not to use proper semantic structure on Basic 2 as well as Basic 3.

damiankloip’s picture

damiankloip CreditAttribution: damiankloip commented

Have started work to use 'normal' markup order and remove the negative margins on the 3.x-dev branch.

CatherineOmega’s picture

CatherineOmega CreditAttribution: CatherineOmega commented
Status: Needs work » Closed (fixed)

This is no longer applicable to 7.x-3.x with Bourbon and so on. (Yay, Google engine improvements!)