- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
It’s not perfect but try adding about 30px of left margin to the p .navtip inside your a link.
@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.
I tried margin-left & right of 25% which works on my laptop BUT it splits the p on two lines.
Oooh…wait.
Change width:auto to width:100% on p.navtip.
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?
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.
Hmm…the width: 100% isn’t working on the a element. I’m stumped.
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