How to change part of the border color |
How to change part of the border color |
RainLover |
Apr 23 2019, 02:07 AM
Post
#1
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
Here's a sample navigation menu:
CODE nav { border-top: 5px solid; } nav a { font-size: 12px; padding: 1em; } CODE <nav> <a href="#">Page 1</a> <a href="#" id="current">Page 2</a> <a href="#">Page 3</a> <a href="#">Page 4</a> </nav> DEMO How can I change the part of the border color above the current page so it looks like this: |
Christian J |
Apr 23 2019, 03:49 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Oops, sorry. Like this?
CODE nav { display: table; border-top: 1px solid red; } nav a { display: table-cell; padding: 1em; color: #000; background: #fff; border-top: 5px solid pink; } nav a.current { color: red; background: pink; border-top: 5px solid red; } |
RainLover |
Apr 23 2019, 11:39 PM
Post
#3
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
Oops, sorry. Like this? CODE nav { display: table; border-top: 1px solid red; } nav a { display: table-cell; padding: 1em; color: #000; background: #fff; border-top: 5px solid pink; } nav a.current { color: red; background: pink; border-top: 5px solid red; } Not really! How can I darken the <nav> border part above the "current" page? Please see the dark gray area: |
Christian J |
Apr 24 2019, 04:00 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Not really! How can I darken the <nav> border part above the "current" page? You can't literally apply two colors on a single top border like that (that's why I let the ticker border be part of the link instead). The border-style values may produce some shading, but then it's usually two equally thick lines, and browsers may render it differently. QUOTE Please see the dark gray area: Isn't that what I did (except that I used other colors): |
RainLover |
Apr 24 2019, 04:33 AM
Post
#5
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
|
Lo-Fi Version | Time is now: 27th April 2024 - 09:18 PM |