CSS Mastery- P4

STYLING LINKS 127 box-shadow: 2px 2px 2px #ccc; } Last, Safari includes another proprietary property called box-reflect, which as the name suggests, allows you to create reflections of an object. This property contains a number of different arguments including the position and distance of the reflection along with a masking image. Interestingly, you can use the –webkit-gradient value to automatically generate this mask. In this instance, I’m positioning the reflection 2 pixels below the button and using a mask that fades to white (see Figure 5-14). a { display: block; width: 6.6em; height: 1.4em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-image: -webkit-gradient(linear, left top, left bottom,  from(#abe142), to(#67a400)); background-color: #8cca12; color: #fff; text-shadow: 2px 2px 2px #66a300; -moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; box-shadow: 2px 2px 2px #ccc; -webkit-box-reflect: below 2px -webkit-gradient (linear, left top, left bottom, from(transparent), color-stop(0.52, transparent), to(white)); } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 5 128 Figure 5-14. A rounded corner button using Safari specific extensions to CSS There is some debate around whether these types of effects should be done using CSS or not, so it’s uncertain if they will ever make it into the official specification. Because of this and the lack of cross-browser support, it would be unwise to use these techniques in a production environment. However, that shouldn’t stop you from playing around with them on your personal sites just as long as you realize that they’re invalid CSS and may get removed or changed in future versions of the browser. Pure CSS tooltips Tooltips are the little yellow text boxes that pop up in some browsers when you hover over elements with title tags. Several developers have created their own custom, stylized tooltips using a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by using CSS positioning techniques. This technique requires a modern, standards-compliant browser like Firefox to work properly. As such, it is not a technique you would add to your day-to- day arsenal. However, it does demonstrate the power of advanced CSS and gives you a hint of what will be possible when CSS is better supported. As with all of the examples in this book, you need to start with well-structured and meaningful HTML: <p> <a href="http://www.andybudd.com/" class="tooltip"> Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England. </p> I have given the link a class of tooltip to differentiate it from other links. Inside the link, I have added the text I wish to display as the link text, followed by the tooltip text enclosed in a span. I have wrapped my tooltip text in brackets so that the sentence still makes sense with styles turned off. The first thing you need to do is set the position property of the anchor to relative. This allows you to position the contents of the span absolutely, relative to the position of its parent anchor. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. STYLING LINKS 129 You do not want the tooltip text to display initially, so you should set its display property to none: a.tooltip { position: relative; } a.tooltip span { display: none; } When the anchor is hovered over, you want the contents of the span to appear. This is done by setting the display property of the span to block, but only when the link is hovered over. If you were to test the code now, hovering over the link would simply make the span text appear next to the link. To position the contents of the span below and to the right of the anchor, you need to set the position property of the span to absolute and position it 1 em from the top of the anchor and 2 ems from the left. a.tooltip:hover span { display: block; position: absolute; top: 1em; left: 2em; } Remember, an absolutely positioned element is positioned in relation to its nearest positioned ancestor or, failing that, the root element. In this example, we have positioned the anchor, so the span is positioned in relation to that. And that’s the bulk of the technique. All that is left is to add some styling to make the span look more like a tooltip. You can do this by giving the span some padding, a border, and a background color: a.tooltip:hover span, a.tooltip:focus span { display:block; position:absolute; top:1em; left:2em; padding: 0.2em 0.6em; Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 5 130 border:1px solid #996633; background-color:#FFFF66; color:#000; } In Firefox, the applied technique should look something like Figure 5-15. Figure 5-15. Pure CSS tooltip Summary In this chapter, you have learned how to style links in a variety of ways. You now know how to style links depending on the site or file they link to, and you can make links behave like buttons and create rollover effects using colors or images. You can even create advanced effects such as pure CSS tooltips. In the next chapter, you will learn how to manipulate lists, and using the information you have learned in this chapter, create navigation lists, pure CSS image maps, and remote rollovers. Let the fun begin! Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 3 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 1 4 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 133 Chapter 6 Styling Lists and Creating Nav Bars It is human nature to try to organize the world around us. Scientists create lists of animals, plants, and chemical elements. Magazines create lists of the top 10 movies, the latest fashion trends, and the worst-dressed celebrities. People write shopping lists, to-do lists, and lists to Santa. We just love making lists. Lists provide us with a way of grouping related elements and, by doing so, we give them meaning and structure. Most web pages contain some form of list, be it a list of the latest news stories, a list of links to your favorite web pages, or a list of links to other parts of your site. Identifying these items as lists and marking them up as such can help add structure to your HTML documents, providing useful hooks with which to apply your styles. In this chapter you will learn about • Styling lists with CSS • Using background images as bullets • Creating vertical and horizontal nav bars • Using sliding doors tabbed navigation • Pure CSS drop-downs • Creating CSS image maps • Creating remote rollovers • Using definition lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 134 Basic list styling Basic list styling is very simple. Say you start with this simple to-do list: <ul> <li>Read emails</li> <li>Write chapter</li> <li>Go shopping</li> <li>Cook dinner</li> <li>Watch Lost</li> </ul> To add a custom bullet, you could use the list-style-image property. However, this doesn’t give you much control over the position of your bullet image. Instead, it is more common to turn list bullets off and add your custom bullet as a background image on the list element. You can then use the background image positioning properties to accurately control the alignment of your custom bullet. Older versions of Internet Explorer and Opera control list indentation using the left margin, whereas most modern browsers, including Firefox and Safari use left padding. As such, the first thing you will want to do is remove this indentation by zeroing down the margin and padding on the list. To remove the default bullet, you simply set the list style type to none: ul { margin: 0; padding: 0; list-style-type: none; } Adding a custom bullet is very straightforward. Applying padding to the left side of the list item creates the necessary space for your bullet. The bullet is then applied as a background image on the list item. If the list item is going to span multiple lines, you will probably want to position the bullet at or near the top of the list item. However, if you know the contents of the list items won’t span more than one line, you can vertically center the bullet by setting the vertical position to either middle or 50%: li { background: url(/img/bullet.gif) no-repeat 0 50%; padding-left: 30px; } The resulting styled list can be seen in Figure 6-1. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. STYLING LISTS AND CREATING NAV BARS 135 Figure 6-1. Simple styled list with custom bullets Creating a basic vertical nav bar Combining the previous example with the link styling techniques you learned in Chapter 5, you can create graphically rich vertical navigation bars complete with CSS rollovers, like the one shown in Figure 6-2. Figure 6-2. Styled vertical nav bar Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 136 As always, you need to start with good, semantic mark-up: <ul class="nav"> <li><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li> <li><a href="contact.htm">Contact</a></li> </ul> The first things you want to do are remove the default bullets and zero down the margin and padding: ul.nav { margin: 0; padding: 0; list-style-type: none; } You can then start layering on the graphical styling. In this case, I’m giving my navigation menu a light green background and a dark green border. I’m also going to set the width of my navigate list in ems. ul.nav { margin: 0; padding: 0; list-style-type: none; width: 8em; background-color: #8BD400; border: 1px solid #486B02; } Rather than style the list items, styling the enclosed anchor links provides better cross-browser compatibility. To create a button-like hit area, you simply set the display property of the anchors to block. The anchor links will then expand to take up the available space, which in this case is determined by the width of the list. You could set the width of the anchors explicitly, but I’ve found setting the width of the parent list makes for more maintainable code. The last couple of rules are just stylistic, setting the color of the link text and turning off the underlines. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... want to do is add a presentational arrow at the start and the end of the list You could do this by hard-coding them into your HTML However, you can also inject them using CSS, allowing you to change or remove them later on To use CSS, you need to use the :before and :after pseudo-selectors in combination with the content property ol.pagination a[rel="prev"]:before { content: "\00AB"; padding-right:... pure CSS drop-downs One such person is Patrick Griffiths with his Suckerfish drop-downs technique (http://www.alistapart.com/articles/dropdowns/) This technique is incredibly simple and works by nesting the subnavigation in an unordered list, positioning that list off screen and then repositioning it when the parent list item is hovered You can see the final product in Figure 6-9 Figure 6-9 Pure CSS. .. #486B02; background: url(/img/arrow.gif) no-repeat 5% 50%; padding: 0.3em 1em; } Ideally, I would have set the positioning of my arrow to be 10 pixels from the left-hand edge of the anchor However, the CSS specification doesn’t allow the mixing of units, so I’ve used a percentage instead In reality, most browsers accept mixed units, and I think this is one of several instances where the specification... include the navigation as an external file In these situations, wouldn't it be good if there were a way to highlight the page you are on, without having to dynamically add a class to the menu? Well, with CSS there is This concept works by adding an ID or a class name to the body element of each page, denoting which page or section the user is in You then add a corresponding ID or class name to each item... on www.verypdf.com to remove this watermark 149 CHAPTER 6 ul a:hover, ul a:focus { color: #E4FFD3; background-color: #6DA203; } And there you have it, a simple drop-down navigation bar that uses pure CSS This technique works in most modern browsers but fails in older version of Internet Explorer, which don’t support the :hover pseudo-class of nonanchor elements To get around this issue, you can use... functionality The JavaScript code for the drop-down navigation fix in Internet Explorer is beyond the scope of this book, but you can find out more details at http://htmldog.com/articles/suckerfish/dropdowns/ CSS image maps Image maps allow web developers to specify regions of an image to act as hotspots Image maps were very popular several years ago, but they are much less common these days This is due partly... While image maps are still a perfectly valid part of HTML, they do mix presentation with content However, it is possible to create simple image maps with a combination of lists, anchors, and some advanced CSS For this example, I’m going to use a photograph of some members of the Clearleft team pretending to be an indie band in front of the graffiti outside our offices (see Figure 6-10) When I hover over... one of the pictures, you should see something similar to Figure 6-11 154 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark STYLING LISTS AND CREATING NAV BARS Figure 6-11 The CSS image map being rolled over Well, that’s assuming you’re using a more capable browser like Safari or Firefox If you’re using Internet Explorer, you won’t see anything at all! It appears that Internet... class="outer"> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 157 CHAPTER 6 Richard Rutter The CSS starts off identical to the previous example, setting the dimensions of the wrapper div to those of the image, and the position property to relative The list padding and margin are again zeroed down . tooltips using a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by using CSS positioning techniques. This technique. long as you realize that they’re invalid CSS and may get removed or changed in future versions of the browser. Pure CSS tooltips Tooltips are the little yellow