738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

click

Here is the design I will be coding next, which is where this question stemmed from. What do you think?

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

Please? I’d feel much better if I had this sorted out before coding, and I wanna code really bad :D

What’s with all the stickies here anyway, 4 threads takes up the entire height of a normal users monitor. I’m sure we could do without a couple of them.

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

Ok heres how you do it,

For the footer you make the top portion the white line plus the white shadow, then you set the background color to the blue used.

The header can be two nested divs, one with the top portion of the image and the other with the lower portion.

The white portion can obviously just be the black shadow background with the position set to ‘lower’

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

Thanks for the effort :D but there is a little line just below the top of the blue.

374 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rohan says

I think this may help:

<div id="header">
    <div class"wrap"> -- Content -- </div>
&lt;/div>

<div id="main">
    --content--
</div>

<div id="footer">
    <div class"wrap"> -- Content -- </div>
&lt;/div>

That can be the basic HTML .

Then:
#header{
    background:url(header-bg.jpg) repeat-x;
}

#footer{
    background:url(footer-bg.jpg) repeat-x;
}

.wrap{
    width:960px;
}

This will work if I’ve understood your problem correctly =)

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

I think that would work, although should I set it to 100% width (.wrap) instead of a defined value?

Thanks for all your help guys :)

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

Yes the first wrapper should be 100%, or display block, you will also need a second wrapper to hold the content since the first will have to be used for one of portions of the top section’s background.

by
by
by
by
by
by