Need help with positioning box link in CSS

[agogley]

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.
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:

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.

[joshuanhibbert]

The easiest way to get an absolute element to behave is to give a parent element position: relative. Once an element has position: relative set, any absolutely positioned children will be positioned based on the parent. If no elements have position: relative set, then the root element (html) is what the position of absolute children will be based upon (which is what you are currently experiencing).

[agogley]

So, it might help if I put the anchor tag somewhere else in the header div that has a relative set? Right now it looks like everything is set for “float.” Here is my entire style.css file.

* { margin:0; padding:0 }

div { margin:0; padding:0 }

html { height:100.1%; line-height:.9em}

BODY {

font-size: 13px;

background: #33353f url(images/bg.png) repeat-x;

font-family: Tahoma, Arial, Geneva;

color: #ecebe4;

margin:0px auto 0 auto;

text-align:left;

line-height:1.1em

}



a { color:#e9c29c; text-decoration:underline}

a:hover  { color:#fdd54a; text-decoration:underline}



#wrapper { width:988px; margin:0 auto; overflow:hidden}



#top-bar{width:988px; height:42px}

#top-bar-left {background:url(images/top-bar-left.png) no-repeat; width:876px; height:42px; float:left}

#top-bar-fb {width:29px; height:42px; float:left; position:relative}

#top-bar-t {width:30px; height:42px; float:left; position:relative}

#top-bar-rss {width:30px; height:42px; float:left; position:relative}

#top-bar-right {background:url(images/top-bar-right.png) no-repeat; width:23px; height:42px; float:right}



.top-links {color:#fff; padding-top:7px; padding-right:10px; line-height:1.2em; font-weight:normal; float:right}

#container1 {width:988px; height:97px}

#logo {background:url(images/logo.png) no-repeat; width:162px; height:97px; float:left}

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



#banner-section{background:url(images/banner-section.png) no-repeat; width:988px; height:304px}



.nav-area {color:#fff; font-size:16px; font-weight:bold; padding-top:56px; padding-left:25px}



#liner{background:url(images/liner.png) no-repeat; width:988px; height:31px}



#photo-section {background:url(images/photo-section.png) no-repeat; width:940px; height:300px}



#title-block{background:url(images/title-block.png) no-repeat; width:988px; height:34px}



#featured {width:988px; height:35px}



#container2{width:988px; height:412px}

#container2-top {background:url(images/container2-top.png) no-repeat; width:988px; height:290px}

#home-text {background:url(images/home-text.png) no-repeat; width:474px; height:290px; float:left; color:#999999}

.home-content {padding:14px 18px 10px 46px; color:#6f6f6f}

#buttons {background:url(images/buttons.png) no-repeat; width:208px; height:290px; float:left; position:relative}

#button1 {width:208px; height:95px}

#button2 {width:208px; height:97px}

#button3 {width:208px; height:98px}

#news-events {background:url(images/news-events.png) no-repeat; width:306px; height:290px; float:right}



#container2-bottom {background:url(images/container2-bottom.png) no-repeat; width:988px; height:122px}

#lower-box {background:url(images/lower-box.png) no-repeat; width:677px; height:122px; float:left}



#social-media{width:311px; height:122px; float:right}

#facebook-lg {width:103px; height:122px; float:left; position:relative}

#twitter-lg {width:84px; height:122px; float:left; position:relative}

#rss-lg {width:124px; height:122px; float:right}



.interior-box {color:#fff; padding:13px 0 0 44px; line-height:1.2em; width:614px}



#lower-section {width:980px; height:55px}

#lower-left {width:490px; height:55px; float:left}

#lower-right{width:490px; height:55px; float:right}



#liner2{background:url(images/liner2.png) no-repeat; width:980px; height:7px}

#liner-stretch {background:url(images/liner-stretch.png) repeat-y; width:980px; height:100%; overflow:hidden}



#footer {background:url(images/footer.png) no-repeat; width:988px; height:92px}

.footer-text {color:#fff; font-size:11px; padding-left:32px; padding-top:6px}



.inner-content {color:#5b5d64; padding-bottom:18px; padding-left:49px; width:890px}



a.nav-link:link{color:#fff; text-decoration:none; font-weight:bold; line-height:24px}

a.nav-link:visited{color:#fff; text-decoration:none; font-weight:bold; line-height:24px}

a.nav-link:hover{color:#fdf4b4; text-decoration:none; font-weight:bold; line-height:24px}



.headline {color:#fff; font-size:18px; font-weight:bold; padding-top:4px}



.headline2 {background:#fff; border:#ccc 1px solid; color:#737373; font-size:18px; font-weight:bold; margin-top:10px; margin-bottom:15px; padding:4px; text-align:center}



.int-headline {background:#496983; border:#ccc 1px solid; color:#efefe4; font-size:18px; font-weight:bold; padding:4px}



.details{color:#6f6e64; font-size:.9em; padding-top:48px; padding-right:18px; padding-bottom:5px; padding-left:22px}



.events-box {padding: 14px 40px 0 18px}



.events-date {color:#8d6463}



.events-title {color:#636648}



.events-details {color:#5a5c69}



a.alter-link:link{color:#ede3b9; text-decoration:underline}

a.alter-link:visited{color:#ede3b9; text-decoration:underline}

a.alter-link:hover{color:#fff; text-decoration:none}



a.alter-link2:link{color:#fff; text-decoration:underline}

a.alter-link2:visited{color:#fff; text-decoration:underline}

a.alter-link2:hover{color:#fff; text-decoration:none}



a.alter-link3:link{color:#fff; text-decoration:none}

a.alter-link3:visited{color:#fff; text-decoration:none}

a.alter-link3:hover{color:#fff; text-decoration:underline}



a.alter-link4:link{color:#ccc; text-decoration:none}

a.alter-link4:visited{color:#ccc; text-decoration:none}

a.alter-link4:hover{color:#dfdfdf; text-decoration:none}



a.alter-link5:link{color:#736e3b; text-decoration:underline}

a.alter-link5:visited{color:#736e3b; text-decoration:underline}

a.alter-link5:hover{color:#e67518; text-decoration:underline}



.info{color:#fff; font-size:.9em; padding-top:128px; padding-right:18px; padding-bottom:5px; padding-left:22px}





#two-column {width:890px; height:280px; background:#585859; border:#ccc 1px solid}

#gallery-frame {padding:4px; width:378px; height:267px; float:left}

#photo-items {overflow:auto; width:500px; height:267px; float:right; padding-top:4px}



.category-left {background:#5e6066; padding:10px; width:418px; border:#fff 1px solid; height:100%; color:#f1f0e8; float:left}

.category-right {background:#5e6066; padding:10px; width:418px; border:#fff 1px solid; height:100%; color:#f1f0e8; float:right}



.category2 {background:#5e6066; padding:10px; width:869px; border:#fff 1px solid; height:100%; color:#f1f0e8}



.image-outer {border:1px solid #e5decb; margin-left:4px; margin-bottom:2px;}

.image-outer2 {border:1px solid #a09586; margin-right:4px; margin-bottom:2px}

.image-outer2B {border:2px solid #a09586; margin-left:4px; margin-bottom:2px}

.image-outer3 {border:2px solid #ccc; margin-right:6px; margin-bottom:2px}

.image-outer4 {background: #2c3439; border:1px solid #7d919c}

.frame-border {border:4px solid #555}

Where do you suggest I place the anchor tag in the HTML that might work here?

[joshuanhibbert]

Sorry, I should have explained in a bit more detail. When I mean a parent element, I am talking about the markup. Take this for example:

I have indicated the relationships in the class names. If the child was positioned absolutely, then the only way to contain that positioning within the parent would be to set position: relative on the parent.

With that being said, you would need to make sure that the anchor is within the navigation for you to be able to reliably control the position of it.

Is there any reason you are using an image for this though? It is generally considered bad practice to use an image for something like this. If you would like help setting it up otherwise, just let me know.

[agogley]

I would love to hear some alternatives. Like I said, the background graphic exists with the text already there. I could remove the text leaving just an empty box or I suppose I could remove the box altogether. But whatever I use to replace the box would need to look just like the box I’m removing.

Originally, the box was intended to have the phone number and the general email address; however, the email address is simply too long to fit on that header properly. So I came up with the idea to put the phrase “Email Us” and then have some method of clicking on it to generate an email. The transparent box overlay was the first thought that came to mind.

Anyways, I’m open to any alternatives as I’m still learning.

[agogley]

BTW, based on your first advice, I figured out where to place the anchor tag within my existing HTML so that it placed inline with an element that has a relative position. So I least I figured that out, but would still love to hear alternatives.

[agogley]

One thing I thought of was to remove the text, resave as a PNG, then create a standard Text hyperlink. The website was originally coded that the entire nav-bar was one image file, including the little text box that contains the text “EMAIL US.” Of course, it didn’t say email us, it had an email address listed there which wasn’t clickable. The email address I need to use doesn’t fit there…it’s waaaaaaaay too long (so long I wish we had a different domain name but that’s a whole other issue). Anyways, the only thing I could do since I was totally unfamiliar with CSS at the beginning of this project was to open the PSD file, change the text, then resave as the nav-bar.PNG file. Now I’m thinking that I could go back to the PSD, record the color of the text, then delete the text and resave as the nav-bar.PNG. Then I could create a standard text link (although I need the text to contain the phone number too), color it appropriately, and then place it within the box (I suppose I’d have to put it under a parent too in order to have an absolute position?).

[joshuanhibbert]

That is how I would do it. There are a couple of positives to only using images for, well, images: You can easily change the style of the text (i.e. color, font) without opening up your image editor, and you can easily change what the link says (if your phone number changes for instance). Also, it then becomes more accessible to those that are using screen readers.

[agogley]

Ok, what is the proper # entry for my new text link in that area?

[joshuanhibbert]

I’m not sure I understand the question.

[agogley]

Ok, in order to get my box I create the following in the HTML under my div id=nav-bar.

Then in order to create the formatting in CSS I produce the following:

#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;

}

So that creates a box, perfectly positioned that turns into a link when I mouse over it. I could easily place text in the box that says EMAIL US by simply adding that text to the anchor tag up above.

Is that what you are suggesting or are you suggesting some other way of formatting an email text link within CSS (or HTML?).

The next question is, if I add the email us text to the box link then do I add the color, font size etc. under the #box-link entry?

I guess I’m just trying to figure out what you suggest is the best method for handling this if I create the text within the webpage rather than within the PNG (although to be fair to myself, I didn’t originally code it that way).

[joshuanhibbert]

I would add ‘Email Us’ as text in the anchor tag. And yes, you would then style that text using the ID of the anchor. Apologies for not being clearer.

[agogley]

I’ve been fooling around with it since my last response. I did that and have been able to edit the font properly. Exact positioning has been really, really tricky, but seems solveable.

Here’s the other problem…what about the phone number? How would I add that but without using the underlying PNG file? I couldn’t add it in the same BOX-LINK because that is entirely clickable.

more learning to do.

[joshuanhibbert]

So if you had to add more info, I would do so like this (and then position the div instead of the anchor):

Email Us

Phone: 0123456789

Also, rather than using absolute positioning, you should try and find the right place for it to sit in the markup, and then use margins to align it correctly.

[agogley]

You kinda burst my bubble, LOL. I was pretty proud of myself as I created some text by creating the following code:

PHONE 281-550-9321   l   EMAIL US

And then corresponding CSS entry:

.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;

}

I also had to add position:relative to the nav-bar id in the CSS in order for the absolute property to work on the span class.

So now I feel like I twice failed. Anyways, in your solution how would I get the phone number to appear first on the left and then the “EMAIL US” on the right both inline with one another? Also, I could use some help on figuring out where to put it in the div class and the corresponding CSS entries to get it all setup correctly.

Thanks for all your help. I realize I’m asking a lot.

[Author]

Posts