Main content begins here

CSS Tutorial

Style Unordered List of Links or Menu with CSS Divider

Intro: 

Find out how to code a list of links appropriately then if needed add a divider with CSS.

In this article we'll discuss creating an unordered list of menu links with a pipe in between, which is an oft-used styling for navigation, particularly in the footer of a site. Of course, feel free to use whatever divider you'd like instead of a pipe, however just know that if you want pure CSS with no image used for the divider, you can only use straight lines and dotted/dashed lines. So for example if you wanted to use the colon symbol (:) for your divider you'd need an image unless you wanted to try the not-so-well-supported :after trick.

I still often see folks coding lists of links with no ul/li structure. Usually they just do something like:
<a href="#">link 1</a> | <a href="#">link 2</a> |<a href="#">link 3</a>

Proper Unordered List Styling

Lists of menu links should always be in list format, because its a list. So it should remain UL/LI format like so:

<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>

In your CSS, apply a background "pipe" image to every LI at the far left and add left padding. Then try a declaration such as: li:first-child {background:none; padding-left:0;} (your real code may vary of course since if you want to target this specific list you will need other classes involved.) This should work in FireFox and IE7/8. Other browsers such as IE6 may require jQuery or other workarounds to listen to the ":first-child" part of the declaration. Your CSS would look something like this:

ul, li { margin: 0; padding: 0; }
li { padding: 0 5px 0 9px; background: url(pipe.gif) 0 .3em no-repeat; list-style-type: none; display: inline; }

UL/LI List CSS Styling Help

You can also do the border-left way suggested above. I offered the pipe option because from years of creating sites I know that often designers do not want the pipe to be the exact height of the list item. This would often lead to extraneous spans just to get the pipe to be the "right" height that the designer wanted (and the client approved). Although a background pipe doesn't scale if the font is resized, it will keep the designers and the clients happy that you "coded it right". If you or your clients aren't picky, the border option is easier and scalable.

On a final note: doing lists this way, as inline, can lead to spacing issues because not all of the space between to items is abolished in this situation. Notice the padding declaration above is uneven (padding: 0 5px 0 9px). To get rid of all the space you'll need to float the <li> instead of changing them to inline. Then you'll need to clear the containing <ul>.

Designing & Coding CSS Special Effects

Intro: 

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

If you're a true designer for the web you know that web design is not all about a pretty face for a web site. It's about planning. Planning for a user's reactions, planning for content to grow, and on it goes. So in this article we'll talk a bit about planning for and executing special effects. I'll use some real-life examples from sites I've worked on.

Special CSS Effects Using PNGs For Transparency

First up is the Reston Virginia Pet Fiesta. That's right, a party for your pets! In this design I was given a logo, so I based the design on some colours used in the logo, plus the whole fiesta vibe. The background is a sort of stucco feel but that's a fairly mundane repeating background. The special part is the jagged red line between the header and body content, echoing the jagged red line from the hat which the logo animals are wearing.

The first step here was knowing I needed something to dress up the design and to help marry the header with the body content area. Like The Dude's rug in The Big Lebowski, I needed something to tie the room together. I figured a big jagged line echoing the hat would be nice. The problems that went through my head were:

  • do i want to have to cut all those images for where the jagged line overlaps the header and body and left/right columns
  • how will i be able to get this to work with the flash piece that is supposed to show at the top of the body area?

What I decided was that I needed one graphic that had transparency. This way I would not have to cut a bunch of graphics but could instead cut one image that I could layer on top of the design. A GIF was ruled out because I didn't want to have to fuss with getting the jagged line placed EXACTLY right so the edges all matched the various colours it was overlapping, and additionally it probably wouldn't have looked good overlapping the Flash piece. The answer was to use a PNG.

Using PNG and CSS to Achieve Special Effects

Using a PNG meant now I was opening another can of worms because IE6 doesn't support PNG. In order to use them you have to use something like JQuery with PNGFix. This was OK with me because from the beginning I was planning to use JQuery, knowing the shadowed edges of the design would need PNG-power as well.

I went into Illustrator and used a brush to create a fat, irregular-edged but straight line. I then used a filter to make the line jag up and down. I then pasted this as a smart object into Photoshop. Since it remained a vector shape I could resize it without loss of clarity until it looked right in the design. Then I saved out just this jagged line as a PNG.

I created a <div> at the bottom of the HTML template for this design, using CSS to size the div. I placed the jagged line PNG inside the div, then used CSS to position the jag up in the header, overlapping the other design elements including the flash piece. Once the flash was saved out with a transparent background and the wmode was set for its embedding, the jag appears to overlap the flash piece.

2
 

Comments

Say "No" To Multiple Style Sheets

Intro: 

So, I've had enough of the multiple style sheet thing. Actually, I had enough of it when I first heard of it, years ago when it was touted as "the right way" to go about setting up CSS. The premise is this: use one style sheet to set all elements of a browser back to ground zero, often called a "reset" style sheet; use one style sheet for fonts; use one style sheet for colors; use one for other stuff like layout.

UPDATE: January 31, 2010... This article makes reference to the fact I previously needed to use additional style sheets to target certain browsers such as Safari or IE6. I no longer use even these additional style sheets. Instead I use the CSS Browser Selector javascript that allows me to target browsers inside my single CSS stylesheet.

So, I've had enough of the multiple style sheet thing. Actually, I had enough of it when I first heard of it, years ago when it was touted as "the right way" to go about setting up CSS. The premise is this: use one style sheet to set all elements of a browser back to ground zero, often called a "reset" style sheet; use one style sheet for fonts; use one style sheet for colors; use one for other stuff like layout.

Wow, what a pain in the ass. And I mean that from a couple viewpoints -- from having to set it up, to having to maintain it as the original coder, to having to update it as the non-original coder.

When it comes to CSS I do try to do things "the right way" because I realize in the long run some extra work or setup, etc, pays off later. For example a web site doesn't have to be "valid HTML" to run just fine in browsers. Even cross-browser sites don't necessarily "need" to be valid. We do it because it helps down the line in other ways, and because we care about doing things well as an HTML professional.

But this whole multiple style sheet issue is ridiculous. I've worked on projects where "lead" coders have demanded I work a certain way, which I honor because I've accepted the role as subordinate and its therefore a request of my client. I've seen articles from highly respected sites in the industry about multiple style sheets. But I just don't buy it.

Why So Cranky About Multiple Style Sheets?

My reasons are pretty simple. I've been on the side of the person creating those style sheets, and I've been the person who had to edit those style sheets created by others (and even created by me), and I can't possibly fathom how all those style sheets add up to a savings in time. I see strong production value and savings in time and money in using as few style sheets as possible because very simply, it is easier to track down a style to make a change if its all in one style (or as much as possible in one sheet). Multiple style sheets means knowing or searching multiple files for what might be the style you're looking to update. Big waste of time.
I've heard some of the arguments and I just can't agree. It hasn't proven to be a production value to me.

There are times when I HAVE to use separate sheets because I know of no other way to acheive certain goals, such as targeting Safari. In those cases I do have to have separate style sheets.

For your info, although the Way Cool Web Design site does NOT support IE6, you can target certain version of IE by using IE conditional comment like this:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->

You can also target Safari by using a malformed style sheet call:
<link type="text/nonsense" rel="stylesheet" href="safari.css" media="all">

The above situations are the some of the only times I use multiple style sheets. So, are you buying into the hype of using multiple style sheets?

Improve Search Engine Optimization (SEO) By Coding Page Content At The Top Of Your HTML

Intro: 

Way Cool Web Design teaches you the secret of how to improve search engine optimization by coding page content at the top of your HTML.

While I haven't personally found any proof that keeping content as close to the top of your code as possible can improve SEO, I have seen a few articles attesting to its merit. It is a commonly held believe that the technique can improve SEO.

Improve Your Search Engine Optimization Through Good Code

There is this article as an example of the belief, again without actual proof. There are examples of top-ranking sites for tough keywords like "lingerie" which bring you to a top site, Pampered Passions. If you examine the source of this lingerie site you'll see the <h1> right at the top which is the start of this page's content. Notice its not buried halfway down the page like most sites that have navigation, search, logos, etc all in the header that comes visually before body content for most sites.

If you view source on the Way Cool Web Design site you'll see something similar. The <h1> is very near the top of the code while visually the layout suggests there should be a header with navigation, search and logo above the content.

Some immediate difference on the Way Cool site is "top of page" and "skipnav" anchors. The top of page anchor is one I find a lot of people use so I build it into every template I create so that in the event someone needs it they don't have to be concerned with going back to a template to add it into an entire site. The skipnav is also built into every template, although in the case of this site specifically we don't actually need a skipnav because we've put all the nav at the bottom of the code and so there is no nav to skip in order to get to content.

So, why not build every template this way? Well, it makes for some heavy duty browser testing - it's a challenging technique. Most clients just don't want to pay for all the extra time it takes to get it perfect just what is not a proven benefit. Those that are concerned about SEO however are often interested to learn more, and some are willing to go that extra mile with their budget.

Coding Middle Column Body Content At The Top Of Your HTML

Let's assume in a 3-column layout like this site, you have subnavigation to the left, body content in the middle, and callouts in the right column. A few years ago I may have code this as LEFT, RIGHT, MIDDLE, with LEFT and RIGHT being floated arounf the MIDDLE which has margins on the left and right. But this doesn't help our cause since it makes MIDDLE come last in the HTML. We want MIDDLE to be first.

The way I normally code columns these days is LEFT, MIDDLE, RIGHT all floated left since that is, theoretically speaking, "correct" from a top-to-bottom, left-to-right coding standpoint. I code templates this way since that is a common solution for accessibility purposes - code appears in the HTML as we would view it on-screen top/bottom, left/right.

To achieve the middle column at the top we need some CSS tricks. Code it MIDDLE, LEFT, RIGHT. First float MIDDLE to the right and LEFT to the left, with those two columns in "Container A". Then inside "Container B" float "Container A" to the left with RIGHT floated to the right. Container B now holds MIDDLE, LEFT, RIGHT. Push Container B down with a margin to make room for the header. After Container B, code the header info, position it absolutely and make it appear at the top on-screen.

1
 

Comments

Background Image Resize

Intro: 

Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgeable than myself (which could be about anyone at this point), replied the topic has been brought up before and no one found a solution. That often makes me want to give it a shot myself because I am a glutton for failure.

UPDATE: March 6, 2009... This works in IE7! Woot!

Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgeable than myself (which could be about anyone at this point), replied the topic has been brought up before and no one found a solution. That often makes me want to give it a shot myself because I am a glutton for failure.

Picasso, Super-Sized

As someone else had pointed out, we’ll be getting “background-size” in CSS3 which I believe will be widely supported sometime in the year 2030. That means I couldn’t help but fail. So I dove right in. I wanted to go ahead and get my failure over with quickly.

As is often the case in this situation, I too failed to find a “real” solution to this problem. But as is sometimes the case, I found a really cheesy, down and dirty way to get around the issue, partially. Really, it’s just half-assed parlor tricks but maybe it’ll help you if you’re the cheesy, down and dirty type as well. I got tired of trying to figure out how to get it to work fully in IE so anyone that wants to offer a solution to that, feel free.

Cheese, By The Slice

So this won’t work for the vast majority of regular Joe users out there but it will work for about half of you since many viewers of this site are Mozilla users. IE users, it works but only to a degree... the slight of hand breaks down quickly.

This basically involves just slapping a DIV with content on top of another DIV that contains an image, essentially making that second DIV into a background. You use "em" for height and width of the image. Mozilla viewers will see in “Resize Image Background” that the text stays in the middle of the pizza when you change text sizes (oh, yeah, and the background gets bigger too). While IE viewers start out in the middle of the pizza obediently, they soon become unruly and their text moves up or down depending on the size. Even though the text position was not really my objective it seems like there should be an answer to this. My head hurts though, so I am stopping for now.

The CSS Sticky Footer

Intro: 

I see this request floating around a lot — the sticky footer. “How can I make a footer stick to the bottom of the screen and always remain on screen?”

The Stinky Footer. Ummm... I Meant ‘Sticky’ Footer.

I see this request floating around a lot — the sticky footer. “How can I make a footer stick to the bottom of the screen and always remain on screen?”

Sticky Footer Is Child’s Play

The sticky footer turned out to be pretty simple — by that I mean I found the parts to the solution quickly on the Internet, of course! I like figuring out problems on my own but I don’t try very hard at first. Chances are, someone else has done the thinking. So I found someone on the Internet who’d done bascially done the hard part, they just couldn’t get it to be cross-browser, and of course it didn't validate. So as with most people’s code (whether they like to admit or not), this is cobbled together from other sources though I don’t remember exactly whom. Sorry.

You can see the basic solution to the sticky footer but this version doesn‘t validate because of some of the code needed. Basically you just create a margin at the bottom of the screen and then “position: fixed” a footer into it that is as tall as the margin. Of course IE falters.

Sticky Footer, Extra Toe Cheese

So, to the rescue, we have the Deluxe Model Solution to the Sticky Footer or “Sticky Footer, Extra Sharp Toe Cheese” I like to call it. Either way you cut the cheese — I mean slice it — someone’s going to balk at this code so we may as well cover the caveats right away. This version validates in Transitional but it requires some creepy IE Fandango in the HTML. We have to basically pull offending CSS code out of the CSS file and put it in the HEAD inside some tags that only only IE pays attention to. This is solely so you can say, "hey, it validates." So, not the best solution I guess, but it covers the bases that interest me. Hope this helps you with your stinky footer!

...everyone is extremely happy with the web site and feel that you have done a great job. We will be more than happy to offer references on your behalf.

Cathy P., Director of Marketing Truco Enterprises, LP
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.