Unwanted underline appears on my title link when I click on it with the cursor
On my website, my title is self-reliant and works great, but when I hover over it, unwanted underline appears underneath, and I don't want that. I've already set the header decoration to nothing, so I'm not sure how to fix this. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
<style>
a{text-decoration: none}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
source to share
you can use:
a:hover{
text-decoration:none;
}
or use inline CSS to explicitly specify text-decoration
anchors for that particular element.
<a href="file:///C:/Noah's%20stuff/Home.html" style="text-decoration: none;"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
the snippet below uses the first suggestion as it would be better, however the latter also works.
snippet of code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
a:hover{
text-decoration:none;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
source to share
You need to put your CSS styles before HTML. The best place is in a single style block at the top of your HTML. Your style tag is currently below the link and why it doesn't apply.
You can remove the underline on hover by specifically creating the state :hover
. Note, however, that it is not ideal for accessibility.
There are several other problems with your HTML and CSS. It is best to avoid inline styles inside HTML tags. And you linked to your home page using the protocol file://
, use http://
as your web page. If you are linking to the default homepage, you can just do the /Home.html
same.
You are also missing the closing tags </body></html>
.
I have corrected them below as well.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body { margin:0 }
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
.Header a:hover { text-decoration:none }
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
</body>
</html>
source to share
To add to Usmane's answer:
You want to change the CSS that affects links in the default status (if any of your CSS does this) from "name" to "name: link" (this will make a difference if and when more link style pseudo-selectors are added ).
Also, the order for the pseudo
selectors is "LoVe For HAte".
So:
a:link, a:visited, a:focus, a:hover, a:active
source to share