Help - Search - Members - Calendar
Full Version: How to change part of the border color
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
RainLover
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
Christian J
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
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.
Christian J
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
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
I think the OP meant the exact styling in the attached picture, with a thin NAV border above the thick link border.
pandy
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
RainLover
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
Christian J
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):

Click to view attachment
RainLover
QUOTE(Christian J @ Apr 24 2019, 04:00 AM) *

Isn't that what I did (except that I used other colors):
Click to view attachment

Duh, sorry! I forgot to change a.current to a#current.
Thanks for the continuous support and help! 🌹
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.