[SOLVED] How to make a div a link

R8515198 · #1 (**permalink**) Nov 30th, 2007, 07:54

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: Select all

#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: Select all

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

Marc · #2 (**permalink**) Nov 30th, 2007, 07:57

You would have to do something like:

HTML: Select all

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

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

R8515198 · #3 (**permalink**) Nov 30th, 2007, 08:09

Nice and simple

Cheers

Marc

Marc · #4 (**permalink**) Nov 30th, 2007, 08:11

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

MikeHopley · #5 (**permalink**) Nov 30th, 2007, 08:25

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: Select all

span.block { display: block; }

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to make a div become visible on clicking a link?	snappy	Web Page Design	12	Jun 11th, 2008 19:25
[SOLVED] How to make an expand / collapse menu	sing2trees	JavaScript Forum	4	Apr 14th, 2008 12:16
[SOLVED] joining 2 queries together to make 1 query	AdRock	Databases	0	Nov 18th, 2007 21:37
[SOLVED] How do I Make Content available for download	chrissmith	Starting Out	4	Nov 11th, 2007 10:13
[SOLVED] How to make the PM pop up box?	Monie	JavaScript Forum	31	Nov 7th, 2007 08:38

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] How to make a div a link