I have design a website homepage made of 4 sections. Top, mid1, mid2 and bottom. Each section has a min height of 100% of the web browser. The top section has a transparent background colour with a image/video background.
When the user scrolls down the #videosection should stay behind each section, instead in Safari it does not keep the video section behind the other sections and firefox does not show the video section. Everything is fine using chrome.
HTML:
<body>
<div id="videosection"><video src=""id="bg-video" muted autoplay loop ></video></div>
<div class="top-section">
</div>
<div class="mid1-section">
<div id="center-box">
<section></section>
</div>
<div class="mid2-section">
<div class="textbanner"><h3>Design</h3></div>
<div class="devices box"><img src=""></div>
</div>
<div class="bottom-section">
<div id="registerform"></div>
</div>
</body>
Heres the CSS:
html, body{
background-color: #ECF0F1;
min-height:100%;
margin: 0;
padding: 0;
}
#videosection {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%
z-index: 1;
}
videosection video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 60%;
min-height: 50%; }
.top-section{
background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari / background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Opera 11.1 to 12.0 / background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Firefox 3.6 to 15 / background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / Standard syntax */ background-repeat: repeat;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 15;}
#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}
.mid1-section{
min-height:100%;
width: 100%;
background-color: #ff5b68;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 15;}
#center-box {
overflow: hidden;
float: none;
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}
.mid2-section{
min-height:100%;
width: 100%;
background-color: #3499dc;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 15;}
.textbanner {
overflow: hidden;
float: none;
height: 20%;
width: 100%;
margin: 0;
padding-top: 3em;
}
section {
overflow: hidden;
text-align: center;
margin: 0;
float: left;
background-color: #ff5b68;
height: 10.5em;
width: 40%;
padding-left: 5%;
padding-right: 5%;
padding-top: 5em;
padding-bottom: 0;
}
.bottom-section{
min-height:100%;
width: 100%;
background-color: #1ABC9C;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 15;}
#registerform {
background-color: #16A085;
border: 1px solid #16A085;
border-radius: 5px;
width: 420px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 5%;
}
First of, it's better to put the video for last, this will improve the loading of the page.
For making the video stay behind the rest, use z-index: -1; in #videosection.
Related
In my webpage I have a left and a right part, they are not on the same nesting though. I want the left part to fill 25% of the page and the right part to fill the rest of the width.
Simply putting 75% isn't cutting it for me because the right part also needs a 30px right margin. A right padding won't work because my content and background-color overflows then.
Do you have an idea how to solve this?
The .left (blue) and .right(yellow) div should always perfectly meet each other and the .right needs to keep it's 30px right margin.
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: 75%;
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
It's not a good idea to create a layout using only absolute position. You may better rely on flexbox for example:
body {
height: 100vh;
margin: 0;
display: flex;
background: grey;
}
.left {
flex: 1;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
flex: 4;
margin-top: 45px;
margin-right: 30px;
background-color: yellow;
}
<div class="left">TEST</div>
<div class="right">TEST</div>
But in case you want to keep your code, you need to consider the margin within the calculation of the width:
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: calc(75% - 30px);
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
I know this is a common issue but I just can't work this out. No matter how many combinations of settings I try, the footer won't stay on the bottom of the page. It will just sit under whatever else is above it.
body {
margin: 0;
background-color: #ACFAB7;
}
# container {
margin: 0 auto;
padding: 40px;
}
#header {
z-index: 0;
height: 78px;
background-color: #2ecc71;
}
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
position: relative;
background-color: #2ecc71;
/*display required to center text*/
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image {
z-index: 1;
margin: 20px auto;
padding: 50px;
}
/*Centers text within the header*/
span {
display: table-cell;
vertical-align: middle;
}
You have a lot of problems. This solution is for:
Fixing your footer at the end of the page.
Centering the contents (both vertically and horizontally).
Fixes
Get rid of display: table.
Get rid of width: 100%.
Change relative to fixed.
#footer {
z-index: 2;
line-height: 40px;
padding: 0px;
position: fixed;
background-color: #2ecc71;
text-align: center;
left: 0; right: 0;
bottom: 0;
}
<div id="footer">Copyrights.</div>
position: fixed; and bottom: 0; should do the trick. Add width and height as neccessary.
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background-color: aquamarine;
}
<div style="background-color: lightgrey;height: 800px">
Page content
</div>
<div class="footer">
this is the footer
</div>
You can use position: fixed; bottom: 0;
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
background-color: #2ecc71;
text-align: center;
margin-left: auto;
margin-right: auto;
position:fixed;
bottom:0;
left: 0;
}
<div>
<footer id="footer">Footer</footer>
</div>
I'm try to do a special navigation-bar.
I will show it in pictures:
this on scrollbar on top
and this on scrollbar down:
So I tried to do header with position: fixed and z-index: 1.
inside nav with z-index high(1000) and
the right block with z-index high(1000)
and the content have z-index: 2 and position: relative.
and it didn't worked :/
**and important thing is that I need the upload div will be in the header
and will be higher (in z-index) from content
I will try to show you in code:
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
z-index: 1;
background-color: blue;
}
nav {
width: 100%;
height: 40px;
background-color: green;
z-index: 1000;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
z-index: 1000;
}
#content {
position: realative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header>
<nav></nav>
<div id="upload">
</div>
</header>
<div id="content">
</div>
thank you,and I'm sorry about my english !!
you will need to move the nav out of the header for the #content z-index to work and need to align nav with fixed positioning or by giving margin
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 80px;
background-color: blue;
z-index: 1;
}
nav {
width: 100%;
height: 40px;
z-index: 3;
background-color: green;
position: fixed;
top: 0;
right: 0;
left: 0;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
margin-top: 40px;
}
#content {
position: relative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header></header>
<nav>
<div id="upload"></div>
</nav>
<div id="content"></div>
I am trying to create a header for my website, with a logo contained. I wish for the logo to have a 5 pixel margin from the top of the header div that it is contained inside, however when I add "margin-top: 5px" to the div containing the logo, the header div is push 5 pixels down instead.
<div id="background">
<div id="HeaderGrey">
<div id="HeaderLogo">
<img src="CHBadgeLogo.png" />
</div>
</div>
<div id="HeaderShaderTop"></div>
<div id="HeaderShaderBottom"></div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
}
I'm assuming this would have a pretty easy fix, I'm just new to html/css, sorry.
The positioning works only when you put the parent (containing) element as non-static, like relative. Then you can position the element with relative or absolute (taking it out of the flow).
Like so:
body {
margin: 0;
padding: 0;
position:relative;
}
#background {
left: 0px;
top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
position:relative;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
position: relative;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
position: absolute;
}
Very nice Question,
I see that you know how to use padding which is good. If just simply add a padding-top: 5px; to the image div it should just move the image down 5px from the top of the navbar!