Too much CSS

[gizelle2101]

As you will see when you view my CSS, I'm new to Web Development and CSS. I am setting up a site for a local non-profit. They love the site and everything validates. I don't like the CSS I set up. For future sites I need to do things differently.

Because the client has so many pages that fluctuate in length, I had to duplicate many CSS instructions for each page - kind of defeating the purpose of CSS.

I know I am missing something about CSS where I should not be needing to have a separate wrapper, right col length for each page.

I have the CSS Anthology, which has helped greatly. Other than having all page lengths the same, is there a way to get the wrapper, etc to expand whenever the content expands?

http://www.inharmonywebdesigns.com/WelcomeHomeNew/index.html

Thank you for your feedback and any direction to books and/or articles on this CSS topic.

Gizelle

[eBay]

Still mastering CSS and a newbie here but I'll give it my 2 cents:

First off, I ran it without the CSS and it was pretty well organized and readable. You've got clear sections and I think I could write an alternative style sheet and place the sections in other locations (like the menu as a bar on the top, the footer under the heading, etc.) without messing with your HTML content.

It looks like the only thing that changes on each page is what's in the class called wrappermid.

The home page just has on blob of content there with pictures aligned right. The next few pages have an additional column on the right.

Advice

• Just create a couple of div containers for the two column layout pages that size how you like them and put them inside wrappermid.
• Create a single div class container for the home page single column layout.
• Get rid of the <p>&nbsp;</p> markup in the heading and use margin-bottom on the header items. That way you can control that spacing on every page from with the CSS element definition for that item.
• Some strange stuff is happening with your borders and they aren't lining up in places in my Firefox browser. I suspect that the solution is using borders only on the outermost containers at each level. (Not sure on this though)
• I had originally thought of using some includes in PHP to solve this but every heading and footer is the same on every page so there's not really a need to automate. Nevertheless, it's available on practically every server and I like the modularity of it because I'm an OOP programmer from way back in the dark ages.

[gizelle2101]

Thank you.

I will try to make the changes you suggest. I think I understood it all. It will just take some thought to fully understand what you are stating. :-)

Thank you for your help. I knew there must be another way to lighten up my CSS. Right now for a 15-page site, my CSS has 1577 lines! It has new wrappers, footers and navigation for each page to meet the needs of each page's different length.

I just read a post that explains too the 3 and 2-column set up and how to let content decide length without the need for absolute position and height. I'll try applying those suggestions too.

Gizelle

[drhowarddrfine]

You may find a lot of common attributes among the pages, too. If every <h2> on a page has the same font size, then you only need one h2{font-size:1em} in the stylesheet, for example.