Need Help with Box Link in Div

I'm a total newb. I've been teaching myself HTML and CSS so that I can finish a redesign of a website for my church. Unsurprisingly, I need help.

I'm providing a temp link here (http://www.copperfieldbiblechurch.org/v2/site/aaron2/).
Here is the relevant CSS line for nav-bar.png.

#nav-bar{background:url(images/nav-bar.png) no-repeat; width:826px; height:97px; float:right}

You can see where nav-bar shows up in the html on line 23 in a div id.

If you look at the upper right, you see a text box that shows "EMAIL US." That text is actually created as part of a PSD file which is then saved as a PNG file called "nav-bar.png." I tried to include a slice or hotspot in both Photoshop and Fireworks but it doesn't carry over into html (I'm using Dreamweaver, btw). I've been trying to figure out a way to make just that "EMAIL US" into a clickable area that allows the use of a mailto command. The best idea I've come across so far includes a the use of a box-link which creates a box that I can then make transparent and stick over the "EMAIL US." I've played around with the following CSS code:

#box-link {
position: absolute;
top: 51px;
left: 853px;
width: 101px;
height: 21px;
background-color: transparent;
border: 1px transparent;
overflow: auto;
}

The html would be placed on line 23 after the Div ID entry as follows:<a id="box-link" href="#"></a>

Ok, that seems to create the box and make it clickable. The problem is that I can't get it to say exactly the where I want it (that is over the EMAIL US text). It seems to say "absolute" depending on the window size. I assume it has to do with my positioning commands in the CSS or that I've placed the anchor tag on the wrong line in the html.

Any help, suggestions, or comments would be helpful.

You need to set position:relative on an element, otherwise #box-link will be positioned absolutely with respect to the viewport, and hence will move with the screen size. Have a try with:

#nav-bar {
background: url("images/nav-bar.png") no-repeat scroll 0 0 transparent;
float: right;
height: 97px;
position: relative;
width: 826px;
}

#box-link {
background-color: transparent;
border: 1px none transparent;
height: 21px;
overflow: auto;
position: absolute;
right: 40px;
top: 10px;
width: 101px;
}

All that said, it would probably have been easier to create this as a normal text link rather than as an image.

All that said, it would probably have been easier to create this as a normal text link rather than as an image.


Yes, I realize that. The underlying Nav-Bar graphic has that box and text in it. So the text exists within the PNG file itself. I don't know why it was originally coded that way, but it was. It was easy enough to change it within the PSD and save as the appropriate PNG replacement. I guess I could have deleted the text then created a text box that would reside on top of that box. I suppose I'd just need to record the colors being used by Photoshop to match so I could color the text link accordingly.

Do you have a suggestion for the code on the text link here? (I'll work on it on my own too when I get a chance).

Ok, I can get a text link to show up but I can't get it properly coded with CSS. I'm not sure what the # symbol should be.

What I mean is that I can easily add text to the box link by simply adding the text within the HTML anchor tags in the line above. The question is, is that the way you are suggesting or are you suggesting some other coding that would be better practice.

I've since added "EMAIL US" as text to the anchor tag. That works but wouldn't allow me to add the phone number. I'm guessing I'd have to add some other type of box, then create a link within that.

Ok, I've been playing around some more. Somebody told me this is not the right way to do this.

But I got rid of the box since everyone seemed to hate the entire idea. I created the following entry on line 23 in the html under div id="nav-bar":

<span class="navbartext1">PHONE 281-550-9321 &nbsp; l &nbsp;&nbsp;<a href="mailto:info@copperfieldbiblechurch.org">EMAIL US</a></span>

And corresponding entry in the CSS:

.navbartext1 {
font-size: 14px;
font-weight: bold;
color: #57A2AE;
position: absolute;
left: 526px;
top: 12px;
width: 253px;
height: 21px;
font-family: Arial;
line-height: normal;
}

Somebody else told me I shouldn't use relative and absolute positioning and instead make a new div class with a proper place for it to sit in the markup. I'm not sure I know how to code that, but I'm trying to learn. Anything would be helpful.

I don't see any reason not to use absolute positioning here. What you want to avoid is using absolute positioning for every element on your page - which Dreamweaver will create if used in design view - but that's not the case here.