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
Related
I started making a landing page for a coin counting website, but for no reason, I have a bottom x scrollbar but when I try to remove it with overflow-x it messes everything up. I think the title is causing the scrollbar to appear but IDK why or what style is causing it. I started a couple of weeks ago so I don't know a lot.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.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: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
Please try the below code that i have pasted, I hope it will work as expected .
let me tell you that what was the issue -
using "position: relative" for "title" class was causing issue .
And it is always good to use font-size in pixel instead of using in percentage like you are doing .. to adjust the content always ensure to use spacing like margin and padding .
happy coding .
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.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: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 30px;
margin-top: 60px;
margin-left: 60px;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
You were correct that the title class was causing a problem.
It had been given a left position. But it also had remained at the default display: block - the 'extra' scroll part was caused by the addition of theleft: 80px
This snippet gives it display: inline-block:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.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: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
display: inline-block;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
you are setting left property for title tag which shift the content right side from that left amount so it needs to show a horizontal scroll bar to view the content shifted from the viewing area.
You can resolve it by changing the left property to margin-left like in below code
.title {
font-size: 240%;
position: relative;
margin-left: 80px;
top: 120px;
color: white;
}
other wise you can set the width of the title by reducing the shifted value from it like below
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
width: calc(100% - 80px);
}
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 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>
A bit baffled here. i've added a slider transition to the portfolio box at the top, but since adding it, the two big text boxes have moved in line with it vertically when they were just sitting to the left hand side of the page beforehand. so unsure where or what has gone wrong!!
It's gonna be something small im sure, as it always is, but this is one of those little hurdles for the day which ive spent ages trying to figure out, but just cant. So hope you can help, thanks!!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png"/>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background: -webkit-gradient(linear, 84% 100%, 100% 0%, from(#9179AB), to(#E39745), color-stop(.6,#B37D89))
}
div.home {
width: 250px;
height: 35px;
background-color: #212121;
float:left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.mentioncopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 2px;
}
div.portfolio {
width: 125px;
height: 35px;
background-color: #212121;
float: left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.portfoliocopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 1px;
}
div.about {
width: 125px;
height: 35px;
background-color: #212121;
float:left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.aboutcopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 1px;
}
.sliding-middle-out {
padding-bottom: 3px;
text-align: center;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 50%;
background: white;
}
.sliding-middle-out {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.sliding-middle-out:hover {
opacity: 0.7;
}
a:link
{
color: white;
text-decoration: none;
}
a:visited
{
color: white;
text-decoration: none;
}
a:hover
{
color: white;
text-decoration: none;
}
a:active
{
color: white;
text-decoration: none;
}
div.header {
width: 506px;
height: auto;
background-color: #212121;
display: inline-block;
}
div.headercopy {
color: white;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
div.headerlink {
width: 506px;
height: auto;
background-color: #212121;
}
div.linkcopy {
color: white;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 20px;
display: inline-block;
}
</style>
<title>3.0</title>
</head>
<body>
<div class="home">
<div class="mentioncopy">
MENTIONBENJAMIN
</div>
</div>
<div class="portfolio">
<div class="sliding-middle-out">
<div class="portfoliocopy">
PORTFOLIO
</div>
</div
</div>
<div class="about">
<div class="aboutcopy">
ABOUT
</div>
</div>
<br><br><br><br><br>
<div class="header">
<div class="headercopy">
It’s like hosting your first dinner party with every design— to set the mood, nourish the guests and lay the table just so, requires dexterity, innovation and passion.
</div>
</div>
<br><br>
<div class="headerlink">
<div class="linkcopy">
Working between strategy and design, I find nothing more satisfying than cracking a clients puzzle of a problem in an inventive, effective way.
</div>
</div>
<br><br><br><br><br><br>
</body>
</html>
This is most likely a "clearfix" situation, there are various solutions to accomplish it.
What is a clearfix?
New CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
AFTER portfolio add an empty div
<div class="portfolio">
<div class="sliding-middle-out">
<div class="portfoliocopy">
PORTFOLIO
</div>
</div> <!---- this needs the greater than sign also! --->
</div>
<div class="clearfix"></div>
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>