Support » Themes and Templates » Anchor Tag Alignment

  • 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 )
Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi


    Forum Moderator

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

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

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

    ^ this is where i am confused



    Forum Moderator

    #footer #anchor_id

    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=""></a> - <a href="">Terms of Use</a> - <a href="">Abuse</a><a id="footer-login" href="">Login</a></div>



    Forum Moderator

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

    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

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


    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.

    You can easily adjust that via CSS.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Anchor Tag Alignment’ is closed to new replies.