Help needed with YUI CSS Layout!

[performancepartz]

Hello all,
I have just started using the YUI CSS framework and I need to build an exceptional simple template (so I thought), however, I am having trouble doing just that!

I will outline the structure below in an image for reference. I have already designed all the graphics, I just need to now create the css. I have attached the image layout.jpg, which is a color-coded example of how the template is structured.

Here's the sizes of the columns:

Black - width: 990px, height: 88px
Red - width: 990px, height: 40px
Blue - width: 425px, height: X (as long as it needs to be)
Yellow - width: 551px, height: 70px
Green - width: 250px, height: X
Purple - width: 287px, height: X

There will be a footer at the bottom of this, but I know how to do that without a problem.

Here's how the margins would work:

Between Black and Red: 0px margin, they should touch
Between Red, Blue & Yellow: 11px high
Between Yellow, Green & Purple: 11px high
Between Blue, Green & Purple: 14px wide

If someone could help me do this using the YUI CSS, OR any simple CSS template for that matter (should I still utilize YUI's reset.css?) I would be very very grateful.

I will accept reasonable offers for payment on this type of work. Thank you very much, if you require any clarification I will check back often!

Kindest regards,
Ryan

[performancepartz]

please help me get started!

[Dan Schulz]

Ryan, if you're looking to hire someone to code this, you'll have to post a listing in the Marketplace.

Now, just to steer this thread back ON TOPIC and to keep it from getting locked, why the insistance on a set width that most people will find hard to use without having to scroll horizontally?

Furthermore, what are these containers going to hold? Are some of them borders and other presentational effects, or are they actually going to contain something useful, like headers, menus, content, sidebars, and footers?

[performancepartz]

Hi Dan,
The containers are going to hold <iframe> elements and other embedded elements. They will be subdivided with headers, menus, etc.. like you describe.. The borders and presentational effects will be done inside these containers with the menu objects themselves..

Thanks for taking a look!
Ryan

[Dan Schulz]

Ok then. What will each container be holding then? (In other words, what color container will be holding what content?)

[performancepartz]

The blue container will hold embedded youtube videos, as well as some links to products, there headers for each section are 425px x 27px, the headers for every section are always the section's width and the standard 27px height.

The green section will include a widget embedded (flash) as well as an <iframe> menu with the standard header above (250px x 27px). The Purple section will hold 3 <iframe> elements, each with a header above (287px x 27px).

Can you please clarify why this is important?

Thanks for your interest!
Ryan

[Dan Schulz]

Semantics. Now, where's the menu going to be?