Design Frame

cartelj / 2013-05-04 17:17:44   

Hello,

I was wondering how one can build a "adjustable" black frame like on this website :
demarchelier.com/

Here is my website :
fjrr.fr

Thanks,
Fabien

arsondpi / 2013-05-04 19:20:21   

There's many ways to do this.
One of which is to attach divs that create a border like this before your #index and #exhibit divs.
Check out the source code of the page you posted to see whaat I mean...

cartelj / 2013-05-05 12:16:35   

Hello,
thanks for the answer.
I've been trying many things since this morning ; none of them work ;

I found things like this (for the left side of the frame) on the css of the website i try to imitate :

#left {
left: 0;
}
#left, #right {
bottom: 0;
top: 0;
width: 15px;
}
#top, #bottom, #left, #right {
background: none repeat scroll 0 0 #000000;
position: fixed;
z-index: 99;
}

But when I insert them in my style.css before #index, it doesn't do anything ;

I'm missing something but don't know what

cartelj / 2013-05-06 19:28:48   

Am I being too vague ?

Vaska A / 2013-05-06 20:02:13   

What is an 'adjustable' black frame? Yeah, it's pretty vague to me...

cartelj / 2013-05-06 20:35:44   

Hello thanks again for answering,
i mean a frame that follows the window if you make it bigger of smaller.
demarchelier.com/
like if you go to this website and change the size of the navigator window, the frame stays stuck to it ;

But finding out how to even make a frame in the first place would be great..

Vaska A / 2013-05-06 20:56:47   

Normally I would not do this, but this code has been around for years - it's very easy to do. You need to add this to your CSS:

  1. /* black frame */
  2. #top, #bottom, #left, #right { background: #000; position: fixed; z-index: 9999; }
  3. #left, #right { top: 0; bottom: 0; width: 15px; }
  4. #left { left: 0; }
  5. #right { right: 0; }
  6. #top, #bottom { left: 0; right: 0; height: 15px; }
  7. #top { top: 0; }
  8. #bottom { bottom: 0; }

In your template just after the body tag before anything else add:

  1. <div id="left"></div>
  2.     <div id="right"></div>
  3.     <div id="top"></div>
  4.     <div id="bottom"></div>

And there you go...

cartelj / 2013-05-06 21:17:45   

Alright,
it is all black but at least something appeared.
I'm going to try to figure it out now,
Thanks a lot,

cartelj / 2013-05-06 21:22:31   

Everything is alright, i created a wrapper before without really knowing what it is and i just had to insert the divs after it in the template,

Best,

This thread has been closed, thank you.