a.navigation:link {color: white; text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;}
a.navigation:visited {color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
The CSS provided above is my current styling for both unvisited and visited pages. If a visited page reverts to an unvisited state, I want it to display the default CSS style.
My typical approach is to apply identical styles to both :link and :visited, as shown below:
a.navigation:link, a.navigation:visited {
color: white; text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;
}
Similarly, I maintain consistency by using the same settings for both :hover and :active:
a.navigation:hover, a.navigation:active {
[... your settings ...]
}
<!DOCTYPE html>
<html>
<head> <title> MAIN PAGE </title>
<style>
#Header {background-color: rgb(112,189,201);
background-repeat: no-repeat;
background-position: center top;
background-size: 1600px 120px;
padding-top: 10px;
padding-bottom: 110px;
padding-left: 10px;}
p.navigation {position:absolute;
margin-left: 900px;
margin-top: 50px;}
a.current:link, a.current:visited, a.current:hover, a.current:active
{color: skyblue;
padding: 25px 25px 5px 25px;
border: 1px solid skyblue;
border-radius: 80px 80px 0px 0px;}
a.navigation:link {color: white;
text-decoration: none;
padding: 25px 25px 25px 25px;
border: 1px solid white;
border-radius: 80px 80px;}
a.navigation:visited, a.navigation:hover,
a.navigation:active
{color: lightblue;
padding: 25px 25px 5px 25px;
border: 1px solid lightblue;
border-radius: 80px 80px 0px 0px;}
</style>
</head>
<body>
<div id= "Header">
<p class= "navigation">
<a href= "index.html" target= "_self" class= "current"> HOME </a>
<a href= "about.html" target= "_self" class= "navigation">
ABOUT US </a>
<a href= "archives.html" target= "_self" class= "navigation"> ARCHIVE
</a>
<a href= "contact.html" target= "_self" class= "navigation">
CONTACT US </a>
</p>
</div>
</body>
</html>
The most effective solution is to completely disable it - Here's how:
a:visited {
text-decoration: none;
}
By doing this, you will eliminate the default visited color from showing.
Check out W3Schools for more information on styling links using CSS.
Not long ago, I stumbled upon this fantastic example demonstrating how to incorporate material design elements in buttons. These buttons are created using a combination of classes that allow for easy customization with just a simple modification. However, ...
My bootstrap card with tab headers worked perfectly originally. After adding some javascript files to update features, particularly for a datetimepicker, I started experiencing issues with the tabs. Currently, the first tab (Instagram) is active by defaul ...
I'm working on some HTML code that allows me to limit a number input using the up and down keys. However, I also need to restrict manual entry from the keyboard. Currently, the input field accepts any number entered through the keyboard. <input ...
I am interested in creating a sidebar menu for my website using either HTML, CSS, or JavaScript. The W3 Schools website has a side menu that I find appealing and would like to create something similar. ...
I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...
I recently made the switch to Bootstrap V4 and I am currently customizing the starter template provided at: My goal is to make the navbar transparent, but have it change to a dark color when the viewport size is sm or xs. Despite my efforts to achieve th ...
When attempting to load a page like /patient_profile, the CSS loads correctly. However, when continuing the path to /patient_profile/settings_patient_profile, the CSS breaks. Both pages mentioned are the same file, just testing the routing. The route is m ...
I have a HTML page where I've included an onclick event in a div tag. Within this event, I'm using location.href = url to open a specific URL. Surprisingly, this works perfectly fine in a web browser but strangely doesn't work in a mobile br ...
I have been working on integrating a plotly pie chart into my website. In order to make the iframe responsive, I decided to utilize this specific tool to generate the necessary html/css. While the chart appears satisfactory on a laptop screen, it is barely ...
I am experiencing an issue with my CSS styling. The content following the top navigation bar is not aligning properly. I utilized the float: left and right properties in my code and then added a clearfix to align the next header, but unfortunately, it is n ...
Is there a way to add "atomic" block content into CKEditor? For instance, I would like to add <h1>Test</h1> right after the letter "B" in the sentence <p>A B C</p>. Currently, when using CKEDITOR.currentInstance.insertHtml('&l ...
Check out the Fiddle here Upon button click, a modal window appears. Inside this modal, there is a <template-placeholder></template-placeholder>. When the button is clicked, an if-check is performed to ensure it's the correct button. If ...
There is a situation where <div id="container"> <div id="div2">Title</div> <div id="div3">text text</div> </div> and in this scenario, #container { height:500px; width:100%; text- ...
In order to demonstrate the issue, I decided to create a new App using the create-react-app tool (available at https://github.com/facebook/create-react-app) My goal is to import data from CSV files into the app. Currently, I am utilizing the CSV method pr ...
An error occurred with AttributeError at /accounts/regist_save/. The 'User' object does not have an attribute 'user'. I encountered this issue in views.py while writing the following code: def regist(request): regist_form = Registe ...
My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...
Having Trouble with AngularJS 1.6.9 File Upload I'm facing an issue with a simple file upload on JSFiddle using AngularJS 1.6.9. The ngf-select event doesn't seem to be triggering even though everything else appears to be working fine, and there ...
My webpage has a section with a paragraph containing text. If the user clicks on the paragraph, a textarea is dynamically created with the same text from the paragraph. I am wondering if there's a way to determine the exact location within the paragra ...
After outputting the results from a MySQL table to an HTML table, I encountered an issue with my delete function not working for specific rows in the last column. Thanks to the helpful comments provided by users, I made adjustments to my code so that it i ...
Here is an HTML button: <button autofocus role="button" ng-disabled="something.$invalid">{{ Continue }}</button> The button starts off disabled, so the autofocus attribute doesn't work. My goal is to have focus on the button as soon as i ...