I am trying to remove an underline from links on a website. I tried to use "text-decoration: none;" but it wouldn't work. What syntax did I do wrong? or is there a better way to remove the underline?
<head>
<style>
font {
color: #ff9600;
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
You should use
a {
text-decoration: none;
}
in your stylesheet. text-decoration is what adds the underline, and this code removes it.
Side Note: Also, you should not be using the <font> tag, as it is obsolete. You should be using classes.
Try this:
<head>
<style>
font {
color: #ff9600;
text-decoration: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
check it out hope it would work..[![
<head>
<style>
font {
color: #ff9600;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
]1]1
Just move text-decoration: none; from font CSS to anchor tag a CSS. Will resolve your issue. Thanks
a {
text-decoration: none;
}
a {
text-decoration: none;
}
font {
color: #ff9600;
}
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
The reason that your code still has an underline, is because the Anchor tag <a> by default add the underline decoration to everything inside the tag. So you will have to apply the style to the "a" instead of the font - even though the font is inside the anchor.
<style>
a {
text-decoration: none;
}
</style>
Related
I have an a tag and a li inside it. The a tag colors the list items innterText. How can I nullify its effects on the color of its content and also remove the underline?
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>asd</li>
</ul>
</body>
</html>
It is invalid to have <a> inside <ul> tag in the way you did, and it's also won't pass the W3C validation. However, If I understand your question, you may try this:
<ul>
<li>
<a href="#">
<ul>
<li>asd</li>
</ul>
</a>
</li>
</ul>
In order to remove the underline, you can do:
ul li a {
text-decoration: none;
color: #b61c1c; /* For Example */
}
Fiddle
Try this:
a {
background-color: transparent;
}
a:hover {
text-decoration: none;
}
You can style it like this:
<a style="text-decoration: none; color: #TheColorYouWant"></a>
Use CSS. this removes underlines from a and li elements:
a, li {
text-decoration: none !important;
}
Just add your style according to your requirements inside this class "a:-webkit-any-link". for example if you want to remove underline then just add "a:-webkit-any-link{text-decoration: none;}".
Note: Here we are using '-webkit-' for Chrome browser.
Why is the 3rd a element not in lightgreen color?
<html>
<style type="text/css">
div.poncho {
background-color: #555;
font-size: 200%;
padding: 1em;
}
div.poncho a[poncho] {
color: bisque;
}
div.poncho a:first-child {
color: darkcyan;
}
div.poncho a:last-child {
color: lightgreen;
}
</style>
<body>
<div class="poncho">
<a poncho>poncho 1</a>
<br>
<a poncho>poncho 2</a>
<br>
<a poncho>poncho 3</a>
<br> <!-- if removed, it works as expected -->
</div>
</body>
in this case you can use :last-of-type Selector.
<html>
<style type="text/css">
div.poncho {
background-color: #555;
font-size: 200%;
padding: 1em;
}
div.poncho a[poncho] {
color: bisque;
}
div.poncho a:first-child {
color: darkcyan;
}
div.poncho a:last-of-type {
color: lightgreen;
}
</style>
<body>
<div class="poncho">
<a poncho>poncho 1</a>
<br>
<a poncho>poncho 2</a>
<br>
<a poncho>poncho 3</a>
<br> <!-- if removed, it works as expected -->
</div>
</body>
:last-child means exactly what it says.
Since your <a> has a <br> after it, it isn't the last child.
the pseudo-selector you should be using is
https://css-tricks.com/almanac/selectors/l/last-child/
Using :last-of-type is very similar to :nth-child but with one
critical difference: it is less specific. In the example above, if we
had used p:nth-last-child(1), nothing would happen because the
paragraph is not the last child of its parent (the ). This
reveals the power of :last-of-type: it targets a particular type of
element in a particular arrangement with relation to similar siblings,
not all siblings.
I work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you.
So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it.
Here is what I have so far:
<style type="text/css">
.fblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.tblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.pred_background>li>a:hover, .fblue_background>li>a:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i></a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i></a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i></a></li>
PS: it also doesn't work when I put the class value between <li>
The problem is you're delcaring .fblue_background as if it's the parent of the li, this isn't the case. See revised code below:
<style type="text/css">
li>a.fblue_background:hover, li>a.fblue_background:focus {
background-color: blue !important;
}
li>a.tblue_background:hover, li>a.tblue_background:focus {
background-color: blue !important;
}
li>a.pred_background:hover, li>a.pred_background:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Hello</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Bonjour</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Hi</a></li>
When you are using the > method in CSS it would strictly follow the HTML markup. So when you want to change the a element, you should be doing
a.blue{
background:#0000ff;
}
Try this
.nav>li>.blue:hover, .nav>li>.red:focus {
background-color: blue !important;
}
.nav>li>.green:hover, .nav>li>.blue:focus {
background-color: #5EACC5 !important;
}
.nav>li>.red:hover, .nav>li>.red:focus {
background-color: red !important;
}
To change background of <a> link you just need to add :hover for class directly like this.
<style type="text/css">
.fblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.tblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.pred_background:hover, .fblue_background:focus {
background-color: red;
}
</style>
<ul>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Facebook</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Pinterest</a></li>
</ul>
jsfiddle link: https://jsfiddle.net/g9y2v91e/
So I am using bootstrap to generate a hover style when hovering over a navbar link. This works fine until you use IE9 and are too fast, the style stays "hovered", even when not hovering the item anymore.
Like this I can get multiple items in my menu in the "hovered" style which shouldn't be happening.
My code:
<ul class="nav nav-list">
<!-- ko foreach: router.activeItem().sidebar.links -->
<li data-bind="visible: visible" class="special">
<a data-bind="attr: { href: hash, title: title }"
data-toggle="tooltip"
data-placement="right">
<i class="menu-icon fa fa-5x" data-bind="css: icon"></i>
</a>
</li>
<!-- /ko -->
</ul>
The bug:
I have tried alot of things like adding another class like this:
.noHoverForThis {
color: inherit !important;
}
This does not work for some reason.
Same for overriding the whole bootstrap class didn't work for me, unless I failed hard writing this...
.navbar .nav-list > li:hover > a,
.navbar .nav-list > li > a:hover {
background-color: #e7e7e7 !important;
color: inherit !important;
}
Keep in mind the bug only occurs in IE9.
Any help would be very welcome!
EDIT: Interesting to know: I am using ACE Theme
www.wrapbootstrap.com
So I finally figured it out.
The code that should be used to fix this issue and override the hover state is:
.no-skin .nav-list > li:hover > a {
background-color: rgb(248, 248, 248) !important;
color: #585858 !important;
}
.nav-list > li::before {
width: 0;
height: 0;
display: none;
}
And then include it in the Index.cshtml of durandal
<!--[if lte IE 9]>
<link rel="stylesheet" href="../../Content/IEHacks.css" />
<![endif]-->
This will override the hover of the ace theme using bootstrap v3.2
I've been trying to change the text color in a bootstrap template's navbar and have been unsuccessful. Anyone know where I'm going wrong? Here is my code.
<!--navbar-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="nav-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Restaurant</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"> </b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--navbar-->
The CSS:
.navbar-inner {
color: #FFF;
}
I also tried this:
#nav-inner {
color: #FFF;
}
If you want to change the css for the tabs you need to add color: #ddd; to the following
.navbar .nav > li > a {
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ddd;
}
Hope it helps!!
My guess is that Bootstrap defines a more specific CSS rule that is winning out over your more general rule. You should examine the page with Firefox or Chrome's developer tools to see which styles are winning out over others. If your style doesn't even show up, then you know there's a more basic problem, but if Bootstrap's style is overriding your color, you have to give your style a higher precedence.
For a sanity check, try this overkill rule:
html body .navbar .navbar-inner .container {
color: #FFF;
}
And if that works, then experiment with a lower level of specificity to see how specific you really need to get.
If all else fails, you can always do:
color: #FFF !important;
The CSS2 specification lays this out in detail.
.navbar .nav > li > a {
float: none;
color: #5FC8D6;
background-color: #002E36;
}
.navbar .nav > li > a:hover {
float: none;
color: #002E36;
background-color: #5FC8D6;
}
It works... try it out.......
.navbar-nav > li > a:link
{
color:red;
}
nav.navbar-nav.navbar-right li a {
color: blue;
}
Works like a charm! Found it on another thread, so am not taking credit for it.