Playing with <body> as the wrapper

append delete 16 Mar ’12 · 02:24 NickPfen

I've been playing around a lot with html5 semantics, design and going against my old way of thinking - using div's as wrappers and containers. Came across this article and test: http://camendesign.com/code/developpeurs_sans_frontieres/test.html in which you don't need a wrapper and the body is already a wrapper. Many thanks :)

I like the design and model used here from Kroc: http://camendesign.com/code/developpeurs_sans_frontieres/test.html

My question is, what lines of code could I use to place a header and nav in the orange area at the top of the page? Same goes with the footer in the orange area at the bottom of the page?

I'm hitting a road block here and I appreciate your help :)

Replies

append delete 16 Mar ’12 · 02:31 #1. theraje

“My question is, what lines of code could I use to place a header and nav in the orange area at the top of the page? Same goes with the footer in the orange area at the bottom of the page?”

I suppose you could put it in the style rules for your header and footer. Set the positioning for them to "absolute" (or perhaps "fixed") and set the top/left/bottom/right/whatever positions accordingly.

I don't know whether it will work (or how well, if it should) the way that particular page is done (I'd never seen that approach before), but that would be my first approach.

append delete 16 Mar ’12 · 08:05 #2. Kroc

You can use a negative top margin to pull something up out of the body into the html area.
Another way to achieve the same look is to use a `<header>` and `<article>` and `<footer>` and put the visual box styling on the article, so that the header / footer hang in the background space (this is how Camen Design does it).

Camen Design Forum

Playing with <body> as the wrapper

Replies

Reply