CSS Problems - Design to CSS

[Ian R. Gordon]

Hey,

I am having some troubling turning a concept I have from Photoshop into a working CSS layout. The layout is below, the problem I am really having is with the fading background on the sides and I am am also having problems with the tabs. I want to make them expandable with the layout, so it doesn't break if you increase the size of the font a few times.

Here is the layout, can someone please help me:

[operon]

hi gordon,

maybe i can be a little helpful.
assuming you are using a fixed width layout: for your background i would define a background image in css, with the image spreading over the whole width of your layout and a height of about 3px, containing your fading borders - like this:

body
{
background-image: url(fadingborders.jpg);
background-repeat: repeat-y;
}

for your tabs i recommend reading this article on zeldmans alistapart.

maybe the technique introduced in the article can also be used with your borders problem.

let me know, if my information was of any use for you,

operon

[Ian R. Gordon]

I'll take a look.

[Ian R. Gordon]

Does anyone have some ideas that are implementable without serious code hacks, I want the CSS to be as plain and straightforward as possible.

[Paul O'B]

Hi Ian,

As operon said its quite simple to repeat a background image for the borders of your page and I used them in this little demo.

http://www.pmob.co.uk/temp/1colcentred.htm

If you want expanding tabs then the sliding doors tabs that was also mentioned above are pretty straight forward and will expand as required.

However if you want something really simple then all you need do is make 2 little circle gifs and place them in the corners of your tab. If your tab is sized in ems then it will grow and the gifs can be absolutely placed in the corners.

Paul