Prev | Current Page 174 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"




end header_inner
end header
end nav_inner
end nav
lots of content markup removed
here to save trees
end content_inner
end content
end footer_inner
end footer
BASIC PAGE LAYOUT 143



This may look like a lot of code, but if we break it down, you will see
there are only a few key pieces to it.
First, ?¬? nd where the head tag closes about a third of the
way down. Above it is the code the browser needs to display the
page, and below, following the body tag, is the content that will be
displayed.
Starting from the very top, after the required DOCTYPE and XHTML
tag comes the head of the document, which contains the title tag
and two link tags. The link tags connect two style sheets in the Stylib
library to this page, which provide the page with the CSS for the
page layout and the text stylings, respectively. We will examine these
style sheets in detail in a moment.
In the body of the document are four divs??”header, nav(igation),
content, and footer??”with their respective inner divs. Let??™s see what
it takes to lay these divs out so that nav and content divs sit side-byside,
with the full-width header and footer above and below them,
respectively. Here??™s the CSS that makes this happen, which is in the
linked style sheet 2_col.css. (The link to this style sheet is highlighted
at the top of the code above.


Pages:
162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186