March 16, 201016 yr Hello everyone! I could do with some advice regards CSS/DIV layout etc. I'm half way through my second site now and I've got myself into a right mess in terms of naming ID's and class selectors. I use DIVS heavily throughout my page layout and find myself naming classes and ID's uniquely. Problem is, when I go into my style sheet to tweek stuff, I spend ages and ages scrolling down trying to find the selector I'm looking for and often, I end up naming selectors based on their relation to each page, but end up with divs and dozens of different names all over the place!! IE: id="footer", id="footertableindexpage", id="leftnavbar", id="lowerleftnavbarimgholderaboutuspage" class="cloumnsizeleftcontactuspage" class="columnsizerigththomepage" After a while, I struggle to think of an easy way to name an ID for selectors which are less complicated. When my pages get too populated, should I be using a different style sheet for each page? Thanks all!
March 16, 201016 yr One common solution is to give each page a unique ID, ie: <body id="contact"> Then you could have a selector like this containing global rules for the footer: #footer {} and one like this for the Contact page that customises the footer: #contact #footer {} and another like this for the About page: #about #footer {} and so forth.
March 16, 201016 yr Generally, try to use just one stylesheet for your whole site, although many people have different stylesheets for different types of style - one for general resets, one for text styles, color font, etc. and one for structural items like div sizes and margins, etc. You can always split your styles into groups with comments identifying which page they refer to. You should have some consistency in the design of pages that makes different styles for different pages unnecessary, for instance a standard header, logo, menu and footer for all pages and use PHP "include" files for them as they repeat.
March 16, 201016 yr Author One common solution is to give each page a unique ID, ie: <body id="contact"> Then you could have a selector like this containing global rules for the footer: #footer {} and one like this for the Contact page that customises the footer: #contact #footer {} and another like this for the About page: #about #footer {} and so forth. Thanks for the advice buddy, I'll be sure to look at this! Thankyou.
March 16, 201016 yr Author Generally, try to use just one stylesheet for your whole site, although many people have different stylesheets for different types of style - one for general resets, one for text styles, color font, etc. and one for structural items like div sizes and margins, etc. You can always split your styles into groups with comments identifying which page they refer to. You should have some consistency in the design of pages that makes different styles for different pages unnecessary, for instance a standard header, logo, menu and footer for all pages and use PHP "include" files for them as they repeat. Dude, thankyou so much for the link!!!! That will be really useful - superb! Thankyou again.
March 17, 201016 yr I also find it helpful to organise your stylesheet in sections. Use notes to help break it up so its easier to find what you're looking for in the code. eg. /*---------- GLOBAL TEXT STYLES ---------- */ p { } h1 { } h2 { } /* ---------- END GLOBAL TEXT STYLES */ /* ---------- GLOBAL CONSTRUCTS ---------- */ #wrapper { } #header { } #content { } #footer { } /* ---------- END GLOBAL CONSTRUCTS */ /* ---------- INDEX PAGE ---------- */ .index_box { } #content.index { } #content.index h1 { } /* ---------- END INDEX PAGE */ etc - I find that breaking the css up like that really helps you to navigate it quickly....it also allows you to search for the comments as well if its a long css file.
Create an account or sign in to comment