The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Christian J
post Apr 23 2019, 03:49 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,218
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
RainLover
post Apr 23 2019, 11:39 PM
Post #3


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 #4


.
********

Group: WDG Moderators
Posts: 8,218
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 #5


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

Posts in this topic


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

 



- Lo-Fi Version Time is now: 19th September 2019 - 08:02 PM