- This topic is empty.
-
AuthorPosts
-
November 7, 2016 at 10:08 am #247597ChristianAParticipant
I have a few questions/requests surrounding this navbar.
- I want to move the text elements to the right but I am reversing the order in which they are displayed when I float them so I am attempting to move the first element over by using the left margin and that doesn’t seem to work. How can I do that?
-
I really like how some navbars have all of the elements flush right up against each other (no space in between where the cursor changes from the link cursor to the regular pointer). How can I achieve that?
I can not figure this out for the life of me. Any help would be appreciated. Below is the link to the codepen containing my work so far.
November 7, 2016 at 11:01 am #247599BeverleyhParticipantFor point 1,
text-align:right;
on the menu’s ul element will send them all over to the right-hand side of the page.For point 2, we’d usually set the menu’s a elements as
display:block;
to make the active link area extend the full width of their parent li elements.November 7, 2016 at 11:12 am #247600ChristianAParticipantWhen I use the display:block on the a elements the elements then stack on top of each other.
The answer for point 1 is spot on.
This is the new CSS below.
November 7, 2016 at 11:16 am #247601ChristianAParticipantWhen I use the display:block on the a elements the elements then stack on top of each other.
The answer for point 1 is spot on.
This is the new CSS below.
http://codepen.io/ChristianA/pen/JbdoqK
I notice that in the codepen display that the elements are centered in the middle of the black bar (as I would like them) but in Firefox they are at the top of the bar. I am using a reset in order to override the browser’s presets for margins and padding. What can I do in order to center the text in the middle of the bar?
November 7, 2016 at 11:44 am #247602BeverleyhParticipantWhen I use the display:block on the a elements the elements then stack on top of each other.
That was for something else – my misunderstanding. To make the li buttons sit flush up against each other you have to get rid of the spaces that are created by new-lines in the html. Here are some ways to do that https://css-tricks.com/fighting-the-space-between-inline-block-elements
What can I do in order to center the text in the middle of the bar?
Here are ways to vertically align elements https://css-tricks.com/centering-css-complete-guide/
And, the borders of the elements are not touching on the left and right sides of each element.
Try cancelling one of the side borders on the li elements with
border-left:0;
. Then useli:first-of-type { border-left:2px solid #fff }
to put it back on the first li.and for the element over which the cursor is hovering to be highlighted
You can use the :hover selector
li a:hover { /* your styles here */ }
November 7, 2016 at 12:31 pm #247605ChristianAParticipantMaking the li elements inline-blocks helped but did not move the text to the middle of the bar.
The hover works now. I’m not sure what I was doing wrong earlier when I tried to do that.
I used a technique from the link you provided and it was successful.
November 7, 2016 at 2:13 pm #247610ChristianAParticipantIf you are still willing to help I could use it with trying to move the text down to the middle of the bar.
November 7, 2016 at 3:34 pm #247613BeverleyhParticipantOk, what have you tried?
There’s also the vertical-align with faux tables technique if you haven’t tried it already van$eodesign.com/blog/demo/vertical-centering/table-cell.php
Note: Change the $ to an ‘s’ before pasting the link above into your address bar. The forum won’t allow me to post anything with that 3-letter acronym for search engine friendliness.
November 7, 2016 at 7:38 pm #247625ChristianAParticipantI have tried the things I mentioned in my earlier post. The inline block method worked to move all of my elements closer but there is still a small amount of space in which the cursor changes between the two cursor styles as it moves across from one element to the next.
Do you think that making the element fit perfectly into the height of the navbar would help? I’m not sure how to do that but at that point I think that I can use the vertical-align in order to move the text to where I want it.
February 27, 2017 at 7:16 am #247612BeverleyhParticipantOk, what have you tried?
There’s also the vertical-align with faux tables technique if you haven’t tried that already http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.