Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to change part of the border color

Posted by: RainLover Apr 23 2019, 02:07 AM

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>


https://jsfiddle.net/Mori/38fL5y7c/

How can I change the part of the border color above the current page so it looks like this:

IPB Image

Posted by: 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 {...}
...

Posted by: RainLover Apr 23 2019, 01:58 PM

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.

Posted by: 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;
}

Posted by: pandy Apr 23 2019, 03:51 PM

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 }

Posted by: Christian J Apr 23 2019, 05:49 PM

I think the OP meant the exact styling in the attached picture, with a thin NAV border above the thick link border.

Posted by: pandy Apr 23 2019, 07:15 PM

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

Posted by: RainLover Apr 23 2019, 11:39 PM

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

Posted by: Christian J Apr 24 2019, 04:00 AM

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 https://www.w3.org/TR/css-backgrounds-3/#typedef-line-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

Posted by: RainLover Apr 24 2019, 04:33 AM

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! 🌹

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)