Help with a layout issue

[Kirryn]

I'm trying to stop making sites with tables and i'm making the change to CSS. I'm finding it difficult to get the layout how i'd like it, and it's really pushing me back to tables.

Here's the problem. I've designed a site that uses a sort of 'Two Row' layout. The top 'row' is a background image, where i'll be placing my navigation and such. The bottom 'row' is just a a regular background, possibly just one colour, I haven't decided exactly what it's going to be.

The problem i'm facing is that, i've defined the top background by putting it in

body {
margin: 0;
padding: 0;
text-align: center;
background: url("topbg.jpg") repeat-x top;
}

and now I can't seem to work out how I could get this bottom background to not go over the top background.

If you didn't understand that, It's hard to explain so i've added an image representation of my problem. I've looked around at quite a number of CSS help sites and haven't come across any answers. Any help would be greatly appreciated.

[Marc]

Sorry i didnt get you there but i think i know what you mean.

To get a background on the big box you need to do...

e.g.

.bigbox{
background-colour:#your_colour;
}

I am sorry if that isnt what you mean.

Marc

[Kirryn]

Originally Posted by mmfraser

Sorry i didnt get you there but i think i know what you mean.

To get a background on the big box you need to do...

e.g.

.bigbox{
background-colour:#your_colour;
}

I am sorry if that isnt what you mean.

Marc

I'm afraid that doesn't work. I've found an example of this sort of layout, maybe someone could make sense of his CSS because I looked and couldn't.

www.gizcore.com

Notice that he also has the top background defined in the body.

[Lchad]

.body usually holds the page background.
To get a two row design like you are suggesting you would want a header div and a content div. (name them anything you want)

html
[code]<div id="header">All your header content here incuding your background and navigation</div>

<div id="content">All your lower content falls in this area</div>[code]

css would look like this;

Code: Select all

#header {     
background: url("topbg.jpg") repeat-x 0 0;
margin: 0 auto;
width: if you need one;
height: possibly;
}
#content {
    width: your amount;
    margin: 0 auto;
    text-align: sometimes;
    backtround:  url ("yourbg.jpg") repeat 0 0 ;
    }

[fuzzee]

that's how I would do it too! do it with 2 div layers, each with a different background.
You can also give the whole body the background for the second div, and then define a background for the first one. The second div would have background:transparent; (the body background would then "shine through")

[Kirryn]

Originally Posted by Lchad

.body usually holds the page background.
To get a two row design like you are suggesting you would want a header div and a content div. (name them anything you want)

html
[code]<div id="header">All your header content here incuding your background and navigation</div>

<div id="content">All your lower content falls in this area</div>[code]

css would look like this;

Code: Select all

#header {     
background: url("topbg.jpg") repeat-x 0 0;
margin: 0 auto;
width: if you need one;
height: possibly;
}
#content {
    width: your amount;
    margin: 0 auto;
    text-align: sometimes;
    backtround:  url ("yourbg.jpg") repeat 0 0 ;
    }

Edit:
I was going to do it like that, but the problem is, it doesn't fill the screen like i'd like it to.

When it's defined with 'body' it looks like this: http://img403.imageshack.us/img403/3420/help2cs1.jpg
When it's defined using the header class, it looks like this: http://img115.imageshack.us/img115/1237/help3se5.jpg

As you can see, there's that ugly white border that I don't want.
Any ideas?

Thanks again.

[Kirryn]

Resolved! Yay!
I do feel like a real idiot now, though, it was so simple...

body {
margin: 0;
padding: 0;
text-align: center;
background: #1F1F1F url(topbg.jpg) repeat-x top;}

I didn't realise I could use an image aswell as a colour. Well, time to move on to content. Thanks again to all those who helped.

[Lchad]

LOL! Good for you! The best lessons are the hard ones! Way to go!

[moojoo]

Should be

background: #1F1F1F url(topbg.jpg) left top repeat-x;}

BTW. =)

[karinne]

^ actually no ... it's

Code: Select all

background: color image repeat attachment position;

so ...

Code: Select all

background: #1f1f1f url(topbg.jpg) repeat-x left top;

Proper CSS Shorthand
Efficient CSS with shorthand properties