CSS layout help for noob

lozza · 28 Jun 2006 at 22:26

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

LazyManc · 28 Jun 2006 at 23:23

Try something like:

Code:

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

Conrad11 · 28 Jun 2006 at 23:44

You could do it like, what he said, but it isn't as simple as that.

Or you could use a technique called Faux Columns

Remember to post your code when you ask for help.

lozza · 28 Jun 2006 at 23:58

LazyManc said:

Try something like:

Code:

<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 · 29 Jun 2006 at 01:14

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

Code:

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

LazyManc · 29 Jun 2006 at 16:04

Harib0 said:
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

I haven't given you all the code there obviously, you'll need to place the shadows as background images using css.

Basically you want to split the page into 3 columns, with the middle column holding all your current content and the side columns are holding just the shadow images. You could do it all with 1 column and a background image but then you would have to re-create the image if you ever change the width of your site.

"Faux Columns" doesn't apply in this case because that particular technique is for making un-equal height columns look the same height on the page. What you have is 3 equal height columns, so there is no need to use it.

Conrad11 · 29 Jun 2006 at 16:21

It's still an option though, and its one of the easiest.....

Conrad11 · 29 Jun 2006 at 16:45

Made a quick template for you, to show you how it would be done, this method is not using "Faux Columns"

Download Here

(Hosted using Beansprout's Uploader)

Just replace the images and your set to go.

Beansprout · 29 Jun 2006 at 17:06

One way to do it is to set the columns as a background for the body and simply repeat them. I think alistapart uses that as part of their faux columns article, actually

Conrad11 · 29 Jun 2006 at 17:12

Beansprout said:
One way to do it is to set the columns as a background for the body and simply repeat them. I think alistapart uses that as part of their faux columns article, actually

Yeah I think that is what I meant originally, although I have done it using LazyManc's method in that template.

EDIT:

Can you actually have two background pictures with different positions on the body, or were you referring to having one image and repeating (as that is what I was trying to suggest in my first reply)

Beansprout · 29 Jun 2006 at 17:17

Conrad11 said:
were you referring to having one image and repeating (as that is what I was trying to suggest in my first reply)

That's what I meant

Simply creating the shadow image which is the width of the content with the shadows on each side, then centering and repeating it.

Something like this probably...

Code:

body{
background: url(foo.gif) repeat-x top center;
}

LazyManc · 29 Jun 2006 at 17:46

Beansprout said:
That's what I meant

Simply creating the shadow image which is the width of the content with the shadows on each side, then centering and repeating it.

Something like this probably...

Code:

body{ background: url(foo.gif) repeat-x top center; }

Yeah, thats what I meant here:

lazymanc said:
You could do it all with 1 column and a background image but then you would have to re-create the image if you ever change the width of your site.

but it has limitations, as mentioned.

Beansprout · 29 Jun 2006 at 17:47

That's a good point

lozza · 3 Jul 2006 at 01:28

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