Smashing CSS by Eric A. Meyer

Author:Eric A. Meyer
Language: eng
Format: epub
Publisher: Wiley Publishing
Published: 2010-04-28T16:00:00+00:00

Figure 4-21: The first separator image.

Note that the image has a filled color to the left of the separator, and complete transparency to the right. (The gray checkerboard pattern is Photoshop’s stand-in for the transparent part of the image.)

Here’s the important part: The separator has to line up with the gap between two columns. In this case, we’ll place it between the leftmost and center columns (see Figure 4-22). We want the separator to land 25% of the way across the container, as that’s the point between the two leftmost columns. So two things have to be done.

First is that, as implied in the preceding figure, the separator image is 25% of the way across the whole 3,000-pixel-wide image. Therefore, its midpoint is 750 pixels from the left edge of the image.

Second is this CSS:

.inner {background: url(lb01.png) 25% 0 repeat-y; overflow: auto;}

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.