Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontally Center This Element

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40603
    NoizyCr1cket
    Participant

    Hi. I’m working on some navigation and I have a little tooltip that drops down when you hover over each navbutton. The text in the tooltip needs to be centered within the navbar, but “auto” left and right margins doesn’t work for this. I’m suspecting it may be because the element is absolutely positioned (which is because I don’t want the tooltip to push the below elements down when it moves).

    Here’s a test page: http://gchiller.com/test/index-%28IP%29.html

    Can someone please help?

    #113333
    Paulie_D
    Member

    It’s not perfect but try adding about 30px of left margin to the p .navtip inside your a link.

    #113334
    NoizyCr1cket
    Participant

    @Paulie_D That works…but only for the portfolio and contact buttons, which have a width of 86px and 89px, respectively. And I don’t want to have to use a different padding for each button, although I will if that is the only way.

    #113335
    Paulie_D
    Member

    I tried margin-left & right of 25% which works on my laptop BUT it splits the p on two lines.

    #113336
    Paulie_D
    Member

    Oooh…wait.

    Change width:auto to width:100% on p.navtip.

    #113337
    NoizyCr1cket
    Participant

    Yeah, that works. The only thing is, I’ll have to change the a element to width:100%, so it’s not all glitchy on the sides of the word. Or I could just use -20px of padding instead of margin. Is there a way to do this where the only rollover area is the word itself? (not the whole 100% width of the navbar?

    #113338
    NoizyCr1cket
    Participant

    Actually, the padding idea isn’t working, so I do have to make the a element 100% width of the navbar. Unless there is another way.

    #113339
    NoizyCr1cket
    Participant

    Hmm…the width: 100% isn’t working on the a element. I’m stumped.

    #113340
    NoizyCr1cket
    Participant

    Ah! There we go. Display:block on the a fixed it! I guess I’ll just deal with the a element being the whole width of the navbar.

    Thanks for the help! @Paulie_D

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.