>   That's a pretty ordinary 'fixed-width 2-column layout 
    >   with header and footer', well suited for floats and 
    >   negative margins...
    >   <http://www.alistapart.com/articles/negativemargins/>
    >   No need for that exact layout-method, but it is one of 
    >   the most robust methods around and almost tailor-made 
    >   to your design.

What about the rounded corners that make up the what and light green areas?
Do I still need to use images to create that effect?  I'm really not sure
where to start with this Photoshop file... I just don't know "the process".
It sounds like I need to export practically each layer as a separate image,
and then place each "by hand".... Is this correct?

    >   Height or amount of content is not a problem. 
    >   Container-height will adjust to content by simply 
    >   styling them to do so. That's part of the 'negative 
    >   margin' method, btw.

That sounds like exactly what I need, for sure.
    >   
    >   The header is the most tricky part, I think, but not at 
    >   all difficult to create. Four images floated left 
    >   inside one div#header, and lined up / positioned with 
    >   margins on each image.
    >   No need for divs around images - except maybe for the 
    >   leftmost one for cross-browser reliable result.

And for the background, simply set the color of the entire background of the
page to the dark green?

    >   
    >   Leftmost image in header should overlap the left 
    >   column, which is easiest done by giving it a negative 
    >   margin-bottom, and layering it higher (with position: 
    >   relative) than the following div#main-container.
    >   Pushing the left column down by a 'padding-top' makes 
    >   the illusion perfect.

Is this all done "by hand", or is there such a thing as a "drag and drop"
type of CSS editor that would allow me to place images in a space and work
with them visually?  Not wanting to cut corners, just work most efficiently
if there are better tools out there for me than TopStyle or StyleMaster...

    >   
    >   ----
    >   
    >   Never mind cutting images to exact dimensions and 
    >   putting them in divs.
    >   The 'negative margin' method allows for pixel-perfect 
    >   positioning and dimensioning/overlapping as long as 
    >   you're dealing with images.
    >   
    >   Using paragraphs for text and lists for navigation, 
    >   will give you plenty of elements to style without 
    >   adding a lot of divs.
    >   In short: avoid "divitis".

Again, I understand this in theory... I have read a great deal, but I think
my biggest issue at the moment is "where to start" - if a direct export of
the entire template from Photoshop is not the way to go, or if there's not
an "easier way" to split out each layer in PS, then what are the recommended
next steps, starting with just a .psd file?

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to