Tag Archives: css

CSS for Beginners

Recently I was invited to give a short talk on basic CSS at work, as part of a session of four presentations on web development.

Despite my lack of experience with public talking I think it went pretty well and I got the message across. I was happy to find people were coming up to me at the end letting me know they had learned something new.

Although this is an English language blog and most my readers are from the US I haven’t had the time to translate my slides into English for publishing. So, I’ll leave you with the Portuguese presentation for now and later I’ll post the translated version.

Here are the slides:

Safari with the best CSS3 support, IE ruining it for everyone again

Once in a while I go read up on CSS3, then I get frustrated that it’s not a standard yet because it’s so great.

Today I decided to run CSS3.info’s selectors compatibility test. Not that I needed confirmation but, obviously, the (still large), installed base of IE6 around the world is mucking things up for everybody else.

The test is here: http://www.css3.info/selectors-test/test.html

Safari (3.1.2), performed the best passing all the tests. Firefox (3.0), a bit to my surprise – it being so recent and all – only supported 36 of the 43 selectors tested but it was Internet Explorer 6, which I tested because it’s still the standard installed browser on workstations at where I work passed only 10 of the 43 selectors tested.

And, get this, it passed all the #id tests but it failed one of the .class tests! IE6 doesn’t even fully support .class which is the basic CSS selector.

I’d still like to test IE7 and Opera, but I don’t have them right now. I’ll check later and update.

In the meanwhile, we’d better sit down, if we’re waiting for CSS3 to “come out”.

Horizontal CSS menu using a pointer and background images

OK, so the title is a bit too descriptive but I’m trying to make this post findable in case anyone out there needs to solve a similar problem. So this will be about… that’s right: creating a horizontal menu, using CSS and XHTML. Each menu item will have a small pointer underneath (an arrow if you will), and I want it all done using images, just to make it a little harder.

Here’s what I wanted the menu to look like:

menu

As you can see, some menu items are longer, some shorter. The menu sits in a gray bar and is separated from the remainder of the page by a green “tube”. I want the selected item and the hover state to be represented by a dark box with a pointer that breaks through the green tube.

At first I made the item an li which had the dark box as a background image and was immediately followed by an empty em tag which then had the pointer as a background image and was offset using relative positioning at 50% left.

A menu item looked a bit like this:

<li><a href="whatever">Homepage</a><em></em></li>

The problem was the positioning of the whole thing as in some browsers, the pointer would become detached from the dark box, and I couldn’t fix that with negative top margins because then the pointer would be offset in yet another browser. A mess. Plus, with this method, I needed a minimum width for each item, so I could then calculate the mid point to place the pointer. No good.

But there is quite a practical solution that came to me while thinking about the sliding doors method of making tabbed navigation menus: marvel then, at the ability to stack background images.

I couldn’t have used a single background image, because then, all my items would have to be the same width, since stretching the background image would distort the triangular pointer, so enter the bkg stack!

I took the li elements of an ul and styled them so they had the correct height: dark box plus triangular pointer. Then, I added a span inside each li, so I could style two overlapping elements with two different images. Then, in the CSS, I applied a background image to the li and another (the pointer) to the span. Keeping the stretching and centering is dead easy like this: you make the dark box around the text repeat on the x-axis and you turn off stretching on the pointer. Plus, you can easily center the pointer by just using “center” on the background declaration.

Here’s the HTML:

<div id="menuarea">
  <ul class="menu">
    <li class="current"><a href="#"><span>Homepage</span></a></li>
    <li><a href="#"><span>Funcionalidades</span></a></li>
    <li><a href="#"><span>Contactos</span></a></li>
    <li><a href="#"><span>SMS</span></a></li>
    <li><a href="#"><span>Chamadas</span></a></li>
    <li><a href="#"><span>Webmessenger</span></a></li>
    <li><a href="#"><span>Comunidade</span></a></li>
    <li><a href="#"><span>Passatempos</span></a></li>
  </ul>
</div>

And the CSS:

#menuarea {
  height:40px;
  background-color:#F0F0F0;
  background:url('images/menuarea_background.gif') repeat-x;
}

.menu {
  width:73.84em;
  margin:0 auto;
  padding:6px 0 0 0;
  white-space:nowrap;
  list-style-type:none;
}

.menu li {
  float:left;
  font-size:93%;
  text-align:center;
}

.menu a {
  position:relative;
  display:block;
  text-decoration:none;
  float:left;
}

.menu a span {
  display:block;
  color:#000;
  text-align:center;
  padding:9px 8px 8px 8px;
  cursor:pointer;
}

* html .menu a span {
  cursor:hand;
  width:66px;
} /*IE Fix*/

.menu a em {
  display:none;
}

.menu a:hover {
  color:#fff;
  background:url('images/menuhover_background.gif') repeat-x;
  height:34px;
}

.menu a:hover span {
  background:url('images/menu_pointer.gif') top center no-repeat;
  height:17px;
}

.menu a:hover {
  background-position:0 0;
} /*IE fix*/

.menu .current a {
  color:#fff;
  background:url('images/menuhover_background.gif') repeat-x;
  height:34px;
}

.menu .current span {
  background:url('images/menu_pointer.gif') top center no-repeat;
height:17px;
}

This is what the images look like:

menu area background The menu area background, which repeats along the x axis.

Menu item background The “dark box” that envelops each “current” or “hover” menu item

Menu pointer And the pointer.

As you can see, the dark box is as tall as a menu item plus the pointer and the pointer is the same height. They’re both transparent where they overlap and the pointer includes a bit of the green tube.

Overlapping background is a really powerful method of styling elements to make them look more complex than they actually are. It’s not *very* easy and you’ll notice the need for some IE 6 fixes and some weird height definitions that seem to make no sense. I know, I still can’t really explain some of it. But the truth is that the menu looks perfect in IE6, IE7 and Firefox for Windows as well as in Safari and Firefox for the Mac.