SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    several styles minor difference

    hi all

    i have a quick question
    basically, i have a heap of several styles for simple icons, but they are all identical except that they use different images

    eg.
    Code:
    #contextNav .link_site {
    	background-image: url(/images/icons/icon_site.png);
    	padding: 0px 20px 0px 0px;
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    #contextNav .link_other {
    	background-image: url(/images/icons/icon_other.png);
    	padding: 0px 20px 0px 0px;
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    so you can see, the only difference is the background-image

    #contextNav is the container div

    is there a way to just declare all those positioning attributes once
    and have a separate style with just the image for each icon?

    sample html
    Code:
    <div id="contextNav">
    	<ul id="context">
    	<li class="top">
    		<div class="link_sports">
    			<a href="/newsCategory/3" title="sports">sports (59) </a></div>
    	</li>
    </ul>
    </div>
    thanks
    dave

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #contextNav .link {
    	padding: 0 20px 0 0;
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    #contextNav .site {
    	background-image: url(/images/icons/icon_site.png);
    }
    #contextNav .other {
    	background-image: url(/images/icons/icon_other.png);
    }
    HTML Code:
    <div id="contextNav">
    	<ul id="context">
    	<li class="top">
    		<div class="link sports">
    			<a href="/newsCategory/3" title="sports">sports (59) </a></div>
    	</li>
    </ul>
    </div>
    You can use multiple classes on an element. Just separate the class names with spaces (like in class="link sports" above).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks, i'll give it a try


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
  •