stormdamage.org » CSS

Getting CSS to behave like tables

Leonie — Tue, 30 Sep 2008 11:05:05 +0000

As much as I adore CSS, it seemed to me that it had one main limitation – it’s impossible to make it behave like tables. For example, it you have three columns of data beside each other, if one pushes down further than the others, the adjacent two won’t push down to match. Something like this happens instead:

The temptation is of course, to just use a sneaky table. But after some research I found this elegant solution by Pixy. The main beauty of this technique is that it works even in IE6, and doesn’t require any hacks. However, it is a little hard to get your head around if you’re new to CSS, so here’s my simplified breakdown of Pixy’s technique.

As you might expect, you begin by creating three columns – the left one floating left, the right one floating right, and the middle one unpositioned. I have given a width of 150px to the two side columns, and created another div underneath with the ID ‘clear’. This div ensures the floats above are properly closed, so you could put another div below these columns without it scrunching up unexpectedly.

So here’s what we’ve got so far:

#left { float:left; width:150px; }
#right { float:right; width:150px; }
#clear { clear:both; }

This is the text for the left hand side.

This is the text for the right hand side.

This is the text for the left middle section.

This will produce a page which looks very much like the image above. So to make it push down evenly like a table, we can use Pixy’s technique. This involves creating two more divs around the 4 we already have. These divs are to hold the background images – one for the left, and one for the right:

#main1 { background:url(purple.gif) top left repeat-y #fefcb9; }
#main2 { background:url(blue.gif) top right repeat-y; }




This is the text for the left hand side.


This is the text for the right hand side.


This is the text for the left middle section.

The main1 div gives the background colour for the middle column, and the background image for the left column. By mixing an image and a colour into one background tag, we only need one div to set the colour on two columns (left and middle). The main2 div sets the background image for the right column.

By doing this, we now have something that looks like this:

Of course, there are some limitations. If you wanted to put borders around each column, it might be a little tricky. This is because it’s only the background rather than the div itself which pushes down to the bottom. So you might be able to create the effect by creating background images with borders on them, but CSS borders may cause some problems.

Uses for CSS Tooltips & Images

Leonie — Thu, 24 Jul 2008 10:50:36 +0000

You may remember a previous post of mine, where I explained a method of using only CSS to create tooltips. Well here are two creative uses for that technique. Firstly – this map of the capital cities in the UK and Ireland. The locations are revealed when you hover your mouse over them:

This is done by creating a

which has the map image as the background. Links are placed inside this

for each location, and are positioned absolutely over the map. Inside each link is the tooltip text , and a

with the class ‘dot’ to define the hotspot area. On the map shown, I have outlined these divs with a square, white border so you can see where they are. But of course you could make them entirely invisible if you wanted to.

Here’s the HTML structure:

         Dublin










         Edinburgh










         London










         Cardiff










         Belfast

So to recap – the tooltip text and ‘dot’ hotspot are contained within a

named the class of the city it points to. This div is positioned absolutely over the map image. To create the tooltip, reuse the CSS from my previous tutorial (only with slightly different sizes and colours this time):

a.tooltip:hover { font-size:100%; } /* IE6 fix */ a.tooltip span {display:none; } a.tooltip:hover span { display:inline; position:absolute; padding:3px; background-color:#eee; border:1px solid #000; text-decoration:none; color:#7A2141; font-weight:bold; }

Then create the CSS for the map image, and the locations:

#map { position:relative; background:url(ukmap.png) no-repeat; width:244px; height:253px; border:1px solid #000; }

a.tooltip div.belfast { position:absolute; top:116px; left:90px; }
a.tooltip div.dublin { position:absolute; top:147px; left:80px; }
a.tooltip div.edinburgh { position:absolute; top:92px; left:142px; }
a.tooltip div.london { position:absolute; top:204px; left:179px; }
a.tooltip div.cardiff { position:absolute; top:196px; left:130px; }

Finally, create the CSS for the dot hotspots. This just decides how big each hotspot should be, and adds an optional border:

a.tooltip div.dot { width:10px; height:10px; border:#fff 1px solid; }

This will give you some working map tooltips! Of course, you may wish to position them a little better, as they overlap the dots a little. So you can either simply push them down a little like this:

a.tooltip div span { top:14px; }

or you can try and centre them:

a.tooltip div span { top:14px; margin-left:-250%; font-size:100%; }

Unfortunately this method is not terribly reliable, a better solution would be to make all the tooltip text tags the same width, then negatively offset them by half their width:

a.tooltip div span { text-align:center; top:14px; width:60px; margin-left:-30px; font-size:100%; }

The second use for this CSS technique would be a Facebook style method of highlighting photographs. A list of items is shown under an image. When the mouse is hovered over one of the items, a box appears on the image. Like so:

To do this, you need to create a

which will hold the image and the list. Each list item will have a inside it, which will be hidden initially, but show up over the image when the item is hovered over. Here’s the HTML:

Jon


Leonie


Andy

The ‘housemates’ div should have the photo as a background, and have the photograph’s width plus some top padding to push the list down underneath:

.housemates { position:relative; background:url(housemates.jpg) no-repeat; width:419px; padding-top:343px; }

Then the size of the spans which appear when hovering should be set, using the CSS trick previously outlined:

a.person:hover { font-size:100%; } /* IE6 fix */
a.person:hover span { position:absolute; width:80px; height:100px; background:transparent; border:2px solid #fff; text-decoration:none; }

Finally each individual is given a position over the image:

a.person span.jon { top:35px; left:72px; }
a.person span.leonie { top:39px; left:157px; }
a.person span.andy { top:30px; left:240px; }

And there it is, a simple way of using CSS to annotate your photos, Facebook style.

Tooltips using CSS only, no Javascript

Leonie — Tue, 01 Jul 2008 19:44:31 +0000

Here’s a nice easy method for making link tooltips entirely in CSS, without any Javascript. For a demonstration of what I mean, hover over this link This is a tooltip. with your mouse.

To do this, you will need to create a class for the links which require tooltips, and a within that link to include the tooltip text:

this is a link This is a tooltip

I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.

Then add the following styling:

a.tooltiplink span {display:none; }
a.tooltiplink:hover span { display:inline; position:absolute; padding:5px; color:#0c0; background-color:#eee; border:1px solid #000; text-decoration:none; }

The first line ensures the tooltip is hidden, the second line reveals the when the link is hovered over. It does this by switching the ‘display’ from ‘none’ to ‘inline’. The second line also adds some visual styling such as padding, text colour, background colour, and a border. Finally it adds ‘text-decoration:none’, so it does not inherit the underline from the link.

However, There is still a little tweak we need to apply to this CSS, as IE 6 has problems rendering the tooltips. This is easily fixed by adding a font-size to the hover:

a.tooltiplink:hover { font-size:100%; } /* IE6 fix */

I am not sure why this works, as setting the font-size shouldn’t make any difference at all. Suffice to say IE 6 is full of unique little quirks!

So there you have it, tooltips with no Javascript involved.

EDIT: You can see some creative uses for trick this here – CSS tooltips and images.

Two methods of replacing text with an image in CSS

Leonie — Tue, 17 Jun 2008 15:54:50 +0000

This is something I get asked about from time to time. The aim is to have some text which is there in the code, but is hidden when viewing the page.

You may be wondering why replacing images with text could be useful. The reasons are twofold. The first reason is to improve your site’s SEO (Search Engine Optimisation). Having a

title makes it easier for spiders to correctly categorise your page, and a relevant and well-worded tag can improve the page’s ranking. However, for reasons of aesthetics, it’s often nicer to have an image as the header, perhaps with a unique font, or your company’s logo. Rather than have this potentially comprise your page rankings, it makes sense to use CSS as an easy way of having a nice looking page and good SEO.

The second reason is to enable accessibility, to maximise the amount of users who are able to make full use of your site. Pages which rely entirely on images for headers and menus are hard to navigate in text-only browsers. This may mean those with screenreaders have difficulty accessing your content.

So how do we go about it? Making the text invisible on the background image with ‘display:none’ would be counted as a potentially devious cloaking method by Google and penalised. This is because it attempts to entirely hide page content from the user. Instead there are two ways we can achieve it:

1. This method is the one I’ve seen most commonly used. Rather than hide the text, it places it far off the left hand side of the screen, where it cannot be seen (except by people with really really big monitors!). The title tag is then given the same dimensions as the image which will replace it:

The Title Goes Here

#replace { text-indent: -9000px; background:url(title.gif) no-repeat; width:200px; height:100px; }

I personally am not a big fan of this method, it seems like ‘dirty’ CSS to me, putting a large negative indent on an element. Though it does seem to work in nearly all browsers with the exception of IE 5, though I understand there are some workarounds for this.

2. This next one is my favoured method, and the one I most commonly use. The thinking behind this one is to cover the text with an image inside an absolutely positioned . Both the span and the title tag are given the same dimensions at the image, so they take up the same space on the page :

The Title Goes Here

#replace { position:relative; margin:0; padding:0; width:200px; height:100px; }
#replace span { position:absolute; top:0; left:0; background:url(title.gif) no-repeat; width:200px; height:100px; }
#replace, #replace span { width:200px; height:100px; }

Because the image gets its absolute positioning from the parent element, when aligned to the top and left, it sits nicely over the text. However, there are a few slight problems with this in older versions of Opera, which can be solved simply by adding a z-index to the span selector above:

#replace span { position:absolute; display:block; top:0; left:0; z-index:1; }

Of course the problem with both of these methods is that you don’t get to use the ‘alt’ or ‘title’ tags on your images (which is good SEO practise), but I think this is outweighed by the benefits of having relevant

tags, which are more significant anyway.