html file
<ul id="navbar">
<li class="selected">
HOME
</li>
<li>
ABOUT US
</li>
</ul>
css file
ul#navbar li {
font-size: 13px;
padding: 10px;
display: inline;
text-decoration: none;
border: 1px solid #aaaaaa;
}
and now I want to add bottom border to green color only on active list item.
.selected {
border-bottom: 5px solid #37F053;
}
but this does not work well. it still has the #aaa bottom border color
Using !important everywhere is bad practice. It means you don't have control on your style-sheet. Correct rule will be:
ul#navbar li.selected {
border-bottom: 5px solid #37F053;
}
Change .selected to ul#navbar li.selected
Related
Expected result: the active link has a black bottom border. when hovering over links (not including the active page) the bottom bar is shown with a different color.
Actual result: the black bottom border appears under the active page link, but when hovering over the link it remains and a second, colored bottom border appears.
I was using similar code to control background color and it worked fine. But when I switched to trying to use bottom-border, I got an unexpected result -
Two bottom borders appear, one black and one colored.
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid transparent
}
ul.topnav li a:hover:not(.active) {
border-bottom: 2px solid #61a5c2;
}
ul.topnav li.active {
border-bottom: 2px solid black
}
<header>
<nav>
<ul class="topnav">
<li class="active">Home</li>
<li class="">Diagnosis</li>
<li class="">Data Visualization</li>
<li class="right">About</li>
</ul>
</nav>
</header>
You can just change your css to below. "active" class is on li so this check will make sure if the black border is there then do not put border on hover. so :not(.active) will be on li
ul.topnav li:not(.active) a:hover {
border-bottom: 2px solid #61a5c2;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid transparent
}
ul.topnav li:not(.active) a:hover {
border-bottom: 2px solid #61a5c2;
}
ul.topnav li.active {
border-bottom: 2px solid black
}
<header>
<nav>
<ul class="topnav">
<li class="active">Home</li>
<li class="">Diagnosis</li>
<li class="">Data Visualization</li>
<li class="right">About</li>
</ul>
</nav>
</header>
So, if I got you right, you want all your li > as have a colored bottom border when hovered except your active a which should keep it's black bottom border; you're problem was in declaring your selector for your active li, you need to hit ul.topnav li.active a{ border-bottom: 2px solid black; }, which indicates to the a of the active li not the li itself, and also you should change ul.topnav li:not(.active) a:hover to ul .topnav li a:hover {border-bottom: 2px solid #61a5c2;}.
Consider this:
A link is active, so the list item is given a bottom border because of this code:
ul.topnav li.active {
border-bottom: 2px solid black
}
Now lets hover on the anchor tag of this active link. You are not adding any "active" class to the anchor tag. so on hover the following code is applied always for all anchor tags:
ul.topnav li a:hover:not(.active) {
border-bottom: 2px solid #61a5c2;
}
so you end up seeing both borders. Change the selector for hover styles to make this work.
I have the following html. When I hover on the last li, a border should generate. When I hover on the last li, other li's are moving.
I have gone through these 2 questions.
list item width height issue
fixed with span inside li
I can't able to stop moving the element.
HTML:
<div class="menu_right">
<ul class="menu">
<li>Text 1</li>
<li>Text 2</li>
<li class="your_space"><span>Text3</span></li>
</ul>
</div>
Kindly check my jsfiddle.
It maybe a simple issue. But I can't able to find a solution to fix it.
Use a transparent border on all the other <li> to make it good.
ul.menu li {
float: left;
list-style-type: none;
border: 2px solid transparent;
}
Fiddle: https://jsfiddle.net/8cu4bL3s/
Please add border: 2px solid transparent; to all the li
.menu_right {
float: right;
}
ul.menu li {
float: left;
list-style-type: none;
border: 2px solid transparent;
}
ul.menu li a {
text-decoration: none;
}
li.your_space {
width: 100px;
}
li.your_space:hover {
border: 2px solid black;
}
li.your_space a>span {
display: block;
}
<div class="menu_right">
<ul class="menu">
<li>Text 1
</li>
<li>Text 2
</li>
<li class="your_space"><span>Text3</span>
</li>
</ul>
</div>
another solution
Add padding:2px; to all li and on hover remove padding of the hovered li and add border to it
Add this CSS
.menu_right{
float:right;
}
ul.menu li{
float: left;
list-style-type: none;
padding:2px;
}
ul.menu li a{
text-decoration:none;
}
li.your_space{
width:100px;
}
li.your_space:hover{
border: 2px solid black;
padding:0;
}
li.your_space a>span{
display:block;
}
Explaining:
This is because you are setting a border property on hover, which causes the li to add the border property to its height / width.
You need to set transparent borders on all your li independent on they state, so when you hover any li you won't be adding a border but changing its color.
ul.menu li {
border: 2px solid transparent;
}
course blocks will move, you add a 2 pixel border (left + right = 4px). As an alternative I can propose "outline"
li.your_space:hover{
outline: 2px solid black;
}
I have an issue, I am trying to add 1 px to an underlined text, but researching a lot on the web I found that the only way was adding a border and a padding bottom
But the width is longer than the word and I want that the effect is the same form a underline effect, cropped with the word width.
Here is my fiddle
https://jsfiddle.net/0orb5h4s/1/
And my try to the selected underline class
/* Underline Issue */
.selected {
border-bottom: 1px solid #000;
/* text-decoration: underline; */
padding-bottom: 1px;
}
I think a span here is what you are looking for:
.horizontal-tabs li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.horizontal1,
.horizontal2 {
border-left: 1px solid #000;
}
/* Underline Issue */
.selected span {
text-decoration: underline;
}
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected"><span>Shipping Information</span>
</li>
</ul>
</div>
If you are actually looking to distance the underline from the text then you previous technique still works if you use the span as mentioned before.
.horizontal-tabs li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.horizontal1,
.horizontal2 {
border-left: 1px solid #000;
}
/* Underline Issue */
.selected span {
border-bottom: 1px solid #000;
padding-bottom: 1px;
}
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected"><span>Shipping Information</span>
</li>
</ul>
</div>
If you add a span inside your li elements you could use the border style on the span element instead. I edited your fiddle code and removed some unnecessary classes that you were using for setting the border-left style.
HTML
<div class="tabs">
<ul class="horizontal-tabs">
<li><span>Description</span></li>
<li><span>Product Care</span></li>
<li class="selected"><span>Shipping Information</span></li>
</ul>
</div>
CSS
.horizontal-tabs li {
display: inline-block;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-left: 1px solid #000;
}
/* This removes the first border */
.horizontal-tabs li:first-child {
border-left: none;
}
/* Underline Issue */
.horizontal-tabs li.selected span {
border-bottom: 1px solid #000;
padding-bottom: 1px;
display: inline-block;
}
JSFiddle
Here is an answer - https://jsfiddle.net/0orb5h4s/6/
Just added
.selected span {
border-bottom: 1px solid #000;
}
and
<li class="horizontal2 selected"><span>Shipping Information</span></li>
and removed the bottom border from the selected li.
The border applies to the padding as well and that's why adding a span moves the border to the content inside the padding.
Why don't you add a span?
HTML
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected">
<span>Shipping Information</span>
</li>
</ul>
</div>
CSS
.selected span {
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
You can check my solution here: https://jsfiddle.net/lordfox/0orb5h4s/4/
Hope that helps! :)
I am trying to recreate an effect that can be seen in the top links of http://math.stackexchange.com. The effect is that there is some text and a line below, upon hover both the text and segment of line below it changes color.
Here is what I have: http://jsfiddle.net/4m7zc/ I tried making the bottom borders overlap but it didn't work. What is the appropriate way to do this?
HTML
<div class="top-links text-center">
TEA
|
COFFEE
|
SODA
|
ALCOHOL
</div>
CSS
.top-links {
font-size:16px;
color: #b77b48;
border-bottom: 4.5px solid #db9356;
}
a.top-link {
color: #b77b48;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid #db9356;
}
a.top-link:hover {
color: red;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid red;
}
If you want to copy the site exactly, you can use a list with text-align:center set on the ul then display:inline-block set on each li. Then simply apply a border on mouse hover to any links, and offset their bottom margin by the border width so they dont 'pop' out of place. Simple!
Demo Fiddle
HTML
<ul>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
</ul>
CSS
ul {
list-style:none;
text-align:center;
border-bottom: 3px solid #000;
margin:0;
padding:0;
}
li:hover a {
color: #d02027;
border-bottom: 3px solid #d02027;
margin-bottom:-3px;
}
a {
font-size: 14px;
color: #000;
padding: 6px 12px 6px 12px;
text-transform: uppercase;
text-decoration: none;
display: block;
}
li {
padding: 0 5px;
display: inline-block;
}
You can try the following:
Display your links as inline-blocks,
Position them relatively, changing top to the same as your border height,
Use a whole integer for your border, to avoid any rounding issues:
a.top-link {
display:inline-block;
position:relative;
top:4px;
color: #b77b48;
border-bottom: 4px solid #db9356;
}
JSFiddle
If the 4px of space above your buttons is bugging you, you can combat this by giving a -4px top margin to the parent:
.top-links {
/* other styles */
margin-top:-4px;
}
JSFiddle
Note: Don't use   to create margins between elements. That is what the CSS property margin is for.
remove the underline from a tag using text-decoration property like below, so it looks similar to what you expect (Instead of aligning the line better to remove
)
a {
text-decoration: none
}
JSFiddle
Try this>>>>DEMO JSFIDDLE
I removed the text-decoration from the a element then I rearranged the order of the code and added some CSS and HTML so the navigation doesn't mix up with the line as it can be seen in the jsfiddle.
HTML
<div class="top-links text-center">
NEWEST
<div class="line">|</div>
POPULAR
<div class="line">|</div>
TAGS
<div class="line">|</div>
USERS 
</div>
and the CSS
.top-links {
font-size:16px;
color: #b77b48;
/*border-bottom: 4.5px solid #db9356;*/
}
a.top-link {
color: #b77b48;
border-bottom: 4.5px solid #db9356;
}
a.top-link:hover {
color: red;
border-bottom: 4.5px solid red;
}
.line {
display:inline;border-bottom: 4.5px solid #db9356;
margin:-4px;
}
a {
text-decoration:none;
}
Check the jsfiddle at http://jsfiddle.net/dC8P2/2/ --if you need more help or this does not work please comment back. This works 100%.
Please you this HTML - it more accurate
HTML
<ul id="nav">
<li>Tea</li>
<li>Coffee</li>
<li>Soda</li>
<li>Alcohol</li>
</ul>
CSS
#nav {
margin:0;
padding:0;
}
#nav li {
float: left;
list-style:none;
}
#nav a {
display: block;
border-bottom: 3px solid #000;
padding: 5px 15px;
text-decoration: none;
}
#nav a:hover {
border-bottom: 3px solid #f00;
}
I'm trying to have an inline-block navigation bar. When someone hovers over the li, I want it to change background colors - simple enough.
It appears as though my code causes the background to be off about 2 inches.
Here is the offending code -
css-
#mainNav {
width: 100%;
background:#bbb;
border-right: 2px solid #777;
border-left: 2px solid #777;
border-bottom: 2px solid #555;
}
#mainNav ul li {
display: inline-block;
line-height:40px;
font-size: 20px;
padding: 0 15px 0 15px;
border-right: 2px solid #777;
}
#mainNav ul li.active {
background:#aaa;
}
#mainNav ul li:hover {
background:#aaa;
}
html-
<div class='container_12'>
<nav id="mainNav">
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Forums</a></li>
</ul>
</nav>
</div>
Screenshot:
Give margin-left to li will solve the problem.
DEMO
It should also be :
#mainNav ul li:active {
background:#aaa;
}
Just like hover is coded out. Still not sure about the original question though.