Vertical line, Need a vertical line at side of my buttons |
Vertical line, Need a vertical line at side of my buttons |
Seniorbfc |
Feb 19 2017, 07:08 AM
Post
#1
|
Newbie 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?
CODE #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; } CODE <ul> <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> </ul> </li> |
pandy |
Feb 19 2017, 07:40 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. 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). |
Lo-Fi Version | Time is now: 25th April 2024 - 10:25 PM |