Hi Marc, Your's is a pretty simple layout to achieve using CSS. Since you don't have a specific question, it'll be hard to start explaining. However, as always, start with good clean markup and don't bother about the CSS yet. Make sure your site is readable without any of the CSS. This means you'll have to decide on the document structure, get your headings and lists right, and stuff like that.
Once that is done, you can start with the CSS. I usually go one step at a time especially if the layouts are complex, and keep checking how it looks in browser(s). Since you are new to CSS, and if you don't already know, may I also recommend that you should design your CSS for Firefox (or Netscape, or any other Mozilla flavor), then tweak it for IE - not the other way round - to ensure that you don't pull your hair over browser compatibility at a later stage. On 5/18/06, Marc Funaro <[EMAIL PROTECTED]> wrote: > Hi Again Everyone, > > 1. My apologies for mentioning money... it won't happen again. And thank > you all for being here for me, "at no charge"!! > > 2. Here is the layout html file and css. I've purposely broken the layout > so it can be clear where the template needs to dynamically grow/shrink. The > design is meant to fit on a 1024x768 resolution, and this specification > can't be changed. I suppose there are actually TWO columns that need to > have dynamic height - the broken content area, and the left navigation. > > This output is the direct result of simply slicing up the template that I > have, using Adobe ImageReady. I've modified the CSS slightly, adding a > couple items at the top and commenting out lines that create the brokenness > of it all. I originally had the content area scrolling using overflow:auto, > but after thinking about it, that's just not going to work either... it's a > public site and having two vertical scrollbars was just too much. > > As usual, also trying to avoid a horizontal scrollbar on anything 1024x768 > or larger. > > Sample Page: > http://nyslittreedata.advantex.net/new/base.htm > > CSS for Sample Page: > http://nyslittreedata.advantex.net/new/base.css > > Again, thanks for your help everyone, and my apologies for jumping right in > and breaking the rules with my very first post. > > Marc > > > > _____ > > From: Ian Piper [mailto:[EMAIL PROTECTED] > Sent: Thursday, May 18, 2006 4:30 AM > To: [EMAIL PROTECTED] > Subject: Re: [css-d] A Fairly Complex Design Complete, wishing to implement > using all CSS > > > Hi Marc, > > I am comparatively new to using this list. I am sure you will find excellent > advice here (I always have) but you need to know the etiquette! I have been > slapped by the guardians of the list a couple of times. Anyway, your best > bet for getting help (and if I can help I will do so) is to put up a url. > This will let the gurus see a precise example of what is going on and to see > both your html and your css. A jpg of the layout won't be enough. > > My main advice is to persevere with the standards approach. I used to waste > incredible amounts of time kludging table-based layouts and *still* had > problems from one browser to another. Using standards and css I now get much > more predictable behaviour between browsers and I get clean easy to read > code into the bargain. > > One final word: the people on this list won't be attracted by a $100 > incentive. These people are the elite of web designers - some of them have > literally written the book on the subject - so they are not doing this for > money. Offering cash will just irritate them. > > Anyway, get that page up on the web and let's see if we can help! > > Regards, > > > Ian. > > -- > > Dr Ian M Piper > > [EMAIL PROTECTED] > > skype: ianmpiper > > -- > > Where is the wisdom we have lost in knowledge? > > Where is the knowledge we have lost in information? > > > > On 17 May 2006, at 10:35 pm, Marc Funaro wrote: > > > Hi Everyone, > > We just received a final design for a new website, in Photoshop format. It > looks good and meets the need... And it is fully approved by the client. > Now, I could do what I've always done -- slice it up using Adobe ImageReady > and output it as HTML/Tables. But I recently did an output using CSS > instead, and JUST as I've always wanted, I ended up with a very clean > separation of content from layout using absolute positioning. > > However, the main content area is of dynamic length, and I ran into trouble > when it was too long - it overran the footer, and no amount of CSS > experimentation would fix it. So, I am ready to start over and reslice the > template... But I'd really like the guidance of a CSS expert to help me > slice this template up "properly" so that it does what I want, but in CSS. > > The main problem is, I only have about $100 left in the budget to get a > guru's assistance. This was a fixed-bid project for a non-profit client. > That amount is generally insulting to experts, but I'm wondering if perhaps > for that amount, someone here would be willing to assist off-list, and just > point me in the right direction using the tools that I have available to me. > I could provide a JPG of the layout, and perhaps the right person could give > me a better starting point than I have right now...? > > Finally... I am (BRAND) new to the list - please accept my apologies if this > post is offensive in any way, as I have not had time to lurk and observe the > true etiquette and nature of the list. I just want to get this done, but if > a CSS-only layout is too much for this design, I'll have to go back to > regular tables. > > Thanks for whatever help you can provide... > > M > > ______________________________________________________________________ > 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/ > > > ______________________________________________________________________ > 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/ > -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ ______________________________________________________________________ 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/
