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.
(more…)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 <div> which has the map image as the background. Links are placed inside this <div> for each location, and are positioned absolutely over the map. Inside each link is the tooltip text <span>, and a <div> 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. (more…)
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 <span> within that link to include the tooltip text:
<a class=”tooltiplink” href=”#”>this is a link<span> This is a tooltip</span></a>
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: (more…)
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 <h1> 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. (more…)