HTML code:
<div id="but_2" class="button">
Portfolio
</div>
<div id="but_1" class="button">Home</div>
CSS code:
.button {
background-color: #ff0000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#but_1 {
position: absolute;
right: 50px;
top:20px;
}
My css button isn't working, it brings me to where I need to be, but it is blue and is underlined(the text in the button) I have text-decor none, but it still isnt going away.
Target the a element to remove the underline and change the color. You can target it with .button a {}
.button {
background-color: #ff0000;
border: none;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#but_1 {
position: absolute;
right: 50px;
top: 20px;
}
.button a {
text-decoration: none;
color: white;
}
<div id="but_2" class="button">Portfolio
</div>
<div id="but_1" class="button">Home</div>
You need to be more specific and target the a href attribute.
For example:
.button a {
text-decoration: none;
color: #000;
}
https://jsfiddle.net/xojev64e/
a {text-decoration: none; color:#FF0000;} shows unvisited link
a:visited {color:#FF0000;} shows visited link
a:hover {color:#FF0000;} shows mouse over link
a:active {color:#FF0000;} show selected link
use all property to define you color
I think you have not clear your browsing history of your browser. First clear you history, session, or cookie and then perform following steps.
Add following to your css file
.button a {
text-decoration: none;
color: white;
}
And add this for more attraction on mouseover
.button a:hover {
text-decoration: none;
color: black;
}
Hope this will help you.. :)
Related
all. Very new to HTML and CSS, and I'm having trouble applying CSS to some buttons. Here's the code:
HTML:
<div class="top-buttons">
<button id="first-button">One</button>
<button id="second-button">Two</button>
<button id="third-button">Three</button>
<button id="fourth-button">Four</button>
<div>
CSS
.button {
display: inline-block;
border: none;
/* padding */
text-align: center;
text-decoration: none;
/* font-size */
margin: 15px 30px;
cursor: pointer;
color: #564946;
}
#first-button{
border-radius: 20%;
}
I was toying around and was able to get only the border-radius to work; none of the other properties worked, even when I switched it from .button to .top-buttons. Any ideas? Only other thought I have at this point is it may be the text editor I'm using? I just stuck with Atom because I had previously installed it. Thank you so much in advance!
Your buttons are wrapped within <button></button> tags, whereas you are applying your styling to .button class, so if you want to apply global styling to those buttons, you should use following to apply styling to button tag:
button {
display: inline-block;
border: none;
/* padding */
text-align: center;
text-decoration: none;
/* font-size */
margin: 15px 30px;
cursor: pointer;
color: #564946;
}
you only need to specify the element that you what to affect.
For example, there are two ways to solve that
Styles only for the buttons inside .top-buttons:
.top-buttons > button {
display: inline-block;
border: none;
text-align: center;
text-decoration: none;
margin: 15px 30px;
cursor: pointer;
color: #564946;
}
Styles for all buttons
button {
display: inline-block;
border: none;
text-align: center;
text-decoration: none;
margin: 15px 30px;
cursor: pointer;
color: #564946;
}
A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:https://codetheworld.000webhostapp.com/. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:
#first {
margin-top: 500px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: -1150px;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
You positioned your element outside of the viewport, so it can't be clicked.
Remove the margin-top & top positioning and everything will work:
#first {
background: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.
You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.
#Alessi 42 commented the correct solution, however Dekel was the one who posted it.
I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /
So learning from the experience I would say:
First test with and without CSS, and once you have determined that without CSS the element appears.
Start introducing CSS selectors and add/removing the different attributes
Once you find the attribute that is affected proceed to play with the values.
For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:
Insted of this: href="tutorial.html" I would do href="./tutorial.html"
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have quite a problem, I created a button that leads to an iTunes page.
When I did the CSS I had no problem until I noticed that I didnt link the button to the page. So when I did, I couldn't disable the underline of my text inside my button.
I worked my way through and now I'm stuck with a text that is not underlined and changes color when hovered as I wanted. Only thing is that the border doesn't change color at the same time as the text.
Example: I can hover (and thus change the color) my border without touching my text, and obviously this is not what I want.
Snippet :
.navigation{
background-color:#C5C5C5;
}
.btniTunes {
margin-left: 150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color: transparent;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: white;
font-size: 18px;
padding: 10px 18px;
text-decoration: none;
}
.btniTunes:hover {
background-color: black;
color: #E80C7A;
border: 1px solid #E80C7A;
text-decoration: none;
}
.btniTunes a {
text-decoration: none;
color: white;
}
<nav class="navigation">
<ul class="bouttons">
<div class="btnSite">
TO THE SITE
</div>
<div class="btniTunes">
TO THE ITUNES
</div>
</ul>
</nav>
So basically, I want to have a button that links to a page, with black background, white text and border, that has the text and border color that changes to #E80C7A when hovered and without underline on the text.
Just close the brackets in css:
.btniTunes {
margin-left:150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color:transparent;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:white;
font-size:18px;
padding:10px 18px;
text-decoration:none;
}
.btniTunes:hover {
background-color:black;
color:#E80C7A;
border:1px solid #E80C7A;
text-decoration:none;
}
.btniTunes a {
text-decoration:none;
color: white;
}
and also if you want the <a> to cover the button, set its "display" to the block:
.btniTunes a {
text-decoration:none;
color: white;
display:block;
width:100%;
height:100%;
}
Here you are :)
Remove the padding from .btniTunes and add it to .btniTunes a and add display: block; to it.
.btniTunes {
margin-left: 150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color: red;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: white;
font-size: 18px;
text-decoration: none;
}
.btniTunes:hover {
background-color: black;
color: #E80C7A;
border: 1px solid #E80C7A;
text-decoration: none;
}
.btniTunes a {
display: block;
padding: 10px 18px;
text-decoration: none;
color: white;
}
.btniTunes:hover a {
color: #E80C7A;
}
<nav class="navigation">
<ul class="bouttons">
<div class="btnSite">
TO THE SITE
</div>
<div class="btniTunes">
TO THE ITUNES
</div>
</ul>
</nav>
I have these styles for all my a links globally. I am not able to override the a link style in a div on the same page.
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
Now I want to override the style for anchor link to change its color to white on hover but only in a div of multiple classes unseen and notification container like this one...
<div class="unseen notificationContainer">
<a href="profile?customerId=1365764036258">
<strong>robert</strong>
</a>
sent you a friend request
<a href="friend_request?type=accept¬ificationId=1365764054463">
Accept
</a>
<a href="friend_request?type=reject¬ificationId=1365764054463">
Reject
</a>
</div>
so I add the following to my CSS
.unseen{
background: #09f;
color: #fff;
}
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
When the page loads hovering on first link makes changes its color to white but the other three take the color blue of the background. I have been on this for the past one hour and not it's just irritating. Style for notificationContainer is as below
.notificationContainer{
width: 390px;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
Thanks in advance.
CSS cannot possibly have bugs, only a browser can (unless you mean errors in the CSS specification, etc).
That said, this is a bug in your code and not with the browser:
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
The space between a and :hover means any element that is :hover and within a, much like .unseen a means a elements within .unseen, so that won't work. You need to remove that space:
.unseen a:hover{
color: #fff;
text-decoration: underline;
}
Not really sure what you're after - your question doesn't really make it clear. Forgive me if I've miss-guessed. Does this help? (You can target elements with multiple classes)
<style>
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.unseen.notificationContainer a:hover
{
background: #09f;
color: #fff;
text-decoration: underline;
}
.notificationContainer
{
display: inline-block;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
</style>
and
<div class="unseen notificationContainer">
<strong>robert</strong>
sent you a friend request
Accept
Reject
</div>
I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?
PS Yeahh guys, I know about div with black backgrond color and 1px * Npx and position: relative, but It's so slowly...
You could wrap the text in a span and give it a border-bottom with padding-bottom:2px;.
Like so
span{
display:inline-block;
border-bottom:1px solid black;
padding-bottom:2px;
}
Example: http://jsfiddle.net/uSMGU/
For cross-browsing it is better to use text-underline-offset over the text-underline-position, because text-underline-position isn't supported by iOS Safari
So use this answer: https://stackoverflow.com/a/63607426/1894907
#line{
text-decoration-line: underline;
text-underline-offset: 2px;
}
A great way to do this without adding and extra spans and having more control is using the :after selector.
Useful especially for navigation menus:
.active a:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want more or less space between the text and the underline, add a margin-top.
If you want a thicker underline, add more height:
.active a:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}
Simply use:
text-decoration: underline;
text-underline-position: under;
#line{
text-decoration-line: underline;
text-underline-offset: 1px;
}
<div id="line">
Text with line
</div>
just use
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
how about using border-bottom:1px; padding:what-you-likepx
.my-underlined-text {
text-decoration: underline;
text-underline-offset: 8px;
}
This is my solution...
HTML
<p>hola dasf hola dasdsaddasds dsadasdd<span></span></p>
CSS
p {
color: red;
text-decoration: none;
position: absolute;
}
a:hover {
color: blue;
}
p span {
display:block;
border-bottom:3px solid black;
width: 50%;
padding-bottom: 4px;
}
I used #jake's solution, but it gave me trouble with the horizontal alignment.
My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.
I fixed it by doing this:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
display: block;
}
This will maintain the horizontal alignment for you.
You can do this with a bit of a hack using ::after elements, and positioning them manually. This does mean that you have to maintain the content attribute of the after element but you could make this easier by using a data attribute in the html tag and referring to it. See the example below -
span:after {
font-size: 1rem;
position: absolute;
content: 'Hello there..';
width: 100%;
height: 100%;
white-space: pre;
text-decoration-skip-ink: none;
text-decoration-line: underline;
left: 0px;
top: 10px;
color: white;
z-index: -1;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: black;
}
span {
position: relative;
}
<span>Hello there</span>
Try this:
.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}