I want to move the header up to the topmost. But it won't go, here's the fiddle http://jsfiddle.net/DCtH7/4/
As you see in the fiddle, there is a white space above the header. I tried padding: 0 but it won't work.
Add position: absolute to the header
header {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: white;
width: 100%;
height: 34px;
box-shadow: 0px 3px 3px black;
margin: 0 auto;
position: absolute;
}
An example : http://jsfiddle.net/DCtH7/6/
As an alternative way change margin to padding here:
header #header-content {
padding: 10px;
}
This will also fix the problem without use any absolute position
An example : http://jsfiddle.net/DCtH7/7/
Related
Im trying to create a stick nav. However on doing so, the nav goes into the background.
I've set the position on the nav div like so,
.site-header {
...
position: fixed;
}
However, this has worked as expected, as mentioned above. Is there anything else I should be adding, to ensure the div is ontop and fixed.
https://jsfiddle.net/fe6jc8nu/
Thanks,
Add z:index: 9; to .site-header rule:
.site-header {
background-color: #fff;
padding-bottom: 25px;
padding-top: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
z-index: 9;
}
I have fiddle in which I want to replace the white space from the bottom with different background color.
The background-color which I want is #F5F5F5.
Problem Statement:
I am wondering what changes I should make in the CSS codes in the fidle so that I am able to replace white space from the bottom with the background color: #F5F5F5
I tried changing margin: 0 auto 100px; to margin: 0 auto 0; from the fiddle but for some reasons I am still white-space at the bottom on the web-page.
You can set this background color on
html {
background-color: #BFBFBF;
height: 100%;
}
The major problem is with the .form change margin: 0 auto 100px; to margin: 0 auto; in .form class and add min-height: 100vh to .login-page class like this.
You can checkout the update in fiddle here https://jsfiddle.net/nc2djn5p/241/
.login-page{
min-height: 100vh
}
.form {
background: #FFFFFF;
width: 500px;
height: 500px;
margin: 0 auto;
box-sizing: content-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
1) Remove lines from CSS:
Line 1: // General CSS
Line 328: // End General CSS
Because // is not valid CSS comment and causes first definitions after them to be invalid.
2) The problem is the .form class:
.form {
background: #FFFFFF;
width: 500px;
height: 500px;
margin: 0 auto 100px;
box-sizing: content-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
The line: margin: 0 auto 100px; creates a margin-bottom of 100px which is creating that empty space.
Instead you can put a padding bottom to your page:
.login-page {
background-color: #BFBFBF;
padding-top: 25px;
padding-bottom: 100px;
}
3) For larger screens where the content doesn't fill the whole height of the window:
html, body {
height:100%;
background-color:green;
}
4) Another problem, the style.css is linked BEFORE boostrap.css in your html which is resetting the html and body background color, so put your style.css link AFTER boostrap and my solution will work.
So I guess the main question here is can I keep everything under my header nav bar that's in a fixed position but if I need to scroll it goes under my header? Here is a fiddle of me just setting the margin-top of the hr tag but after trying it on different screen sizes it just doesn't work and over laps on smaller screens.
https://jsfiddle.net/RVKuzmik/se0etqew/3/
Code here
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 1%;
padding-top: 1%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
hr {
margin-top: 10%;
}
<header>
<nav>
<ul>
<li>Campus</li>
</ul>
</nav>
</header>
<hr>
try to add position fixed to your form this will work
You are setting a percentage value as the margin-top on the hr element. The thing with percentage values is that it changes as the viewport changes, so on a smaller device the 10% value may not be the same as it is on a large computer screen.
Since your navbar is going to stay the same height (with fixed elements on top it is always a good idea to know beforehand what's the maximum height the element will be at any given point).
Instead of giving hr tag a margin-top value, I would suggest you setting a margin/padding-top value on the top container of the elements that are in a scroll-able view and not fixed.
By default it will be the body element where your elements positioned normally and the fixed header / navbar is, so let's do it on it.
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
body {
/* The height of the header is around 70px (give or take) at most of the screens, since you are using percentage value for the padding-top and bottom of it */
margin-top: 70px;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 1%;
padding-top: 1%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
https://jsfiddle.net/00w0cng6/
Or even better, to make sure things look right on every device, you either use responsive media queries to set different values for certain screen sizes or just one fixed height for your fixed element.
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
body {
/* 70px because that's the max our fixed element is going to be */
margin-top: 70px;
}
header {
top:0;
position: fixed;
width: 100%;
/* Padding top, bottom and the height of the header sums up to 70px */
padding-top: 10px;
padding-bottom: 10px;
height: 50px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
https://jsfiddle.net/RVKuzmik/se0etqew/3/
**CSS**
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
padding-top: 60px;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
height:80px;
}
**HTML**
<header>
<nav>
<ul>
<li>TEST</li>
</ul>
</nav>
</header>
<hr>
Just give the header a background:color:white;position:sticky And it will work fine..
What is happening is that the header has a background color which is transparent and position is fixed....This will work fine..
You can make use of position: fixed
for example:
Here's the code
I was wondering if anyone could point in the direction of a solution!
For some reason my rightbar's height isn't staying within the parent div (mainwrapper), and I have the body and the wrapper's height set to 100%.
When I set it to 90% it fits but then when I resize the window to anything lower than 1920x1080, it goes out of the wrapper again.
Any and all would be appreciated!
I read online somewhere that it's usually floating divs that cause this, but I have nothing floating and I believe I have the corrent position:relative placed.
I've not worded this the best with "bar", so here's a gyazo image to hopefully help with this: https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - As you can see, the bar goes out of the wrapper when set to 100%
My code:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-image: url(/css/images/backgroundimages/bgimg.png);
}
div#mainwrapper {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-left: 4px solid #000;
border-right: 4px solid #000;
box-shadow: 0px 0px 10px #000;
background-color: rgba(0, 0, 0, 0.6);
}
div#menubar {
background-color: rgba(41, 128, 185, 0.2);
text-align: center;
padding: 30px;
border-bottom: 3px solid #000;
}
div#menubar a {
text-align: center;
padding: 31px;
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: 0.3s;
font-size: 1.1em;
font-family: 'Muli', sans-serif;
text-shadow: 2px 4px 7px #000;
}
div#menubar a:hover {
background-color: rgba(0, 0, 0, 0.4);
padding: 30px;
font-size: 1.3em;
transition: 0.3s;
color: rgba(231, 76, 60, 1.0);
text-shadow: 1px 1px 2px #000;
font-weight: bold;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
div#maincontent {
width: 100%;
height: 100%;
}
div#rightbar {
width: 15%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
<div id="mainwrapper">
<div id="menubar">
HOME
FRIENDS
FORUM
CONTACT
</div>
<div id="maincontent">
<div id="rightbar">
</div>
</div>
</div>
EDIT: Try erasing the height: 100%; on div#rightbar and replace it with min-height: calc(100vh - 85px);
The reasoning: 100vh means '100% viewport height'. So whatever the height of your browser window is the height #rightbar will be. But you need to subtract the height of #menubar from it (85px). calc() helps you accomplish this. Take a note of this css property/value combo because you'll potentially use it a lot for making your footers stick to the bottom of the page (AKA 'sticky footers'). Make sure you have a space on either side of the - sign. If you don't include those spaces, the calc() function won't work.
OLD ANSWER: I apologize if I don't understand what you're wanting, but I'll give it a shot: #rightbar's height actually is inside of the wrapper - it's just not inside the border that you created around #menubar.
Erase border-bottom: 4px solid #000; from div#menubar and move it to div#mainwrapper instead. Here's an example: https://jsfiddle.net/ms2e2e5v/1/
I have one problem with internet explorer about css div positioning.
I have created this DEMO from codepen.io .
If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?
.test {
display: block;
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
max-width: 580px;
min-width: 300px;
margin-top: 64px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
background-color: #f7f7f7;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 840px;
}
.header {
height: 12rem;
background: #009688;
}
<div class="test"></div>
position : absolute
The element is positioned relative to its first positioned (not static) ancestor element.
So you need to specify position (position:relative | fixed | absolute i.e. any position apart form static) to the parent (this case body or html)
It works fine without position: absolute;
https://jsfiddle.net/agnmx7s6/1/
To center align the DIV below code enough.
body{text-align:center}
Remove the below code in .text class
position: absolute;
You can achieve this without absolute positioning.
Please check the fiddle - https://jsfiddle.net/afelixj/agnmx7s6/4/
Also added negative margin-top to the center div.