[SOLVED] How to make a div a link

R8515198 · November 30th, 2007, 03:54 AM

Hi all,
I have a div with a background image, and am trying to make the div a link. A class sould be easier as then I could apply it to rest of the buttons.

Any help will be greatly appreciated

Dan

Code:

#CMS{
 background-image: url(assets/buttons/right/blue_CMSbutton.gif);
 background-repeat: no-repeat;
 background-position: center center;
 height: 40px;
 width: 150px;
 margin-left: 15px;
}

HTML Code:

<div id="CMS"></div>

Marc · November 30th, 2007, 03:57 AM

You would have to do something like:

HTML Code:

<a href=""><div id="CMS"></div></a>

although i would opt for a <span> rather than a <div>.

R8515198 · November 30th, 2007, 04:09 AM

Nice and simple

Cheers

Marc

Marc · November 30th, 2007, 04:11 AM

Your welcome - that's what I'm here for!

MikeHopley · November 30th, 2007, 04:25 AM

As Marc said, you should use a <span>, not a <div>. If you use a <div>, you will likely make invalid code.

As a general rule, don't put block-level elements (such as <div>) inside inline elements (such as <a>). See this W3C explanation:

Quote:

Content model

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

You can have the appearance of a <div> by using the CSS:

Code:

span.block { display: block; }

This trick is commonly applied to <a> elements in navbars.