So I'm creating a nav-bar on a parallax-style website and I want a shadow to display on top of the image below the nav bar, but the shadow isn't visible on top of the image but below it.
I'll show you what I mean with the images below:
https://i.stack.imgur.com/GL10W.png
Here you see the shadow and there's no background image...
https://i.stack.imgur.com/QW6kk.png
... but here you can't, because of the image below the nav bar.
I've already tried z-index, but it isn't working.
Is there a way to make that you can see the shadow?
jsfiddle in the comments
EDIT: Thank you very much to all! You really helped me :)
Setting the z-index on .section-nav does nothing, because it is not positioned.
So possible solutions are (apart from Jeremy's, which also works):
Set the .nav-section to position: relative like the pimg's, which makes its own z-index work.
Or set the z-index of .pimg1 and .pimg2 to -1 to make them go behind the nav section.
#import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,600,900');
/* ---------- GLOBAL STYLES ---------- */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {
height: 100%;
font-family: 'Libre Franklin', 'Helvetica Neue', helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 21px;
color: #222;
}
.wrapper {
width: 72%;
max-width: 1000px;
margin: auto;
}
.section {
padding: 30px 50px;
}
.section-light {
background-color: #fff;
}
.section-dark {
background-color: #222;
color: #fff;
}
/* ---------- NAVIGATION STYLES ---------- */
.section-nav {
z-index: 99;
padding: 0;
border-bottom: 1px solid #767676;
box-shadow: 0px -20px 300px rgba(0, 0, 0, 1);
}
.section-nav ul {
display: block;
height: 72px;
display: flex;
align-items: center;
}
.section-nav ul li {
text-align: left;
display: inline-block;
margin-right: 37px;
}
.section-nav ul li a {
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: #222;
}
.section-nav ul li a.active {
color: #767676;
}
.pimg1, .pimg2 {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1; /* changed */
}
.pimg1 {
background-image: url('https://i.ibb.co/D9D8mZq/img1.jpg');
min-height: 100vh;
}
.pimg2 {
background-image: url('https://i.ibb.co/n6J2pTs/img2.jpg');
min-height: 100vh;
}
<!DOCTYPE html>
<body>
<div class="pimg1"></div>
<section class="section section-light section-nav">
<div class="wrapper">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Das Projekt</li>
<li>Kontakt</li>
</ul>
</div>
</section>
<div class="pimg2"></div>
<section class="section section-light">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa aliquid natus, consequuntur quasi dolorum, mollitia corrupti reprehenderit molestiae sequi ipsa quod minima, ullam saepe recusandae commodi nostrum obcaecati adipisci rerum atque omnis labore. Voluptatum quasi laborum ut cupiditate est ea, sequi tempora mollitia repudiandae autem nulla neque tenetur voluptate ducimus laudantium.
</p>
</section>
</body>
It looks like position: relative; is what's breaking it. Removing that from .pimg1, .pimg2 makes the box shadow show again.
You should add this style to .section-nav
position: relative;
Here's the updated style:
.section-nav {
z-index: 99;
padding: 0;
border-bottom: 1px solid #767676;
box-shadow: 0 0 0.3em #333;
position: relative;
}
I changed a box-shadow property too so I could see the shadow. Yours one I wasn't able to see well.
and link to fiddle
Related
I'm new to front-end, and I've been struggling to keep the text on the Hero Image as it always go outside of the hero Image or Slider, I tried another way of adding Hero Image with CSS background-image property, but then I can't keep Hero Image responsive!
Kindly let me know the mistakes in the code, and help me understand how can I keep the text on the Hero Image, and make it responsive as well.
Here is the code of the Hero Section
.hero {
position: relative;
}
.hero img {
max-width: 100%;
}
.text_overlay .container {
max-width: 500px;
margin: 0 auto;
}
.text_overlay {
position: absolute;
top: 150px;
left: 100px;
}
.text_overlay h1 {
font-family: 'Roboto', sans-serif;
font-size: 60px;
color: white;
}
.text_overlay p {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
/* Button */
.text_overlay a {
background-color: #31512a;
padding: 10px 20px;
display: inline-block;
margin-top: 20px;
border-radius: 4px;
}
.text_overlay a p {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-transform: uppercase;
}
<section class="hero">
<img src="imgs/hero1.jpg" alt="">
<div class="text_overlay">
<div class="container">
<p>Welcome to Agriculture Farm</p>
<h1>Agriculture & Eco Farming</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<a href="">
<p>More Info</p>
</a>
</div>
</div>
</section>
With the code provided this is how it looks on a desktop screen:
And this is how it looks on a responsive device:
First of all i used an image as a background-image inside your .hero container(section)
background-image: url("https://source.unsplash.com/random/1000x500");
Then i add Grid Property to .text-overlay container and create 2 columns
.text_overlay {
display: grid;
grid-template-columns: 40% 60%;
height: 100%;
}
First column width is 40% and the second width is 60% Your text container will be in 40% part.
You can also limit the width of the container using
.text_overlay .container {
padding: 6rem 1rem;
height: 100%;
min-width: 50rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body {
min-height: 100vh;
width: 100%;
}
img {
max-width: 100%;
display: block;
}
.hero {
height: 60%;
background-image: url("https://source.unsplash.com/random/1000x500");
background-size: cover;
}
.text_overlay {
display: grid;
grid-template-columns: 40% 60%;
height: 100%;
}
.text_overlay .container {
padding: 6rem 1rem;
height: 100%;
/* min-width: 50rem; */
}
.text_overlay .container > * {
margin-bottom: 1rem;
}
.text_overlay .container h1 {
font-family: "Roboto", sans-serif;
font-size: 7.5rem;
color: white;
}
.text_overlay p {
color: white;
font-family: "Roboto", sans-serif;
font-size: 2rem;
}
/* Button */
.text_overlay a {
background-color: #31512a;
padding: 0.25rem 3rem;
display: inline-block;
margin-top: 1rem;
border-radius: 4px;
}
.text_overlay a p {
color: white;
font-family: "Roboto", sans-serif;
font-size: 2rem;
text-transform: uppercase;
}
<section class="hero">
<div class="text_overlay">
<div class="container">
<p>Welcome to Agriculture Farm</p>
<h1>Agriculture & Eco Farming</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam
earum ratione illum, reiciendis consequatur harum hic, laboriosam
accusantium fuga numquam similique libero quia laborum eveniet
obcaecati eius ullam dolorem culpa quidem! Mollitia placeat
voluptates, nisi molestias dolorum accusantium voluptatum doloremque
eos vel impedit similique quo, quasi cum ea cumque at aut quos,
fugiat explicabo autem illo atque eaque? Iste
</p>
<p>More Info</p>
</div>
</div>
</section>
This question already has answers here:
How can I rotate the elements in my navbar using CSS?
(2 answers)
Closed 3 years ago.
I have some div tags which I am using as contact links on my website. They are meant to be located on the right hand side and be aligned in one line.
Currently looks like:
Preferred alignment:
Code below:
#book-me {
position: fixed;
right: 0;
transform: translateY(-50%);
z-index: 99999;
top: 50%;
background: black;
color:white;
padding: 5px 10px;
}
#book-me a {
background: black;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
font-family: sofia-pro;
writing-mode: vertical-rl;
}
#media screen and (max-width: 960px) {
#book-me {
bottom: 0;
top: initial;
transform: none;
}
#book-me a {
writing-mode: initial;
padding: 5px 10px;
}
}
<div id="book-me">
Call,
Text or
WhatsApp
</div>
Why not just rotate your book-me div (use full screen on snippet below to see transform):
#book-me {
position: fixed;
right: 0;
transform: rotate(90deg);
transform-origin: top right;
z-index: 99999;
bottom: 0;
background: black;
color: white;
padding: 5px 10px;
}
#book-me a {
background: black;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
font-family: sofia-pro;
}
#media screen and (max-width: 960px) {
#book-me {
transform: none;
}
#book-me a {
padding: 5px 10px;
}
}
<div id="book-me">
Call,
Text or
WhatsApp
</div>
<a> tags are only used to apply links to text, so they do not format the text on a block-level in any way. Format them as divs to get the effect you want. Note that this code does not contain anything to rotate the text 90 degrees as I assume based on your screenshots you already wrote that elsewhere.
#book-me {
position: fixed;
right: 0;
transform: translateY(-50%);
z-index: 99999;
top: 50%;
background: black;
color:white;
padding: 5px 10px;
}
#book-me a {
background: black;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
font-family: sofia-pro;
writing-mode: vertical-rl;
}
#media screen and (max-width: 960px) {
#book-me {
bottom: 0;
top: initial;
transform: none;
}
#book-me a {
writing-mode: initial;
padding: 5px 10px;
}
}
<div id="book-me">
<div>Call</div>,
<div>Text</div>
<div>or</div>
<div>WhatsApp</div>
</div>
Below is the Code you were probably trying to achieve but to be honest this is less than ideal and I would recommend just rotate your box since your approach isn't meant to be used like that.
* {
margin: 0;
padding: 0;
}
#book-me {
position: fixed;
height: 100%;
left: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: baseline;
}
#book-me span {
transform: translateY(calc(50vh - 50%));
color: white;
background: black;
padding: 5px 10px;
writing-mode: vertical-rl;
}
#book-me a {
background: black;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
font-family: sofia-pro;
writing-mode: vertical-rl;
}
#media screen and (max-width: 960px) {
#book-me {
bottom: 0;
top: initial;
transform: none;
}
#book-me a {
padding: 5px 10px;
}
}
p {
padding: 2em;
font-size: 2em;
}
<div id="book-me">
<span>
Call,
Text or
WhatsApp
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, doloremque!</p>
<p>Expedita fugit dolor amet ipsa voluptatibus, nesciunt eos beatae voluptas.</p>
<p>Vitae sapiente, nihil ea quam, asperiores error aliquam? Mollitia, nobis?</p>
<p>Veniam suscipit explicabo ipsum nobis hic sunt, ea laboriosam obcaecati!</p>
<p>Sunt explicabo consectetur eius ipsam maiores laborum inventore excepturi temporibus?</p>
<p>Blanditiis nulla tenetur, cum, placeat fuga sint sed itaque debitis.</p>
<p>Fugit nobis fuga sit, repellat quae doloremque, dolorum obcaecati suscipit!</p>
<p>Voluptas officiis veritatis excepturi possimus modi eum corporis, ducimus earum!</p>
<p>Dolorem expedita quae, numquam consequatur maiores veniam iure? Minus, quia?</p>
<p>Deserunt fugiat odit repellat impedit perferendis, minus minima. Facere, quidem.</p>
I'm not really sure how to word this question but I'll try.
So, I'm trying to get an overlay over the top of a background image, the header itself is taking up 100vh, but when I place the overlay with the image included, some padding from the nav is pushing the background colour down below the viewport it seems. I've tried to take margin off the nav elements and it brings the background up a little but not all the way. Maybe I'm missing something very simple here but I just can't seem to get my head around it.
Here's a link to the codepen (I know the code is a bit of a mess, it's just a test): https://codepen.io/Jmp93/pen/BMJwov
<nav id="main-nav">
<h3>TEST|Web</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<header>
<h1>Test Text Sample</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dolores, dolorum minima id beatae aperiam saepe
sapiente animi quas earum?</p>
</header>
<section id="start-section">
<div class="container">
<h1 class="m-heading">Some Text</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta possimus dolore temporibus aut,
reiciendis voluptatum voluptate consequatur ducimus. Sunt minus nihil nulla in commodi. In officiis, harum amet
eos nesciunt illum rerum aliquam quasi modi natus quis laudantium qui quae?</p>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #fff;
margin: 0;
line-height: 1.5;
}
.m-heading {
font-size: 2rem;
margin-bottom: .75rem;
}
.lead {
font-size: 1.2rem;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
text-align: center;
}
header:before {
content: '';
background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
header h1 {
font-size: 4rem;
margin: 1rem;
}
#main-nav {
display: flex;
position: sticky;
top: 0;
left: 0;
justify-content: space-between;
}
#main-nav h3 {
font-size: 2rem;
margin: 2rem;
}
#main-nav ul {
display: flex;
justify-items: center;
font-size: 1.2rem;
margin: 2rem;
}
#main-nav ul li {
list-style: none;
}
#main-nav ul li a {
color: #fff;
text-decoration: none;
padding: 1rem;
}
#main-nav ul li a:hover {
background: #444;
border-radius: 25px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
#start-section {
background: #fff;
color: #000;
text-align: center;
}
Any help would be appreciated, thanks.
Just try to apply a position relative to the header itself :) usually if you use a position absolute, the main element containing it should be relative. That is the correct way of making the absolute element be positioned at 100% of its parent's width and height and not floating without reference.
Well basically I'm creating some forums, and for example we're looking at a thread and the user information is on the left, and the content of the thread is on the right, and then under is the user's signature.
Now, I'm trying to get the user information on the left to stretch down to the height of its container...
http://prntscr.com/7dbdww
.topic {
width: 100%;
display: inline-block;
border: 1px solid #444;
margin-bottom: 20px;
position: relative;
}
.topic-header {
width: 100%;
height: 40px;
display: block;
background-color: #CD422B;
border-left: 1px solid #CD422B;
border-right: 1px solid #CD422B;
}
.topic-header h4 {
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
font-weight: 700;
padding-left: 10px;
line-height: 40px;
margin: 0;
}
.topic-userinfo {
width: 20%;
min-height: 200px;
display: inline-block;
position: relative;
float: left;
left: 0;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
.topic-usersig {
width: 80%;
height: 150px;
max-height: 300px;
display: inline-block;
overflow-y: auto;
position: relative;
float: right;
right: 0;
background-color: #323232;
border-top: 1px dashed #444;
}
.topic-body {
width: 80%;
min-height: 200px;
display: inline-block;
position: relative;
float: right;
right: 0;
background-color: #323232;
color: #fff;
}
That's css ^ here's html
<div class="topic">
<div class="topic-header">
<h4><i class="fa fa-fw fa-comment"></i> Test</h4>
</div>
<div class="topic-userinfo">
<div class="userinfo-box">
<center>
<span class="userinfo-name admin-color">
deaL
</span>
<span class="userinfo-rank">
Administrator
</span>
<img src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" style="border: 1px solid #333; width: 90px; height: 90px;">
</center>
</div>
<center>
Joel Evans
</center>
</div>
<div class="topic-body">
<div class="topic-content">test2</div>
</div>
<div class="topic-usersig">
<div style="margin: 10px"></div>
</div>
</div>
use these css for parent
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
use these css for child
.child {
background:blue;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Just setting the height alone to 100% didn't work for me. I also changed the position to absolute for that div.
CSS
.topic-userinfo {
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
float: left;
left: 0;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
JSFiddle
Some serious issues with this code, and most of the answers as well:
The <center> tag has been deprecated for a very, very long time. Use the CSS text-align property.
Using float: right / left and display: inline-block together doesn't make sense. The computed value of display will be block, regardless.
Using float and then position: absolute also makes no sense. The computed value of float will be none.
Using display: inline-block on elements that are clearly intended as block level elements.
Percentage width on a sidebar that contains elements with a fixed width. That won't scale down nicely.
Rogue inline styles.
Your CSS is muddled, because your markup is structured poorly. By balancing your markup and styles, you can achieve the intended look without so much hacking about on either side. Sometimes more is less.
Here's a simple example where the .topic-user-info will always match the height of the .topic-message and .topic-signature elements combined. No floats, only one position: absolute, and some nice, semantic markup.
DEMO
.topic {
width: 100%;
border: 1px solid #444;
}
.topic-header {
width: 100%;
height: 40px;
background-color: #CD422B;
}
.topic-content {
padding-left: 180px;
position: relative;
box-sizing: border-box;
width: 100%;
color: white;
}
.topic-user-info {
position: absolute;
width: 180px;
height: 100%;
left: 0;
background-color: #444;
text-align: center;
}
.topic-body {
width: 100%;
background-color: #323232;
}
.topic-message,
.topic-signature {
padding: 10px;
box-sizing: border-box;
}
.topic-message {
min-height: 180px;
}
.topic-signature {
min-height: 120px;
border-top: 1px dashed #444;
}
<div class="topic">
<header class="topic-header">Header</header>
<section class="topic-content">
<div class="topic-user-info">User Info</div>
<article class="topic-body">
<div class="topic-message">
<p>Message</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed et deleniti rem, odio sit perspiciatis quasi dignissimos repellat inventore sequi cupiditate vel quam, asperiores nisi magni, quaerat at autem id dolorem! Dolor, nobis! Fuga nisi aut deserunt in delectus nam quidem ea asperiores, animi nihil. Delectus, ab nisi. Possimus, laborum quos impedit atque eius ex ab enim a amet omnis ullam totam facere sed necessitatibus aut nihil reprehenderit sequi optio doloremque rerum voluptatum ea adipisci minus, molestias modi. Numquam iste, ducimus consequatur deleniti dolores explicabo. Doloremque odio placeat deleniti ipsam consequatur beatae eius doloribus reiciendis ut sit unde distinctio modi voluptates expedita sint ad, earum asperiores aliquid est architecto autem in, quibusdam officiis! Distinctio, eos quaerat, id illum aliquam aut.</p>
</div>
<aside class="topic-signature">
<p>Signature</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti delectus laudantium minima magni temporibus distinctio, aut modi saepe deserunt praesentium eligendi qui quod, ratione omnis exercitationem officiis repellendus adipisci eum molestias vitae, sed. Atque dicta in veniam ducimus voluptatem quasi accusantium, temporibus esse, aliquid itaque explicabo omnis, delectus expedita rem.</p>
</aside>
</article>
</section>
</div>
Use height:100%
.topic-userinfo {
width: 20%;
min-height: 200px;
display: inline-block;
height:100%;
position: relative;
float: left;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
Marks Answer is almost perfect, except that it stretches a bit to far because of the header. If we offset for the header, it's perfect.
.topic-userinfo {
width: 20%;
height: calc(100% - 40px);
display: inline-block;
position: absolute;
float: left;
left: 0;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
https://jsfiddle.net/1pntme1x/1/
The main issue at hand is that you need the left-floated child .topic-user-info to take 100% height of the parent. But the parent's height is auto by default, meaning it will adjust its height to fit the children. And that is why simply putting height:100% on the floated left child won't work.
The solution is to absolutely position the left child, and float the thread content and signature to the right. If your markup is done properly, it becomes very easy to do. I personally think the HTML is pretty poor - non-semantic tags, use of deprecated tag <center>, plenty of inline styles. The best thing to do would actually be to rewrite them.
* {
box-sizing: border-box;
}
.topic {
width: 100%;
display: inline-block;
border: 1px solid #444;
margin-bottom: 20px;
position: relative;
}
.topic-header {
display: block;
width: 100%;
height: 40px;
background-color: #CD422B;
border-left: 1px solid #CD422B;
border-right: 1px solid #CD422B;
}
.topic-header h4 {
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
font-weight: 700;
padding-left: 10px;
line-height: 40px;
margin: 0;
}
.topic-user-info {
position: absolute;
padding: 0 10px;
height: calc(100% - 40px);
width: 20%;
min-width: 130px;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.topic-user-info > .public-profile {
position: relative;
margin: 10px auto;
background-color: #fff;
}
.topic-user-info > .public-profile > .screen-name {
color: red;
}
.topic-user-info > .public-profile > .rank {
color: #000;
}
.topic-user-info > .public-profile > .avatar {
width: 90px;
height: 90px;
border: 1px solid #333;
}
.topic-body {
float: right;
width: 80%;
min-height: 500px;
background-color: #323232;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
.topic-content {
padding: 20px;
min-height: 200px;
}
.topic-usersig {
padding: 20px;
height: 150px;
max-height: 300px;
background-color: #323232;
border-top: 1px dashed #444;
}
<article class="topic">
<header class="topic-header">
<h4>Test</h4>
<!-- maybe other things in header -->
</header>
<section class="topic-user-info">
<article class="public-profile">
<div class="screen-name">deaL</div>
<div class="rank">Administrator</div>
<img class="avatar" src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" alt="" />
</article>
<div class="user-real-name">Joel Evans</div>
</section>
<section class="topic-body">
<section class="topic-content">
<h3>Test2</h3>
</section>
<section class="topic-usersig">
Some signature here
</section>
</section>
</article>
height 100% some times doesn't seem to work as it should . We can use a small Js function to handle this.
We have added same class 'EqHeightDiv' to both the divs which we want to have same heights. then add following code in document ready js .
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight($(".EqHeightDiv"));
the Function will return the height of tallest div from the two divs and append that height to the shorter div.
I've been making this website for school and I thought i'd figure out how parallax scrolling works. So i've started with the simpelest tutorial to be precise this one. After doing this I placed my navigation bar in. I remember this worked fine at the time but after working allot on the responsiveness I didn't check back and now I can't click on the links anymore.
This is my html:
<div id="group2" class="parallax_group">
<!-- <div class="parallax_layer parallax_layer-back">
background
</div> -->
<div class="parallax_layer parallax_layer-base">
<div id="nav" class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Over ons</li>
<li>Wat leveren wij?</li>
<li>Contact</li>
<li>Demo</li>
</ul>
</div>
<div class="section group">
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id nam, necessitatibus at odit nobis vitae, dolor sequi sunt doloremque minima, debitis. Sed debitis possimus esse soluta mollitia est culpa.</p>
</div>
<div id="middle" class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui autem impedit, a, error accusantium soluta molestias quidem quo totam beatae eligendi sint, modi voluptatem nemo fugiat recusandae ullam consequatur nihil?</p>
</div>
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatibus, quaerat nostrum ullam distinctio praesentium! Nemo eveniet provident id, tenetur cumque natus, quas porro possimus maiores, minus amet laboriosam ea?</p>
</div>
</div>
</div>
</div>
And this is my css:
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
h1{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: black;
}
header {
z-index: 5;
line-height: 100vh;
}
header .parallax_layer-back {
background: url(sample.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#group2 {
z-index: 3;
}
#group2 .parallax_layer-base {
background-color: #dbdbdb;
}
.parallax {
perspective: 300px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer-base {
transform: translateZ(0px);
z-index: 4;
}
.parallax_layer-back {
transform: translateZ(-300px) scale(2);
z-index: 3;
height: 150vh;
}
.parallax_layer-deep{
transform: translateZ(-600px) scale(3);
z-index: 2;
background-color: #dbdbdb;
}
.parallax_group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
/*transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}
/*Columns*/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
#middle{
border-top: 0px;
border-bottom: 0px;
border-right: 1px;
border-left: 1px;
border-style: solid;
}
/*navigation*/
.nav {
position: sticky;
top: 0px;
height: 100px;
width: 100%;
z-index: 30;
font-family: 'Raleway', sans-serif;
font-size: 20px;
background-color: #dbdbdb;
}
.nav ul {
list-style-type: none;
margin-left: 0;
padding-top: 40px;
font-size: 25px;
font-family: 'Raleway', sans-serif;
line-height: 0;
z-index: 30;
}
.nav li {
display: inline-block;
margin-left: 15px;
padding-bottom: 25px;
z-index: 30;
}
a:link {
color: #2F649B;
font-family: inherit;
}
a:visited {
color: #2F649B;
}
a:hover {
color: #6D92B9;
text-decoration: none;
}
a:active {
color: #26507C;
text-decoration: none;
}
footer {
position: sticky;
bottom: 0px;
height: 100px !important;
line-height: 100px;
width: 100%;
}
I know it's allot of code but I have no idea what it could be so i went and gone ahead and gave you everything.
edit: The other html parallax group:
<!DOCTYPE html>
<html>
<head>
<title>Squirel WebDesign</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (max-device-width: 480px), screen and (max-width: 480px)">
</head>
<body>
<div class="parallax">
<header class="parallax_group">
<div class="parallax_layer parallax_layer-base">
<h1>i'm a bloody big header preferably with a squirel</h1>
</div>
<div class="parallax_layer parallax_layer-back">
</div>
<div class="parallax_layer parallax_layer-deep">
</div>
</header>