View Full Version : Is this CSS Layout feasible?

10-03-2004, 06:16 AM

Have a layout question involing the capabilities of CSS. I have a site I'm working on that I'm tyring to layout in CSS, but not sure if that is the way to go. I understand the benifits, but just wanted to get some opinions on if it is capable with what I'm trying to do.

I have included an image of the general mock-up of how I wanted the divs to layout. Is this possible, and if so is this the optimal way to set the order of divs.

Layout Mockup (http://www.joshmccowen.com/css/css_layout_mockup.jpg)

This could be the easiest thing in the world, but I'm struggling with it. I've been looking around at some positioning tutorials, but still can't grasp the damn thing. If you have any layout resources I would love to here about those as well.

Thanks for helping out - Newbie out!


10-03-2004, 06:36 AM
Yes, it is.

If you want, I can do it for you as an example. Just give me the materials. and a better and larger image of the layout you want. :thumbsup:

10-03-2004, 07:11 AM

That would be fantastic. I have created a zip file that you can download. Here is the link - ShiDesigns_CSS_Layout (http://www.joshmccowen.com/css/ShiDesigns_CSS_Layout.zip)

I wasn't sure what you wanted so here is what is in the file.

CSSTesting.html - My attempt as the layout. I used all absolute divs, but I'm not sure if that's the way to go.

Sliced_Images - The images that will populate the site.

Working_Files - The Photoshop file and a flattend jpg version.

I don't expect you to litteral create the final site for me, I just wasn't sure what files would make it easier for you to create the example...so I sent everything..haha.

Let me know if you have any questions. AIM - jmzpro

Thanks again.


10-03-2004, 08:00 AM
No problem.

10-03-2004, 11:39 AM
Well, here's my first drafr of it. The currently the way the website is set up, though, I might actually change it. But this the layout as it currently stands. I'll probably make any draft, though.

NOTE: I couldn't upload any bigger. The only thing you have to do is make sure these two files are in the EXACt same folder as the images.

If you like slices, Tables are a lot better for this design. However, I do not tables are not recommended. You got too many tags with them.

10-03-2004, 01:51 PM
erm, wtf??

All you've done is abs pos the images around, what does that solve?

Well i started having a go at this but then realised that it's actually quite a big job and i dont really have the time to do it properly. Instead i'll explain how i would go about making it.

First step is the slices, you'll need the following:

one image for the woman logo + the 'shi designs' text - transparent background.

a 1 pixel wide image to be tiled along the top of the page for the gradient bar.

a 1 pixel high very wide image that will be used for the page background, white bit in the middle with the gradient fade to green on the outside. Needs to be about 1500px wide to be safe. This will be a centered page background.

For the tabs you'll need a left image and a right image to use the sliding doors method as detailed at http://alistapart.com/articles/slidingdoors

you can use this same method for the curved corners on the feature and the 2 boxes below, your html makrup should look something like this:


<div id="container">

<div id="header">
<h1>Shi Designs</h1> <!--Use image replacement to make this the logo-->

<li><a href="products.htm">Products</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a id="cart" href="cart.htm">Cart</a></li>

<div id="content">
<h2>Whats new</h2>

<h3>Summer Sale</h3>
<p>Blurb, etc</p>
<!-- Repeat as desired -->


<div id="feature">
<img src="bluebag.png" alt="rather nicely patterned blue bag" />
<h2>End of Summer Sale</h2>
<p>We have a sale on</p>

<div id="fabrics">
<h4>New fabrics</h4>
<p>Only in the balh blah collection</p>
<img src="greenbag.png" alt="green bag" />

<div id="collection">
<h4>The 'S' Collection</h4>
<img src="redbag.png" alt="red bag" />

<div id="footer">
2004 Shi Designs|
<a href="terms.htm">Terms</a>|



10-03-2004, 05:55 PM
Thanks a bunch guys. I will take your advice and work my way from here. I'll just have to continue playing around with it until I'm confortable with how CSS positioning works. Having your input definely helps though.

Thanks again.


10-03-2004, 07:40 PM
Well, good luck.

10-04-2004, 12:18 AM
Well, with everyones help, this is what I have come up with so far. It seems to be working pretty good, have a few issues with Explorer and something that won't make my Side Divs have 100% height.

If you guys have a spare moment, I would love a critique of how I have everything coded. I might have some "looked down upon" technquies in there that I'm not aware of.

Shi Designs CSS Layout (http://www.joshmccowen.com/css/CSS_Layout.html)

Thanks in advance.


10-04-2004, 12:23 AM
Center that mother. :)

body {
text-align: center;

#OuterContainer {
margin: 0 auto;