I have the following code :
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.nodecor
{
text-decoration: none;
}
.strowb1
{
width: 150px;
height: 35px;
background-color: #1F375F;
text-align: center;
color: #999999;
font-family: calibri;
font-weight: bold;
font-size: 110%;
display: block;
}
.fullcell
{
height: 100%;
width: 100%;
color: #999999;
}
</style>
</head>
<body>
<table>
<tr>
<td class="strowb1">
<a class="nodecor" href="#">
<div class="fullcell">Watch</div>
</a>
</td>
</tr>
</table>
</body>
</html>
When executed, "Watch" has a very persistent underline on hover. Setting text-decoration: none does not seem to remove it.
I have tried setting text-decoration to none on the table, tr, td and div as well.
Please suggest ideas to do so.
Note: Removing the link to bootstrap css does remove the underline, but I need it in other areas of the code.
You should increase specificity of your rule because bootstrap targets a:hover and takes precedence. Another option is to put a same specific rule after bootstrap one. If two declarations have the same weight, origin and specificity, the latter specified wins.
.nodecor:hover {
text-decoration: none;
}
.strowb1 {
width: 150px;
height: 35px;
background-color: #1F375F;
text-align: center;
color: #999999;
font-family: calibri;
font-weight: bold;
font-size: 110%;
display: block;
}
.fullcell {
height: 100%;
width: 100%;
color: #999999;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table>
<tr>
<td class="strowb1">
<a class="nodecor" href="#">
<div class="fullcell">Watch</div>
</a>
</td>
</tr>
</table>
Reference: MDN - Specificity - w3.org - Cascading order
Try this:
<style>
a{
text-decoration:none;
}
a:hover
{
text-decoration: none;
}
<style>
Setting text-decoration to div, and other table specific tag is not useful. This property is specifically defined for anchor <a> tag.
See, if that helps.
add also
.nodecor:hover
{
text-decoration: none;
}
a:hover, a:active, a:focus use also this style if you check with Developer Tools(google chrome) you will see that.
Overwriting a:hover not enough.
.nodecor:hover,
.nodecor:active,
.nodecor:focus {
text-decoration: none;
}
It is probably not removing it because it is under fullcell. Try
.nodecor .fullcell {
text-dcoration:none;
}
It will remove line on hover:
a:hover
{
text-decoration: none;
}
Use this css
.strowb1 a:hover {
text-decoration: none;
}
Related
This question already has answers here:
Different Color Links on the Same HTML Page
(5 answers)
Closed last year.
I'm trying to apply CSS to this specific button, but it keeps cascading for all the buttons on the page. How do I make the style specific to this one button? I have no preference on what type of selector is used. Please help, I have 0.0 coding knowledge.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
Instead of doing this:
Buy Here
Use it as this:
<a id="buy_button" href="URL" target="_blank">Buy Here</a>
Then apply the CSS to that specific id like this:
#buy_button{
background-color: gray;}
This is a good example of a time where you can use an ID selector. You can do this by adding id="idValue" to your html element and target it with CSS using #idValue. Here's an example of how that'd look:
<html>
<head>
<style>
#customButton:link,
#customButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#customButton:hover,
#customButton:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
As mentioned in the comments, you can use the id - but there are maybe better ways to handle it.
<html>
<head>
<style>
#myButton:link,
#myButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#myButton:hover,
#myButton:active {
background-color: gray;
}
</style>
</head>
<body>
<a id="myButton" href="URL" target="_blank">Buy Here</a>
</body>
</html>
is this what you need?
a.btn:link,
a.btn:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.btn:hover,
a.btn:active {
background-color: gray;
}
Buy Here
<a class="btn" href="URL" target="_blank">Buy Here</a>
I am trying to hyperlink two separate words which sit in either corner in the footer and I don't want any text decoration (underline or changing to blue). However I would like text to turn blue when I hover over.
My code below isn't right and I'm looking for this to be corrected.
Does anybody know the html code for this?
Thank you!!!
<head>
<style type="text/css">
.footer {
position: fixed;
text-align: left;
justify-content: space-between;
display: flex;
bottom: 10px;
width: 100%;
font-family:Helvetica, sans-serif;
Font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.footer span a {
color: black;
text-decoration: none;
}
</style>
</head>
<div class="footer">
<span><a href="https://www.blank-site.com/Profile">NAME</span>
<span><a href="https://www.blank-site.com/Work">WORK</span>
</div>
</style></a></a>
I want both words 'NAME' (left corner) and 'WORK' (right corner) to link to separate pages and turn blue when you hover over but black when inactive and without the underline.
Try this:
<head>
<style type="text/css">
.footer {
position: fixed;
text-align: left;
justify-content: space-between;
display: flex;
bottom: 10px;
width: 100%;
font-family:Helvetica, sans-serif;
Font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.footer span a {
color: black;
text-decoration: none;
}
.footer span a:hover {
color: blue;
text-decoration: none;
}
.footer-item-1{
float: left; }
.footer-item-2{
float: right;
color:black;
text-decoration: none;}
.footer-item-2:hover {
color: blue;
}
</style>
</head>
<div class="footer">
<span><a class="footer-item-1" href="https://www.blank-site.com/Profile">NAME</span>
<span><a class="footer-item-2" href="https://www.blank-site.com/Work">WORK</span>
</div>
</style></a></a>
We can take NAME and WORK and float them to the left and right.
Also, text-align: left for the footer class would be unnecessary so I'd remove it, unless you are going to add more text to the footer.
And if you aren't planning on adding more hyperlinks to your footer that have color, the selector for span in ".footer span a" is mostly unnecessary.
Also, you have to open and close tags in the correct order and remember to use and correctly, this is what would cause the most errors.
<!DOCTYPE html>
<head>
<title>HTML is not a real language.</title>
<style type="text/css">
.footer {
position: fixed;
justify-content: space-between;
display: flex;
bottom: 10px;
width: 100%;
font-family:Helvetica, sans-serif;
font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.name-left {
float: left;
}
.work-right {
float: right;
}
.footer a {
color: black;
text-decoration: none;
}
.footer a:hover {
color: blue;
}
</style>
</head>
<body>
<div class="footer">
<span class="name-left">NAME</span>
<span class="work-right">WORK</span>
</div>
</body>
</html>
<!--Tip on Opening and Closing Tags: <p><span>Text</p></span> is incorrect and <p><span>Text</span></p>
would be correct. Also, remember to use <html> and <body> and <style> correctly. (You had a style tag all the way down here.) Please proofread your code. EDIT: Irony 100-->
I styled this button with CSS and the style doesn't seem to be applied to the button. Links to websites. http://randomstufffrommybrain.neocities.org/TheRandomPage.html
The HTML:
<head>
<link rel="stylesheet" href=CSSFORTherandompage.css>
</head>
<div id="Button5">
<button><a href=Newsitetestcode/Newwebsitemainpage.html>New website</a>
</button>
</div>
The CSS:
#Button5 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
The style does not appear on button because you have added style on the div#Button5 but not button.
Apply this change in css
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
JSFIDDLE
All <link> tags should go inside the <head>
Make sure you have your external CSS in the same folder as your HTML, as indicated in your link tag. If it is in another folder, give the appropriate path.
For further debugging, you can employ some JS:
function sheetLoaded() {
// Do something interesting; the sheet has been loaded
}
function sheetError() {
alert("An error occurred loading the stylesheet!");
}
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
You need to put the link tag in the head section of your HTML file.
Note: This element goes only in the head section, but it can appear any number of times.
Reference
As you can see, the nav element has a bit too much top padding. The links' outlines are in the right spot though, there's just that extra annoying space. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>'''+title+'''</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<style>
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
html, body {
margin: 0;
background: #333333;
height: 100%;
position: relative;
font-family: "merriweather";
overflow-y: hidden;
}
h1 {
font: bold 40pt roboto, arial, sans-serif;
margin: 0;
background: yellow;
padding: 30px;
}
nav {
display: inline-block;
}
nav a {
cursor: pointer;
font: bold 18px roboto;
display: inline-block;
transition-duration: 0.2s;
padding: 15px 30px;
background: linear-gradient(
#FF9900, #FF9900 50%, #333333 50%, #333333
/*outline: none;*/
);
background-size: 100% 200%;
color: black;
}
nav a:hover {
background-position: 100% 100%;
color: yellow;
}
nav a:focus {
outline:none;
}
#content-white-bkg {
background: white;
padding: 30px;
margin: 15px;
box-sizing: border-box;
overflow-y: scroll;
}
*:not(nav) > a:link {
cursor: pointer;
color: #FF9900;
transition-duration: 0.35s;
/*border-bottom: 1px solid #FF9900;*/
}
*:not(nav) > a:visited {
color: #FF6600;
cursor: pointer;
transition-duration: 0.35s;
}
*:not(nav) > a:hover, *:not(nav) > a:focus {
color: black;
outline: none;
}
a {
text-decoration: none;
color: black;
}
nav > a.selected {
background: #333333;
color: yellow;
text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;
transition-duration: 0.5s;
}
nav > a.selected:hover {
color: #333333;
}
::selection {
background: #FF7700;
}
::-webkit-selection {
background: #FF7700;
}
::-moz-selection {
background: #FF7700;
}
h3 {
font: bold 18px nunito;
margin-top: 0;
}
</style>
</head>
<body>
<h1 title='MUCAS: Multi-User Chat Application Server'>
<span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span>
<nav>Home/chatLog inSign upAbout MUCASContact me</nav>
</h1>
<div id="content-white-bkg">
'''+body+'''
<script>
var cwb = document.getElementById("content-white-bkg");
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
window.onresize = function() {
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
}
var path = window.location.pathname;
document.getElementById("nav-"+path).className = "selected";
</script>
</div>
</body>
</html>
Can anybody help me with this? Is it a layout issue, or something else?
Try this:
nav a {
vertical-align: top;
}
check the developer tools in your browser. Select the nav element and view the CSS panel associated with that element. Look at the inherited styles and the computed style. Is the margin or padding on the nav inheriting? Maybe it is a parent or child element of it is computed to zero. This could be the links, list, list items, or parent. If you can use flexbox I highly recommend it for aligning components and layout.
You can try
nav {
vertical-align: super;
}
"vertical-align: super" will treat your "nav" as a superscript. I tried putting it in your code and found it works. You can try if you think it can solve your problem. Thanks.
This should do the trick:
nav a {
float: left;
}
I should also change the h1 to a div element for semantics. h1 is used for example a page title and not to wrap a navigation bar and an logo in..
You are doing several things wrong here.
You are placing a navigation item and image inside of an header element. You are not using float for the elements you want to float.
Use a around it instead.
I made a jsfiddle illustrating the float, without correcting the semantics.
Consider doing something like this instead:
<div class="header">
<img src="image.jpg">
<nav>...links here...</nav>
</div>
I am trying to create a tab with the internal text and image as a link. The problem I am facing is the anchor dimensions and/or positioning seem to be different than the image. As you can see in the jsfiddle link, there is some spacing between the bottom of the image and the bottom of my div and I can't figure out why that is there.
JSFiddle link
If you can't access that link, HTML code:
<div id="SapDataBtn">
<a href="#">
<img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
</a>
<a href="#" id="SapBtnText">
Data
</a>
</div>
CSS:
#SapDataBtn {
background-color: #c7ddf2;
text-align: center;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-left: 15px;
padding-right: 15px;
width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
font-size: 15px;
font-weight: bold;
color: #19456e;
text-decoration: none;
}
#SapDataBtn img {
border-style: none;
}
Add vertical-align:bottom; in your #SapDataBtn img, this should do the trick :)
Try like below... it will help you...
#SapDataBtn img {
border-style: none;
vertical-align: middle;
}
Fiddle : http://jsfiddle.net/XLeGd/1/
Maybe this is what you looking for:
#SapBtnText {
vertical-align: super;
}