I have a project that contains a header. This header consists of a certain background color and text color. These colors aren't going well with one part of the website. So I want to transition the header to different colors. But I want the colors to change gradually at the border and not swap immediately.
The headers should transition from one color to the other at the border of the container when entering and leaving. But I don't seem to get this to work.
body {
height: 300rem;
margin: 0;
padding: 0;
}
#main-container {
width: 100%;
height: 100%;
background-color: red;
}
#header {
width: 100%;
height: 2rem;
background-color: blue;
position: sticky;
top: 0;
}
#someDiv {
position: relative;
width: 100%;
height: 20rem;
background-color: purple;
margin-top: 30rem;
}
#headerSomeDiv {
width: 100%;
height: 2rem;
background-color: green;
color: white;
position: sticky;
top: 0;
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
position:fixed can do this
body {
height: 300rem;
margin: 0;
}
#main-container {
height: 100%;
background-color: red;
clip-path:inset(0); /* to clip the position:fixed to its container */
overflow:auto;
}
#header,
#headerSomeDiv{
width: 100%;
height: 2rem;
background-color: blue;
position: fixed;
top: 0;
}
#headerSomeDiv {
background-color: green;
color: white;
}
h1 {
margin:0;
}
#someDiv {
position: relative;
height: 20rem;
background-color: purple;
margin-top: 30rem;
clip-path:inset(0); /* to clip the position:fixed to its container */
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
Related
I am trying to use the stick position with my header part. on scroll it works with couple of side move. then the header hides. it should be always in the top for my requirement. i have give z-index as well in higher value. any one help me to understand the issue.
HTML:
<div class="wrapper">
<div class="navi">Navigation</div>
<header>Header goes here</header>
<div class="container">
<div class="child1">Chile-1</div>
<div class="child2">Chile-2</div>
<div class="child3">Chile-3</div>
<div class="child4">Chile-4</div>
<div class="child4">Chile-5</div>
<div class="child4">Chile-6</div>
<div class="child4">Chile-7</div>
</div>
</div>
css:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
height: 100%;
position: relative;
}
.container {
border: 2px solid blue;
height: 100%;
}
.navi {
border: 2rem solid lightpink;
}
header {
background-color: gray;
padding: 1rem;
top: 0;
left: 0;
right: 0;
position: sticky;
z-index: 100;
}
.container > div {
height: 50%;
border: 1px solid red;
}
.child1 {
background-color: brown;
}
.child2 {
background-color: yellow;
}
.child3 {
background-color: lightblue;
}
.child4 {
background-color: greenyellow;
}
Live demno
when adding 100% height to .wrapper and .container, the height get computed as below picture (838px in my case).. and when scroll crosses 838px, the header looses the sticky property.. when you set to auto, height will be computed automatically (adding all the divs' height) and it works expected..
height as 100%
height as auto
html,
body {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
}
.navi {
border: 2rem solid lightpink;
}
header {
top: 0;
padding: 1rem;
z-index: 100;
position: sticky;
background-color: gray;
}
.container>div {
padding: 30px;
position: relative;
z-index: 0;
}
.child1 {
background-color: brown;
}
.child2 {
background-color: yellow;
}
.child3 {
background-color: lightblue;
}
.child4 {
background-color: greenyellow;
}
<div class="wrapper">
<div class="navi">Navigation</div>
<header>Header goes here</header>
<div class="container">
<div class="child1">Chile-1</div>
<div class="child2">Chile-2</div>
<div class="child3">Chile-3</div>
<div class="child4">Chile-4</div>
<div class="child4">Chile-5</div>
<div class="child4">Chile-6</div>
<div class="child4">Chile-7</div>
<div class="child4">Chile-7</div>
<div class="child4">Chile-7</div>
<div class="child4">Chile-7</div>
<div class="child4">Chile-7</div>
<div class="child4">Chile-7</div>
<div class="child4">Chile-7</div>
</div>
</div>
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
I've got sections that slide up over the header.
But I need the last section to reveal the footer.
It is possible to reveal the footer without JavaScript in a situation like this?
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: fixed;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</div>
<div class="footer">
footer
</div>
View on JS Bin
The reason your footer isn't showing up is because it has a lower z-index than the other sections. However, if you give your .footer class a higher z-index than the other sections, it will always show at the bottom because it has the style position: fixed.
One possible solution would be to give the footer the same z-index as the other sections, change its position to relative, and include it inside your .container class.
This would look like:
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3,
.footer {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: relative;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
</div>
JS Bin
Try putting :
z-index: 11;
Because you have z-index in the other container that's why you can't see the footer
You might consider using position:sticky.
A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.
However, consider the browser compatibility.
At the time of this post, IE doesn't support "sticky" positioning.
Here's a demonstration:
body {
margin: 0;
}
.header {
position:-webkit-sticky;
position: sticky;
background: tomato;
height: 100vh;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
position:relative;
height: 10vh;
background: aquamarine;
}
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
I've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).
Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.
So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:
.col:hover { width: 100%; }
This seems to work okay for the first column, but the others flicker and glitch upon hover.
Check out the code below (I'm just using color blocks as images for now) /
Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ
<!doctype html>
<head></head>
<body>
<div class="container">
<a class="button" href="#">learn more</a>
<div class="col col-1">
<div class="vertical-align">
<h1 class="hero-text">data</h1>
</div>
</div>
<div class="col col-2">
<div class="vertical-align">
<h1 class="hero-text">intelligence</h1>
</div>
</div>
<div class="col col-3">
<div class="vertical-align">
<h1 class="hero-text">experience</h1>
</div>
</div>
<div class="col col-4">
<div class="vertical-align">
<h1 class="hero-text">activation</h1>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.col {
display: inline;
float: left;
width: 25%;
height: 100vh;
background-color: red;
position: relative;
text-align: center;
z-index: 0;
overflow: hidden;
}
.button {
padding: 20px 0;
width: 100%;
background-color: purple;
color: #ffffff;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.button:hover {
background-color: orange;
}
.col-1:hover {
background-color: pink;
}
.col-2:hover {
background-color: blue;
}
.col-3:hover {
background-color: green;
}
.col-4:hover {
background-color: yellow;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
</style>
</html>
Use an image instead of a color, and get it to cover the whole element:
.col-1:hover {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
}
.col-1:hover {
background-color: pink;
background-image: url(...);
background-repeat: no-repeat;
width: 100%
}
How about this? It works on my side.
https://codepen.io/progr4mm3r/pen/maJBda
I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.
The concept came from Joshua Johnson
Check out the CodePen or the source code below:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<ul>
<div class="col">
<li>
data
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
</li>
</div>
<div class="col">
<li>
intelligence
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</li>
</div>
<div class="col">
<li>
experience
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</li>
</div>
<div class="col">
<li>
activation
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
</li>
</div>
</ul>
</nav>
<img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #333;
}
.col {
width: 24.9%;
height: 100vh;
float: left;
display: inline;
border-right: 1px dashed #ffffff;
text-align: center;
}
.col:last-child {
border-right: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
width: 100%;
height: 100vh;
}
.container li img {
position: absolute;
top: 0;
left: 100%;
z-index: -50;
/*transition: all 1s ease;*/
width: 100%;
height: 100vh;
}
nav {
width: 100%;
height: 100vh;
}
ul {
width: 100%;
height: 100vh;
list-style: none;
text-align: center;
}
li {
width: 100%;
height: 100vh;
display: flex;
padding-top: 100px;
}
li a {
z-index: 1;
color: #ffffff;
text-decoration: none;
font-size: 36px;
width: 100%;
height: 100vh;
}
li a:hover + img {
left: 0;
}
</style>
<script type="text/javascript">
</script>
</html>
I found this solution to centering my div vertically and horizontally. However if I fill in the content section past the length defined for the div it will run outside of it. I was hoping to make it expand depending on the content inside the div. How do I make it so this can happen?
JSFIDDLE
HTML:
<body>
<div id="wrapper">
<div id="headerwrapper">
<div id="header" class="center">header</div>
</div>
<div id="titlewrapper">
<div id="title" class="center">title</div>
</div>
<div id="contentwrapper">
<div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
<div id="footerwrapper">
<div id="locationwrapper">
<div id="location" class="center">location</div>
</div>
<div id="copyrightwrapper">
<div id="copyright" class="center">copyright</div>
</div>
</div>
</div>
</body>
CSS:
html body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%
max-width: 5em;
}
#wrapper {
background-color: pink;
height: 100%;
width: 100%;
}
#headerwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#header {
color: white;
background-color: black;
}
#titlewrapper {
background-color: red;
width: 100%;
height: 8em;
}
#title {
color: white;
background-color: black;
}
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
#content {
color: white;
background-color: black;
}
#locationwrapper {
background-color: yellow;
width: 100%;
height: 8em;
}
#location {
color: white;
background-color: black;
}
#footerwrapper {
background-color: brown;
width: 100%;
height: 100%;
}
#copyrightwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#copyright {
color: white;
background-color: black;
}
If you want the "content" sections to dynamically adjust height, take off the fixed height.
Change:
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
To:
#contentwrapper {
background-color: blue;
width: 100%;
}
Working fiddle to your requirement: http://jsfiddle.net/k5YUu/6/