The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to change part of the border color
RainLover
post 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:

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2019, 04:11 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
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 {...}
...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 23 2019, 01:58 PM
Post #3


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ Apr 23 2019, 04:11 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2019, 03:49 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2019, 03:51 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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 }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2019, 05:49 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2019, 07:15 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 23 2019, 11:39 PM
Post #8


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ Apr 23 2019, 03:49 PM) *

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:

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 24 2019, 04:00 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(RainLover @ Apr 24 2019, 06:39 AM) *

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:

IPB Image

Isn't that what I did (except that I used other colors):

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 24 2019, 04:33 AM
Post #10


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ Apr 24 2019, 04:00 AM) *

Isn't that what I did (except that I used other colors):
Attached Image

Duh, sorry! I forgot to change a.current to a#current.
Thanks for the continuous support and help! 🌹
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:21 AM