./../lib/nifty_corners/
javascript/niftycube.js">
Then we add the code that associates the NiftyCorners code with
the elements we want to extend.
FIGURE 5.16 The NiftyCorners
JavaScript can make several columns
the same length and optionally
round their corners.
the nav, content, and promo
columns have medium radius
rounding applied and are set to
the same height
header and footer have medium
radius rounding applied
provide relative path to the
NiftyCorners.css ?¬? le
BASIC PAGE LAYOUT 167
With the appropriate settings applied to the columns, we now need
to create space around them so the columns don??™t touch anymore.
It would be very nice to simply apply the rounded corners to the
inner divs, but the boxes don??™t display correctly if you do this??”some
of the rounded corners have strange-looking straight edges. So we
are going to add margins around the main divs and then subtract
the same amount off the width of the boxes so the layout retains its
original width; it doesn??™t matter if the layout gets a little taller.
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text-align:left;
padding:10px 0;
margin-top:10px;
}
#header {
margin:0px 10px 0px 10px;
}
#nav {
width:150px;
width:130px;
margin:10px 10px 10px 10px;
?¬‚ oat:left;
}
#content {
width:550px;
margin:10px 10px 10px 0px;
?¬‚ oat:left;
}
#promo {
width:140px;
widths of columns will scale
proportionately as this width is
changed
centers max??™d layout in browser
prevents page inheriting IE6 centering
hack on body
offsets the horizontal margins
STYLIN??™ WITH CSS - CHAPTER 5 168
width:120px;
margin:10px 0 10px 0;
?¬‚ oat:left;
}
#footer {
margin:0 10px;
clear:both;
}
The total of horizontal margins added equals 40 pixels so I subtracted
20 pixels off both the left and right columns to maintain the
840 pixels width.
Pages:
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210