How can I build this layout with CSS?

legendandom · 03-16-2010, 06:24 PM

Hey guys, I'm kinda noob in designing and for starters I was planning to make a layout much like this one:

Link: http://i278.photobucket.com/albums/k...ker/Layout.png

The red par of the banner should expand horizontally with the client's windows, blue parts are fixed width.

I was thinking about making an outer div to wrap the light blue part, and set the light blue part to a fixed width with auto margin for left and right. Also, I don't know if it's a good idea to not wrap everything inside one big container div, is there a problem leaving the top 2 parts (red-blue banner and dark blue header) independent of the sites content div?

Thx in advance.

PixelPusher · 03-18-2010, 04:10 PM

You have the idea right. No there is not a need to wrap everything in a container div.
To allow the red div to expand accordingly set the width to 100%.
You have the blue div correct (fixed width, set margin (L/R) to auto. Note the "auto" setting only works when there is a defined width)

To have the red/blue banner sit above the dark blue one use z-index. In order for z-index to register/function you must set the position to something other that static (default).

I would set the red div to absolute position width a z-index of say 5. (just needs to be one number higher than the dark blue div)

Set the dark blue div to relative position with a z-index of 3.

See how that works.

FYI, due to the many questions about positioning and floating, I am going to post some tutorials in the this forum for all members to reference.

Advanox · 03-18-2010, 06:15 PM

You dont need to wrap anything.
What software are you using? You can slice it in illustrator/imageready & recode it in dreamweaver. The CSS should be div's.

legendandom · 03-18-2010, 07:26 PM

Quote:

To have the red/blue banner sit above the dark blue one use z-index. In order for z-index to register/function you must set the position to something other that static (default).

I would set the red div to absolute position width a z-index of say 5. (just needs to be one number higher than the dark blue div)

Set the dark blue div to relative position with a z-index of 3.

Ok, I'll try that.

Quote:

What software are you using? You can slice it in illustrator/imageready & recode it in dreamweaver. The CSS should be div's.

I'm currently using Expression Web from Microsoft since it has nice support for interoperability with Visual Studio.

03-16-2010, 06:24 PM	#1
legendandom New Member Join Date: Mar 2010 Posts: 5	How can I build this layout with CSS? Hey guys, I'm kinda noob in designing and for starters I was planning to make a layout much like this one: Link: http://i278.photobucket.com/albums/k...ker/Layout.png The red par of the banner should expand horizontally with the client's windows, blue parts are fixed width. I was thinking about making an outer div to wrap the light blue part, and set the light blue part to a fixed width with auto margin for left and right. Also, I don't know if it's a good idea to not wrap everything inside one big container div, is there a problem leaving the top 2 parts (red-blue banner and dark blue header) independent of the sites content div? Thx in advance. __________________ If it doesn't kill you, eat it! If it does kill you, just bite it!

03-18-2010, 04:10 PM	#2
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	You have the idea right. No there is not a need to wrap everything in a container div. To allow the red div to expand accordingly set the width to 100%. You have the blue div correct (fixed width, set margin (L/R) to auto. Note the "auto" setting only works when there is a defined width) To have the red/blue banner sit above the dark blue one use z-index. In order for z-index to register/function you must set the position to something other that static (default). I would set the red div to absolute position width a z-index of say 5. (just needs to be one number higher than the dark blue div) Set the dark blue div to relative position with a z-index of 3. See how that works. FYI, due to the many questions about positioning and floating, I am going to post some tutorials in the this forum for all members to reference. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

03-18-2010, 06:15 PM	#3
Advanox Bronze Member Join Date: Mar 2010 Posts: 28	You dont need to wrap anything. What software are you using? You can slice it in illustrator/imageready & recode it in dreamweaver. The CSS should be div's. __________________ █ Advanox Online Branding - Custom Identities, Design, Marketing, Promotion & Publishing █ Experience the Advanox Advantage "Brand Your Business Successfully" www.Advanox.com █ Centovative Creative Innovations - Animation, Reconstructions, Adminastration, SEO/SEM █ Building your Business With Innovated Results "Your Business Potential to it's fullest" www.Centovative.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode