This is perfectly acceptable, although if you want to merge rules, you can??”
just be mindful of the cascade if you do so.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
266
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
}
4. Add some padding. Test the page now and you??™ll see two major layout errors commonly
seen on the Web. First, the content hugs the edges of the div, which makes
it hard to read and also looks cluttered, despite the div being 600 pixels wide.
Secondly, the text at the bottom of the div is displayed over the gradient??”it??™s still
readable, but it looks a little messy. By adding padding (more to the bottom edge,
to account for the gradient), these issues are dealt with:
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}
PAGE LAYOUTS WITH CSS
267
7
Required files Files from add-completed in the chapter 7 folder as a starting
point.
What you??™ll learn How to create a div with a maximum width.
Completed files max-width-example in the chapter 7 folder.
1. Amend a rule. Replace the width pair in the #wrapper rule with the max-width pair
shown following. This works much like you??™d expect: the design works in a liquid
manner, up until the point at which the content area??™s width (this does not include
the padding and borders) is the value defined for max-width, whereupon the layout
becomes fixed.
Pages:
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368