Ready to get started?Download WordPress


Anchor Tag Alignment (10 posts)

  1. ajamali1
    Posted 3 years ago #

    Hello, I have a simple question which I cant figure out how to solve it.

    I have a div that has the id=footer and has my site's copyright info and about 4 <a href... anchor tags. In my stylesheet all these anchors are aligned to the left, which is fine, but I want the last anchor tag to be aligned to the right and leave the rest of them untouched.

    How can I achieve this, can I assign an ID or CLASS name to this anchor tag and then align it in stylesheet? and if so how do I do that?

    <div id="footer">
        copyright 2011 - <a href=... - <a href=.... - <a href=... <a href=...( I WANT THIS ONE TO ALIGN RIGHT )
  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Just apply a class or id to the last anchor/link and then style it using CSS.

  3. ajamali1
    Posted 3 years ago #

    ok but how do i do that in my css sheet, i mean do i say:

    #footer id/class or
    #footer.id/class or
    #footer a.id/class or
    #footer a:id/class

    ^ this is where i am confused

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    #footer #anchor_id

  5. ajamali1
    Posted 3 years ago #

    I did that and nothing happened; here is the css code:

    #footer { clear: both; width: 945px; height: 50px; padding-left: 5px; text-align: left; color: #FFFFFF; padding-top: 14px; margin-left: auto; margin-right: auto; font-size: 11px; }
    		#footer a { color: #e0e0e0; }
    		#footer a:visited { color: #FFFFFF; }
    		#footer a:hover { color: #FFFFFF; text-decoration: underline; }
                    #footer #footer-login { text-align: right; }

    and the actual code in my footer:
    <div id="footer"> <?php _e('© 2007-2011 ','Basic'); ?> <a href="http://www.site.com">site.com</a> - <a href="http://www.site.com/about-us/terms-of-use">Terms of Use</a> - <a href="http://www.site.com/about-us/abuse">Abuse</a><a id="footer-login" href="http://sitei.com/login">Login</a></div>

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    Anchors are inline elements. To align them right you have to either place them inside a block-level element or use CSS display:block;

    #footer #footer-login {
    text-align: right; }
  7. ajamali1
    Posted 3 years ago #

    Got it, thanks but why isn't the last link aligned horizontally with other links, I mean after applying this css i feel like the last link is one line below the other links

    like this:

    link - link - link *********************************
    ********************************************** link

  8. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Since you are creating a list of links in the footer, you may be aided by using the semantically more-correct unordered list to contain that list of links. Then place each link, which is really a list item, inside LI tags.

    Then, simply apply an ID to (or use an appropriate CSS selector for) the last LI, and apply float:right to that ID.

    (This approach also fulfills the block-level element requirement, as mentioned by esmi.)

  9. ajamali1
    Posted 3 years ago #


    wouldn't unordered list put all the links in a list form? like:

    * link
    * link
    * link

    I don't want that to happen, I still want to keep them horizontal next to each other rather than under each other.

  10. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    You can easily adjust that via CSS.

    use list-style-type: none; and display: inline; for the list items.

Topic Closed

This topic has been closed to new replies.

About this Topic