SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to group together css?

    Anyone help me out with this little css question?

    I have the following css
    Code:
    #subnavWrapper {
    	
    }
    
    #services {
    	float: left;
    	width: 220px;
    	height: 150px;
    	margin-left: 20px;
    }
    
    #services h1{
    	color:#3178AC;
    	font-size:14px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #F98E00;
    	margin-top: 1.8em;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0.5em;
    	padding-left: 0;
    }
    
    
    #services ul {
    	font-size:0.8em;
    	list-style-type:none;
    	padding:0;
    	margin:1px 0 0 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    }
    
    
    #services ul li {
    	color:#666;
    	padding:0.5em 0 0.5em 0;
    	border-bottom:1px solid #eee;
    }
    
    #services ul li {
    	padding-left:15px;
    }
    
    #services ul li a {
    	color:#3C91C6;
    	text-decoration:none;
    	font-size: 12px;
    }
    
    
    #services ul li a:hover {
    	color:#F98E00;
    	text-decoration:underline;
    }
    
    
    #clients {
    	float: left;
    	height: 150px;
    	width: 220px;
    	margin-left: 20px;
    }
    
    #clients h1{
    	color:#3178AC;
    	font-size:14px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #F98E00;
    	margin-top: 1.8em;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0.5em;
    	padding-left: 0;
    }
    
    
    #clients ul {
    	font-size:0.8em;
    	list-style-type:none;
    	padding:0;
    	margin:1px 0 0 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    }
    
    
    #clients ul li {
    	color:#666;
    	padding:0.5em 0 0.5em 0;
    	border-bottom:1px solid #eee;
    }
    
    #clients ul li {
    	padding-left:15px;
    }
    
    #clients ul li a {
    	color:#3C91C6;
    	text-decoration:none;
    	font-size: 12px;
    }
    
    
    #clients ul li a:hover {
    	color:#F98E00;
    	text-decoration:underline;
    }
    Which applies to this html
    Code:
    <div id="subnavWrapper">
    <div id="services">
    <h1>Services</h1>
    <ul>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    </ul>
    </div>
    
    <div id="clients">
    <h1>Client Profile </h1>
    <ul>
    
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    </ul>
    </div>
    
    
    <div id="faqs">
    <h1>Frequently Asked Questions </h1>
    <ul>
    
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    </ul>
    </div>
    As you can see 3 sections are the same and i was just wondering how i could group them together and neaten up my css.

    I tried this:
    Code:
    #services #clients #faqs {
    css
    css
    css
    }
    But it didn't work and the style went all over the place

    Any ideas?

    Many thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #services, #clients, #faqs { ... }

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doest work.

    Well only #faqs works, the other two don't read the style.

    Is it something to do with the order of divs?

    I have a #wrapper holding everything, then #subnavWrapper which holds the 3 containers of lists.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    With commas in between the content of the {} applies to each of the ids. If it doesn't work for you then you must have coded it wrong somehow. Can you post exactly what you now have.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, here is the html.

    Code:
    <div id="wrapper">
    
    <div id="titleWrapper">
    <div id="titleLogo"><h1>test title</h1></div>
    <div id="titleStrap"><h1>test sub title</h1></div>
    </div>
    
    
    <div id="mainNav">
      <ul>
        <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Client Profile</a></li>
          <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    
    
    
    <div id="subnavWrapper">
    <div id="services">
    <h1>Services</h1>
    <ul>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    </ul>
    </div>
    
    <div id="clients">
    <h1>Client Profile </h1>
    <ul>
    
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    </ul>
    </div>
    
    
    <div id="faqs">
    <h1>Frequently Asked Questions </h1>
    <ul>
    
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    <li><a href="#" title="">Link 1<br />
    </a>Link1 description</li>
    </ul>
    </div>
    
    </div>
    
    </div>
    The css, with commas

    Code:
    * { 
    	margin: 0;
    	padding: 0;
    }
    
    html {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    img {
    	
    }
    
    
    body {
    
    }
    
    #wrapper {
    	width: 740px;
    	margin-right: auto;
    	margin-left: auto;
    	
    }
    
    /*
    -----------------------------------------------------------------------------*
    Header
    -----------------------------------------------------------------------------*/
    #titleWrapper {
    	width: 740px;
    	height: 140px;
    	clear: both;	
    }
    
    
    #titleLogo {
    	background-image: url(../images/build/headerLogo.gif);
    	height: 116px;
    	width: 363px;
    	float: left;
    	background-repeat: no-repeat;
    }
    #titleLogo  h1 {
    	text-indent: -9000px;
    	margin: 0;
    } 
    #titleLogo h1 a { display:block; height:116px; width:363px; }
    
    #titleStrap {
    	background-image: url(../images/build/headerStrap.gif);
    	height: 20px;
    	width: 281px;
    	float: right;
    	background-repeat: no-repeat;
    	margin-top: 50px;
    }
    #titleStrap  h1 {
    	text-indent: -9000px;
    	margin: 0;
    } 
    /*-----------------------------------------------------------------------------*
    Navigation
    -----------------------------------------------------------------------------*/	
    
    
    
    #mainNav {
    	clear: left;
    	height: 39px;
    	margin-left: 11px;
    }
    
    #mainNav ul{
    	list-style: none;
    }
    #mainNav  li {
    	display:inline;
    }	
    	
    #mainNav a{
    	color: #FFFFFF;
    	margin-right: 10px;
    	margin-left: 10px;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	line-height: 3em;
    }
    #mainNav a:hover{
    	color: #F98E00;
    }
    
    
    
    .separator {
    		clear: both;
    		}
    
    /*
    -----------------------------------------------------------------------------*
    Content
    -----------------------------------------------------------------------------*/
    
    
    
    #subnavWrapper {
    	
    }
    
    #services, #clients, #faqs {
    	float: left;
    	width: 220px;
    	height: 150px;
    	margin-left: 20px;
    }
    
    #services, #clients, #faqs h1{
    	color:#3178AC;
    	font-size:14px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #F98E00;
    	margin-top: 1.8em;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0.5em;
    	padding-left: 0;
    }
    
    
    #services, #clients, #faqs ul {
    	font-size:0.8em;
    	list-style-type:none;
    	padding:0;
    	margin:1px 0 0 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    }
    
    
    #services, #clients, #faqs ul li {
    	color:#666;
    	padding:0.5em 0 0.5em 0;
    	border-bottom:1px solid #eee;
    }
    
    #services, #clients, #faqs ul li {
    	padding-left:15px;
    }
    
    #services, #clients, #faqs ul li a {
    	color:#3C91C6;
    	text-decoration:none;
    	font-size: 12px;
    }
    
    
    #services, #clients, #faqs ul li a:hover {
    	color:#F98E00;
    	text-decoration:underline;
    }
    The css without commas, for the section i am trying to tidy up.
    Code:
    	#subnavWrapper {
    	
    }
    
    #services {
    	float: left;
    	width: 220px;
    	height: 150px;
    	margin-left: 20px;
    }
    
    #services h1{
    	color:#3178AC;
    	font-size:14px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #F98E00;
    	margin-top: 1.8em;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0.5em;
    	padding-left: 0;
    }
    
    
    #services ul {
    	font-size:0.8em;
    	list-style-type:none;
    	padding:0;
    	margin:1px 0 0 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    }
    
    
    #services ul li {
    	color:#666;
    	padding:0.5em 0 0.5em 0;
    	border-bottom:1px solid #eee;
    }
    
    #services ul li {
    	padding-left:15px;
    }
    
    #services ul li a {
    	color:#3C91C6;
    	text-decoration:none;
    	font-size: 12px;
    }
    
    
    #services ul li a:hover {
    	color:#F98E00;
    	text-decoration:underline;
    }
    
    
    #clients {
    	float: left;
    	height: 150px;
    	width: 220px;
    	margin-left: 20px;
    }
    
    #clients h1{
    	color:#3178AC;
    	font-size:14px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #F98E00;
    	margin-top: 1.8em;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0.5em;
    	padding-left: 0;
    }
    
    
    #clients ul {
    	font-size:0.8em;
    	list-style-type:none;
    	padding:0;
    	margin:1px 0 0 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    }
    
    
    #clients ul li {
    	color:#666;
    	padding:0.5em 0 0.5em 0;
    	border-bottom:1px solid #eee;
    }
    
    #clients ul li {
    	padding-left:15px;
    }
    
    #clients ul li a {
    	color:#3C91C6;
    	text-decoration:none;
    	font-size: 12px;
    }
    
    
    #clients ul li a:hover {
    	color:#F98E00;
    	text-decoration:underline;
    }
    
    
    
    #faqs {
    	float: left;
    	height: 150px;
    	width: 220px;
    	margin-left: 20px;
    }
    
    #faqs h1{
    	color:#3178AC;
    	font-size:14px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #F98E00;
    	margin-top: 1.8em;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0.2em;
    	padding-left: 0;
    }
    
    
    #faqs ul {
    	font-size:0.8em;
    	list-style-type:none;
    	padding:0;
    	margin:1px 0 0 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    }
    
    
    #faqs ul li {
    	color:#666;
    	padding:0.5em 0 0.5em 0;
    	border-bottom:1px solid #eee;
    }
    
    #faqs ul li {
    	padding-left:15px;
    }
    
    #faqs ul li a {
    	color:#3C91C6;
    	text-decoration:none;
    	font-size: 12px;
    }

  6. #6
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That isn't really going to give you what you want. You would need to do this:

    Code:
    #services h1, #clients h1, #faqs h1 {...}
    #services ul, #clients ul, #faqs ul {...}
    #services ul li, #clients ul li, #faqs ul li {...}
    #services ul li a, #clients ul li a, #faqs ul li a {...}
    #services ul li a:hover, #clients ul li a:hover, #faqs ul li a:hover {...}

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot.

    That works a treat.

    I assume its better practice to do things like this when you have multiples of things.

    Neaten's up the css and saves loading time?


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
  •