Summary


CSS lets you create boxes that not only have rounded or nonsquare corners but that are flexiblecutting down on unnecessary code and separating the design of the box from the content that's being presented. In this chapter, we shared methods for creating fixed-width and fluid-width rounded boxes, and I hope it will encourage you to experiment with these techniques and others, creating bulletproof boxes that defy the box model of CSS.

Here are some points to remember when creating indestructible, rounded-corner boxes:

  • Fixed-width, rounded-corner boxes are usually easy to create using lean markup and just two background images.

  • Fluid-width, rounded-corner boxes require a little more markup in order to reference background images on all four corners. Use your best judgment on whether this extra markup is worth it.

  • Combine background images and use positioning to reveal only the desired portion of the image.

  • Build in extra width and height to background images, using your best judgment for deciding the maximum dimensions a box may reach. Take into account the context on the page, and what types and amounts of content may be placed inside. Then add a little more.



Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
ISBN: N/A
EAN: N/A
Year: 2006
Pages: 97

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net