Need help with design development

I am not sure if this even goes here but please feel free to move this post.
I am planning on using the 2012 theme for this and it will be a fixed width and height site. (I know I know, just let it go)
The design is very simple, but I am not sure how I would go about creating this double border with the slight roof pitch at the top and bottom. It is easy enough to make the double border by adding a child theme and adding another div to the outside of the id=page div but the roof pitch is throwing me. Do I need to create a background image for the header and footer and run borders on the content area or is there some way to do this all with css?
here is the link to the design:
http://dl.dropbox.com/u/18576442/clarify/2014-06-12-19h02m/index.html
Many thanks,
Houston

Hi,

You lost me with themes but to create this page in html and css you can create the borders with css and then put the arrows on as two images.

Here’s an example.

It uses this sprite for the arrow images which are then placed using :before and :after. If you need support in ie7 and under then you would need to use extra elements in the html instead. (The sprite should probably be a tranparent png so that the brown colour is removed and transparent instead in case you wanted it on different coloured backgrounds.)

Paul, thank you so much for this. This is a huge help to me. I am not sure i would have ever approached it that way. I am pretty good with css but admittedly have not used the :before and :after selectors that much.

Many thanks,
Houston

High Paul, its me again. :slight_smile:

I seem to be having some issues with this layout. I used your css, at least I thought I did, but I can not get them images to show up without being cut off. Not sure what I am doing wrong. Would you mind taking a look?

Also, How I can restrict this content area to 570px tall? I tried putting css on both body .site and .second-border but it didn’t seem to work right.

Here is a link to the site: http://splitlightdesigns.com/oxbridge/
UN: <snip/>
PW: <snip/>

UPDATE: It seems I had another div around the whole thing and I needed to make that div relative instead of the div INSIDE of it. Now the images are showing up without being cut off.

Many thanks,
Houston

On that site you linked to you still have the image paths pointing to your localhost.


"http://localhost:8888/oxbridge/wp-content/uploads/2014/06/double-arrow.jpg")

Be careful with setting heights on text content unless you are going to control the overflow. Users can resize the text and it may no longer fit. Use min-height or ems instead.