www.webdeveloper.com
Results 1 to 3 of 3

Thread: style button multiple same class

  1. #1
    Join Date
    Mar 2011
    Posts
    39

    style button multiple same class

    hello

    I would like apply the same style to 3 different form buttons coming from 3 different components of my site.

    Example:

    .class1 .button {
    background: url("../images/main/light/button-bg.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    }

    .class2 .button {
    background: url("../images/main/light/button-bg.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    }

    .class3 .button {
    background: url("../images/main/light/button-bg.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    }


    I'm almost sure is possible to get the same result and avoid to write 3 time the same code...so I tried this:

    .class1 .class2 .class3 .button {
    background: url("../images/main/light/button-bg.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    }


    and also this:

    .class1, .class2, .class3, .button {
    background: url("../images/main/light/button-bg.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    }

    ..but none of them work.

    Somebody can suggest me the correct syntax please ?

    Unfortunately I'm not a css guru

    many thank

    cheers

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254

    keep it lean

    At a quick glance, the property:values all look the same so you should just have one

    .button {
    background: url("../images/main/light/button-bg.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    }

    You could have exceptions such as .class1 { color:red: } .class2 { color:green;} and apply multiple space-separated classes to one element, such as <div class="button class2"> ...</div>

    You can contextually style nested elements #nav .button, #footer .button { } and apply same rule to comma-separated multiple selectors.

    Here's an example
    Code:
    <STYLE tye="text/css">
    #navbarContainer { margin: 10px auto; text-align:center; padding:0; border: none; position:relative; background:transparent; clear:both; }
    /*==HORIZONTAL UL==*/
    /*#navbarContainer img { width: 50&#37;; max-width: 400px; min-width: 250px;}*/
    ul#navbar  { 
    	white-space: nowrap; margin: 0; padding: 0; border: 0; font-size: .95em; line-height: 1.5em; font-style: italic; 
    	font-family: Rockwell, "goudy old style", garamond, baskerville, "century schoolbook", goudy, georgia, "times new roman", times, serif;  }
    ul#navbar li { 
    	 float: left; display: inline; list-style: none; margin: 1px; padding:5px;  width: 6em; text-align: center; }
    
    ul#navbar li a, ul#navbar li a:link, ul#navbar li a:visited  { 
    	display: block; text-decoration: none; 	color: #000; background-color: #F0F8FF; border: 2px outset #fc0; -moz-border-radius: 1em; border-radius:1em; width: 100%;  } /*==problemw/Mac==*/
    	
    ul#navbar li a:hover, ul#navbar li a:active  {   
    	display: block; text-decoration: none; 	color: #8899aa; background-color: #cccccc; border: 2px inset #f00; 
    	}	
    
    ul#navbar li.here a,  ul#navbar li.here a:link, ul#navbar li.here a:visited  { 
    	color: #00FFCC; background-color: #cccccc; border: 2px inset #c60; cursor: default; 	} 
    </STYLE>
    
    IN HTML
     <div id="navbarContainer"> 
     <ul id="navbar">
        <li id="home"><a href="../index.html">Home</a></li>
        <li id="office" class="here"><a href="#nogo">Office</a></li>
         <li id="staff"><a href="../staff/index.html">Staff</a></li>
    </ul>
    </div>

  3. #3
    Join Date
    Mar 2011
    Posts
    39
    of course you right

    Setting simply my .button class is quite enough in my case..

    many thank for your help.

    All the best

    cheers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles