470,591 Members | 2,168 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,591 developers. It's quick & easy.

Too much CSS

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?


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

Mar 8 '08 #1
3 1158
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.

  • 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.
Mar 8 '08 #2
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.

Mar 9 '08 #3
7,435 Expert 4TB
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.
Mar 9 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by William C. White | last post: by
2 posts views Thread by Albert Ahtenberg | last post: by
3 posts views Thread by James | last post: by
reply views Thread by Ollivier Robert | last post: by
1 post views Thread by Richard Galli | last post: by
4 posts views Thread by Albert Ahtenberg | last post: by
1 post views Thread by inderjit S Gabrie | last post: by
2 posts views Thread by Jack | last post: by
3 posts views Thread by Sandwick | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.