I found this and thought it was cool. The problem is that I cannot seem to center the text in the circle either before or after it spins. The current colors do not matter as I changed them just to be able to see the differences as I modified the code. I apologize in advance for the length of the CSS code. If anyone knows how to make it far shorter, I'm all ears so to speak. I'm also hoping to make the words "clickable" after the spin, but have yet to figure that one out either
HTML
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">Home Page</span>
<div class="ca-content">
<h2 class="ca-main"></h2>
<h3 class="ca-sub"></h3>
</div>
</a>
</li>
...
</ul>
CSS
.ca-menu li{
width: 200px;
height: 200px;
/*Circle Size*/
border: 10px solid #E8FF02;
/*border color before spin*/
overflow: hidden;
position: relative;
float:left;
background: #005B8E;
/*background before spin*/
margin-right: 10px;
box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
border-radius: 125px;
/*circle vs square*/
transition: all 400ms linear;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #BEFC00;
/*text color before spin*/
position:relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 10px #101254;
line-height: 50px;
position: center;
padding-left: 45px;
width: 50px;
left: 20px;
text-align: center;
transition: all 900ms linear;
}
.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 60px;
top: 20px;
}
.ca-main{
font-size: 15px;
color: #000;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #000;
transition: all 300ms linear;
}
.ca-menu li:hover{
background: #930016;
border-color: #2BF802;
transform: rotate(360deg);
/* colors after spin*/
}
.ca-menu li:hover .ca-icon{
color: #0100B3;
font-size: 20px;
/*text size after spin*/
}
.ca-menu li:hover .ca-main{
display: none;
}
.ca-menu li:hover .ca-sub{
opacity: 8.0;
}
.ca-menu{
padding: 100;
margin: 100px auto;
width: 250px;
/*circle position from top*/
}
A simple fix is to adjust the line-height of the words, ca-icon, to match the height of the parent, .ca-menu li, which has a height of 200px.
.ca-icon{
...
line-height: 200px;
...
}
JS Fiddle here to see what this change does.
-> when you enter large text in your spin than your design change check it.
-> please attached my following code and check and enter large text no change design.
-> same as your code but i was some change in css.
.ca-menu li{
width: 200px;
height: 200px;
/*Circle Size*/
border: 10px solid #E8FF02;
/*border color before spin*/
overflow: hidden;
position: relative;
float:left;
background: #005B8E;
/*background before spin*/
margin-right: 10px;
box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
border-radius: 125px;
/*circle vs square*/
transition: all 400ms linear;
display: table;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
color: #BEFC00;
/*text color before spin*/
position:relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 10px #101254;
line-height: 27px;
width: 50px;
left: 20px;
text-align: center;
transition: all 900ms linear;
}
.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 60px;
top: 20px;
}
.ca-main{
font-size: 15px;
color: #000;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #000;
transition: all 300ms linear;
}
.ca-menu li:hover{
background: #930016;
border-color: #2BF802;
transform: rotate(360deg);
/* colors after spin*/
}
.ca-menu li:hover .ca-icon{
color: #0100B3;
font-size: 20px;
/*text size after spin*/
}
.ca-menu li:hover .ca-main{
display: none;
}
.ca-menu li:hover .ca-sub{
opacity: 8.0;
}
.ca-menu{
padding: 100;
margin: 100px auto;
width: 250px;
/*circle position from top*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Stack</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">Home Page Home Page</span>
<div class="ca-content">
<h2 class="ca-main"></h2>
<h3 class="ca-sub"></h3>
</div>
</a>
</li>
...
</ul>
</body>
</html>
Related
I am having difficulties in centering the background or divs when zooming in. Everything is centered when I zoom out because I set the * at 1200px. But when I zoom in the POV zooms on the left side of the background.
Here's an example of my POV when it is zoomed:
[https://imgur.com/a/gF50dhh][1]
Here is my code:
*{
width: 1200px;
margin: 0 auto;
padding: 0;
}
html {
background-color: #0f1011;
text-align: center;
font-size: 100%;
background-repeat: no-repeat;
box-sizing: border-box;
position: relative;
min-height: 100%;
margin: 0 auto;
}
/*NAVIGATION BAR*/
.nav {
padding: 20px;
background-color: #a91817;
font-size: 21px;
margin:0 auto;
}
.navbarmargin {
margin: 0 auto;
}
.product {
font-family: 'Zen Dots';
font-size: 15px;
display: flex;
float: left;
}
/*NAVIGATION BAR ELEMENT*/
.homee {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.homee:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.memberss {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.memberss:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.socialss{
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.socialss:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.contactt {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.contactt:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
/*BANNER*/
.banner {
background-image: url("https://cdn.discordapp.com/attachments/868146365014876250/868702765906526239/dwwdwdw.jpg");
padding: 45px;
object-fit: contain;
display: block;
margin:0 auto;
}
.logo1 {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin:auto;
display: block;
border-radius: 10px;
width: 150px;
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
.jawbreaker {
font-family: 'Zen Dots';
font-size: 25px;
color: red;
}
.jawbreaker1 {
font-family: 'Zen Dots';
font-size: 25px;
color: cyan;
}
.sugarrush {
padding: 25px;
background-color: #45b5b5;
display: block;
margin:0 auto;
}
.sugarrushh {
font-family: 'Lobster';
text-shadow: 2px 2px 4px #000000;
text-decoration: none;
font-size:25px;
color: whitesmoke;
transition: 1000ms ease-in-out;
}
.sugarrushh:hover {
font-size: 30px;
color: rgb(245, 88, 179)
}
body {
text-align: center;
}
.aboutt {
width: 1024px;
background-color: #414849;
text-align: center;
display: block;
border-radius: 5px;
margin-top: 10px;
margin:0 auto;
margin-right: 20px;
margin-left: 20px;
width: 960px;
}
#About {
background-color: #141414;
padding: 100px;
margin:0 auto;
}
<!DOCTYPE html>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="body.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Alatsi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<html lang="en">
<head>
<title>Jawbreaker SMP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="nav">
<nav>
Home
Members
Socials
Contact
</nav>
</div>
<div class="banner">
<picture>
<source srcset="https://cdn.discordapp.com/attachments/552032784890331155/867288559429615636/jawbreakerlogo.png" type="image/webp">
<source srcset>
<img class="logo1" alt="Logo" src=""> <br> <br> <br>
</picture>
<span class="jawbreaker">Jaw</span>
<span class="jawbreaker1">Breaker</span>
</div>
<div class="sugarrush">
<a href="https://media1.tenor.com/images/e71c8574914d2cabb2c6c4bd9ad3af28/tenor.gif" class="sugarrushh">
Let The Sugar Rush Begin!</a>
</div>
</head>
<body>
<section id="About">
<div class="aboutt">
<h3>h</h3>
</div>
</section>
</body>
</html>
This is because you have a fixed size width try replacing 1200px with 100% this will help but not solve the issue. For that, I recommend you use BOOTSTRAP very easy to implement just add the CDN line and it will be working fine.
And you can start here Bootstrap tutorials
This will help to make the page design be compatible with all devices.
So , i want to make the button wider , not auto size to the text , i want it like 300px , i just try to add width on every class , but nothing seems working , is it because the button box line from text border ? i think its because the button from text border , so its auto resize with the text , am i right about it ? if that was the problem, can i click on a col-md-6 div for example ?
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure css popup box</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Popup/Modal Windows without JavaScript</h1>
<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
EDITED Can i add href on col-md-6 class ?
SOLVED add display:inline-block;
a-tag is an inline element so your height and width set are ignored. Add display: inline-block; and width: 300px; in the class button.
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display: inline-block;
width: 300px;
}
you do not need to add col-md-6 unless you want to use such space. Just add width property in the button class or in the custom class as per your need.
.button {
width: 300px;
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display:block;
}
I'm trying to make a webpage to put some academic/work related stuff on it, but can't seem to figure out how to just put some buttons around my text without the button's margin totally running into each other.
My issue is when I try to add a margin to my projects button, it pushes the contact info button down a line. Any suggestions?
Here's what I have:
Please run code snippet in a full window
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li>Contact Info</li>
</ul>
</body>
</html>
You should never use px value for alignement, you can use float:right and float-left instead of them , but they are not working in your exemple , or to be more specific, only the float:rightis not working, because that the width it is not taking 100% of the screen width , here's the fix : https://stackblitz.com/edit/angular-jihnyk
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button"><a href="#contacts" >Contact Info</a></li>
</ul>
</body>
</html>
CSS :
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
transition: all 0.4s ease 0s;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%
}
.right-button{
float: right;
padding-right: 47px
}
a small hint : you can add the same transition you added in hover to the normal class, to get the same transition when the mouse leaves the button
I'm having trouble centering my home page text (the tag). I'm not sure why it's not working.
I have a button that performs a short animation when the user hovers over the button. The button is supposed to fill with red but when I change the background color of the #main container, the button loses its animation. I'm assuming that it's getting hidden behind main's background color but I don't know how to resolve this issue.
Thanks!
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
Resume
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
Changing the z-index works
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
z-index:998;
}
a.animated-button.victoria-three span{
z-index:999;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
<span>Resume</span>
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
My question is rather simple,
text-decoration:none - is not working in this example when a user hovers over an <a> tag. Where is my mistake?
I have provided the whole project to help you understand what I'm trying to achieve. There is a code snippet below that displays my code with the current problem.
Thanks in advance guys.
* {
font-family: "Helvetica Neue";
font-size: 22px;
text-decortion:none!important
}
.container {
color: #a2abbd;
width: 100%;
height: 100%;
background-color: #21212b;
}
.radio-container {
overflow: hidden;
position: relative;
margin: 7% auto;
height: 504px;
width: 320px;
background-color: #2c2c37;
border-top: 1px solid #f1be81;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
}
header {
text-align: center;
vertical-align: middle;
line-height: 79px;
height: 79px;
background-color: #edae61;
color: white;
font-weight: bold;
}
header a {
display: block;
position: absolute;
width: 60px;
height: 80px;
}
header .arrow {
left: 0;
top: 0;
}
header .arrow img {
margin-bottom: 5px;
}
header .on-off {
right: 0;
top: 0;
}
header .on-off img {
margin-bottom: 10px;
margin-right: 7px;
}
section {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul {
position: relative;
padding: 0;
margin: 11px 23px 0px 23px;
line-height: 1.364;
}
section ul li {
border-bottom: 1px solid #40404a;
list-style-type: none;
overflow: hidden;
}
section ul li:last-child {
border: none;
}
section ul li a {
display: block;
padding: 18px 0px 14px 0px;
cursor: pointer;
width: 100%;
height: 100%;
color: #a2abbd;
text-decoration: none;
}
section ul li a:hover p {
color: #848b9b;
}
section ul li a p {
display: inline;
}
section ul li a p strong {
float: right;
clear: both;
}
section ul li a p img {
padding-right: 0.5em;
padding-bottom: 0.2em;
}
section ul .dribbleFM {
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor {
position: absolute;
top: -200px;
z-index: 1;
}
section ul .dribbleFM .dribble-anchor:target {
top: 18px;
margin-bottom: 18px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor:target + .dribble-button1 {
display: none;
}
section ul .dribbleFM .dribble-anchor:target ~ .dribble-button2 {
display: block;
}
section ul .dribbleFM .dribble-anchor .volume {
pointer-events: none;
position: relative;
}
section ul .dribbleFM .dribble-anchor .volume a {
position: relative;
display: inline;
pointer-events: auto;
z-index: 100;
}
section ul .dribbleFM .dribble-anchor .volume .img-main {
margin-left: 33px;
margin-right: 33px;
padding-top: 40px;
padding-bottom: 40px;
}
section ul .dribbleFM .dribble-anchor .volume .clickable {
padding-top: 5px;
padding-bottom: 8px;
}
section ul .dribbleFM .dribble-button2 {
display: none;
}
footer {
position: absolute;
bottom: 0;
height: 79px;
width: 100%;
background-color: #22222b;
border-top: 1px solid #4d505c;
text-align: center;
vertical-align: middle;
line-height: 79px;
cursor: default;
}
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<header><img src="https://imageshack.com/i/id8QV4sap">
<p>
STATIONS
</p><img src="https://imageshack.com/i/idUebcAVp">
</header>
<section>
<ul>
<li><a href="#">
<p>
Putin FM<strong>66,6</strong>
</p></a></li>
<li class="dribbleFM">
<div id="dribble-anchor-on" class="dribble-anchor">
<div class="volume"><img src="https://imageshack.com/i/exjVsiWzp"><img src="https://imageshack.com/i/ipxUWXkvp"><img src="https://imageshack.com/i/idsjoKxsp"></div>
</div><a href="#dribble-anchor-on" class="dribble-button1">
<p>
Dribbble FM<strong>101,2</strong>
</p></a><a href="#dribble-anchor-off" class="dribble-button2">
<p>
Dribbble FM<strong>101,2 </strong>
</p></a>
</li>
<li><a href="#">
<p>
Doge FM<strong>99,4</strong>
</p></a></li>
<li><a href="#">
<p>
Ballads FM<strong>87,1</strong>
</p></a></li>
<li><a href="#">
<p><img src="http://imageshack.com/a/img661/6406/acyLmg.png">Maximum FM<strong>142,2 </strong></p></a></li>
</ul>
</section>
<footer>
<p>High quality</p>
</footer>
</div>
</div>
</body>
</html>
By defualt, you have already set the text-decoration:none for anchors. But text-decoration is not acting on hover for anchors because you have not specified it for :hover state.
For :hover, Try this,
section ul li a:hover{text-decoration:none}
Hope this help.!
The solution already post should work fine. By the way, why are you keeping your styles first and then the bootstrap styles. You should keep your styles next to the bootstrap styles. Otherwise, whatever you will loose the impact of your styles overridden by bootstrap styles.