It's me again and I'm getting desperate xD
I'm trying to solve this, but it's impossible:
I want a website with a seperated background (50%|50%, in this example black|white). Then I want to add a content-div, with a certain width ON TOP of this div, not under it, like in this example (http://cdpn.io/xagCF).
Also - you don't need to wrap these - just put them at the top of your markup.
How it works -
position: fixed fixes the div in place so it won't move.
top : 0 pins it to the top
bottom: 0 pins it to the bottom
The div will automatically stretch to fill the space if you position it like this - this is quite a useful trick - you can set top, bottom, left and right to 0 and the element in question will fill the screen - handy for overlays etc will work on a positioned element (fixed or absolute)
left or right: 0 pins it to the left or right
left or right: 50% takes it halfway across the screen
background - just giving it a colour
z-index - this gives it a stack position -1 ensures it is under the content elements which have z-index auto (always a positive integer) unless you set them otherwise
Bear in mind this background will always be in place - i.e. it won't scroll.
It's me again and I'm getting desperate xD I'm trying to solve this, but it's impossible:
I want a website with a seperated background (50%|50%, in this example black|white). Then I want to add a content-div, with a certain width ON TOP of this div, not under it, like in this example (http://cdpn.io/xagCF).
I hope its understandble... -.-
Hi Saifadin,
This will work (just replace your left and right classes with the below):
.right{ position: fixed; top: 0; bottom: 0; right: 0; left: 50%; z-index:-1; background: #FFF; }
.left{ position:fixed; top: 0; bottom: 0; left: 0; right: 50%; background: #000; z-index:-1; }
Also - you don't need to wrap these - just put them at the top of your markup.
How it works - position: fixed fixes the div in place so it won't move. top : 0 pins it to the top bottom: 0 pins it to the bottom The div will automatically stretch to fill the space if you position it like this - this is quite a useful trick - you can set top, bottom, left and right to 0 and the element in question will fill the screen - handy for overlays etc will work on a positioned element (fixed or absolute)
left or right: 0 pins it to the left or right left or right: 50% takes it halfway across the screen
background - just giving it a colour
z-index - this gives it a stack position -1 ensures it is under the content elements which have z-index auto (always a positive integer) unless you set them otherwise
Bear in mind this background will always be in place - i.e. it won't scroll.
Hope that helps
Use a linear gradient as a background?
As always using absolute position should be your last option.
http://codepen.io/Paulie-D/pen/sqKIb
Good call on the linear gradient. It won't work on IE9 and below though.
Fallback with a bg png though.
That's great guys, you are awesome. I used Linear gradient, like Paulie_D stated. Maybe I should read more about gradients ;)
Another question:
I want the text-area of the search to open, after I click on the search-button. To sum it up:
click on search-button -> text area ease-in to the left
Does that work with CSS or whats the best way? :/
Are you using jQuery on your site? If so you could simply toggle a class on click:
// Add a class to the search icon when clicked $('#viewSearch').click(function() { $(this).toggleClass("searchOpen"); });
Then hook your animation to this class which you can do by changing the width from 0 to 50% for example and transitioning the change
Example on CodePen here: http://cdpn.io/bqgta