I am working on a project and I basically copied and pasted some code I had made before that I know worked. The only difference is that now, the index.html and index.css is in a different folder. The CSS is being applied but the ID's at the bottom are not for some reason. Still, if you preview it on this website, it is completely fine.
/*
font-family: 'Dosis', sans-serif;
font-family: 'Chewy', cursive;
HEX: #fff2df
HEX: #d9ad7c
HEX: #a2836e
HEX: #674d3c
*/
body {
font-family: 'Dosis', sans-serif;
background: #fff2df;
}
/* Matan's Website */
h1 {
font-family: 'Chewy', cursive;
font-size: 65px;
text-align: center;
}
/* Line */
hr {
width: 600px;
border-style: solid;
margin-top: -15px;
}
/* All Boxes */
ul {
overflow: hidden;
text-align: center;
}
li {
float: center;
text-align: center;
display: inline-block;
}
a {
background-color: #000;
border-radius: 20px;
z-index: 100;
}
.buttons {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.links {
font-size: 37.5px;
text-decoration: none;
display: inline-block;
text-align: center;
}
/* Individual Boxes */
#word {
background-image: url('Pictures/word.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
padding: 162.75px 119.25px;
margin: 65px 75px 0px 0px;
color: #fff;
transition: all 0.5s ease-out;
}
#word:hover {
padding: 189.875px 139.125px;
transition: all 0.5s ease-out;
opacity: 0.8;
margin-right: 63.4px;
margin-left: -28.125px;
margin-top: 37.875px;
}
#pwpoint {
background-image: url('Pictures/powerpoint.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 162.75px 69.75px;
margin: 65px 75px 0px 0px;
color: #fff;
transition: all 0.5s ease-out;
}
#pwpoint:hover {
padding: 189.875px 81.375px;
transition: all 0.5s ease-out;
opacity: 0.8;
margin-right: 63.275px;
margin-left: -11.5px;
margin-top: 37.875px;
}
#ptshop {
background-image: url('../Pictures/photoshop.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 162.75px 99px;
margin: 65px 0px 0px 0px;
color: #fff;
transition: all 0.5s ease-out;
}
#ptshop:hover {
padding: 189.875px 115.5px;
transition: all 0.5s ease-out;
opacity: 0.8;
margin-right: -28.125px;
margin-left: -4.9px;
margin-top: 37.875px;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="../index.css">
<link href="https://fonts.googleapis.com/css?family=Chewy|Dosis" rel="stylesheet">
</head>
<body>
<h1>My Portfolio</h1>
<hr>
<div class="allbuttons">
<ul class="buttons">
<li><a class="links" id="word" href="Word/index.html">Word</a></li>
<li><a class="links" id="pwpoint" href="Powerpoint/index.html">Powerpoint</a></li>
<li><a class="links" id="ptshop" href="Photoshop/index.html">Photoshop</a></li>
<li><a class="links" id="other" href="Other/index.html">Other</a></li>
</ul>
</div>
</body>
</html>
None of the IDs work, but the CSS file is linked correctly and displayed correctly. Any ideas why this might be?
"Eliminate all other factors, and the one which remains must be the truth."
As Sherlock Holmes frequently pointed out, when searching for the truth (in this case, a solution) we must first eliminate the clutter.
Relative vs. Absolute URLs are convenient when accurate, but prone to error for a variety of reasons.
A tidy workspace is invaluable; when coding any project, create and maintain a controlled and suitable space to help with avoiding and diagnosing problems that might crop up.
...
Other mildly patronising platitudes are available on request ;-)
Related
Hover gradient and background image with smooth in and out transition
so I am making a website. background-color: #212121; that has come to have a hover gradient with the background image with smooth in and out transition.
now, the transition is not smooth. It is flashing.
But one thing without changing the position and size of the .amsecta. can you help me?
<section class="m-containera">
<div class="am-secta">
<div class="contenta">
<div class="titls">Stream your favourite <br class="inlin md:hidden"> tracks right now</div>
<div class="par"> <i class="fab fa-spotify"> </i>Spotify Playlist</div>
</div>
<div class="iframe-container">
<iframe src="https://open.spotify.com/embed/artist/6ffL1W3QlzZGnP90Ffi3kY?theme=0" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</section>
body{
background-color: 212121;
}
.iframe-container {
padding-top: 29.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 360px;
left: 15%;
position: absolute;
top: 0px;
width: 70%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.iframe-container iframe:hover {
box-shadow: 0 5px 20px rgb(0 0 0 / 160%);
}
.m-containera {
width: 100%;
max-width: 1517px;
margin: 0 auto;
align-content: center;
text-align: center;
}
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
.contenta {
padding: 0 10px;
}
.titls {
font-size: 34px;
font-weight: 700;
text-align: center;
color: white;
font-family: 'Raleway';
}
.par { color: white;
text-align: center;
font-weight: normal;
font-size: 20px;
line-height: 1.5;
padding-top: 10px;
padding-bottom: 45px;
font-family: 'Raleway';
}
.inlin {
display: none;
}
.bold {
font-weight: 700;
}
Maybe, you are looking for this:
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
I am currently developing a styleguide and the hover-state of my navigation is giving me some headache, but I am pretty sure, that it could be solved very easily, so I just want to ask, if someone has an idea.
My html looks like this:
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem'><a href='#'>Design</a></li>
<li class='components__navItem' id='active'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
and my css looks like this:
.components__navigation {
display: flex;
height: 75px;
align-items: center;
padding-left: 50px;
border-bottom: 4px solid #f5f5f5;
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
margin-right: 50px;
}
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem a:hover {
background-size: 100% 3px,auto;
}
#active a {
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 100% 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
}
Here is a pen to make it more visual:
https://codepen.io/dbljn/pen/abbMdVE
The current hover-state is right under the font of the tabs, but I want the hover-state to be where the gray border is. Like so:
Do you have an idea? And thanks a lot!!
It is always a good practice to write similar styling rules when the elements are overlapping on each other.
for example, we could use the same background-image property with nav html element instead of border property
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
remove the margin from ul element and background-image from below selectors so that the nav element will spread on li element and will be dynamic
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
finally give the li element its background-image and other CSS rules,
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
Since you want the animation while hovering on li element, the :hover pseudo attribute should be present on this li element, also it's good to use classes instead of id
.components__navItem:hover, .active {
background-size: 100%;
}
Finally putting it all together,
body, html {
margin: 0;
}
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem:hover, .active {
background-size: 100%;
}
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem active'><a href='#'>Design</a></li>
<li class='components__navItem'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
Try replacing .components__navItem a with:
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
padding-bottom: 33px;
}
This is assuming a fixed font size though.
I'm not sure if I am able to achieve this using only CSS and HTML or if I need to use Javascript since after researching for a while I didn't really find much information on how to do this.
I haven't tried anything since I'm not really sure how I would go about this.
CSS:
* {
font-family: Montserrat;
margin: 0;
}
.menu {
text-align: center;
color: white;
width: 100%;
height: 80px;
background-color: white;
padding-top: 1%;
box-shadow: 10px -120px 900px 117px rgba(0,89,255,1);
}
ul {
color: black;
list-style: none;
margin-top: 1%;
font-size: 20px;
}
li {
text-decoration: none;
display: inline;
margin-left: 5%;
border-radius: 55px;
border-color: #005cff;
border-style: solid;
border-width: 3px;
padding: 0.2% 3% 0.2% 3%;
background-size: 200% 100%;
background-image: linear-gradient(to left, #62EF62 50%, white 50%);
-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
transition: 2s;
}
.first-title:hover {
padding: 0.2% 6% 0.2% 6%;
color: #005cff;
font-size: 25px;
background-position: 444.7 0%;
}
.second-title:hover {
padding: 0.2% 6% 0.2% 6%;
color: #005cff;
font-size: 25px;
background-position: 303 0%;
}
.third-title:hover {
padding: 0.2% 6% 0.2% 6%;
color: #005cff;
font-size: 25px;
background-position: 332 0%;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.logo {
float: left;
margin-top: 1%;
margin-left: 20px;
width: 200px;
height: 64px;
transition: 2s;
}
.logo:hover {
width: 260px;
height: 83px;
margin-top: 0.5%;
margin-left: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header class="sticky">
<img class="logo" src="images/logo.png">
<div class="menu">
<ul>
<li class="first-title">O que é o Artigo 19?</li>
<li class="second-title">Portfólio</li>
<li class="third-title">Entrevistas</li>
</ul>
<div>
</header>
<div class="box1"></div>
</body>
</html>
My goal is to when hovering over a list element, for it to go down to an anchor point.
The most compatible way you can do this is to have links to anchors on which you simulate a click "on hover" some other elements.
By example:
<div id="somewhere">...</div>
...
<a id="gotoSomewhere" href="#somewhere">...</a>
...
<div onmouseover="document.getElementById('gotoSomewhere').click();">...</div>
https://jsfiddle.net/pgtozf25/
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
I'm trying to make this web page and it just has so many issues. I cannot center the #titlediv and the navbar sometimes disappears. I'm not gonna lie: it might be a big fix, I'm really not sure. But here's the link if anyone can possibly salvage it:
http://jsfiddle.net/glenohumeral13/c604vbrn/
Code:
<body>
<div id="parallaxish"></div>
<div id="navbar">
<nav>
Item1
Item2
Item3
</nav>
</div>
<div id="contentdiv">
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
<div class="barrier"></div>
<div id="item1">
<h1>Item1</h1>
</div>
<div class="barrier"></div>
<div id="item2">
<h1>Item2</h1>
</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
#parallaxish {
background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
#navbar {
float:right;
height: 30px;
margin-right: 100px;
}
nav a {
text-decoration: none;
display: inline;
list-style-type: none;
padding-right: 15px;
padding-top: 10px;
float: left;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-o-transition: color 1s ease-out;
transition: color 1s ease-out;
font-weight: 100;
color: #fff;
-webkit-font-smoothing: antialiased;
}
nav a:hover {
color: #16a085;
}
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
.barrier {
height: 120px;
width: 100%;
background: transparent;
}
#item1 {
height: 600px;
width: 100%;
text-align: center;
background-color: white;
color: #16a085;
}
#item1 h1, #item2 h1 {
padding: 5% 0;
}
#item2 {
height: 600px;
width: 100%;
text-align: center;
background-color: black;
color: white;
}
First of all, a demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
What it looks like what you are trying to do is vertically and horizontally center it, in the div, correct?
There is a simple way to do this with css, that i find very useful:
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
First of all, we give position:relative; to the div id="welcome":
/*With your current CSS*/
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
position:relative;
}
And then, the magic! The <div> id="titlediv" is given position:absolute; and a few other rules:
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
width: 180px;
height: 76px;
left: 0;
right: 0;
top:0;
bottom:0;
overflow: auto;
}
This little trick only works if the width and height are declared.
Now, for the nav bar easily fixed:
#navbar {
position:absolute;
top:0;
right:100px;
height: 30px;
z-index:10;
}
And to wrap it all up, a full screen demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/
http://stickyjs.com/ will help you!
I
//LOAD THE FILES
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
/RUN THE SCRIPT
<script>
$(document).ready(function(){
$("#navbar").sticky({topSpacing:0});
});
</script>
if i were in your place i'll try to make my page by using a framework like bootstrap or foundation , if you want a lightweight one you can always try skeleton is easy to use & you can find snippets around the web very easily :
http://getbootstrap.com/ |
http://bootsnipp.com/
hopefully i helped you & next time try using google first