Hello there! I have recently taken on the task of a newly designed website for a non-profit I work with. I was given an image from our graphic designer (who has no experience with web design) and I got it to work pretty well with a combination of tables and css until she finally got me the background art, which messed everything up (having to slice up the images to fit them into each section of the table). In order to get it to work properly (and because I would really like to get our site up to web standards), I decided I had to start again using pure css. While I having been working with html for several years, I am a bit of a CSS newbie. I've been working with it for about a year but I've mostly stuck to fairly basic things (font styling, colors, backgrounds, etc) while continuing to use tables for layout positioning, so this css positioning is giving me headaches.
Which brings me here. I already had all the styling done but I am having a horrible time with some of the positioning. I have been searching through the public archives (and on every CSS webpage I could find) for help but haven't found anything that completely answers my questions, so I thought I would join and ask directly. Here is my design image from our designer (I've added in notes where the content goes) http://www.wonderbabydesigns.com/testing/design.jpg and here's my test html document http://www.wonderbabydesigns.com/testing/cssTest.htm and my test stylesheet http://www.wonderbabydesigns.com/testing/teststyle.css Here are the issues I am having trouble with: - we want the page to have a minimum width of 750px and a max width of 1100px. I got that working fine with the tables, but I can't figure out how to position the columns correctly while maintaining the semi-flexible width without the tables. I can do it with absolute margins on both sides with a fluid center column width, but not semi-fluid. If this is impossible, I can try and get the designer to agree to a fully fluid width (which I have figured out how to do), but she has been very resistant to that. A lot of our content is quite wide (calendar pages, tables of info, articles, in addition to our admin interface) so I prefer not to have a very skinny page, yet we want to make sure those with narrower monitors can view the pages easily. - the copyright info needs to lock at the bottom of the left column and the photobox needs to lock at the bottom of the right column. I can sort of get them down there, but not stay locked all the way at the bottom; they sometimes hover a bit depending on the other content in the columns, and not always the same distance from the bottom. (of course they aren't doing this now on my test page, so maybe I have already fixed this without realizing??) - we want the 3 main content columns to match up at the bottom. There is enough content on almost every page of our site to have the page fully extended but I think I would also like to have some sort of minimum height, if possible. - I am still using a table for the header, because I just couldn't figure out how to get the placement of all those elements correct. The table doesn't really work well, though, because each row cuts the background image up, so I would like to remove that table as well, if someone can help me to get all the elements to stay in their correct locations. I can't get the div with the donate button to match the background in the right place, and I want the slogan and the quote to stay in the same place, whether the quote is one line or 2. I don't think these are insurmountable problems, but I do think that they might be more complex than I can manage. We'd like to be as cross-browser compatible as possible, so hacks or fixes for known browser problems would be appreciated. If there are too many issues here to tackle in one message, please let me know, and I can break it down. Thanx in advance for the help! Robin~ in LosAngeles ______________________________________________________________________ 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/
