I'm working on a site and I can't figure out white there is whitespace showing up. I have my page wrapper div and everything else set to width: 100%; My header and footer and using the full width of the screen, but my other content isn't using all the width of the page. I think it has something to do with positioning.
Also, my jsfiddle is screwing up my header. I'm using PHP for that and it's working fin on my machine. Please ignore that.
Fiddle:
http://jsfiddle.net/WH5jZ/
.pageWrapper {
width: 100%;
height: 700px;
margin: 0 auto;
}
#mainPage {
width: 100%;
background-image: url('http://i34.photobucket.com/albums/d101/Lee45276/food1_zps6cb55c3d.jpg');
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
}
EDIT: I figured it out but I cannot post an answer:
I figured it out. I had to remove the padding in the nav and footer.
old
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
padding: 1% 2.5%;
}
new
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
}
If you are referring to the main body content
ORIGINAL
/***************
CONTENT
***************/
.contentDiv, #bulkdel {
width: 95%;
height: 400px;
padding: 10px;
margin: 5% auto 0;
background-color: rgba(0, 0, 0, .8);
text-align: center;
}
Your width is set to 95% that is why its not using 100%
Change it to
/***************
CONTENT
***************/
.contentDiv, #bulkdel {
width: 100%;
height: 400px;
padding: 10px;
margin: 5% auto 0;
background-color: rgba(0, 0, 0, .8);
text-align: center;
}
Other than that I think everything else looks fine on your page
It appears as if you have added padding to the footer which is pushing it out past the rest of the content. I'm sure removing the padding will solve your problem.
EDIT:
I see you updated your question with the answer.
In other words, change this:
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
padding: 1% 2.5%; /* remove this */
}
to this:
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
}
Related
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
Trying to make my first properly responsive site with a footer that remains offscreen untill scrolled to, then also notices content from above and moves with it. I have a site that does a similar thing but uses all sorts of horrible positioning/floating which i dont want on this one.
I have used all blocks/inline-blocks as its just going to be a basic portfolio sort of site. Here is a JSFiddle showing the problem, if you remove the divs called picture the footer remains in place.
http://jsfiddle.net/41s5vcu8/3/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin:0;
font-family: "Raleway";
}
#head {
height: 30%;
display: block;
background-color: #DBB84D;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
#content {
height: 70%;
display: block;
background-color: #ececec;
}
#gallery_wrap {
max-width: 1200px;
height:100%;
width: 100%;
margin: auto;
box-shadow: 0 0 150px rgba(0, 0, 0, 0.1);
text-align: center;
}
#picture {
height:250px;
width: 250px;
display: inline-block;
background-color: #fff;
margin: auto;
}
#foot {
height: 300px;
display: block;
width: 100%;
background-color: #676767;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
There is some of the CSS, as i cant just post a JSFiddle. I have looked about for some advice but most things talk about sticky footers or using floats and what not. I have tried everythingi can think of and i just cant get it to move with the content....
Or if you know of a question that has already been answered for this that woul dbe great! I have loads of different #media's in this but i slimmed it down to make it less painful for you all.
So it turns out i have looked at this too much and missed a basic thing...
#content {
min-height: 70%;
display: block;
background-color: #ececec;
}
http://jsfiddle.net/41s5vcu8/5/
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/
I know it's shaky to get a full screen height div without using client-side scripting, but what about this: assuming my div is tall enough to reach the bottom, how do I make it reach the VERY top and bottom, without the little extra space at top and bottom? I've tried adding top and bottom margins (and even padding) of 0px, but it doesn't seem to work.
#container {
height: 1000px;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
Try this:
html, body {
height: 100%;
}
#container {
height: 100%;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
change height: 1000px; to height: 100%;
I have one article tag, inside a php code that generate articles from wordpress. They are not all the same height ofc, it depends on the content. They are organised in two columns by float.
If a article in the first line is not the same height as the other one in the same row, the second row is aligned to the bottom of the biger div. Now I want to align them without any spacing.
Here is some css:
#container {
width: 1000px;
margin: 0px auto;
}
article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
Edit jsFiddle (now with content to demonstrate the problem): http://jsfiddle.net/4PMj5/6/
You can use even and odd chilren pseudo selection in your CSS.
article:nth-child(even) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: right;
}
article:nth-child(odd) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
The result will be like: this updated fiddle.