First of all, have a look at this example of the layout I'm trying to achieve (below)
Basically, I have a standard center div (gray) with the typical margin: 0 auto. My problem is that I have a background image (on the white overflow area) that is <div id="stripes"> with the following CSS
background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;
This background is applied BELOW the HTML level of the document to the #stripes div.
What I'm having trouble with is setting up the red div below. The plan is for it to stay visible at all times via position: fixed however, I can't use % based right: xx%; top: 0 because the pattern must line up with the striped pattern, so a few pixels offset will create a visible and obvious "seam" on the page.
Here is a look at the effect with the stripes included:
The way I ended up solving this was to create two divs. On the top layer, I used a standaard width: 960px; margin: 0 auto div and then at the end of the document I created another div with the same styles meant to act as a container for the photo (red div above). Inside of the second div I nested a <div id="photo_bg"> div. This div used the following styles:
#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}
the parent div was called #stripes
#stripes {
background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
height: 9999px;
left: 0;
overflow: visible;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
Related
I am attempting to make a sidebar for a tumblr page have a curved header and the rest of the sidebar be squared with 100% height so it flows off the "page" with no visible footer. I have layered backgrounds and as you might expect the square background with current coding is going to show at the top of the curve removing the transparent affect I want at the top.
This is the live preview.
Here is the coding used for those side bars:
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'),
url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: no-repeat, repeat-y;
background-color: #b8a6a5;
position: absolute;
min-height: 100%;
top: 0px;
width: 345px; }
Is there a way of accomplishing my goal without making a separate div for the top of each side?
To get this to work, you need to use the :before selector:
#left:before, #right:before{
height: 100px;
width: 345px;
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png');
position: absolute;
top: -100px;
content: " ";
}
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
top: 100px;
width: 345px;
}
Note that I've bumped down the main divs with top: 100px;, bumped up the :before part with top: -100px;, and moved the header background image to the :before.
Oki doki the best way for you to do this would be to use the css style background-position.
For example
img {
background-position :-10px 0px;
}
The above with offset the image by - 10px to the left and 0px to the top.
I hope that helps!
I'm trying to imitate this image:
(original image page)
There's a shadow effect from the left column onto the right column, usually I use the faux columns method and put the background on the container but for this case the left column should be over the right column.
EDIT: I have now this base on your answer but the background on the sidebar doesn't stop at the container's height (it overflows to the bottom of the page).
#map-app {
height: 100%;
min-height: 650px;
width: 1200px;
margin: 30px auto;
background-color: #FFFFFF;
.sidebar {
background-image: url('/data/images/map/v2/sidebar_separator.png');
background-position: top right;
background-repeat: repeat-y;
position: absolute;
height: 100%;
width: 350px;
z-index: 9999;
}
.content-container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9998;
}
}
It looks like this:
Any suggestions as of how I could achieve this?
If you want to make sure that the left column will be positioned directly above the right, obviously use the z-index element and provide the left column with a shadow effect for the right border. This would allow you to fill the page entirely with the right column, and half with the left column, using z-index to set the left columns stack order above the right. I won't display any code for you if you won't show at least a snippet of what you have. Kind of pointless.
Update: You would obviously have to use position: absolute; for both columns in order to achieve this effect you are aiming for, if you set it to relative the browser would not allow them to overlap.
Update: If you're looking to stretch both columns to the height of the browser, you'd obviously use the same container for both and set it's height: 100%; The problem with having a container, left column, and right column is, you can set the container to 100% height, but that just gives the content you put inside of it 100% height, doesn't mean the content will also be exactly 100% in size. What I would recommend doing is to change the container code to height: 100%; width: 100%; and only set one <div class="container"></div>
Code Update:
.container {
height: 100%; width: 100%;
}
.leftcolumn { // Guessing this would be your .sidebar
overflow: hidden; // Option 1: Set the overflow to hidden.
position: absolute;
height: 100%; width: 50%; // Option 2: Set the height slightly lower. like 99%
z-index: 9999; // Higher than right.
}
.rightcolumn {
position: absolute;
height: 100%; width: 100%;
z-index: 9998; // Lower than left.
}
I'm reviewing some code and while it works, I do not understand how the CSS below is centering the inner div.
Codepen demo available too.
HTML
<div class='outer'>
<div class='inner'></div>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
}
.outer {
position: absolute;
background-color: goldenrod;
width: 100%;
height: 100%;
}
.outer .inner {
width: 75%;
height: 75%;
background-color: green;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
Here is the answer for you question.
The margin: auto just tells the browser to split up the available space evenly between the left and right side of the element. By available space, any unoccupied horizontal space between the left and right edges of the parent container.
Reference
it is just because of
margin: auto;
You can get better understanding of this from Box Model.
For some reason a colleague at work doesn't want the sweet SO points so here is his answer.
If you were to put
top: 0;
bottom: 0;
left: 0;
right: 0;
on a normal div without height or width it would make the div the entire size of its container. Putting height and width on that div would constrain it and while it would try to fill its container, it would respect the set dimensions.
Setting margin: auto; as mentioned is the key. This allows the box for this div to fill its container by expanding the margins equally while respecting its set dimensions.
Is this the best way to center things? No idea but it works.
I have two different gradients that need to repeat on the x axis. One gradient appears to the left of my page layout all the way to far left browser window and the other needs to repeat from the right of my page layout to the far right browser window. The entire width of the page has an image that blends into both and appears above the repeating backgrounds.
Ideally, I could use two DIVs and set them to 50% width, then place the 960 width part over top of both in the center of the window, but I don't see any way to do this.
How can I accomplish this using CSS? I need to support IE7+.
This should work. I would only make the green the repeatable image and use the background color to make the red (represented by "red" below).
CSS
body {
position: relative;
}
#left {
background: red url(/yourleftimagefile) bottom left repeat-x;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
z-index: 0;
}
#right {
background: red url(/yourrightimagefile) top left repeat-x;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 50%;
z-index: 0;
}
#center {
position: relative;
z-index: 1;
width: 960px;
margin: 0 auto;
}
HTML
<div id="#center"></div>
<div id="#left"></div>
<div id="#right"></div>
The html assumes a flexible height #center but it could be made a fixed height.
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}