Berkeley CSUA MOTD:Entry 10801
Berkeley CSUA MOTD
 
WIKI | FAQ | Tech FAQ
http://csua.com/feed/
2025/04/03 [General] UID:1000 Activity:popular
4/3     

2003/10/27 [Computer/SW/Languages/JavaScript] UID:10801 Activity:kinda low
10/25   To the guy who was trying to do weird slant-box effects with CSS
        (phuqm?): http://www.complexspiral.com/publications/rounding-tabs
        \_ cool, thanks. -phuqm
        \_ YMALTR http://www.alistapart.com/articles/slidingdoors  --gabriel
           \_ WTFDTASF?
              \_ You Might Also Like To Read...   Just a guess.     -mice
             \_ HMWWAWCIAWCCW?
                \_ dont you mean HMWWAWCCIAWCCCW? --gabriel
                   \_ You fail. And even worse, everyone knows you failed.
                   \_ I gave it some thought and decided it should be 1 word.
                      \_ I think this is the correct dictionary usage. -mice
                      \_ Ahh, of course.  My bad. --gabriel
Cache (5630 bytes)
www.complexspiral.com/publications/rounding-tabs -> www.complexspiral.com/publications/rounding-tabs/
In order to round off these links in a cross-browser way, we need to introduce some images. The best thing for us to do would be to drop images into the backgrounds of the links, since that would let us set the curves from the style sheet, and wont require us to insert img elements into the document. Because the list items are now inline, however, we dont have any way of knowing how wide each link will be. This means that we cant create a single image with the two rounded corners and place it in the background of each link. Instead, we need to put a separate curve image in each upper corner of the tab, using the images shown in Figure 2. Note that the curve images should be made small enough to avoid being larger than the font size of the links. In this case, weve made the curves 10x10 pixels, since its unlikely the font sizes plus the top and bottom padding on the links will ever drop below 10 pixels. Curving the Corners At the time this article was written, there was no way in CSS to assign more than one background image to a given element. Fortunately, in this case we dont have to, because we have two elements in each tab: the list item and the anchor. In order to curve the upper corners of the tabs, all we need is to modify these rules from our previous styles: nav li display: inline; Because we added appropriate padding to each element 10 pixels of left padding for the list item, and 10 pixels of right padding for the anchor the images have enough room to avoid the link text sticking out of the white area of each tab. If the tabs need to be wider, then a quick padding adjustment will do the trick. This approach is likely to work in any browser that has the ability to place background images into inline elements and position them within each element. The thing is, were likely to run into trouble if the tabs arent meant to be a solid color against another solid color. For example, if the tabs are supposed to have a solid border that follows the curves, were out of luck. Assuming that we simply added a red border to the li elements, wed get the result shown in Figure 4. We can avoid this problem, but doing so will require some alteration of the HTML source and some fancy steppin. Adding a Border Our challenge now is to add a border to the visible outer edge of the tabs. The first step is to add the border effect to the curve images themselves, as shown in Figure 5. Weve set the top padding of both the a and span elements to be one pixel greater than the top padding of the li element. This pushes their tops outside of the li , thus allowing their background images to mask the top border set on the list item. The right and left margins of the anchor and span respectively have been set to -1px , which pulls them one pixel outward on each side of the list item. This again allows their background images to overlap the border on the list item, thus masking it. The white background has been moved to the list item itself, so that it ends up behind the background-image corners of the other two elements. Also, the bottom border of each tab has been made white, while the bottom border of the ul itself is red. It requires a fairly exacting implementation of the CSS inline layout model; For example, very little of what weve discussed here works well, or at all, in Internet Explorer for any platform. This appears to be due to errors in the handling of padding and background images, although very different flaws affect the Windows and Macintosh versions of IE. Therefore, its probably a good idea to hide such rounding styles from these browsers. Rounding With Gecko There is one other possibility for rounding tab corners that doesnt require much in the way of hacks, but it is restricted to the Gecko family of browsers admittedly, a large and growing family. If youre so inclined, you could use -moz-border-radius , a CSS-like property that allows you to round corners without any images at all, background or otherwise. This will cause the top left and top right corners to be rounded along the edge of a hypothetical circle with a radius of ten pixels. In other words, the curve will be basically the same size as the ten-pixel background images we were using before. Thus, the following styles will have the result shown in Figure 7. As we can see, the cornering isnt as smooth as the images we created, which could be a problem. The major advantage of -moz-border-radius is that it lets you use any length measure, not just pixels. We could have made the corners half an em in radius, for example, thus allowing the curves to scale themselves to the font size of the tabs themselves. It is also to be expected that the corner-curving algorithm will get more sophisticated over time, and eventually will result in curves as smooth as those seen in the images. The other great things about this technique are that it doesnt require structural hacking no extra span is needed, it doesnt call for the loading of any images, and in browsers that dont support the rounding property will still display the tabs, only with squared corners. This may not be ideal, but it isnt a tragedy: most visitors are used to squared-corner tabs anyway. Summary As weve seen, rounding the corners on a navbar created from an unordered list is a simple matter of using the elements already in place. If we want to add a border to the visible portions of the tabs, then another element is required, but the markup change is not significant. It may be a touch annoying that a span has to be added, but at the present time, the limitations of CSS require that we indulge in some structural hacking.
Cache (8192 bytes)
www.alistapart.com/articles/slidingdoors
CSS2s current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use. Its time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. Youre most likely aware that CSS can be used to tame a plain unordered list . Maybe youve even seen lists styled as tabs, looking something like this: What if we could take the exact same markup from the tabs above, and turn them into something like this: With simple styling, we can . Many of the CSS-based tabs Ive seen suffer from the same generic features: blocky rectangles of color, maybe an outline, a border disappears for the current tab, a color changes for the hover state. Prior to a more widespread adoption of CSS, we started seeing a lot of innovation in navigation design. Creative shapes, masterful color blending, and mimicry of physical interfaces from the real world. But these designs often relied heavily on a complex construction of text-embedded images, or were wrapped with multiple nested tables. Text resizing was impossible, or caused significant problems with page layout. Pure text navigation is much easier to maintain and loads more quickly than text-as-image navigation. Also, even though we can add alt attributes to each image, pure text is even more accessible since it can be resized by users with impaired vision. Its no wonder that pure text-based navigation, styled with CSS, is leaping back into web design. But most CSS-based tab design so far is a step back in appearance from what we used to do certainly nothing to be included in a design portfolio. A newly adopted technology like CSS should allow us to create something better , without losing the design quality of previous table hacks and all-image-based tabs. The Sliding Doors Technique Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images. Think of these two images as Sliding Doors that complete one doorway. The doors slide together and overlap more to fill a narrow space, or slide apart and overlap less to fill a wider space, as the diagram below shows: With this model, one image covers up a portion of the other. Assuming we have something unique on the outside of each image, like the rounded-corner of a tab, we dont want the image in front to completely obscure the image behind it. To prevent this from happening, we make the image in front left-side for this example as narrow as possible. If the outside corners are rounded, we should make the front image only as wide as the curved portion of the image: If the object grows any larger than the width shown above, due to differing text or type size changes, the images will get pulled apart, creating an ugly gap. We need to make an arbitrary judgment about the amount of expansion well accommodate. How large do we think the object might grow as text is resized in the browser? Realistically, we should account for the possibility of our tab text increasing by at least 300. We need to expand the background images to compensate for that growth. For these examples well make the back image right-side 400x150 pixels, and the front image 9x150 pixels. Keep in mind that background images only show in the available doorway of the element to which theyre applied content area padding. The two images are anchored to the outside corners of their respective elements. For one of the tabs, the fill was lightened and the border darkened the lighter version will be used to represent the current tab. Given this techniques model for left and right tab images, we need to expand coverage area of the tab image, and cut it into two pieces: The same thing needs to happen with the lighter current tab image. Once we have all four images created, 1 , 2 , 3 , 4 we can jump into the markup and CSS for our tabs. Tab Creation As you explore the creation of horizontal lists with CSS, youll notice at least two methods for arranging a group of items into one row. Both require dealing with rather funky aspects of CSS which quickly become confusing. The First Method and possibly the more common is to change the display of each list item to inline . However, the inline method causes a few rendering problems in certain browsers for the Sliding Doors technique were going to discuss. The Second Method , which is the one well focus on, uses floats to place each list item in a horizontal row. Their seemingly inconsistent behavior circumvents all natural logic. Still, a basic understanding of how to deal with multiple floated elements, and the means to reliably break out of floats or contain them can achieve wonders. Were going to nest several floated elements within another containing floated element. We do this so that the outer parent float completely wraps around the floats inside. This way, were able to add a background color and/or image behind our tabs. Its important to remember that the next element following our tabs needs to reset its own position by using the CSS clear property. This prevents the floated tabs from affecting the position of other page elements. Lets begin with the following markup: <div idheader> <ul> <li><a href>Home</a></li> <li idcurrent><a href>News</a></li> <li><a href>Products</a></li> <li><a href>About</a></li> <li><a href>Contact</a></li> </ul> </div> In reality, the header div might also contain a logo and a search box. Obviously, these values would normally contain file or directory locations. This helps ensure the container actually contains the list items inside which will also be floated. Since the element is floated, we also need to assign it a width of 100. A temporary yellow background is added to ensure this parent stretches to fill the entire area behind the tabs. We also set some default text properties, ensuring everything inside will be the same: header float:left; Finishing Touches Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent. If the curves are anti-aliased, we matte the edges to an average of the background color behind them. Now that the corners are transparent, a piece of the right-side image shows through the corner of the left-side image. To compensate for this, we add a small amount of left padding to the list item equivalent to the width of the left-side image 9px. Since padding was added to the list item, we need to remove that same amount from the anchor to keep the text centered 15px - 9px 6px: header li float:left; We see all additions and changes so far represented in Example 5 . One Hack for Consistency After Example 2, we acknowledged a problem with IE5/Mac where each tab stretched across the entire browser width, forcing each one to stack vertically on top of each other. In most browsers, floating an element will act sort of like shrink-wrapping it it gets shrunk to the smallest possible size of the contents it contains. If a floated element contains or is an image, the float will shrink to the width of the image. If it contains only text, the float will shrink to the width of the longest non-wrapping line of text. A problem enters the picture for IE5/Mac when an auto-width block-level element is inserted into a floated element. Other browsers still shrink the float as small as possible, regardless of the block-level element it contains. Instead, it expands the float and block-level element to full available width. To work around this problem, we need to float the anchor also, but only for IE5/Mac, ...