Anchor Tag Alignment

  • ajamali1

    (@ajamali1)


    15 years, 2 months 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 )
Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    15 years, 2 months ago

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

    Thread Starter ajamali1

    (@ajamali1)

    15 years, 2 months 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

    esmi

    (@esmi)

    15 years, 2 months ago

    #footer #anchor_id

    Thread Starter ajamali1

    (@ajamali1)

    15 years, 2 months 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>

    esmi

    (@esmi)

    15 years, 2 months 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 {
display:block;
text-align: right; }
    Thread Starter ajamali1

    (@ajamali1)

    15 years, 2 months 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

    Chip Bennett

    (@chipbennett)

    15 years, 2 months 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.)

    Thread Starter ajamali1

    (@ajamali1)

    15 years, 2 months ago

    Chip,

    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.

    Chip Bennett

    (@chipbennett)

    15 years, 2 months ago

    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.