I can't change the color of my links. I have checked other SO posts and W3Schools, but it's not working. My entire CSS looks like this so far
div.nav{
text-align: center;
}
a{
text-decoration: none;
color: black;
}
but my links always flash black (or red or w/e) when the page loads and then turn blue.
HMTL:
<div class="container-fluid">
<div class="nav">
<nav>
stuff
stuff
stuff-stuff
stuff
stuff
stuff
stuffstuff
stuff
stuff
</nav>
</div>
</div>
My browser is Chrome and I'm using Bootstrap 3.2.0 from a CDN
If you have visited your link it may have switched to "visisted" state. To target a hyperlink with a visited state you can call the following in CSS.
a:visited {
color: black;
}
There are a total of four hyperlink states, click on the link below to see them: http://www.w3schools.com/css/css_link.asp
Once the link has been clicked by the user, it becomes a "visited" link and you will need to apply a style to that a:visited state. Try using the below CSS.
div.nav{
text-align: center;
}
a{
text-decoration: none;
color: #0000;
}
a:visited {
color: #0000;
}
try :
a{
text-decoration: none;
color: black !important;
}
a:visited{
text-decoration: none;
color: black !important;
}
or put your style after the link to the CDN bootstrap
You should reference bootstrap first and then your css file
Wrong: Your css first
<style>
div.nav {
text-align: center;
}
a{
text-decoration: none;
color: black;
}
</style>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<div class="container-fluid">
<div class="nav">
<nav>
stuff
stuff
stuff-stuff
stuff
stuff
stuff
stuffstuff
stuff
stuff
</nav>
</div>
</div>
Right: Bootstrap first
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
div.nav {
text-align: center;
}
a{
text-decoration: none;
color: black;
}
</style>
<div class="container-fluid">
<div class="nav">
<nav>
stuff
stuff
stuff-stuff
stuff
stuff
stuff
stuffstuff
stuff
stuff
</nav>
</div>
</div>
Related
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}
a:-webkit-any-link{
text-decoration: none !important;
}
/*Navigation*/
.nav ul {
margin: 0;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: .5em;
color: white;
text-decoration: none;
}
.main-nav {
text-align: center;
font-size: 1.1em;
border-bottom: 1px solid rgba(255, 255, 255, .3)
}
.nav a:hover {
background-color: rgba(255, 255, 255, .3)
}
.search-container{
position: fixed;
top:3rem;
right:0;
}
#search-container a{
text-decoration: none;
}
<header class="main-header">
<nav class="main-nav nav">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>ABOUT</li>
<li>FANS</li>
</ul>
</nav>
</header>
<section class="search-container" id="search-container">
<input type="text" id="search-text" placeholder="Search..">
<p id="feedback"></p>
<a href="/store?category=music" >MUSIC</a>
<a href="/store?category=merch" >MERCH</a>
CART
</section>
So I have those links in an EJS file and I want them to not have underline. In the same file I have some <nav class="nav"><li>Link</li></nav>that I easily wrote
.nav a {
text-decoration: none;
}
and it works like charm. But somehow those below just won't!
<section class="search-container" id="search-container">
<a href="/store?category=music" >MUSIC</a>
<a href="/store?category=merch" >MERCH</a>
CART
</section>
I tried googling and various methods. Check out what I've tried:
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}
a:-webkit-any-link{
text-decoration: none !important;
}
#search-container a{
text-decoration: none;
}
None of the above works, and I see it was the
a:-webkit-any-link {
text-decoration: underline;
}
always showing up. But judging from any above code, they should have been overwritten, shouldn't they?
In the end I tried the inline style such as:
CART
It finally works. Fyi,
1. the style.css is properly linked, otherwise the nav links won't work nor do other styles.
2. The problem appears in both Chromium and Firefox on Linux.
3. I tried Snippets but it can not duplicate my problem at all.
4. I did use a lot of techniques, such as adding id, or even !important, but none seems to overwrite the stubborn a:-webkit-any-link { text-decoration: underline; }.
I just wonder why is this happening?
I decided to copy my css and repaste it back. Somehow it works now and I no longer need the inline-style. No idea but it solved the problem!
In my case cursor pointer was not showing when the <a> tag didn't have href or [routerLink] defined (navigation was actually done on click event and router.navigate()).
I defined empty [routerLink]="" and the cursor pointer is now shown and navigation isn't affected. (This wasn't the case with using empty href="" instead).
Also worth mentioning, adding [routerLink] to element other than <a> wouldn't get me the cursor as href does. Adding cursor: pointer to the styling of an element did the thing locally but wasn't working when deployed to server.
<a>doesnt't have a cursor pointer</a>
has a cursor pointer
<a [routerLink]="" (click)="navigate()">has a cursor pointer</a>
I'm trying to make the current page's title change colour in the navigation bar that I have at the top of my website. The navbar is built in html with:
<div class="navbar">
<a href="index.html" class="active" >Home</a>
Indian
Italian
</div>
and the CSS that attempts to style it is:
.navbar{
overflow: hidden;
background-color: #F5861F;
width: 100%;
}
.navbar a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:active{
color:#ffe7d1;
}
.navbar a:visited{
color:#8b4e14;
}
.navbar a:hover{
color:#874404;
font-size:20px;
}
.navbar a:current{
color:#ffe7d1;
}
The .navbar a:current is left there after I read that active may not do as I hope (I changed class="active" to class="current") but this also doesn't work.
What am I missing here?
try this
a.active {color: red}
a:active is not representing a class but a selector for a pseudoclass of <a> element
https://www.w3schools.com/css/css_pseudo_classes.asp
:active is where the mistake is.
Try this
.navbar a.active{
color:#ffe7d1;
}
This is happening to me while I am trying to learn web development.
I am only getting the expected result when I preview my website on IE old version, but not getting the expected result when opening on Firefox or Chrome.
Here is the code, it's a very simple one. It's supposed to change the color of the links when visited but what it's doing is that it is constantly applying visited properties to my text.
What I am trying to do is simply changing color of link while in link and visited state.
HTML :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="CSSworking.css">
<title>Html Working</title>
</head>
<body>
<ul class="main">
<li>Home</li>
<li>Our Kitchen</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
<li>Go Down</li>
</ul>
</body>
</html>
Here is the CSS:
.main {
text-decoration: none;
list-style:none;
margin-left: 60px;
}
.main li {
display: inline-block;
margin: 20px;
}
.main li a:link {
color:pink;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
border-top: 4px solid red;
}
If you're using '#' as the link for all of these, you're using the same (local) link for all of them, so if you've visited that local anchor once they'll all stay visited.
Can you try changing to external links such as 'http://google.com', 'http://yahoo.com', etc and see if the problem persists?
I'm trying to give a table a title but it doesn't include it in the table/the title doesn't have a color around itself. I know that the mistake is this line <li><a>Left</a></li> but I don't know how to include it.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a>Left</a></li>
<li>Info</li>
<li>Contact</li>
</ul>
</body>
</html>
I think this is what you're looking for:
<li>Left</li>
First of all, what you have created is not a table but an unordered list.
That being said, the reason your <a> tag is not being styled is the lack of a href="#" attribute.
And with that said, you should not be using a <li><a>text</a></li> structure for showing the title of what looks like a navigation bar. Especially when the only reason to use an anchor tag is because of your existing CSS.
Instead, take the <li>Left</li> line, put it before the <ul> tag and just turn it into a div.
Then use some additional CSS to target and style that <div class="title">.
I am new to HTML/CSS and need some help with text aligning. THe text are link and I'd like to align two links to the left of the page and one link to the right. Can anyone help? Here is my code
BACK and HOME buttons are meant to be aligned left, and MISC is meant to be aligned right
THanks Heaps it's driving me creasy!
HTML **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/portfolio.css">
</head>
<body>
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
</body>
</html>
CSS **
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
Add the following css to your links. Demo
#left{
float:left;
}
#center{
position: absolute;
left: 48%;
}
#right{
float:right;
}
use style="float:left;" for BACK and HOME buttons and style="float:right;" for MISC.
Put style="display:inline;" for ul tag.
Here you go.
WORKING DEMO
The Code:
MISC
I hope this is what you are looking for.
<div class="menu">
<ul>
<a class="pull-left" href="index.html">BACK</a>
<a class="pull-left" href="index.html">HOME</a>
<a class="pull-right" href="index.html">MISC</a>
</ul>
</div>
As you can see I've added classes to your links. Now lets add some class declarations to your stylesheet file:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
HTML
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
css
.right{
float:right;
}
DEMO HERE
You need better structure in your HTML ... Namely, in the ul element ... You're adding list items that are not labeled as list items. The alignment issue can be fixed using the following code.
For the sake of time, I've removed the reference to an external stylesheet, and added the styles in the head tag. You can remove the styles from the head tag and readd them to the stylesheet to maintain HTML best practices.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<style type="text/css">
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
.menu ul {
}
.menu ul li { display: inline-block; }
.menu ul li.misc {
float: right;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>BACK</li>
<li>HOME</li>
<li class='misc'>MISC</li>
</ul>
</div>
</body>
Pure CSS solution can be :
a:nth-child(3n) {
float:right;
}
or
a:nth-last-child(1) {
float:right;
}
Plus, write valid HTML. If you have only anchor elements for list then you have to use nav tag and there is no need of using extra div.
<body>
<nav class="menu">
BACK
HOME
MISC
</nav>
</body>
Remove margin-left from .menu.