navigation bar styling problem

[sshuvro58]

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 ?

[Paulie_D]

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

[Paulie_D]

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?

[Miller]

> How can I shorten the height the border?

a { line-height:1em; }

[Paulie_D]

@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.

[Paulie_D]

>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. :)

[Miller]

> 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 ( https://css-tricks.com/data-uris/ )

[sshuvro58]

thanks to ChrisP , Miller ,Paulie_D

I have learned a lot of new things from you

[Author]

Posts