Hi Allison,I'm a bit of a newbie to CSS myself but I found this tutorial useful
in attempting to use CSS for
layout.http://www.maxdesign.com.au/presentation/process/The
basic process of converting your design from an image mock-up to an
XHTML and CSS page is to first look at the design and identify
containers. For example, in your design for the Skeet'r Beat'r website,
you can basically create containers for various parts of the design
which will be marked up using divs. The header and footer sections are
two containers, the left sidebar is another, the main content column
and navigation are also containers for content. These containers can
also be wrapped within another main container.In your XHTML page within the
body tag you can mark up the containers like this:<body><div
id="container"><div id="header"></div> <!-- end header --><div id="nav"></div>
<!-- end nav --><div id="left_sidebar"></div> <!-- end left_sidebar --><div
id="main_content"></div> <!-- end main_content --><div id="footer"></div> <!--
end footer -->
</div> <!-- end container --></body>In
the external CSS stylesheet to which your page is linked to you can
have a better idea of how to mark-up the containers to match your
design by first setting different background colors for each container.
For example:#container { background: #00EE00;}#header { background:
#00EECC;}and so forth.Once you have the colors in place you need to specify the
CSS to build and position these containers. In
the header css you can specify a background image which is basically a
thin vertical slice of the header portion of your design mock-up. You
slice up or extract parts of images from your design mock-up and use
CSS to either place a repeatable background image so that the XHTML
page slowly matches your design.The header container may need to be further
divided into sub containers like logo, and logo_text.Anyway this is just one
repeatable process or way to start building CSS layouts. Hope it helps.Best
regards,Alex Torrijos------------------------------Alexander R. TorrijosWeb
DeveloperMobile: +63 921 838 0382Res: +63 2 822
7219http://www.stormwild.com------------------------------> Date: Tue, 21 Aug
2007 18:39:53 -0400> From: [EMAIL PROTECTED]> To: [email protected]>
Subject: [css-d] Beginner layout suggestions?> > Hi all,> > I am re-learning
CSS and XHTML after not using it for a few years and am in> need of some
suggestions. I have created a layout in Photoshop and am now> ready to move
onto the next step. I just can't decide which step that is! I> decided to give
CSS a shot to get some experience, but I'm not sure where to> begin now.> >
Here is a jpeg of the layout to follow:>
http://www.skeetrbeatronline.com/testpage.html> > Does anyone have any
suggestions of how to tackle this? I am a bit confused> as to what the "best
practice" would be here and what I can actually do with> CSS, or if I will need
to use some simple tables as well.> > Major questions for me:> > Does CSS use
slices the same way that tables do? Should I keep the slices> for the tables
that I had in mind when I started or should I take that green> circle picture
out and just reposition it after I create a two-column with> header layout?> >
I'm imagining using the slices that I have created as the background in a> div
tag and then superimposing text over those. Does that make sense, and is> that
the best way to go about this?> > Now that I have decided to go with CSS, I am
at a loss as to where I should> begin with the rollover menu buttons.> > I know
these are general questions, but I guess I am looking for help for a> place to
get started. Any help/opinions/suggestions would be greatly> appreciated.> >
Allison>
______________________________________________________________________>
css-discuss [EMAIL PROTECTED]>
http://www.css-discuss.org/mailman/listinfo/css-d> IE7 information --
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/
_________________________________________________________________
Call friends with PC-to-PC calling for free!
http://get.live.com/messenger/overview
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
