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?
Related
CSS Horizontal menu bar displays correct in Internet Explorer, displays with no style in Google Chrome..
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Chrome is just displaying a bullet list with the tags as links. No styling is being applied.
It will work you might have done some mistake with including the css files properly or you have to clear the cache ..using Ctrl+Shift+R or clear the browser cache from settings of google chrome(or do a hard Reload+ emptycache)
i'm adding the working code here. just try it
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
There can be a bug in Chrome where the CSS is not refreshing itself and use the CSS stored in cache. The way to correct that can be to open the source code on Google Chrome, click on your CSS file, refresh your CSS file with F5 and then refresh your normal page.
How do you have your reference to styles?
If this is a folder in the same directory as your index.html file, then something like this,
<link rel="stylesheet" href="styles/index.css">
Make sure that your CSS and HTM/HTML files use the same encoding !
If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well.
Clear cache as well and try.
Simple fix actually. After viewing the style sheet Chrome was using, turn out it was not refreshing the style sheet.
Added:
to force browsers to use the correct version.
Close the Internet Explorer Compability view settings Usually it will solve your problem.
I am trying to write html and css for a web page, but it doesn't show anything when I open the file directly from the file. It works fine when I access it through my ftp server, even from the same pc and browser. I have tried searching google for solutions, but I wasn't able to find anything
Errors image
Working image
index.html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<head lang="en">
<meta charset="utf-8">
<title>Employee Page</title>
</head>
<body>
<div id="header"></div>
<br><br>
<div id="content"></div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$("#header").load("header.html");
$("#content").load("startingContent.html");
$("#footer").load("footer.html");
</script>
</body>
</html>
header.html
<header>
<nav id="menu">
<img id="logo" src="Images/logo.png" height="150" style="border: 5px solid black">
<ul>
<li> Home</li>
<li> Calendar
</li>
<li> Contacts
</li>
<li class="dropdown">
File Server
<div class="dropdown-content">
Documents
GameFiles
Videos
</div>
</li>
</ul>
</nav>
</header>
style.css
.menu {
width: 100%;
vertical-align:top;
height:25px;
float: top;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
font-size: 16px;
display:inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
Any help is appreciated. Thanks!
Typical issue for local development is open content just like file in browser:
file:// ...
and then with some dynamic elements you can get error:
XMLHttpRequest cannot load file:/// ... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Solution is install web server on your local machine and open through http(s) protocol - eg. NGINX, Apache or use online service for that like WebCloud.
See woking example on http here.
I hope I helped.
First of all, it appears that your navigation is using absolute linking.
<li> Home</li>
<li> Calendar
</li>
<li> Contacts
</li>
Furthermore, you can bring up you console, see what parts of your website refuse to load at all and change the routing.
EDIT
You cannot load these resources clearly for security reasons. Running pages through file:// protocol have disabled a lot of features because security issues. You can always create a javascript server using Node.js and host it locally without installing apache or something similar.
https://nodejs.org/en/
Try to check if the other files are in the same folder with index.html. The problem probably is that it cant find locally the other files.
To be sure you can copy all the files in a directory(for example Desktop) and then try again.
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 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>
(HTML / CSS newbie here) It seems I cannot find the right specifier to prevent a menu bar
from wrapping around to the next line if the user narrows the browser window under a certain threshold. My working sample is this:
http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
Below is the unmodified code from that site:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
I found some references to "white-space: nowrap;" but I couldn't get it to work (maybe because none of these other samples related to such a simple example as above). Any clues appreciated !
Best,
Chris
just add some css width to the <ul> with the fixed width of your navbar, like in this JSFIDDLE
or if the width of your navbar is fluid, use css min-width rather than width