Grow your CSS skills. Land your dream job.

navigation bar styling problem

  • # January 29, 2013 at 7:23 am

    http://i49.tinypic.com/18ycjt.png
    Plz check the image above . you will see two navigation bar .

    First one is the example , which I want to create but I have created the second one .

    How can I remove the extra border on the right ?

    How can I shorten the height the border?

    In example only the first menu (about us) aligned on the left and rest of them are aligned in center , how can I do this ?

    # January 29, 2013 at 7:41 am

    We really need to see a link to a live site or a reduced case in Codepen

    # January 29, 2013 at 8:38 am

    > How can I remove the extra border on the right ?

    li:last-child {
    border-right: 0;
    }

    > In example only the first menu (about us) aligned on the left and rest of them are aligned in center , how can I do this ?

    li {
    text-align: center;
    }
    li:first-child {
    text-align: left;
    }

    # January 29, 2013 at 10:36 am

    As for your border height issue, there is no single CSS property that will let you set a border that is 50% high.

    You can set different heights for the anchor tags and list items and only apply the border to the anchor tags but this will leave you with a reduced ‘clickable’ area.

    I seem to recall someone coming up with something previously in the forums that **might** be the answer but I think it involved playing around with margins?

    I think it was @chrisburton but whether code still exists or not is another matter.

    Perhaps a search of the site?

    # January 29, 2013 at 11:18 am

    > How can I shorten the height the border?

    a { line-height:1em; }

    # January 29, 2013 at 11:28 am

    @Miller What will that achieve? Isn’t 1em the default?

    As I said..

    >You can set different heights for the anchor tags and list items and only apply the [EDIT] **only** [END EDIT] border to the anchor tags but this will leave you with a reduced ‘clickable’ area.

    # January 29, 2013 at 11:29 am

    @Paulie_D, I agree with you, the answer lies in a negative margin, I just don’t have time to tinker with it right now.

    # January 29, 2013 at 11:31 am

    >the answer lies in a negative margin, I just don’t have time to tinker with it right now.

    Yeah I thought so.

    Frankly, I don’t think it would be worth the effort when a very tiny image would serve just as well. :)

    # January 29, 2013 at 11:50 am

    > What will that achieve? Isn’t 1em the default?

    default is something like 1.4em

    line-height:1em will reduce line height to font size so height of the element and its border will be the same with font size, but yes it will reduce ‘clickable’ area too (depends on what are you doing.. it’s just text links or it’s some kind of buttons with clickable area).

    Anyway you can use right positioned background image for border and use data:image to save number of http requests ( http://css-tricks.com/data-uris/ )

    # January 29, 2013 at 11:53 am

    Here’s with linear-gradient on a pseudo element

    http://codepen.io/ChrisPlz/pen/HxsoC

    I suppose after looking at my own pen, there’s ways you could use a pseudo element without a linear gradient, but where’s the fun in that

    # January 29, 2013 at 3:13 pm

    thanks to ChrisP , Miller ,Paulie_D

    I have learned a lot of new things from you

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".