I'm trying to create a layout with a header and footer (both of which have a fixed heights) and a content-div between them that is fills the remaining space. Within the content-div I want to have divs with heights that are based on percent values (with the content-div's heihgt as parent). I can't figure out how to do this?
Here is an illustration of what I'm trying to accomplish.
[See it in action]
#header {
position:absolute;
height: 50px;
left:0;
top:0;
width:100%;
background:green;
}
#footer {
position:absolute;
height: 50px;
left:0;
bottom:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:50px;
bottom:50px;
left:0;
width:100%;
background:#eee;
}
#box1 {
height:50%;
width:30%;
float:left;
background:red;
}
.header {
position: absolute;
height: 50px;
left: 0;
top: 0;
right: 0;
}
.footer {
position: absolute;
height: 50px;
left: 0;
bottom: 0;
right: 0;
}
.content {
position: absolute
top: 50px;
left: 0px;
right: 0px;
bottom: 50px;
}
.box1 {
width: 30%;
height: 50%;
}
For a solution where the footer sticks to the bottom of the screen or the bottom of the content (whichever is further from the top), check out Ryan Fait's "sticky footer". It's a lightweight and robust handful of CSS, and it's usually what you want for your layout.
http://ryanfait.com/sticky-footer/
Related
I am trying to make my loading screen cover the entire page even when the scroll bar is on!
.loading
{
position:absolute;
background: #CFECF9;
filter:alpha(opacity=50);
opacity:0.75;
z-index:20;
left:0;
top:0;
height:100%;
width:100%;
vertical-align:middle;
text-align:center;
}
To make an element cover the whole screen make it fixed:
.loading {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Apply other styles */
}
Absolute positioned elements will only cover their parent container.
.loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background: #CFECF9;
filter:alpha(opacity=50);
opacity:0.75;
z-index:20;
vertical-align:middle;
text-align:center;
}
So I've built my own custom modal box in backbone.marionette, but I'm running into the issue that every time I show() the modal, my page shifts down about half an inch. Very annoying. Anyone have ideas how to account for this or to fix it?
Here's my #modal and .overlay css:
#modal {
position: fixed;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
z-index: 1002;
width: 70%;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.85);
z-index: 1001;
}
Found a solution - If I set the modal's top property to 0 and give it a margin-top of whatever, then there's no annoying offset. Here's the final css I landed on:
#modal {
position: fixed;
top: 0;
left:0;
right:0;
margin-top: 2em;
margin-left:auto;
margin-right:auto;
z-index: 1002;
width: 70%;
}
I was able to make one div go to the stretch of the window size AKA fill the screen. Now I'm wondering how the rest don't overlap each other so I can scroll through each of them in order, retaining the centered text in each div as well? Right now, it's only displaying thing 3.
http://jsfiddle.net/592NY/1/
What I am trying to achieve:
Here is the annotated CSS:
/* Each of the divs and their independent backgrounds */
#thing1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: blue;
}
#thing2 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: red;
}
#thing3 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: green;
}
/* Centering the text */
#text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
You either have some logic I don't understand or you wish to go full 3D :D
The three divs have same z-index, none of them has it's opacity modified soo they'll simply appear in the order they appear in the HTML (if you move thing 3 before thing 2, thing 2 will be visible). Thing 2 is currently "on top" of thing 1 and thing 3 is on top of thing 2.
As I said 3D , you can use firefox's 3D view to see what's happening.
Update: you can use top: 100% for the second div and top: 200% for the third, which surprisingly seems to work even on IE.
http://jsfiddle.net/592NY/4/
http://jsfiddle.net/derekstory/592NY/2/
Remove the absolute and z index since overlapping is not desired.
html, body {
height: 100%;
}
#thing1 {
top:0;
left:0;
width:100%;
height:100%;
background: blue;
}
#thing2 {
top:0;
left:0;
width:100%;
height:100%;
background: red;
}
#thing3 {
top:0;
left:0;
width:100%;
height:100%;
background: green;
}
#text {
width: 100px;
height: 100px;
margin: auto;
top:0;
bottom: 0;
left: 0;
right: 0;
}
You are using absolute positioning and all three have the same z-index, so the last one will appear on top of the other two. If you reduce the z-index of the third item, then the second div will now be on top.
Ids must be unique on the page, so "text" should be a class.
http://jsfiddle.net/andrewgsw/592NY/5/
body, html {
height: 100%;
}
#thing1 {
position: relative;
height: 100%;
background: blue;
}
#thing2 {
position: relative;
height: 100%;
background: red;
}
#thing3 {
position: relative;
height: 100%;
background: green;
}
.text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
It is not necessary to specify width: 100% for DIVs, this is their default behaviour.
It is much neater to give these similar boxes a class, then colour them using their ids:
http://jsfiddle.net/andrewgsw/sMSPa/2/
body, html {
height: 100%;
margin: 0; padding: 0;
}
.things {
position: relative;
height: 100%;
}
#thing1 {
background: blue;
}
#thing2 {
background: red;
}
#thing3 {
background: green;
}
.text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
I want this image in the html tag to only fill the max-width of 320px like it's supposed to. However it's going beyond that. Horizontal scroll bars show up and image tiles for 166 more pixels. In the IOS simulator and my ipone All the other elements span the width correctly.
#media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
}
Update: These are some tags that might be relevant.
#band1 {
position: absolute;
top:0;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
.barbLogo {
position: absolute;
top:3px;
margin-left:165px;
width:320px;
}
#band2{
position: absolute;
top:-75px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
#gridBgContainer{
position: absolute;
margin:0;
top:50px;
left:0;
height:200px;
background:url('../_images/gridBg.png');
background-repeat: repeat;
display: table;
z-index: 1;
}
#wrapper {
position: relative;
top:0px;
left:0;
right:0;
margin: 0 auto 0 auto;
width:100%;
text-align: center;
z-index: 3;
}
#socialLinks {
position: absolute;
margin-top: 14px;
float:right;
right:0px;
}
#top-menu {
position: absolute;
top:0px;
left: 0px;
width:320px;
z-index: 100;
}
section#homeContent {
position: absolute;
top: 400px;
width:320px;
z-index: 10;
}
section#faqContent {
position: absolute;
top:900px;
width:320px;
z-index: 10;
text-align:left;
}
footer {
position: absolute;
font-size: 1.15em;
top: 1230px;
padding: 0 1% 0 1%;
width: 100%;
height: 75px;
text-align: center;
z-index: 10;
}
.footer{
text-align:center;
padding: 2% 0 0 0;
}
#band3{
position: absolute;
top: 1255px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png')repeat-x;
z-index: -1;
}
you should set the width property
#media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
width: 320px;
}
I try to add a box shadow and a gradient border using images and css pseudo-elements.
I tried that code:
.box:before {
content: url('box-shadow.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
z-index: -1;
bottom: -9px;
line-height: 0;
}
.box:after {
content: url('box-border.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
bottom: -5px;
right: 0px;
}
But the added images don't resize when the parent div resizes, whereas it works by adding the image manually.
See that fiddle http://jsfiddle.net/5TG3E/2/
I try from my side may be that's help you. Write like this:
.box:after {
content:'';
position: absolute;
z-index: -1;
bottom: -9px;
margin: 0 auto;
top:0;
left:0;
right:0;
background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
-moz-background-size:100% 9px;
background-size:100% 9px;
}
.box:before {
content:'';
position: absolute;
bottom: 0px;
right: 0px;
left:0;
top:0;
background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}
Check this http://jsfiddle.net/5TG3E/6/