I'm trying to create a sticky footer from an image of 360px height, but I like that 160px of image to be behind the content and 200px to remain sticky.
My css is:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 360px;
background: #049ec4
}
#wrap {
width: 90%;
border-radius: 8px;
background: #809FFF
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 360px;
width: 100%;
background: #049ec4 url("http://phonegap.com/css/images/cloud.jpg") 0 50% repeat-x;
}
http://jsfiddle.net/RC3Za
but is creating a unwanted space, I like css to output like this:
You can change the footer position to relative and instead of using the bottom property, set the top property to -250px or whatever you want. Set the z-index property to -1 to get it behind the wrap.
Take a look here: http://jsbin.com/picazedu/1/edit
EDIT:
A better solution, to avoid the footer being displayed in the middle of the window, is applying the background image to the body and adjusting it with the background-position:bottom left property. Now you can give the footer the height you want to fit the background image where you want: http://jsfiddle.net/YQMyc/4/
Related
Basically I tried to build a sidebar which has some spaces on top and bottom but I couldn't get at the bottom. Here is a pic sidebar has top spaces but not bottom
and here is my css code
.sidebar {
position: fixed;
top: 14px;
left: 20px;
//bottom: 14px;
width: 7.375rem;
height: 100%;
// margin-bottom: 14px;
border-radius: 1.8125rem;
background-color: blue;
z-index: 100;
}
How can I achieve like the sidebar has space too at the bottom as top. I tried to gave a margin to bottom and also setting the bottom but I didn't get it.
Could simply add an extra container as a wrap container and use padding.
using calc means you are strict to specify the amount of top/bottom you wish to have.
heres a quick example:
HTML:
<div class="wrap">
<div class="sidebar"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 7.375rem;
left: 20px;
position: fixed;
height: 100vh;
z-index: 100;
padding: 20px 0;
}
.sidebar {
border-radius: 1.8125rem;
background-color: blue;
height: 100%;
}
This way, the container with class wrap sets the limits of the inner container sidebar and padding, in the wrap container, limits so the inner container to be 20px from the top and bottom. box-sizing: border-box is IMPOSTANT tho, either apply it to everything, like in my example, or just the wrap class. Without it, the child element with height: 100% would take the entire parents height + 40px for top and bottom padding. What this does is similar to what calc would do just automatic.
Having the height set to 100% is causing problems here.
You could try using calc, to set the height to 100%, minus the top and bottom space that you want, for example:
height: calc(100% - 28px);
I'm trying to achieve an example as shown on this site. Click on the "Projects" button on the top right corner below the main menu to reveal the container I am interested in replicating.
When stretching the webpage from left to right and top to bottom, that project pop up is responsive and the padding around the page keeps the same value. I was able to get my width responsive but cannot figure out how to get the same thing for my height since I don't have a specific value for my height. I want the box in my site to be responsive on bigger computer screens than what I am using right now (15" macbook pro) because right now it only takes up half the screen on a bigger monitor.
Here's my code:
nav {
/* max-width: 1266px; */
width: 87.92%;
margin: 50px auto 23px auto;
height: 40px;
background-color: pink;
}
.content {
/* width: 1266px; */
width: 87.92%;
height: 540px;
margin: 0px auto 0px auto;
background-color: aquamarine;
}
<nav>
</nav>
<div class="content">
</div>
Try here.
I want there to have 50px padding at the top and bottom of the webpage even as you shrink the page top to bottom. Right now my nav has a margin-top of 50px, but ideally, I'd like the entire page to have a padding of 50px at the top and bottom. I just don't know how to go about this and I can't seem to find an answer anywhere!
Thank you!!
You can use calc() for this:
height: calc(100vh - 163px);
100vh = total height of screen
163px = 113px + 50px
(113px is the height of your nav with margins and 50px is the distance to the page bottom)
There are several ways to do. One way is to use fixed or absolute positioning. The page http://kokopako.fr/profile fixes the position. Notice that the body in that page no longer scrolls when the Projects menu is open. This is something you need to enable using JavaScript.
So, imagine originally the body is tall and only the navigation is visible at the top:
body {
height: 1900px;
}
nav {
height: 40px;
background-color: pink;
width: 87.92%;
margin: 50px auto 23px auto;
}
.content {
background-color: aquamarine;
display: none;
}
Then when you click no "Projects" button, you would add an extra class, say projects_visible to body so that it doesn't scroll.
.projects_visible {
overflow: hidden;
}
Then the navigation and the content would display automatically with fixed position.
.projects_visible nav {
position: absolute;
top: 50px;
right: 50px;
left: 50px;
margin: 0;
}
.projects_visible .content {
display: block;
position: absolute;
bottom: 50px;
top: 123px;
right: 50px;
left: 50px;
}
I have a fixed header image as my first div, but then I obviously want to have more divs/sections underneath it to complete the webpage.
However when I try and do this, I can still only see the header image and not the div position underneath it.
Anyone know why? Here is the JSFiddle: http://jsfiddle.net/s5atv9c3/
I tried using things like:
top: 0px; //for the fixed element
margin-top: 100%; //for the sub-divs in the container
position: relative/absolute; //for the sub-divs in the container
But none of them worked :/ So yeah all help is appreciated
The way you defined your .header block, it will have a height of 100% of the screen height.
If you want .packages to appear right below .header, set the top margin of .packages to be 100%.
Since the .header is fixed, you need to set the top offset and the z-index as follows:
.header {
top: 0;
z-index: -1;
}
See demo: http://jsfiddle.net/audetwebdesign/u8bt9wda/
You can do following things.
give fixed height to header
.header {
background: url("http://i.imgur.com/GZJVpxU.jpg")
height: 400px; //fixed height
position: fixed;
width: 100%;
background-size:contain;
}
Add padding of header's height into packages
.packages{
padding-top:400px;
}
It is because you give header position:fixed; So, next div position start from top:0; So, they hide back to first fixed div.
To make div visible give top position to second div and position:relative
.packages {
padding: 40px 0;
background: #FFFFFF;
width: 100%;
position: relative;
top: 500px;
}
Check Fiddle.
http://jsfiddle.net/s5atv9c3/2/
Try this:
html, body {
height: 100%;
position: relative;
}
.wrapper {
height: 100%;
}
header {
position: relative;
height: 100%;
}
Fiddle
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
I'm making a single page website, so it is a long page.
But I want to make a first div which is full height and full width of the page, and has a logo centered. Then I want to put divs below it with fixed heights.
So when the page is opened, the logo is always centered, and the div below is not yet visible (because the first takes full height). And when they start scrolling, the next div is right under it and shows up.
Is this even possible? I tried looking for this but found nothing.
Thanks
Max
Here you go: http://jsfiddle.net/BramVanroy/NMeAQ/
html, body {
width: 100%;
height: 100%;
}
#logo {
width: 100%;
height: 100%;
background: #ccc;
}
#logo > img {
border: 10px white solid;
left: 50%;
margin-left: -130px; /* the width of your image divided by 2 */
top: 50%;
margin-top: -130px; /* the height of your image divided by 2 */
position: absolute;
}