Linking a Background Image to another page

[mswanndeford]

Hi, I am trying to get this to work in FireFox. I already got it working in Explorer.

I have a background image that needs to link to a page. Here is my code:

<div id="col1"><a style="text-decoration:none; color:#333333" href="../select_state.shtml"><div style="PADDING-LEFT: 5px; PADDING-TOP: 210px">Lorem ipsum dolor sit amet, nisl min im huic abluo verto mag epulae. Vel, tum singularis.</a><br /><br /><a href="select_state.shtml"><img src="../images/learnmore.gif" alt="learn more" width="67" height="14" border="0" style="PADDING-LEFT: 140px" /> </div></a>

I know, it's messy :p

col1 has a background image. I didn't change anything in the css file.

Help, thanks so much!

[Arbitrator]

That is not correct HTML. div elements are not allowed inside of anchor elements and you’ve failed to adhere to nesting order. For example, this is the kind of nesting order that you’re using:

<a>
<div>
</a>
</div>

It should be:

<div>
<a>
</a>
</div>

To get the background as a hyperlink effect, you would use something like this:

div { background: …; }
a { display: block; }

Or you would apply the background directly to the anchor element.

[mswanndeford]

Thanks for the help!

Where do I put the actual link code?

[Armondo]

validate your code before you ask for help (http://validator.w3.org/)

also design for firefox, fix/hack for ie

[Arbitrator]

Where do I put the actual link code?Inside of the div? It’s your document. Start by fixing the nesting order, then add the CSS.

By using display: block, you can essentially turn an anchor (a) element into a div element, since that’s basically all a div is.

[mswanndeford]

Since I am real new at this, let's dumb it down even further:

CSS code:
#col1 {
display:block;
width:225px;
height:284px;
float: left;
clear: left;
margin: 10px 0 0 0;
background-image:url("../images/prod_col.jpg");
background-repeat:no-repeat;
}

a.home {display:block;
outline:none;
text-decoration:none}

HTML code:
<div id="col1">
<div style="PADDING-LEFT: 5px; PADDING-TOP: 210px">Lorem ipsum dolor sit amet, nisl min im huic abluo verto mag epulae. Vel, tum singularis.<br />
<br /><a class="home" href="select_state.shtml"><img src="../images/learnmore.gif" alt="learn more" width="67" height="14" style="PADDING-LEFT: 140px" /></a> </div>
</div>

Now, what goes where and why? Do I need to recode my div to include the background or can I use col1 as a style with the background applied to it?

I am somewhat confused.

Thanks! :confused:

[VIPStephan]

Now you've got the nesting order alright. However, you can't literally make a background image link to another page, you would have to place a link over that background image or apply a background image directly to that link.