738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 6 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 6 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 5 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 6 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 6 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 5 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by