this is my code and when the page has more content when we scroll the header moves too then i tried making the position of the header fixed but then the footer doesn't stick to bottom :/
html,body
{
margin: 0px;
height:100%;
min-height: 100%;
top: 0;
width: 100%;
position: absolute;
}
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
}
#container
{
min-height: 85%;
margin-top: 0.5%;
}
footer
{
bottom: 0;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
position: relative;
}
Set position:fixed to the footter
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
z-index:1000;
position:fixed;
/*.........^........*/
top:0;
}
footer{
bottom: 0;
background-color: #000000;
z-index:1000;
width: 100%;
height: 6%;
min-height: 6%;
position:fixed;
/*.........^........*/
}
Fiddle Demo
JsFiddle
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
position: fixed;
top: 0;
}
footer
{
bottom: 0;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
position: absolute;
color: #FFFFFF;
}
Here i've mentioned height: 1000px; for your understanding... you can change it...
footer
{
position: fixed;
z-index: 300;
bottom: 0px;
left: 0px;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
}
Try this code:
DEMO
header
{
width: 100%;
background-color: #000000;
height: 8%;
min-height: 8%;
top: 0;
position: fixed;
}
footer
{
bottom: 0;
background-color: #000000;
width: 100%;
height: 6%;
min-height: 6%;
position: absolute;
}
Related
I'm trying to create a normal HTML page and I've set the height/width of the body With Vh and Vw
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}
<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>
The problem is that an extra content create on the left its the body what am I doing wrong
I cannot put an jsfiddle demo because in the demo this problem don't happen I tried the HTML page in other computers and the same issue
Not sure if understand your question correctly but if your problem is the horizontal scrollbar then simply change 'overflow: auto;' to 'overflow-x: hidden;'
if you don't want a vertical scroll aswell then make 'overflow: hidden;'
body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
Alright so I got 1 div that is float left and one with float right, now for some reason I cannot make them go to the side where they should be. They are kinda now both overlapping eachother
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
}
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left"></div>
<div id="page_right"></div>
</div>
I also tried using a method with display inline block but it didnt work out so well
Try this with your additional css
CSS
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left {
left: 0;
}
#page_right {
right: 0;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
remove left: 0px
OR
remove position: absolute
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
z-index: 1000;
}
the overflow in happened because you given left:0px and position:absolute for both the divs,I'm solved this and and added the snippet below.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left{
left: 0px;
}
#page_right{
background-color:green;
float:right;
position: absolute;
right: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left">
</div>
<div id="page_right">
</div>
</div>
</body>
</html>
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!