By El Bandito on

I am trying to deconstruct the Zen theme for Drupal 6 as a learning exercise ( I'm newish to Drupal/CSS/HTML and PHP ).

1> How come the html for the front page ( and presumably the other pages of my site ) presents the main content div before the navbar div, and yet my eyes definitely tell me that the navbar containing the primary links is above the main content on the visible page ? Is this some kind of voodoo ?

2> What is the purpose of the "Skip to navigation" link in the header ? Is it really just an invisible shortcut ?

3> Any resources on Zen that I should be consulting so I don't have to ask dumb questions like these ;-) ?

Thanks for your patience.

Dave

Comments

dnewkerk’s picture

dnewkerk commented

Nope not magic, just a nifty and common CSS technique. It's purpose is to allow the actual content to be listed in the HTML first and therefore more readily available to search engine spiders and by people who have disabilities, who are probably using a screen reader or other assistive device. The second part is entirely for the use of those people with disabilities. Since the content is first, which if they "did" want to read that page would be a good thing (rather than tabbing through every menu item first), that link makes a shortcut for them to jump to the menu if that's what they want to get to rather than read the content of the current page.

The ideal resource to consult would be a nice book about CSS. Trust me, it will be worth it. Personally I went with CSS Mastery by Andy Budd, though there are quite a few good books to choose from. You can also read tons about CSS on a very wide variety of websites, though a book will give you a more well-rounded approach and make sure you don't miss things (and save you time). After reading the book, I went from bad coding and using CSS just to style fonts, to being able to make quite nice things :D If you like, there are programs to help also... on Mac there's CSS Edit or Coda. A somewhat similar cross-platform program is Style Master.

-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides

El Bandito’s picture

El Bandito commented

David

Thanks for your informative response. I've done a little digging around and it appears that the layout may be based on something like the "Holy Grail" http://www.alistapart.com/articles/holygrail. I've read the article and a lot of it went over my head but what I guess I have gathered is that as the browser renders the page previously rendered content can be shifted about by CSS properties assigned to later content. In my head I always imaged the page was rendered in a totally sequential manner.

I guess I better buy the book !

Cheers

Dave