SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Aug 25, 2009, 06:34 #1
multiple div query...redundant code
Site I'm working on at the moment makes use of a 3 column layout, and there are various "Modules" in each column. I'm using an image for the top of the module, then specific content goes in between each div.
ie
HTML Code:<div class="sidebar_navigation"> <!-- navigation specific code --> </div> <div class="sidebar_login"> <!-- login specific code --> </div> <div class="sidebar_adverts"> <!-- advert specific code --> </div>
my css for each "module" div is:
HTML Code:.sidebar_navigation{ background-image:url(../images/navigation.jpg); padding-top: 45px; border: 1px solid #c4c4c4; } .sidebar_login{ background-image:url(../images/login.jpg); padding-top: 45px; border: 1px solid #c4c4c4; } .sidebar_adverts{ background-image:url(../images/adverts.jpg); padding-top: 45px; border: 1px solid #c4c4c4; }
HTML Code:.sidebar { padding-top: 45px; border: 1px solid #c4c4c4; } .sidebar navigation { background-image:url(../images/navigation.jpg); }
thanks
-
Aug 25, 2009, 06:53 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You missed the underscore in your example above otherwise the code should work.
e.g.
Code:.sidebar { padding-top: 45px; border: 1px solid #c4c4c4; } .sidebar_navigation { background-image:url(../images/navigation.jpg); }
Code:<div class="sidebar sidebar_navigation">etc...</div>
-
Aug 25, 2009, 06:55 #3
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
Any common styles can be grouped as shown in red:
Code:.sidebar_navigation, .sidebar_login, .sidebar_adverts { padding-top: 45px; border: 1px solid #c4c4c4; } .sidebar_navigation{ background-image:url(../images/navigation.jpg); } .sidebar_login{ background-image:url(../images/login.jpg); } .sidebar_adverts{ background-image:url(../images/adverts.jpg); }
-
Aug 25, 2009, 06:58 #4
missed the _ intentionally, I was thinking along the lines of when you do:
HTML Code:.somediv p { /* style <p> with parent of .somediv */ }
<div class="someclass another_class">
is this like a hierarchy? where the first is the parent class, then the next is a child class?
thanks again
-
Aug 25, 2009, 07:04 #5
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
-
Aug 25, 2009, 07:05 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
is this like a hierarchy? where the first is the parent class, then the next is a child class?
As Ralph said above they are of equal weight but styles later in the CSS file will be the ones that win out.
The order of the classnames in the space separated list in the html is not important to the cascade. Only the order in the css file dictates their priority.
I use space separated classes all the time to add/modify existing styles and reduce code considerably.
-
Aug 25, 2009, 11:38 #7
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Though an added advantage of when you specify multiple classes is that you can identify the elements that have multiple classes
Code:<p class="sexy red"></p>
Code:.sexy.red{}
Always looking for web design/development work.
http://www.CodeFundamentals.com
Bookmarks