I'm currently following the tutorial on parallax effects on W3Schools. Basically, I have it so where the parallax is scrolling over my background correctly, but it's not scrolling over the text as well.
I tried a lot of things but it still doesn't work. I also saw one other post about this issue, but their code differed a lot from mine so it was hard to understand.
Here is the image of what is happening (the words are scrolling up with the page):
Here's my code:
*{
box-sizing: border-box;
}
body{
margin: 0px;
background-color: #ffffff;
}
ul{
text-align: center;
padding: 0px 20px;
margin: 12px auto;
list-style: none;
position: fixed;
z-index:10;
top: 0;
}
ul, li{
display: inline-table;
}
li{
margin: 10px 30px;
font-size: 15px;
color: #42385d;
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
.navbar{
background-color: #ffcfda;
position: fixed;
width: 100%;
border-bottom: 1px solid #ffcfda;
z-index: 10;
height: 70px;
top: 0;
overflow: hidden;
}
#parallax{
background-image: url("pinkbackground.jpg");
min-height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.transition{
height: 200px;
background-color: #42385d;
width: 100%;
}
.intro-text{
text-align: center;
width: 100%;
color: #42385d;
padding: 37vh;
height: 100vh;
width: 100%;
font-size: 50px;
font-family: 'Roboto Slab', serif;
position: relative;
background-attachment: initial;
}
.question{
font-size: 30px;
font-family: 'Roboto Mono', monospace;
color: #42385d;
font-weight: bolder;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>schpiel - Applying, Made Easier</title>
<!--meta data-->
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name = "description" content =
"schpiel, like the name implies, makes applying easier.
no, it doesn't sound like that? :(. Using our new autofill
feature, with one click you can apply instantly!">
<!--styling-->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght#1,300&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="icon" href="https://i.imgur.com/RoPgdJh.jpg">
</head>
<body>
<div id="navigation">
<nav class="navbar";>
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
About
</a>
</li>
<li>
<a>
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="parallax">
<div class="intro-text">
text
<br>
here
</div>
</div>
<div class="transition"></div>
<section id="whatIsSchpiel">
<div class="question">
What is schpiel?
</div>
<div class="answer">
sscsdafads
</div>
</section>
</body>
<footer>
</footer>
Related
I'm trying to align an image next to some text on my webpage without using any position properties like right:, left:, top:, and bottom: but I just can't align it the way I want
body {
background-color: #fafafa;
font-family: Epilogeal, sans-serif;
}
.main {
padding: 20px;
overflow: hidden;
}
nav {
width: 100%;
position: sticky;
display: flex;
}
.nav-links {
flex: 1;
text-align: left;
padding-left: 50px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 50px;
}
a {
text-decoration: none;
color: hsl(0, 0%, 41%);
font-family: Epilogeal, sans-serif;
}
.register-btn {
border: 2px solid hsl(0, 0%, 41%);
border-radius: 15px;
padding: 10px;
width: 4%;
text-align: center;
position: fixed;
right: 60px;
top: 16px;
}
.login-btn {
color:hsl(0, 0%, 41%);
position: fixed;
right: 215px;
}
.hero {
padding: 150px;
}
.hero-header {
color: hsl(0, 0%, 8%);
font-size: 50px;
}
.hero-text {
color: hsl(0, 0%, 41%);
font-size: 18px;
float: left;
}
.image {
width: 700px;
height: 700px;
float: right;
margin-bottom: 100px;
}
<!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.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
<title>Document</title>
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Features</li>
<li>Company</li>
<li>Careers</li>
<li>About</li>
</ul>
</div>
<div class="login-btn">
Login
</div>
<div class="register-btn">
Register
</div>
</nav>
<div class="hero">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
</div>
</div>
</body>
</html>
Here's what my webpage looks like:
And here's what I want it to look like:
I'm not good with positioning stuff in CSS, so any help would be much appreciated!
You can try this.
Replace the Hero Element with this.
<div class="hero">
<div class="hero-left">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
productivity soar.</p>
</div>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>
and CSS of .hero selector with
.hero {
padding: 150px;
display: flex;
justify-content: space-between;
}
I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously.
The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
Remove position: absolute; and use relative instead. absolute will not account for browser shrinkage, it will just still stay in the specified area.
.page-overview {
width: 100%;
border: 1px solid black;
}
.overview-content img {
width: 100%;
}
.caption {
position: relative;
width: fit-content;
margin: auto 0;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span {
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
The main thing is to wrap a position:absolute divs with a position:relative div, so the absolute div will be relative that that parent.
Besides that, I used flexbox to center the content.
That is assuming you want the caption ON the image...
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
.image-wrapper {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<div class="image-wrapper">
<a href="#">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"/>
</a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
</div>
I have two pages utilizing the same CSS files. Essentially I want the header to be stuck to the top of the page, no margins. It works on my index page, but not the next page. More confusing still, it works in Codepen but not in my Visual Studio. I've checked the CSS link to both pages, and that works fine, the rest of the CSS works on both pages as it should. There is just this margin above one of the headers that isn't working. Inspect element shows all margins should be zero.
Incorrect (see black line at top?)
Correct (see no line?)
HTML of Correct Page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
<div id="index-container">
HTML of Incorrect Page:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Shared by Both:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
I can see that the #sticky-h1 has got a "padding-top: 20px".
You might need to remove that padding in order to get it stack to the top.
I also think that you just need "margin: 0 auto;" once.
Please check the example below:
(I have used SO logo as I did not have yours)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
Following your comment, I have put the "padding-top: 20px" back and I have increased the margin of the "#banner" to 100px.
So actually I added a break to the HTML under the sticky-menu and it fixed this issue. Not sure if that is the correct way to do it... but since it worked perhaps I won't worry too much...
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
I'm trying to force the word "District" to sit below "Area School", but it tends to force "District" to the left of the page underneath the logo
HTML:
<!DOCTYPE html>
<head>
<meta name="description" content="EPASD is a public school district that serves the communities in and around East Pennsboro Township in Central Pennsylvania.">
<meta name="author" content="John Gibson">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="nomargins">
<header id="MainHeader">
<nav>
<ul>
<li class="inline" style="max-width:auto">
<img src="EPASD logo.svg" id="logo">
</li>
<li class="inline" id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li class="inline" id="DistrictName_2">
<div class="inline">Area School</div>
<div class="inline">District</div>
</li>
</ul>
</nav>
</header>
<aside>
<nav style="VerticalNavbar">
<a href="">
</nav>
</aside>
<section id-"MainContentArea">
<div id="carousel">
</div>
</section>
<aside id="articles">
<h1 class="ArticleSectionHeading">Articles</h3>
</aside>
</body>
</html>
CSS:
* {
margin: 0px 0px 0px 0px;
}
body {
background-image: url(background.svg);
background-size: cover;
background-attachment: scroll;
}
.nomargins {
margin: 0px 0px 0px 0px;
}
#MainHeader {
background: #F08819;
position: fixed;
z-index: 100;
height: 115px;
width: 100%;
min-width: 320px;
color: #000000;
opacity: 0.9;
}
#articles {
position: relative;
overflow: hidden;
}
#logo {
height: 100%;
max-height: 150px;
margin-top: -17px;
}
ul {
list-style-type: none;
padding-left: 0px;
max-height:auto;
overflow: visible;
display: inline-block;
}
#DistrictName_1 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 3.6em;
vertical-align: 60px;
margin-left: 26px;
}
#DistrictName_2 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.625em;
vertical-align: 80px;
}
.inline {
display: inline;
}
.block {
display: block;
}
Any suggestions on how to force District underneath? I'd like to keep it as text rather than merging the text into an .svg
Is this what you wanted to achieve?
Changed HTML
<ul>
<li style="max-width:auto">
<img src="EPASD logo.svg" id="logo"></img>
</li>
<li id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li id="DistrictName_2">
<div>Area School</div>
<div class="clear">District</div>
</li>
</ul>
CSS
ul li, #DistrictName_2 > div {
display:inline-block;
}
.clear {
float:left;
clear:both;
}
Working example here:
JSFiddle