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, 04:11 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
This can be done in several ways:
- In a server-side script, by giving the current page's link a CLASS value when generating the menu's HTML. - With javascript, by looping through the links and change the one who's URL matches the page's: CODE if(a[i].href==document.location.href) { ... } - With CSS, by giving each HTML page's BODY element a unique CLASS value, and use all the pages' CLASS values in the nav menu links. Then you can create stylesheet rules like: CODE body.foo a.foo {...} body.bar a.bar {...} ... |
RainLover |
Apr 23 2019, 01:58 PM
Post
#3
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
This can be done in several ways: - In a server-side script, by giving the current page's link a CLASS value when generating the menu's HTML. - With javascript, by looping through the links and change the one who's URL matches the page's: CODE if(a[i].href==document.location.href) { ... } - With CSS, by giving each HTML page's BODY element a unique CLASS value, and use all the pages' CLASS values in the nav menu links. Then you can create stylesheet rules like: CODE body.foo a.foo {...} body.bar a.bar {...} ... Thanks for the answer, but I already know how to show the "current" page. What I don't know is how to show it with the specified style. |
Christian J |
Apr 23 2019, 03:49 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,679 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; } |
pandy |
Apr 23 2019, 03:51 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
What's the difference? How do you show it if not with styling?
If we take Christian's CSS example you add your border styling where he used dots. CODE body.foo a.foo { border-top: 5px solid blue } body.bar a.bar { border-top: 5px solid blue } |
Christian J |
Apr 23 2019, 05:49 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
I think the OP meant the exact styling in the attached picture, with a thin NAV border above the thick link border.
|
pandy |
Apr 23 2019, 07:15 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
OK. But I think it looks like the link border covers the nav border. I don't see a thin line there. But your eyes are probably better than mine, so you can take this one.
|
RainLover |
Apr 23 2019, 11:39 PM
Post
#8
|
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
#9
|
. Group: WDG Moderators Posts: 9,679 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
#10
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
|
Lo-Fi Version | Time is now: 5th June 2024 - 02:05 AM |