Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Some doubts about how make an image clickable using CSS

Some doubts about how make an image clickable using CSS

Problem

I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:

I have an header that contains a div having id=logo, something like this:

         

And related to this #header div (and its content) I have the following CSS code:

/* For the image replacement of the logo */
h1 {
    background: url(../images/logo.jpg) no-repeat;
    text-indent: -9999px;
    width: 224px;
    height: 71px;
}

h1 a {
    display: block;
    width: 258px;
    height: 64px;
    text-decoration: none;
}

So this code put an image instead of the My web site is cool text that is in the tag.

I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:

Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable

This thing is not very clear for me and I have the following doubts:

Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?

Tnx

Andrea

Problem courtesy of: AndreaNobili

Solution

Take this example,

an a element is inline by default, so if you were to do something like

CSS

a {background:red; height:210px; width:200px;}

HTML

test

You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block

JSFiddle Demo Example

HTML:

Without display:inline block, width and height set.


With display:inline block, width and height set.

With display:block, width and height set.

CSS:

a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
Solution courtesy of: Nick R

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Some doubts about how make an image clickable using CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×