Until you learn to understand how code nests within code you shouldn't apologize. It's kind of like making a sandwich out of other sandwiches, think of the opening tags like the top and bottom of your sandwich then remember that it's bad form to have the sandwiches "bite" each other. Pretty easy, eh!?
Now, I know that this is a discussion of how to set the DIVs... but here's an example that works when substituting an image for text using CSS:
Code:
<div id="example">
<p class="banner"><a href="LINK"><span>Pretty Pig</span></a></p>
</div>
Here's the CSS:
Code:
#example {
background: #2d4d87;
border-bottom: 7px solid #000000;
height: 90px;
width: 800px;
margin: 0;
}
p.banner {
background: no-repeat url(../graphics/logo.png) left top;
height: 90px;
width: 393px;
margin-right: 30px;
margin: 0;
}
p.banner a {
display: block;
height: 90px;
width: 393px;
}
p.banner span {
color: transparent;
display: none;
}
This allows the entire DIV to act as a hotlinked image.
The DIV establishes the size (width and height).
The paragraph called "banner" has a background image placed in its top left corner.
The link is set as a block with same dimensions as the background image in the containing paragraph.
The text within the link is contained in a span, so we tell CSS not to display the span (I made the text transparent out of Junior Programmer Voodoo).
There's probably a better way to code this but I'll leave it up to the advanced guys to show a better way... and anyway, this might possibly be off-topic.
