Jump to content

CSS buttons


Glom

Recommended Posts

I have to check on whether anyone thinks this approach is a good or a bad idea.This page uses my new template (I junked the php stuff in the end, too complicated for my purposes). This is the CSS. The template is basically the same in structure, though slightly different in presentation and markedly different in markup.As you can see, I use a number of buttons in the sidebar and at the bottom. In the old template, these were simply images written directly into the markup the old fashioned way.

<a href="blah"><img></a>

The new template makes use of CSS buttons, where the link is put inside a container, that is manipulated by CSS to look the way I want. The nav buttons in the sidebar are fairly bog standard. They are simply text, made to look like a button.It's other ones that I worry about. The idea is that they should just be about the image, no text. So I made the anchors empty and used the image as the background.To prepare for when things don't work according to plan thanks to someone's browser, I did put in some link text, but shrunk it down to 1px and made it the same colour as the background image so it would disappear. The idea is that if the CSS works as advertised, you shouldn't need the text, but if the CSS doesn't work, the link becomes a straight forward text link.If the problem is that the background image isn't available, I've made the background colour distinctive so you know something is up and the title attribute will show the link's purpose when you move the cursor over it.I like it because it allows me to make dynamic image links without having to resort to javascript.This has been validated with the w3c validators, but is it a good practice?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...