The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> Vertical line, Need a vertical line at side of my buttons
post Feb 19 2017, 07:08 AM
Post #1


Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267

I am trying to make vertical lines at the sides of my buttons to separate them, I have managed to do so but the button in the middle has double lines (making them wider). How can I add single vertical lines to each button separately?

#div2 ul li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    border-left: solid #404040;
    border-right: solid #404040;
    border-width: 1px;


        <li><A HREF="Index.html" class="active">About</A></li><li><A HREF="About.html">Resume</A></li><li><A HREF="Contact.html">Contact</A></li>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
post Feb 19 2017, 07:40 AM
Post #2

Don't like donuts. Don't do MySpace.

Group: WDG Moderators
Posts: 17,927
Joined: 9-August 06
Member No.: 6

Have a border only on one side of the buttons. I'd choose border-right. Then add a left border to the first button.

The reason for the right border is simply that since this is a site menu, the leftmost button is probably Home and it's less likelythat you later add another button to the left of it than that you add a new button to the right of the last one. So, less to edit in the future. wink.gif

Wait, you said separate? Maybe you don't want an outer border on the first and last buttons? Same thing, border on one side, only in this case you have to later remove the border for one of the outer buttons (by giving it a class or id, whatever fits, and add a rule that overrides the first one).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 20th June 2018 - 08:40 AM