SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple "right align" question

    I'm in the middle of building www.bluevolume.com/e61st, and as you can see, the "Contact Us" link is aligned to the right of the nav bar. My problem is that when you hover over it, the effect is not what it should be. I know the problem is in the positioning, and I tried floating it right, but it went to the next line. Any ideas for a quick fix instead of using an absolute position (which somehow screws with the line height)?

    Edit:

    I was able to fix the problem but assigning all links float positioning, and using margin instead of line height to center vertically. Sorry for takking up space

  2. #2
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, the current hover effect [top & bottom bar] is coz the Contact Us is under a div with id=navbar.

    May I suggest you use ul, li for your navbar. e.g
    <div id="navbar">
    <ul id="link">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Shoes</a></li>
    <li id="farright><a href="#">Contact Us</a></li>
    </ul>
    </div>
    And for CSS: you could use the following:
    #link ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #link li
    {
    display: inline;
    list-style-type: none;
    }


    #link a:hover
    {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    }

    #farright {
    padding-left: XX px;
    }
    for #farright, use padding to move the contact us link wayyy to the far right.

    I dont know if it'll work properly since I have not tried it out. Give it a shot, it might work. Lemme know how goes.


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
  •