Well, you'll just need two

kazimmerman — Wed, 04 Feb 2009 21:18:34 +0000

Well, you'll just need two DIVs, one inside the other.

For instance:

...
<div id="light_gray_box">
  <div id="dark_gray_box">
    ...
  </div>
</div>
...

Using appropriate padding, margins, whatever, you can achieve that look.

kazimmerman wrote: There

jojui — Wed, 04 Feb 2009 21:00:10 +0000

kazimmerman wrote:

There are several ways to achieve rounded corners with CSS, but to achieve the gradient look you're still going to need an image. ;)

Thanks for pointing me to google , I found some helpful tutorials that I actually missed when I was searching earlier. I understand that I'll be needing an image to accomplish what I want, but the thing that I don't get is how to accomplish that overlapping boxes effect.

but to achieve the gradient

pr0gr4mm3r — Wed, 04 Feb 2009 19:47:58 +0000

but to achieve the gradient look you're still going to need an image.

Actually, I remember back in the FrontPage days, there was a way to create a gradient background. Of coarse, it's IE only.

There are several ways to

kazimmerman — Wed, 04 Feb 2009 19:44:55 +0000

There are several ways to achieve rounded corners with CSS, but to achieve the gradient look you're still going to need an image.

webwiz wrote: Just a

jojui — Wed, 04 Feb 2009 19:25:15 +0000

webwiz wrote:

Just a suggestion - If you could link to a document that illustrates your problem, I think we'd be better able to help.

Here, I've done a better mockup of the header background.

What's the best way to accomplish this with HTML and CSS?
Thanks,
Jo

Just a suggestion - If you

webwiz — Wed, 04 Feb 2009 17:05:10 +0000

Just a suggestion - If you could link to a document that illustrates your problem, I think we'd be better able to help.

Renegade wrote: Try not to

jojui — Tue, 03 Feb 2009 20:02:43 +0000

Renegade wrote:

Try not to do too many things at once. Coming up with a design before you have a logo may not be the best idea and may cause headaches which could have been avoided.

Decide on what content you want to put up on the site first then come up with a logo. Once you have a logo, you should have an idea of what colours to use.

Only after you have decided on a logo do you start working on how the "look and feel" of the page will be like.

See if the above process works for you :)

I think I covered the most in my response to kazimmerman. I don't have a name yet, but I've decided that the logo would be bright orange so that it would stand out on the gray header. The contents of the page would be very clean and white.

The main reason I'm asking for help is that I don't know how to achieve that rounded box look from the mock-up, especially with the effect of two rounded boxes on top of each other, and the gradient on the lower one. I hope I'm making some sense
Thanks,
Jo

kazimmerman wrote: I'm

jojui — Tue, 03 Feb 2009 20:02:03 +0000

kazimmerman wrote:

I'm guessing you're really going to try some color and something bulkier. It's hard to say what just the header should look like, because while it may look great, how are we to know if it's cohesive with the rest of the website? The layout obviously works, though I'm unsure what "LOGO pt1" and "LOGO pt2" means...

Well, I'm going for a clean overall look with lots of white (white background) and rounded boxes. The header would be very similar to the mock-up, it's just that I haven't refined the design yet. The colors would be grayish with a bright orange smaller part of the logo and a dark gray bigger part of the logo (basically the description of the blog).

kazimmerman wrote:

Anywho, my point is that the overall layout works...oh wait, what is that big gray thing? Aah, a drop-down menu. For what? And why is it positioned here? Is it going to drop in front of the search box? See, my point is that I need more of an overall design and a more realistic mock-up to judge. ;)

I know, the drop-down menu is bothering me too. I thought that I could use it for "about" and "archives" pages. I'll have to rethink that.

Thanks,
Jo

Try not to do too many

Renegade — Tue, 03 Feb 2009 19:19:56 +0000

Try not to do too many things at once. Coming up with a design before you have a logo may not be the best idea and may cause headaches which could have been avoided.

Decide on what content you want to put up on the site first then come up with a logo. Once you have a logo, you should have an idea of what colours to use.

Only after you have decided on a logo do you start working on how the "look and feel" of the page will be like.

See if the above process works for you

I'm guessing you're really

kazimmerman — Tue, 03 Feb 2009 18:55:29 +0000