Positioning Anchor in Div

HTML & CSS
1

I’m unable to move the anchor “Back to Top” vertically it is just locked.
[Page]

HTML

<img class="right" src="images/demo.jpg" alt="right image">
        <br class="clear">
            </div><!--end inner-->
     <div id="buttomlinks"><a href="">Back to Top</a></div>
    <div id="foot"></div>

CSS

#buttomlinks a {
  margin: 0px 0px 0px 275px;
}

Another question, if I wanted to place the words “back” and “forward” to be placed on either side of the words “back to top” should I place each word within a anchor then within a class, then position the words to be placed on either side?

2

I’m not sure exactly what you want to do, but perhaps using negative margin values or css positioning will help.

3

It’s being held down by the margin on the .left div:

#inner .left {
        float:left;
        margin:0 0 [COLOR="Red"]32px[/COLOR] 32px;
        display:inline;
}
4

I’ve removed the margin and including the 32px in the #inner.left and it continues to be locked in to place.

5

I changed the page by adding a <unordered list> I can’t get the entire <unordered list> to move as a block and give each list spacing as you’ll see it mashed together.

6

Hi, can you put it back broken with the margin not working? I just placed the margin on the <ul> and it worked just fine. It’s possible the vertical margin was just collapsing for you. A 1px padding or border would have fixed it.

7

I updated the page, take a look is that what you mean ? How do I space the words apart ?

I got the words spaced apart, but I don’t like the way this code look the page is updated but here is the part of the HTML:

<ul class=“baselinks”><li>
<a href=“#”>Previous</a></li>
<li><a href=“#”>Back to top</a></li>
<a href=“#”>Next</a>
</ul>

As soon as I add the missing <li></li>

<li><a href=“#”>Next</a></li>

The base of the page breaks.

8

The 200px right margin on .baselinks li will cause the 3rd li to drop due to insufficient horizontal space on the line.

Consider what you’re trying to achieve here:

  • align “Previous” to the left
  • align “Next” to the right
  • align “Back to top” to the center

You’re not going to do this reliably with margin offsets. Try a combination of centering and absolute positioning.

Firstly, wrap the “Next” anchor in a li and give the “Previous” and “Next” anchors a class.

<ul class="baselinks">
	<li><a class="prev" href="#">Previous</a></li>
	<li><a href="#">Back to top</a></li>
	<li><a class="next" href="#">Next</a></li>
</ul>

Zero out the default horizontal padding and margin on .baselinks ul (set the vertical to whatever you prefer), set position:relative to allow elements contained within it to be be absolutely positioned relative to the ul, and set the text-align to center for “Back to top”. For IE6, include zoom:1 or another hasLayout trigger (or else .prev will not align to the left).

.baselinks {
	padding: 0;
	margin: 0;
	position: relative;
	text-align: center;
	zoom: 1;
	}

Next, set the li to display inline, and remove the default list style.

.baselinks li {
	display: inline;
	list-style-type: none;
	}

Then give .prev and .next absolute positioning.

.prev, .next {
	position: absolute;
	}

Position .prev to the left and .next to the right.

.prev {
	left: 0;
	}

.next {
	right: 0;
	}
9

Add the <li> back in, the only thing I see you get iwth it (when adding it via firebug) is a float drop
Also, #foot needs clear:both to clear itself from the list.

But in short, margins IS seperting the <li>'s. As it should :wink:

You have to lower the margins a bit…but yeah.

10

Thanx Victor, that has fixed it. And to my understanding I have gained some insight into why the <li> were not being positioned correctly.

What is the HTML code that when you click on the link it automatically will scroll back to the top of the page ?

11

You have to have an element right after <body> starts with an id of “top” (or something. Anything really). Wherever you place the id=“top” element is where it will go.

Then place an anchor and tell it to go there

<a href=“#top”>Go to the top</a>

12

Thank you :slight_smile:

13

You’re welcome :slight_smile: