search-form

[Saifadin]

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… -.-

[simoncmason]

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

[Paulie_D]

Use a linear gradient as a background?

[Paulie_D]

As always using absolute position should be your last option.

http://codepen.io/Paulie-D/pen/sqKIb

[simoncmason]

Good call on the linear gradient. It won’t work on IE9 and below though.

[Paulie_D]

>It won’t work on IE9 and below though.

Fallback with a bg png though.

[Saifadin]

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? :/

[simoncmason]

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

[Author]

Posts