SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist Waffles's Avatar
    Join Date
    Nov 2005
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    consequentially i've found that i'm repeating a lot of code, probably unnecessary.

    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;
    }
    I tried

    HTML Code:
    .sidebar {
    	padding-top: 45px;
            border: 1px solid #c4c4c4;
    }
    
    .sidebar navigation { background-image:url(../images/navigation.jpg); }
    but that didn't appear to work. is there an efficient way of achieving this? I could have between 15-20 "sidebar" entries, and it just seems redundant

    thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 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>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 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);
    }
    Edit: But Paul's solution is much better...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Evangelist Waffles's Avatar
    Join Date
    Nov 2005
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    missed the _ intentionally, I was thinking along the lines of when you do:

    HTML Code:
    .somediv p {
     /* style <p> with parent of .somediv */
    }
    could you explain how CSS/the browser interprets

    <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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Waffles View Post
    is this like a hierarchy? where the first is the parent class, then the next is a child class?
    No, they carry equal weight.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 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?
    No the classes are accumulative and added to the elements as required. In the case of conflicts the styles that gets priority will be the one later in the CSS file (as usual with the cascade).

    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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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>
    Now if you wanted to identify an element that had both classes you could do
    Code:
    .sexy.red{}
    Though IE6 will only read the last class, aka .red in this case, but once IE6 is dead we can make use of this
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •