In the below HTML and CSS I created a header and an image-animation which you can also find in the JSfiddle here:
body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;
text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.header_02 {
width: 80%;
height: 10vh;
margin: 10vh auto 0;
position: sticky;
z-index:99;
top:0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 15%;
float: left;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list {
width: 100%;
position: relative;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list img {
width: 100%;
height: 100%;
}
.image1 {
height: 100%;
width: 100%;
float: left;
position: absolute;
}
.image2 {
height: 100%;
width: 100%;
float: left;
animation-delay: 2s;
}
.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}
<div class="header_01">
This is our webpage.
</div>
<div class="header_02">
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 3.0 Main Menu </li>
</ul>
</nav>
</div>
<div class="image_animation">
<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
<div class="image2"><img src="http://placehold.it/201x201"></div>
</div>
</div>
As you can see I have a header consisting of two parts. The first .header_01 should disappear once the user scrolls down the page whereas the second .header_02 should remain fixed. I originally achieved this with the answer from the question here.
All this worked fine so far.
Now I added an .image-animation below the header with a postion: absolute; property which is neccesary to make the animation work. Therefore, I also added a z-index to my CSS as described in the answers here to get the animation below the header once the user scrolls down the page.
However, somehow I cannot make the z-index work in combination with the position: sticky; property because when I scroll down both headers disappear.
Do you have any idea what I need to change in my code so once the user scrolls down:
a) the first .header_01 disappears and
b) the second .header_02 remains fixed and
c) the .image-animation goes behind the header.
Simply remove the float (it's not needed) that are making the body having as height only the top header thus the sticky will not work as expected:
body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;
text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.header_02 {
width: 80%;
height: 10vh;
margin: 10vh auto 0;
position: sticky;
z-index:99;
top:0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 15%;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list {
width: 100%;
position: relative;
overflow:hidden;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list img {
width: 100%;
height: 100%;
}
.image1 {
height: 100%;
width: 100%;
position: absolute;
}
.image2 {
height: 100%;
width: 100%;
display:block;
animation-delay: 2s;
}
.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}
<div class="header_01">
This is our webpage.
</div>
<div class="header_02">
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 3.0 Main Menu </li>
</ul>
</nav>
</div>
<div class="image_animation">
<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
<div class="image2"><img src="http://placehold.it/201x201"></div>
</div>
</div>
Related
body {
margin: 0px;
}
.items_container {
display: flex;
align-items: center;
width: 100%;
height: 50px;
background-color: rgb(200,200,200);
}
.circle_container {
display: flex;
align-items: center;
position: relative;
z-index: 100;
}
.circle {
position: absolute;
margin: 0px 10px;
border: 0.5px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
.btext {
padding: 0px;
margin: 0px;
color: white;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
hr {
position: absolute;
width: 100%;
z-index: 90;
}
.finish_container {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
width: 100%;
z-index: 95;
}
.finish {
position: absolute;
margin: 0px 10px;
border: 0.5px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
}
.wtext {
padding: 0px;
margin: 0px;
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div class="items_container">
<div class="circle_container">
<div class="circle">
<p class="btext">
Start
</p>
</div>
</div>
<hr>
<div class="finish_container">
<div class="finish">
<p class="wtext">
Finish
</p>
</div>
</div>
</div>
I want to roll black (start) circle to the white (finish) circle with smooth animation. Is it possible to make this? If it is, how can i do that?
![Do not mind this sentence. System gives an error that says 'It looks like your post is mostly code; please add some more details.' For posting my question I am adding this, sorry.]!
<div classname="rotate"></div>
#keyframes anirotate {
0% {
transform: translateX(0) rotate(0);
}
100%{
transform: translateX(100px) rotate(360deg);
}
}
.rotate::after{
content: 'Start'
}
.rotate{
width : 200px;
height: 200px;
border-radius: 50%;
background-color: lightblue;
animation : anirotate 2s 0s 1 forwards;
}
Here is the codepen. As you can see using position: sticky; the div width is not overlapping. However when I tried using position: fixed the div width is overlapping. Can anyone help me with how to achieve it? My goal is I what my footer class to fixed at the bottom even I scroll.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: inherit;
}
.left {
position: fixed;
top: 0;
width: 43px;
left: 0;
bottom: 0;
/* border-right: 1px solid #e8edf3; */
background-color: red;
padding: 6px;
overflow: hidden;
transition: .18s ease-out width;
}
.main {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 42px;
right: 0;
bottom: 0;
overflow: auto;
transition: .22s ease left;
background: green;
}
.tool {
display: flex;
padding: 3px 4px;
/* box-sizing: border-box; */
align-items: center;
width: 100%;
border-bottom: 1px solid #e8edf3;
position: sticky;
top: 0;
background-color: #ffffff;
z-index: 13;
justify-content: space-between;
}
.footer {
padding: 3px 4px;
align-items: center;
width: 100%;
border-bottom: 1px solid #e8edf3;
position: fixed;
bottom: 0;
background-color: #ffffff;
z-index: 13;
display: flex;
justify-content: space-between;
}
<div class="left">
</div>
<div class="main">
<div class="tool">
<div class="test">Test toolbar design</div>
<div class="test">Test toolbar design</div>
</div>
<div class="footer">
<div class="test">Test footer design</div>
<div class="test">Test footer design</div>
</div>
<div>
Change the footer width to width: calc(100% - 43px);. Where 43px is the value of the left property of its relative parent (.main).
.footer {
width: calc(100% - 43px);
}
.left.expand ~ .main .footer {
width: calc(100% - 320px);
}
I'm simply trying to have a line connect a loading bar to a circle.
The line is not being displayed underneath the loading bar however. I've tried messing around with z-indexes and also putting them in containers. Any ideas?
https://jsfiddle.net/sfcurv4h/
body {
justify-content: center;
align-items: center;
background: #1e1e2f;
display: flex;
height: 100vh;
padding: 0;
margin: 0;
}
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 5px;
display: flex;
height: 40px;
width: 500px;
z-index: 1;
}
.progress-value {
animation: load 3s normal forwards;
border-radius: 100px;
background: #fff;
height: 30px;
width: 0;
z-index: 1;
}
#keyframes load {
0% { width: 0; }
100% { width: 68%; }
}
.active-services-circle {
width: 40px;
height: 40px;
background: #fff;
border: 2px solid #ACACA6;
border-radius: 50%;
transition: background 1s;
}
.active-services-circle.completed {
border: 2px solid #4B81BD;
background: #4B81BD;
}
.space-between-lb-features {
position: relative;
display: flex;
justify-content: space-between;
width: 600px;
}
.line-connector {
position: absolute;
width: 100%;
height: 50%;
border-bottom: 2px solid #ACACA6;
z-index: -1;
}
<div class="space-between-lb-features">
<div class="progress">
<div class="progress-value"></div>
</div>
<div class="active-services-circle"></div>
<div class="line-connector"></div>
</div>
I have the following simple HMTL and CSS code which you can also find in the JSfiddle here:
body {
height: 500px;
}
.image {
width: 100%;
height: 30%;
background-color: blue;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_details {
height: 100%;
width: 100%;
background-color: yellow;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image img {
height: 100%;
width: 100%;
display: block;
float: left;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.prev_button {
float: left;
width: 20%;
background-color: blue;
}
.next_button {
float: right;
width: 20%;
text-align: right;
background-color: blue;
}
<div class="image">
<div class="image_details"> <img src="http://placehold.it/101x101"> </div>
</div>
<div class="prev_button"> PREVIOUS </div>
<div class="next_button"> NEXT </div>
As you can see in the code above I want to have an image and a prev and next button. However, instead of having the prev and next buttons below the image I would like to have them on the left center and on the right center in the image.
What do I have to change in my code to make this work?
One easy method is to use absolute positioning. Insert the buttons as children of .image and set the parent to position: relative. The children need position: absolute; and have to be positioned, as you can see in my full example. I also remove the heights from your CSS so avoid stretching the img.
body * {
box-sizing: border-box;
}
.image {
width: 100%;
background-color: blue;
border-style: solid;
border-width: 1px;
position: relative;
}
.image_details {
width: 100%;
background-color: yellow;
border-style: solid;
border-width: 1px;
}
.image img {
width: 100%;
display: block;
background-color: red;
border-style: solid;
border-width: 1px;
}
.prev_button, .next_button {
width: 20%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.prev_button {
left: 0;
}
.next_button {
right: 0;
text-align: right;
}
<div class="image">
<div class="image_details"><img src="http://placehold.it/101x101"></div>
<div class="prev_button">PREVIOUS</div>
<div class="next_button">NEXT</div>
</div>
With the code below I want to create a mobile menu button <container> inside my <navigation>. All this works fine so far.
However, somehow the mobile menu button does not stay inside the <nav> . (See the green container compared to the yellow navigation)
I am guessing it has something to do with the fixed px for the width and the height. However, when I change those to a %-width the bars completely dissapear.
What do I have to change in my code so the <container> remains inside the surrounding <nav>?
You can also find my code here
body {
margin: 0;
}
.header {
width: 80%;
height: 10%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header">
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</div>
Remove height: 10%; from .header, it's taking 10% height of html
body {
margin: 0;
}
.header {
width: 80%;
/* height: 10%; */
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header">
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</div>
The margin settings for the bar and the bar itself are too high. Try the CSS below
.bar1, .bar2, .bar3 {
width: 35px;
height: 1px;
background-color: #333;
margin: 3px 0;
transition: 0.4s;
}