Chapter 8: Putting Page Elements in Their Place

Overview

If you've ever used a desktop publishing program, such as Adobe InDesign or Microsoft Publisher, you've experienced putting stuff on a page and having it sit and stay where you left it. Trying to do the same with a Web page is like trying to hold water in your hands: No matter how hard you grasp, things seem to slip around all over the place. For years, Web designers used tables to corral Web page parts into submission. (We talk about tables in Chapter 10.) But tables have fallen from grace in favor of CSS positioning.

CSS has quite a few advantages over tables, not the least of which is that CSS banishes layout and formatting code from the page's content; you can use different style sheets to dress up a plain page for the Web, strip its fancy formatting to make it accessible for all visitors, straighten it out for printing, and simplify it for viewing on a pocket-size PDA.

One thing that makes positioning items on a Web page so tricky is that you have control over only a few size-related factors when you put together your page. Unlike designing for print, when you know the final size of your printed page, your Web visitors set size-related options themselves: monitor resolution, Web browser window size, and text size. Your challenge as a Web designer is to get the best-looking page that works well in a variety of different resolutions and browsers and that doesn't turn into a mishmash of text and pictures when a visitor increases the browser's text size or resizes the browser window.

In this chapter, we introduce you to some CSS positioning concepts and show you some of the Expression Web CSS positioning tools. CSS positioning falls into the realm of intermediate Web page building; this stuff takes time to figure out and even longer to master. It's worth the work, though, because it will soon form the foundation of every well-designed Web site. And, the excellent features in Expression Web help make the concepts you need to know a little easier to grasp. So, have patience, and don't worry if you're still scratching your head after tinkering with it for a while. You're not alone. Plenty of competent Web designers struggle with CSS positioning, partly because of inconsistent browser support and partly because it's just plain tricky stuff. Throughout this chapter, we point you to some excellent sources on the Web for more practice and help.

REMEMBER 

Many of the instructions in this chapter require you to work more closely with your Web page's code than you do in earlier chapters. If you're a newcomer to HTML, give the first part of Chapter 14 a read-through. If you're new to styles, be sure to read Chapter 7 before taking on CSS positioning. Keep in mind that there are many ways to position page elements by using CSS and there's often no single right way. Find the method that works best for your site and your content, and go from there.

Tip 

See Chapter 7 for a list of good CSS books and online tutorials. Also, visit Chapter 16 for a list of Web design resources. One of our favorite tutorials on CSS and, specifically, CSS for positioning is at http://www.westciv.com/style_master/house/tutorials/index.html.