SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Anchor in Div

    I'm unable to move the anchor "Back to Top" vertically it is just locked.
    [Page]

    HTML
    Code HTML4Strict:
    <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
    Code 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. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure exactly what you want to do, but perhaps using negative margin values or css positioning will help.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's being held down by the margin on the .left div:

    Code:
    #inner .left {
            float:left;
            margin:0 0 32px 32px;
            display:inline;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've removed the margin and including the 32px in the #inner.left and it continues to be locked in to place.

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <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).

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

    Code CSS:
    .baselinks li {
    	display: inline;
    	list-style-type: none;
    	}
    Then give .prev and .next absolute positioning.

    Code CSS:
    .prev, .next {
    	position: absolute;
    	}
    Position .prev to the left and .next to the right.

    Code CSS:
    .prev {
    	left: 0;
    	}
     
    .next {
    	right: 0;
    	}

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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

    You have to lower the margins a bit..but yeah.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •