CODEWITHSUNDEEP
cssborder
user981261
user981261

Reputation:

Nav bar border issue

I am working on a new home page, trying to avoid images as much as possible and I have a slight issue with the borders on the Nav bar. I can't really think of a way to get the sides of the borders to link into each other with padding. At the moment the sides are not touching so it doesn't look continuos. I may be missing something obvious but I can't think of a way to meet them up. Any one have any ideas?

The only way I can think to solve this is with classes on each of the li elements but am wondering if there is an optional way.

Here is a Fiddle for you to check :

http://jsfiddle.net/WZF4M/

Upvotes: 1

Views: 98

Answers (3)

ram
ram

Reputation: 777

You may want to use the following in li styling? A tweak though; not tested in all browsers.

li{
    display: inline;
    margin-right: -5px; /*Add this*/
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

Option 2:-

A more elegant solution right here at SO.

How do I remove extra margin space generated by inline blocks?

You may have to make changes to your html for this.

<ul>
    <li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>

Upvotes: 1

Jared
Jared

Reputation: 12524

What you can do to give this a more continuous feel is to only use border-right on your li elements in your menu.

http://jsfiddle.net/WZF4M/3/

I have updated your fiddle.

Let me know if this is what you were looking for.

Upvotes: 0

j08691
j08691

Reputation: 207901

Try this jsFiddle example. I floated the list items left instead of displaying them inline. That removes the gaps between them. Then I positioned the list itself relatively and move it up slightly.

CSS:

ul{
    float: right;
    position:relative;
    top:-14px;
}
li{
    float:left;
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

Upvotes: 1

Related Questions