CSS layout help for noob

[lozza]

Hey,

I need a bit of help please, I have taken a template that was produced using tables and i'm trying to recreate a similar version of said template using CSS layout and teaching myself as i go along. (I have only ever used CSS for text prior to this, and i'm reading W3C schools tutorials as i go)

The template is below and i've circled the parts i need help with:

Firstly, the left and right side bars which fade from gray to white the image used is 16px X 17px I have only managed to get this to appear in the top left corner of the blue logo section - How can i do this?

Secondly, How can get the pictures and icons into CSS layout?

Thirdly, i'd like the footer to be at the bottom of the window with the main, news & gallery sections expanding down to fill the space.

What i have done so far is here: CSS Layout

feel free to add me to MSN to help me!

Thanks for all help in advance

 

[lozza]

Try something like:

<div id="outer">
  <div id="leftShadow">
  </div>
  <div id="wrap">
    <!-- all content here -->
  </div>
  <div id="rightShadow">
  </div>
</div>

that didn't work

All the code can be seen by viewing the source - didn't think there was much point in posting it all in here

 

[lozza]

Well i've managed to get the images where i want them and the text looking right. Thanks to conrad11 for some pointers


Here's what it looks like now : CSS layout pictures

I'm still stick on the left & right side bars, any ideas?

And also now the gallery section on the bottom right, i want to extend the border on the left so it goes right down to the footer. here's the code

#gallery {
	background-color: #AFC0D0;
	float:right;
	width: 248px;
	border-left-style: dotted;
	border-left-width: thin;
	border-left-color: #FFFFFF;
	height: 100%;
	}

 

[lozza]

I'm still really stuck on this one guys, Conrad kindly did me a template, but when i put my content into it the greay side fades diassapear. Within my own site i have managed to get the graphics to appear top left and top right but only when i put some text in them, can't get it to appear without the text or to repeat.

tell me what you need - as this is my first go at CSS layout