I'm new to the web design world, so I was playing a bit with bootstrap's and w3 help and I encountered the following issue.
I've got this right now:
what I have
and I want to make the two buttons on the right to fit the whole navigation bar height, is there a way to do that? something like a match_parent in android.
Here's my code:
li {
display: inline;
float: left;
}
li a {
width: 80px;
height: match-parent;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
Use Height for li as 100% and remove the top and bottom padding from a. Use line height to vertically align the text.
li {
display: inline;
height:100%;/* made the height to be the same as the parent's height */
float: left;
}
li a {
line-height:110px; /* line height should be the same as the element's height*/
width: 80px;
height: 100%;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/
text-decoration: none;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
EDIT. Oh and if you use Chrome, Firefox , they have developer tools which you can use to see what elements to edit.
You can use display: flex; and flex-grow: 1; to get the contents to the right. Much cleaner than using floats.
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
display: flex;
}
.logo {
flex-grow: 1;
}
li a {
width: 80px;
height: match-parent;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
#banner-img {
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover {
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active {
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li class="logo">
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
change the navbar height
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
or if you want to keep the navbar same size and
.right-li {
float: right !important;
height: 104px;
}
Add line height for anchor elements
li {
display: inline;
float: left;
height: 100%;
}
li a {
width: 80px;
line-height: 4.2;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
This is your solution
li {
display: inline;
float: left;
height: 100%;
}
li a {
line-height:110px; /* line height should be the same as the element's height*/
width: 80px;
height: 100%;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/
text-decoration: none;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
See Code Here you can edit also See Code
Related
Im trying to build my website for my school project and im trying to make the navigation bar using flexbox. Everything else is working fine but for some reason the links Tietoa, Usein ja Yhteyttä are stacking on each other and I cant get it to work. I've tried adding the display flex and content justify in the nav and ul links but it still doesnt work
<!DOCTYPE html>
<head>
<meta charset="utf-8"
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li>Tietoa</li>
<li>Usein</li>
<li>Yhteydet</li>
</ul>
</nav>
<a class="cta" href="#"><button>yhteyttä</button></a>
</header>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
body {
background-color: #F5F5F5;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 1px solid red;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: white;
box-shadow: 0px 2px 5px lightgray;
}
.logo {
cursor: pointer;
width: 100px;
height: 100px;
}
.nav__links {
list-style: none;
display: inline-block;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
Your class names in html and css are different fix them :
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
body {
background-color: #F5F5F5;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 1px solid red;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: white;
box-shadow: 0px 2px 5px lightgray;
}
.logo {
cursor: pointer;
width: 100px;
height: 100px;
}
.nav_links {
list-style: none;
display: flex;
flex-direction:row;
}
.nav_links li {
display:block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
<!DOCTYPE html>
<head>
<meta charset="utf-8"
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li>Tietoa</li>
<li>Usein</li>
<li>Yhteydet</li>
</ul>
</nav>
<a class="cta" href="#"><button>yhteyttä</button></a>
</header>
</body>
</html>
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 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>
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>
When i hover over the words "Skate Night" a list will show up with a transition, but i can't get the list to stay when i move my mouse off the text.
This is what i've tried.
<html>
<head>
<meta name="description" content="Skate Night is a community website by skaters, for skaters where you can share your content, get to know other skaters and enjoy what people have to share." />
<title>
Skate Night
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<a class="menu" href="forums.html"><li>Forums</li></a>
<a class="menu" href="videos.html"><li>Videos</li></a>
<a class="menu" href="about.html"><li>About</li></a>
<a class="menu" href="team.html"><li>Join the team</li></a>
<a class="menu" href="login.html"><li>Login</li></a>
</div>
</body>
</html>
html
{
background-color: #ff4444;
}
#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}
#sn:hover ~ .menu
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
Any help would be much appreciated, thanks in advance
You need JavaScript (JS) for that
function snActive () {
this.classList.add("active")
}
var sn = document.querySelector("#sn");
sn.addEventListener("mouseenter",snActive,false)
html
{
background-color: #ff4444;
}
#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}
#sn.active ~ .menu
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
<html>
<head>
<meta name="description" content="Skate Night is a community website by skaters, for skaters where you can share your content, get to know other skaters and enjoy what people have to share." />
<title>
Skate Night
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<a class="menu" href="forums.html"><li>Forums</li></a>
<a class="menu" href="videos.html"><li>Videos</li></a>
<a class="menu" href="about.html"><li>About</li></a>
<a class="menu" href="team.html"><li>Join the team</li></a>
<a class="menu" href="login.html"><li>Login</li></a>
</div>
</body>
</html>
It can be done with pure css:
#header:hover #sn
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
Fiddle:http://jsfiddle.net/hprnxw8n/
here it is with css, added a new div. you need to put li tags in a ul or ol.
EDITED my answer, took li's out altogether as they weren't doing anything, I thought they were for styling but they weren't
{
background-color: #ff4444;
}
#header
{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn
{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#sn:hover
{
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
.menu
{
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
list-style: none;
}
#sn:hover ~ #submenu a
{
transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
#submenu:hover .menu
{transition-delay:all 0s;
font-size: 200%;
color: #009900;
}
<div id="header"><a id="sn" href="home.html">Skate Night</a>
<div id="submenu" >
<a class="menu" href="forums.html">Forums</a>
<a class="menu" href="videos.html">Videos</a>
<a class="menu" href="about.html">About</a>
<a class="menu" href="team.html">Join the team</a>
<a class="menu" href="login.html">Login</a>
</div></div>
There are a couple of problems that I will attempt to solve here using only CSS and a bit of HTML restructuring. First of all, you list items are not inside a list - this in and of itself is already semantically incorrect and will cause issues. Heres the HTML I would use:
<div id="header">
<a id="sn" href="home.html">Skate Night</a>
<ul>
<li>Forums</li>
<li>Videos</li>
<li>About</li>
<li>Join the team</li>
<li>Login</li>
</ul>
</div>
I have nested your links inside the list items and added them to a list itself. This allows for accurate targeting so I can remove you class of .menu. I will already preface this by saying that I havent replicated your styling entirely here as that isn't the purpose of this answer. The purpose is to show how two elements can interact like that, the styling is but a detail.
Now, theres the problem that I can't really see what your animation is trying to do at all. You can, however, be clever about it. If you want a persistent animation, you can apply it to both your header and your list. So lets try that:
html {
background-color: #ff4444;
}
#header{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
/* Here I added some styling for you new list */
#header ul {
display: inline-block;
}
#header ul li {
display: inline-block;
color: #000000;
padding-left: 5%;
transition: all 0.5s;
text-decoration: none;
/* The below is important to prevent hovers on the ul */
list-style: none;
overflow: hidden;
height: 0;
}
#header ul li a {
color: inherit;
}
/* Here is where the magic happens */
#header #sn:hover {
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
#header #sn:hover + ul li,
#header ul:hover li {
color: #009900;
}
As long as you insure (by using paddings, for example) that you cursor does not fall in a gap between there #sn and the ul, then the hover will apply to both and stay applied until you leave either the #sn or the ul. You need to use a height: 0 and overflow: hidden to prevent hovers from happening before you hover on your #sn but otherwise this is the way to do it without javascript.
html {
background-color: #ff4444;
}
#header{
background-color: #000000;
height: 20%;
margin-left: -1%;
margin-top: -1%;
padding-top: 3%;
width: 101.6%;
box-shadow: 5px 10px 30px #009900;
display: inline-block;
}
#sn{
margin-left: 1%;
margin-bottom: -1%;
color: #e0e0e0;
text-decoration: none;
font-size: 400%;
box-shadow: 5px 10px 30px #009900;
border-radius: 10px;
transition: all 0.5s;
transition-delay:all 9999999s;
}
#header ul {
display: inline-block;
}
#header ul li {
display: inline-block;
color: #000000;
padding-left: 5%;
transition: color 0.5s;
text-decoration: none;
list-style: none;
overflow: hidden;
height: 0;
}
#header ul li a {
color: inherit;
}
#header #sn:hover {
color: #009900;
box-shadow: 5px 10px 30px #e0e0e0;
}
#header #sn:hover + ul li,
#header ul:hover li {
color: #009900;
height: auto;
}
<div id="header">
<a id="sn" href="home.html">Skate Night</a>
<ul>
<li>Forums</li>
<li>Videos</li>
<li>About</li>
<li>Join the team</li>
<li>Login</li>
</ul>
</div>