Needing Help Aligning an Image on a...

User 2388388 Photo


Registered User
129 posts

Hi Everyone,

First of all I'd like to let it be known how pleased I am with Coffee Cuo... It's the best thing Ive ever bought!!

I'm a rather novice webmaster and am having trouble aligning an image on my page.

If you goto my site and look in the RH Corner of my footer, you'll see an arrow that I'm setting up as a quick way for my visitors to return to the top but I can't get it positioned correctly.

Here's the link to the site: http://www.your-adrenaline-fix.com/

And here's the code I've been working with: <a href="#" title="Return to Top"><img src="image-files/return-to-top.gif" width="30" height="37" alt="Clickable Arrow to Return to Top of page" title="Return to Top" border="0" style="float: right; margin-right: auto; margin-bottom: 10px;"></a>

The problem is, no matter what I change the margin-bottom: 10px; to I still can't get the arrow to be positioned correctly.

What I'd like to do is to have this arrow just inside the border around my page but I'm at a loss as to how to do this.

If anyone could so kindly chime in on this I'd be most appreciative and I thank you all very much in advance.
User 1948478 Photo


Senior Advisor
1,850 posts

You could try this:
<div class ="ItemCenter">
<a href="#" title="Return to Top"><img src="return-to-top.gif" width="30" height="37" alt="Clickable Arrow to Return to Top of page" title="Return to Top" border="0" style="float:right;"></a>
Content Created by Stuart Kaufman / Your-Adrenaline-Fix LLC<br>101 NE 192 Avenue, Gainesville, Florida 32609 (352)-301-2922<br>Copyright &copy; 2009 - 2012<br>All Rights Reserved.</div>

See result in attached screenshot. (Is that what you intended?)

Or, you may want to consider using fixed positioning. That way, the up-arrow will always stay in the lower, right corner of the window - independent of scrolling.
Attachments:
User 2388388 Photo


Registered User
129 posts

That's close but I want better control of it's positioning.

I'd like to be able to work with margins so I can move it to "just the right spot" that looks the best (cornered in the Lower RH Corner of the footer)

Any ideas on that??

BTW, Can you place the sample code in the body of your response vs in a code box? (It makes it hard to get a visual of)

I do like the idea of fixed positioning but I'd rather not have it fixed.

Thanks
User 1948478 Photo


Senior Advisor
1,850 posts

Margin-top will take care of the detailed vertical positioning (see corresponding screenshot):

<div class ="ItemCenter">
<a href="#" title="Return to Top"><img src="return-to-top.gif" width="30" height="37" alt="Clickable Arrow to Return to Top of page" title="Return to Top" border="0" style="float:right; margin-top:50px;"></a>
Content Created by Stuart Kaufman / Your-Adrenaline-Fix LLC<br>101 NE 192 Avenue, Gainesville, Florida 32609 (352)-301-2922<br>Copyright &copy; 2009 - 2012<br>All Rights Reserved.</div>

I'll leave it to you to figure out the detailed horizontal positioning! ;)
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.