styling CSS for printer-friendly page

To help you write the CSS styles for a printer-friendly page, change the media of the regular style to "tty" and the media of the print style to "screen." From the simple stacked layout of the "tty" page, you can hide and show the appropriate divs in order to create a clean, simple print page.

[link href="css/sidebar2.css" rel="stylesheet" type="text/css" media="tty"]
[link href="css/print.css" rel="stylesheet" type="text/css" media="screen"]

When done styling the "screen" page, change the "tty" page back to "screen" and the "screen" page to "print." And follow-up with writing the HTML codes to share your "printer-friendly" page!

Voila! :)

Simple CSS Rollover Lists Tutorials

Piper Nilsson sent me this link when I asked her how to make navigation bars: http://css.maxdesign.com.au/listutorial/roll_master.htm.

Introduction to Rollovers

The next series of steps are only one of many methods that can be used to create rollover effects using CSS. At the core of this method there are two basic ingredients - making the lists block level and using the hover state.

The list model used here works in all standards compliant browsers, with the following exceptions. Win/IE5 will render the list narrower due to it's misinterpretation of the box model. Win/IE6 and Mac/IE5 will render the list to the correct width if standards compliance mode is used.

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

CSS CODE

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

HTML CODE

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in ) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

#navcontainer ul { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

margin: 0;

padding: 0;

Step 4 - Display block

To achieve a rollover, the list items have to be converted to blocks using "display: block".

#navcontainer a { display: block; }

Step 5 - Add a background color

To add a background color, you set it within the "a" state. A color is also added to make the text readable.

color: #FFF;

background-color: #036;

Step 6 - Set the list width

Set the list width within a rule targeting the "a" element so the entire block will be active.

width: 9em;

Step 7 - Add padding

Add padding to the list items within the "a" state.

padding: .2em .8em;

Step 8 - Text decoration

At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

text-decoration: none;

Step 9 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

Step 10 - Separate the list items

The list items can be separated with a margin on the "LI" element. In this case margin of "0.2em" was applied to the bottom of the "LI".

#navcontainer li { margin: 0 0 .2em 0; }

Finished!

There are many variations that can be applied to this list method. You can play with colors, widths padding and background images to create a wide range of list styles.

Variation - current page indication

There are times when you may want to show the user what page they are on. There are many ways to achive this. One simple method is:

   1. add id="active" to the "LI" element associated with the current page

   2. duplicate the main rollover list rule set - "#navcontainer a"

   3. replace "#navcontainer" with "#active"

   4. change the background color

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

#active a

{

display: block;

color: #FFF;

background-color: #600;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

Variation - Adding borders

There are endless possibilities that can be achieved with padding and borders. One simple option is to set different border colors to each side of the list, and then reverse the colors for the active state. This gives the classic "raised and pressed" button look.

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #036;

background-color: transparent;

width: 9em;

padding: .2em .8em;

text-decoration: none;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

border-right: 1px solid #036;

border-bottom: 1px solid #036;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

border-top: 1px solid #036;

border-left: 1px solid #036;

border-right: 1px solid #fff;

border-bottom: 1px solid #fff;

}

Text Sizing

I've come upon another great article on CSS. Copying and pasting it in its entirety here. :)

TEXT SIZING

By Owen Briggs

I'd had enough.

Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so i could see where they did and didn't work. So I made 264 screenshots.

This collection is posted for anyone else who is unhappy and distrustful.

To recap:

One sizing wisdom is that a document's main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn't for me. Besides, if I was really zen I wouldn't write a stylesheet.

My own experience is that it's easier to read text that's smaller than default, and a little larger than the toolbar font. I figure it's reasonable to believe people will have their resolution set so they can read the toolbar.

So I want two things from a text sizing method: that it present my choice across the main browsers, but still be resizeable to respect people's needs and different hardware.

As usual our browsers do not co-operate.

Pixels are a very popular way of setting font size. With these a designer knows what the page is going to look like across browsers. The problem with pixels is that IE PC is incapable of resizing them.

Ems are a nice idea. Ems can be resized by all browsers. The problem with ems is IE PC will take sub 1 em sized text and display it as microscopic when the user has their browser set at Smaller. And a great many IE PC users surf at Smaller; it makes default text a nice readable size, yet doesn't adjust pixels. So these surfers get to have both the Geocities and the K10K type sites look good. ...and when they hit the site of a designer who's trying to be responsible by using ems to achieve smallish text size, the result is lines of unreadable fuzz. So ems don't work.

Percentage looks good. I thought there was a reason we weren't using percentage much, and had avoided it till lately.

Keywords are pretty good. There is an issue with keywords in IE PC 5.0 and 5.5, but it's nicely handled by Todd Fahrner in his ALA article, Size Matters. But Opera for PC presents keywords a size too large. That would also need to be fixed.

Matt Round has come up with a very interesting javascript method for dealing with small text and our browsers. He uses sub 1 ems, then uses js to keep things from becoming too small. Here's his explanation.

I've also discovered a useful glitch by setting the base font size set to 100% when using sub 1 ems. This keeps IE PC from going microscopic. I have no idea why. It effects a few other browsers too, so in many of the examples I've added this ruleset to learn more about the quirk.

Rijk van Geijtenbeek notes elsewhere: "Unfortunately, Opera has a bug where 100% actually works as the inherited value minus 1 pixel. This works out to illegible for deeply nested elements."

That's the background to this experiment. Here's the screenshots:

By Browser. This one has everything. Clips from the main browsers of all of the above methods, plus all five size setting from the three IE PC's.

By Method. This is useful for looking for anomalies.

IE PC. Grouped by the three IE PC's five size settings. Also good for looking for anomalies. There's a couple of subtle ones.

Individual Methods. Because I was going snow-blind trying to see things on the big chart, I thought it would be nice to have them on individual pages too. Source for the screenshots is linked through here as well.

Conclusions? For me, yes: take a look over here for the method I currently use.

Tizag Tutorials

Found a great "school" for web designers today. Tizag Tutorials is your one-stop shop if you want to pick-up or polish your skills in HTML, CSS, PHP (where I am spending much time lately), or learn all about web hosting.

And best of all ... it's FREE!

Fixed-Positioning & CSS Zen Garden

Got a tip from my teacher again. This time it's on "fixed positioning" as seen on this CSS Zen Garden site.

~~~~~~~~~~~~~~~~~

The css zen garden footer is positioned with "fixed positioning". There is a div at the bottom of the layout with the bottom.png footer image, positioned 0 pixels from the bottom of the browser. The z-index keeps the div on top of the other divs.

#extraDiv2 {
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
}

Here are a couple articles on fixed positioning,

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

http://annevankesteren.nl/2004/07/fixed-positioning

Turning List into a Navigation Bar

{A wonderful reference article by Roger Johansson.}

I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up.

I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing.

The HTML

The markup is very simple. It’s an unordered list, with each link in a separate list item:

1. • 
     
   • Home
   • 
     
   • About
   • 
     
   • Archive
   • 
     
   • Lab
   • 
     
   • Reviews
   • 
     
   • Contact
   • 
     

View Step 1.

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.

I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

The CSS

I’ll describe the CSS I’ve used to style the list in a step-by-step fashion.

First of all, I set the margins and padding of the list and list items to zero, and tell the list items to be displayed inline:

1. #nav {
2. margin:0;
3. padding:0;
4. }
5. #nav li {
6. display:inline;
7. padding:0;
8. margin:0;
9. }

View Step 2

This will make all the links display one after another on the same line, as if the list wasn’t there. It will also remove the list bullets, since they are only displayed when display:list-item (the default display mode for list items) is used. Some browsers are said to incorrectly display the list bullets even though display:inline has been applied to the list items. I haven’t seen this happen in any of the browsers I tested in, but if you want to make sure that no browsers display list bullets, you can add list-style-type:none to the rule for #nav.

Next, it’s time to start styling the menu tabs. I do this by adding styles to the links, not to the list items. The reason for that is that I want the entire area of each tab to be clickable. First a bit of colour to make the changes more obvious:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. }

View Step 3.

Note that I’m styling the normal and visited states of the links to look the same. the next step is to add a bit of padding to the links:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. }

View Step 4.

That’s a bit better. But there is a potential problem that isn’t visible here. Since the links are inline elements, their vertical padding will not add to their line height. It’s easier to see this if the ul element has a background, so I’ll add a background colour and a background image:

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. }

View Step 5.

Oops. Now the links are sticking out of the list element. To fix this, I’ve turned the links into block boxes by floating them to the left. I’ve also set their width to auto, to make them shrink to fit their content:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. float:left;
7. width:auto;
8. }

View Step 6.

Adding display:block to the CSS rule for the links would also have made them block boxes, but since a floated element automatically generates a block box, that isn’t necessary.

As you may have noticed, the background disappeared when the links were floated. That’s because floated elements are taken out of the document flow, which causes the ul element containing them to have zero height. Thus, the background is there, but it isn’t visible. To make the ul enclose the links, I’ve floated that too. I’ve also set its width to 100%, making it span the whole window (except for the padding I’ve given the body element in this example):

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. float:left;
6. width:100%;
7. }

View Step 7.

To visually separate the links from each other, I’ve added a right border to the links. Then, to give the first link a left border as well, I’ve used a :first-child pseudo-class to apply a rule only to the link in the very first list item. I’ve also added top and bottom borders to the ul element:

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. float:left;
6. width:100%;
7. border:1px solid #42432d;
8. border-width:1px 0;
9. }
10. #nav a:link,
11. #nav a:visited {
12. color:#000;
13. background:#b2b580;
14. padding:20px 40px 4px 10px;
15. float:left;
16. width:auto;
17. border-right:1px solid #42432d;
18. }
19. #nav li:first-child a {
20. border-left:1px solid #42432d;
21. }

The :first-child pseudo-class is not recognised by Internet Explorer for Windows, so the first link won’t have a left border in that browser. In this case, that isn’t a major problem, so I’ve left it like that. If it’s really important to you, you’ll need to add a class to the first list item (or the link in it), and then use that to give the link a left border.

View Step 8.

Next I’ve changed the way the link text is displayed by removing the underlining, making the text bold, specifying font size, line-height, and a different font family, making the text uppercase, and adding a little bit of drop shadow. The drop shadow is created with the text-shadow property, a CSS3 property that is currently only supported by Safari and OmniWeb:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. float:left;
7. width:auto;
8. border-right:1px solid #42432d;
9. text-decoration:none;
10. font:bold 1em/1em Arial, Helvetica, sans-serif;
11. text-transform:uppercase;
12. text-shadow: 2px 2px 2px #555;
13. }

View Step 9.

To give some visual feedback when the links are hovered over, I’ve given their :hover state different text and background colours:

1. #nav a:hover {
2. color:#fff;
3. background:#727454;
4. }

View Step 10.

In the final step, I’ve added rules that will make the selected link look different than the others, to show visitors where they are on the site.

In case you haven’t seen an example of specifying an id attribute for the body element to style the “current” navigation tab differently before, that’s what the first two rules do. In the examples linked to from this article, I’ve set id of the body element to “home”, which makes the “Home” tab the current one. Changing it to “about” would make the “About” tab the current one, and so on.

I’ve also made the selected link stay the same when it’s hovered over. It can be argued that the current menu item should not be a link at all. In this case, I’ve chosen to leave the link in the markup and use CSS to remove the visual feedback on hover.

To give some visual feedback when you click on one of the links, I’ve given the :active state of the links the same styling as the selected link:

1. #home #nav-home a,
2. #about #nav-about a,
3. #archive #nav-archive a,
4. #lab #nav-lab a,
5. #reviews #nav-reviews a,
6. #contact #nav-contact a {
7. background:#e35a00;
8. color:#fff;
9. text-shadow:none;
10. }
11. #home #nav-home a:hover,
12. #about #nav-about a:hover,
13. #archive #nav-archive a:hover,
14. #lab #nav-lab a:hover,
15. #reviews #nav-reviews a:hover,
16. #contact #nav-contact a:hover {
17. background:#e35a00;
18. }
19. #nav a:active {
20. background:#e35a00;
21. color:#fff;
22. }

View Step 11, the finished navigation menu.

That’s it. This step-by-step tutorial makes the whole thing look more advanced than it really is. View source on the final example to see the complete set of CSS rules. By the way, with a couple of small exceptions (the left border on the first link, and the text shadow), this works in just about any browser, even Internet Explorer (version 5 or newer).

I hope you’ve been able to follow along well enough to be able to create your own navigation menu. The styling possibilities are almost endless.

Roger Johansson