BASIC PAGE LAYOUT 147
Freely Style Your Inner Divs
You can merrily apply borders, margins, and padding to the inner
divs. Because they do not have an explicit width, they always ?¬? ll
their respective column divs. I was able to add the red line down
the side of the navigation by adding it to the inner div. I could do
this without affecting the width of the critical ???outer??? div width
and thereby breaking the layout. Just remember: Don??™t apply visual
styles directly to those main column divs; style their related ???inner???
divs instead.
Styling the Text
The Stylib library contains a style sheet for text elements that is also
linked to this page called text_n_colors.css. Any well-marked-up
text should display nicely using this style sheet. Everyone??™s personal
text styling preferences are different, and this re?¬‚ ects some of mine;
for example, I like headings to sit nice and tight on top of the text
that follows them. The default browser settings leave a sizable margin
underneath headings, so this style sheet sets headings to have a
margin-bottom value of 0.
A Simple Two-Column Liquid Layout
A layout designed to ?¬? t a small monitor can look like a postage
stamp on a large one, so creating a liquid layout that can change
width to more closely ?¬? t the width of any monitor is a user-friendly
thing to do. To make our two-column layout liquid, we need to
remove the ?¬? xed-width setting on the main_wrapper div, so the layout??™s
width can change with the browser window??™s width.
Pages:
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192