If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean.

Figure 1

Although this may look like an easy thing to replicate in HTML it’s really not as straight forward as it looks and there are a few obstacles to overcome if we want to reproduce this effect. So that’s exactly what we are going to learn how to do in this article!

(more…)

Have you looked at other people’s style sheets lately? Were you baffled to find square brackets in the CSS code? If so, this article might be of interest to you.

What Does It Mean?

Curly braces should feel comfortable to any CSS author, since you cannot write any useful CSS without them. Regular parentheses should be fairly familiar, too, at least if you’ve used functional notations like background-image:url("/images/bg.png") or color:rgb(128, 128, 255). But square brackets?

The square brackets denote an attribute selector – a concept that was introduced in 1998 in CSS Level 2. An attribute selector modifies a simple selector by imposing an additional constraint on it. Does that sound like Greek to you? (Or like something other than Greek, for those of you who are, in fact, Greek?) Don’t worry, we’ll look at some examples in a short while.

Why Should You Even Bother?

But first, let’s address another question: If attribute selectors really are useful, why didn’t you already know about them? Or, to turn it around, since you’ve managed to get by without them, what’s the point of using them?

The reason you may not have heard about them is quite simple: Internet Explorer for Windows up to and including version 6 don’t support attribute selectors. Since the market share for those browser versions has been well above 80% until very recently, there hasn’t been much incentive for using attribute selectors in public-facing websites.

Version 7 of IE does support attribute selectors, though, and as more and more users upgrade from IE6, attribute selectors gain more interest.

What can those newfangled attribute selectors do then, that’s so useful that you should take some of your precious time to learn about them? The answer is that they allow you to do a lot of things that you hitherto have had no other way to achieve than to pollute your markup with class attributes.

(more…)

The two column layout is extremely popular amongst web page designs. It’s usually achieved by floating one column and then applying a margin wider than the floated column to the other column. This article will show a pretty cool alternative method. But you have to keep reading to learn it!

(more…)

I was recently asked to create a pop-up message box for a client. The requirements were as follows: as the message box pops up the rest of the screen needs to dim, much in the same way as the lightbox effect. This needed to be achieved with minimal JavaScript; which was quite lucky because my JavaScript skills are minimal anyway. Another requirement was that the message box be vertically and horizontally centered in the viewport while the content underneath should still remain scrollable.

In hindsight I could have directed the client towards the lightbox script. However, I thought it might be fun to see how far I could go using mostly CSS and only using a snippet of JavaScript to swap an ID to effect the changes required.

Before we get started have a look at the end result so that you are familiar with what we are trying to achieve. The CSS has been left in the head on purpose so that you can view it easily.

First Things First

The first thing we need to do is decide on a plan of action. Let’s list the things that need to be done:

1.) Construct the message box itself (difficulty level - easy)

2.) Center the message box in the viewport both vertically and horizontally remembering that we have no fixed height to work with as content will determine the height of the message box (difficulty level - medium)

3.) Fix the message box so that it stays put in the viewport and doesn’t scroll with the document (difficulty level - hard)

4.) Fade everything else on the page except for the message box (difficulty level - awkward)

Let’s Get Busy!

(more…)

Tables handle images with captions nicely — you can easily center an image and have a caption centered underneath it while also having the image centered within a container or viewport. However, the drawback of using tables for this is that you are limited to a fixed number of cells across the screen and although the cells can grow and collapse depending on the image size, you can never have any more or less number of images per row than those you started with. If a table is 4 cells wide then you are restricted to 4 images for every row no matter how big or small they are.

When CSS came along a lot of people said “Aha! We can now float our images across the page”. This was a good start as it allowed the images to float across the page and expand or wrap as the page got smaller or bigger. Adding a caption wasn’t that difficult either as the parent container could be floated with the image and caption within it.

In this article we explore some useful CSS techniques to create a small photo gallery that will allow for a caption to be placed underneath our photos. This technique allows our images to flow and re-align across the screen depending on the width of the browser, unlike a table approach which always limits you to the same number of cells per row that you started with.

(more…)

Question: “When is a float not a float?”
Answer: “When it doesn’t float to the left or right.”

Today’s modern web designs are utilizing CSS for page layout. One popular CSS property used for page layout is float. The float property causes an element to float against the left or right margin of its parent element. But an often-sited drawback of using floats is that there is no easy way to center them. Most people settle by using a fixed width wrapper that contains the float (or floats). The width of the wrapper must match the float(s) total width and then the wrapper can simply be centered using auto margins. This will effectively center the floated elements as they are now contained within the wrapper. The drawback of this method is that you will need to know the width of the floated content beforehand.

In this article we will describe how you can center a widthless float or a series of widthless floats with relative ease.

(more…)

Episode 10 - 9/17/2007

Guest: Eric Meyer, CSS Guru meyerweb.com

Background: CSS Master, Author, Teacher

Total Time: 26 minutes

This is Part 2 of the Random Bits podcast with CSS master Eric Meyer. Our guest host is Tommy Olsson of Autisticcuckoo.net. I would strongly recommend you listen to part 1 if you haven’t done so already! We concluded our talk last time with a discussion on sites built in Adobe Flash. Now enjoy part 2!

Podcast Highlights

• 00:14 - We talk about the books and a possible next book
• 04:56 - Eric shares some of his struggles with CSS
• 07:42 - Let’s hear some favorite CSS tricks
• 10:51 - We talk about An Event Apart
• 17:09 - Getting personal

Play the podcast now! Notice the Random Bits podcast player on the right?
Or Download the podcast for later!
Or Subscribe to the Random Bits podcast feed!