CSS

The requirements were that Javascript shouldn’t be necessary (bad SEO and accessibility) and that the HTML had to validate. For some examples have a look at Facebook advertisements. Here is how it was done:

• Create the div as normal using HTML and CSS. In the div you will need to place the link you are wanting to be accessible.
• Inside that link you will need an empty span tag.
• Make sure that the div is styled in CSS with position:relative
• Apply the following style to the empty span tag:

{ position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1 }

Any other links you may have inside the div will require position:relative and a suitable z-index (greater than 1)

Often these selectors can confuse beginners. In CSS a class is represented by a dot “.” while an id is a hash “#”. Simply put an id is used on a unique style that doesnt repeat whilst a class can be re-used.

Often it can be hard to decide where to use a class versus an id for an element

Use a class tag if:

1.The style is used in various places throughout the document.
2.The style is very general.

Use an id tag if:

1.The style is only used once ever in the document.
2.The style is specific to a certain area of the document.

Remember that an id can only appear once in any HTML document. Once you’ve used that id it should not be used again on that page.

A quick little way to do this (whilst still degrading and being kind to screen readers)

h1 {
text-indent:-9999px;
background:url("heading.jpg") no-repeat;
width:100px;
height:50px;


How it works: text-indent:-9999px; relocates the text title off screen, replacing it by an image declared by background: {…} utilising a fixed width and height.