The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How are the sides of this button specified?

The forum of the forums :: Miscellaneous :: Garbage

Go down

How are the sides of this button specified? Empty How are the sides of this button specified?

Post by Bleachzor April 27th 2010, 7:40 pm

This is the link to the spriteimage of the button:
http://mangastream.com/static/images/buttonset.png

My question is what part of his css specifies his sides?
Somewhere in his css below the parts "button" there is a part that holds the info about "where" these sides I'm looking for are located. What part is it?

This is the html and the css:
Full HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Naruto 492 - Read Online at Manga Stream</title>
   <link rel="stylesheet" type="text/css" href="/static/css/web.css?54" />
   <link rel="alternate" type="application/rss+xml" title="MangaStream.com Latest Releases" href="http://feeds.feedburner.com/mstream" />
   <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
   
   <script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
   </script>

   <script type='text/javascript'>
   GS_googleAddAdSenseService("ca-pub-1555486279701427");
   GS_googleEnableAllServices();
   </script>
   <script type='text/javascript'>
   GA_googleAddSlot("ca-pub-1555486279701427", "Reader_Right_Skyscraper_G_160x600");
   GA_googleAddSlot("ca-pub-1555486279701427", "Reader_Top_G_728x90");
   </script>
   <script type='text/javascript'>
   GA_googleFetchAds();
   </script>

   <script type="text/javascript">
   var browser = navigator.appName;
   if (browser == "Microsoft Internet Explorer") {
      document.onkeydown=keydownie;
   } else {
      document.onkeydown=keydown;
   }
   
   function keydownie(e) {
      if (!e) var e = window.event;
      if (e.keyCode) {
         keycode = e.keyCode;
         if ((keycode == 39) || (keycode == 37)) {
             window.event.keyCode = 0;
         }
      } else {
         keycode = e.which;
      }
      if (keycode == 37) {
         window.location = '/read/naruto/492-129/16';         return false;
      } else if (keycode == 39){
         window.location = '/read/naruto/492-129/end';
         return false;
      }
   }
   
   function keydown(e) {
      if (e.which) {
         keycode = e.which;
      } else {
         keycode = e.keyCode;
      }
      if (keycode == 37) {
         window.location = '/read/naruto/492-129/16';         return false;
      } else if (keycode == 39) {
         window.location = '/read/naruto/492-129/end';
         return false;
      }
   }
   </script>
</head>
<body>

<div id="insideheadwrap">

      <div id="insideheader">
         <div class="insidelogo"><a href="http://mangastream.com/"><img src="/static/images/logo_small.png" border="0" alt="MangaStream" /></a></div>
         <div class="insidenav">
            <ul class="tabbednav maintabbednav navdark">
               <li><a class="notactive" href="http://mangastream.com/">Home</a></li>
               <li><a class="notactive" href="http://mangastream.com/manga">Manga Directory</a></li>
               <li><a class="notactive" href="http://forum.mangastream.com">Forums</a></li>

            </ul>
            <div class="spacer"></div>
         </div>
      </div>
</div>

<div id="contentwrap" style="padding:10px;">

   <div id="pagewrapper" style="width:1062px;">
      
      <div id="page" style="width:892px;">

                  <div id="adwrapper">
            <div class="leaderboard">
               <!-- ca-pub-1555486279701427/Reader_Top_G_728x90 -->
               <script type='text/javascript'>
               GA_googleFillSlot("Reader_Top_G_728x90");
               </script>
            </div>
         </div>
         <div class="spacer"></div>
                  
         <div class="pagenav">

            <div class="nextprev">
               <a href="/read/naruto/492-129/16" class="button"><span class="add">Previous Page</span></a>
               <a href="/read/naruto/492-129/end" class="button"><span class="add">Next Page</span></a>
            </div>
         
            <div class="chaptercontrols">
               Chapter:
               <select name="series" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                              <option value="/read/naruto/492-129/1" selected="selected">492</option>

                              <option value="/read/naruto/491-125/1">491</option>
                              <option value="/read/naruto/490-99/1">490</option>
                              <option value="/read/naruto/489-94/1">489</option>
                              <option value="/read/naruto/488-79/1">488</option>
                              <option value="/read/naruto/487-75/1">487</option>
                              <option value="/read/naruto/486-70/1">486</option>

                              <option value="/read/naruto/485-64/1">485</option>
                              <option value="/read/naruto/484-60/1">484</option>
                              <option value="/read/naruto/483-54/1">483</option>
                              <option value="/read/naruto/482-51/1">482</option>
                              <option value="/read/naruto/481-47/1">481</option>
                              <option value="/read/naruto/480-41/1">480</option>

                              <option value="/read/naruto/479-33/1">479</option>
                              <option value="/read/naruto/478-26/1">478</option>
                              <option value="/read/naruto/477-18/1">477</option>
                              <option value="/read/naruto/476-14/1">476</option>
                              <option value="/read/naruto/475-10/1">475</option>
                              <option value="/read/naruto/474-6/1">474</option>

                              </select>&nbsp;&nbsp;&nbsp;
               
               Page:
               <select name="page" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                              <option value="/read/naruto/492-129/1">1</option>
                              <option value="/read/naruto/492-129/2">2</option>
                              <option value="/read/naruto/492-129/3">3</option>
                              <option value="/read/naruto/492-129/4">4</option>

                              <option value="/read/naruto/492-129/5">5</option>
                              <option value="/read/naruto/492-129/6">6</option>
                              <option value="/read/naruto/492-129/7">7</option>
                              <option value="/read/naruto/492-129/8">8</option>
                              <option value="/read/naruto/492-129/9">9</option>
                              <option value="/read/naruto/492-129/10">10</option>

                              <option value="/read/naruto/492-129/11">11</option>
                              <option value="/read/naruto/492-129/12">12</option>
                              <option value="/read/naruto/492-129/13">13</option>
                              <option value="/read/naruto/492-129/14">14</option>
                              <option value="/read/naruto/492-129/15">15</option>
                              <option value="/read/naruto/492-129/16">16</option>

                              <option value="/read/naruto/492-129/17" selected="selected">17</option>
                              </select>&nbsp;&nbsp;&nbsp;
               
                           </div>
            
            <div class="spacer"></div>
         </div>
      
         <div><a href="/read/naruto/492-129/end"><img src="http://static3.mangastream.com/manga/1/129/17.png" width="892" height="1300" border="0" /></a></div>
      
         <div class="pagenav">
            <div class="nextprev">

               <a href="/read/naruto/492-129/16" class="button"><span class="add">Previous Page</span></a>
               <a href="/read/naruto/492-129/end" class="button"><span class="add">Next Page</span></a>
            </div>
         
            <div class="chaptercontrols">
               Page:
               <select name="page" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                              <option value="/read/naruto/492-129/1">1</option>
                              <option value="/read/naruto/492-129/2">2</option>

                              <option value="/read/naruto/492-129/3">3</option>
                              <option value="/read/naruto/492-129/4">4</option>
                              <option value="/read/naruto/492-129/5">5</option>
                              <option value="/read/naruto/492-129/6">6</option>
                              <option value="/read/naruto/492-129/7">7</option>
                              <option value="/read/naruto/492-129/8">8</option>

                              <option value="/read/naruto/492-129/9">9</option>
                              <option value="/read/naruto/492-129/10">10</option>
                              <option value="/read/naruto/492-129/11">11</option>
                              <option value="/read/naruto/492-129/12">12</option>
                              <option value="/read/naruto/492-129/13">13</option>
                              <option value="/read/naruto/492-129/14">14</option>

                              <option value="/read/naruto/492-129/15">15</option>
                              <option value="/read/naruto/492-129/16">16</option>
                              <option value="/read/naruto/492-129/17" selected="selected">17</option>
                              </select>&nbsp;&nbsp;&nbsp;
            </div>
            
            <div class="spacer"></div>
         </div>

   
               
      </div>
      
            <div id="rightad">
         <div class="pageskyscraper">
            <!-- ca-pub-1555486279701427/Reader_Right_Skyscraper_G_160x600 -->
            <script type='text/javascript'>
            GA_googleFillSlot("Reader_Right_Skyscraper_G_160x600");
            </script>
         </div>
      </div>
            
      <div class="spacer"></div>

      
   </div>


</div>

<div id="footerwrap">
   <div id="footerwrap-inner">
      <div class="ff"></div>
      &copy;2010 MangaStream | 
      <a href="http://mangastream.com/content/privacy">Privacy Policy</a> |
      <a href="http://mangastream.com/content/faq">FAQ</a> |
      <a href="mailto:admin@mangastream.com">Send an Email</a> |
      <img src="/static/images/rss_icon.gif" border="0" class="inlineimg" /> <a href="http://feeds.feedburner.com/mstream">RSS Feed</a>

      <div class="spacer"></div>
   </div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11718373-1");
pageTracker._trackPageview();
} catch(err) {}</script>

<!-- Start Quantcast tag -->
<script type="text/javascript">
_qoptions={
qacct:"p-baCRPQ9PllVxY"
};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript>
<img src="http://pixel.quantserve.com/pixel/p-baCRPQ9PllVxY.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>

</noscript>
<!-- End Quantcast tag -->

</body>

</html>
The CSS
Code:
body {background:#e8e8e8;margin:0 0 20px 0;padding:0;font-size:75%;font-family: lucida Grande, Helvetica, Arial, sans-serif;color:#333;}
 
a {color:#222222;}
a:hover {color:#000000;}
a:active {color:#000000;}

small {color:#777777;font-size:11px;}

h1 {letter-spacing:-1px;font-size:22px;color:#3f7add;font-weight:400;margin:0;padding:0 0 10px 0;}
h1 em {font-size:14px;color:#3f7add;font-style:normal;text-decoration:underline;}
h1 a {text-decoration:none;}
h2 {border:none;letter-spacing:-1px;margin:0;padding-bottom:2px;font-size:20px;color:#777777;font-weight:400;}
h2 a {color:#777777;text-decoration:none;}
h2 a em {font-style:normal;color:#444444;}
h2 a:hover, h2 a:hover em {color:#000000;text-decoration:underline;}

hr {margin:10px 0;height:1px;background:#e7e7e7;color:#e7e7e7;border:none;}

h3 a {text-decoration:none;color:#fff;}

.inlineimg {vertical-align:middle;}
.spacer {clear:both;}

#headwrap {margin:0;padding:0;text-align:center;background:url(../images/topbg.png) top left repeat-x;}
#headwrap-inner {margin:0 auto;position:relative;text-align:left;width:850px;}

#insideheadwrap {margin:0;padding:0;text-align:center;background:url(../images/topbg_small.png) top left repeat-x;}
#insideheadwrap-inner {margin:0 auto;position:relative;text-align:left;width:850px;}

#contentwrap {margin:0;padding:0;text-align:center;background:#fff;border-bottom:2px solid #cdcdcd;}
#contentwrap-inner {margin:0 auto;position:relative;text-align:left;width:850px;padding:15px 0;}

#footerwrap {margin:20px 0;padding:0;text-align:center;}
#footerwrap-inner {margin:0 auto;position:relative;text-align:left;width:850px;color:#888888;}
#footerwrap a {color:#666666;}

#header {height:152px;position:relative;}
#insideheader {height:41px;position:relative;}

#pagewrapper {margin:0 auto;}
#adwrapper {margin:0 auto;width:728px;}
#page {float:left;background:#fff;margin:0 10px 0 0;}
#rightad {float:left;width:160px;}

.pagenav {padding:5px;margin:0 auto;}
.nextprev {float:right;}
.chaptercontrols {margin-top:6px;text-align:left;}

.leaderboard {width:728px;height:90px;}
.topad {width:728px;height:90px;margin:0 auto;margin-bottom:10px;}
.skyscraper {width:120px;height:600px;background:#e7e7e7;padding:10px;}
.pageskyscraper {width:160px;height:600px;}
.squaread {width:300px;height:250px;}
.bottomad-wrap {margin:10px auto;width:650px;}
.bottomad-1 {width:300px;height:250px;margin-right:10px;float:left;}
.bottomad-2 {width:300px;height:250px;float:left;}

.home-news {float:left;width:535px;margin-right:15px;}
.home-ad {float:left;width:300px;}

.logo {position:absolute;top:30px;}
.insidelogo {position:absolute;top:5px;left:10px;}
.slogan {position:absolute;top:55px;left:353px;width:500px;}
.slogan h4 {text-align:right;margin:0;padding:0;font-size:18px;color:#ffffff;letter-spacing:-1px;font-weight:400;}
.nav {position:absolute;left:0px;top:123px;}
.insidenav {position:absolute;top:12px;left:180px;}
.home-left {float:left;width:470px;margin-right:10px;padding-right:10px;border-right:1px solid #e7e7e7;}
.home-right {float:left;width:359px;}
.directory-left {float:left;width:709px;margin-right:10px;padding-right:10px;border-right:1px solid #e7e7e7;}
.directory-right {float:left;width:120px;}
.release-preview {float:left;width:173px;margin-right:15px;}
.release-info {float:left;width:282px;}

ul.tabbednav li a.personalisation:hover  {color:#536F18;}
.span-24 ul.tabbednav {clear:both;padding:0;}
ul.tabbednav {clear:both;padding:0;margin:0;}
ul.tabbednav li {float:left;list-style:none;margin-bottom:-1px;margin-right:2px;}
ul.tabbednav li a {padding:0 7px 0 7px;height:28px;display:block;margin:0;text-decoration:none;line-height:27px;}
ul.tabbednav li a:hover {color: #000;}
ul.tabbednav li a.active {padding:0 7px 0 7px;color:#000;border:1px solid #ffffff;border-bottom:0px solid #fff;background-color:#fff;-moz-border-radius-topleft:7px;-webkit-border-top-left-radius:7px;-moz-border-radius-topright:7px;-webkit-border-top-right-radius:7px;}
ul.tabbednav li a.notactive {padding:0 7px 0 7px;color:#FFF;border:1px solid #2a62be;border-bottom:0px solid #fff;background-color:#2a62be;-moz-border-radius-topleft:7px;-webkit-border-top-left-radius:7px;-moz-border-radius-topright:7px;-webkit-border-top-right-radius:7px;}
ul.tabbednav li a.tabcontent {margin-left:0px;}
ul.tabbednav li a.tabactivecontent{margin-left:7px;}
ul.tabbednav li a.notactive:hover {color:#000;background-color:#fff;border:1px solid #fff;border-bottom:0px solid #fff;}
ul.maintabbednav {z-index: 2;}
ul.maintabbednav li a.active {border-color:#ffffff;}
ul.maintabbednav li a.notactive {border-color:#2a62be;}

ul.navdark li a.notactive {border-color:#373737;background-color:#373737;}

ul.freshmanga {margin:0;padding:0;}
ul.freshmanga li {list-style:none;padding:5px;border-bottom:1px solid #e7e7e7;}
ul.freshmanga li em {float:right;font-style:normal;color:#888888;}
ul.freshmanga li.new {background:#fffad5;}

ul.twitter {margin:0;padding:0;}
ul.twitter li {list-style:none;padding:10px 0px;border-bottom:1px solid #e7e7e7;}

.ff {float:right;}

#notice {text-align:center;font-size:12px;font-weight:900;background:#74a421;border-bottom:1px solid #fff;padding:5px;color:#fff;}
#notice a {color:#fff;}

.mangablock {float:left;width:175px;}
.mangablock ul {margin:0;list-style-type:none;padding:0;}


table.datagrid {border-collapse:separate;border-spacing:0px;empty-cells:show;width:100%;border-right:1px solid #cdcdcd;border-top:1px solid #cdcdcd;}
table.datagrid td {border:1px solid #cdcdcd;border-top:none;border-right:none;padding:8px;color:#555;background:#ffffff;}
table.datagrid th {padding:3px 8px;background:#e7e7e7;border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #999;border-right:1px solid #999;font-weight:900;color:#333;}
td.datacell-1, th.datacell-1 {text-align:left;}
td.datacell-2, th.datacell-2 {text-align:center;}
td.datacell-3, th.datacell-3 {text-align:right;}
table.datagrid td em {color:#888;font-style:normal;}
table.datagrid td ul {margin:0 15px;padding:0;}

table.datagrid-simple {border-collapse:separate;border-spacing:0px;empty-cells:show;width:100%;border:none;}
table.datagrid-simple td {border-bottom:1px solid #e7e7e7;padding:8px 0;color:#555;}
table.datagrid-simple th {border-top:5px solid #e7e7e7;border-bottom:1px solid #e7e7e7;letter-spacing:-1px;margin:0;padding:10px 0;font-size:20px;color:#777777;font-weight:400;}
table.datagrid-simple td em {color:#888;font-style:normal;}
table.datagrid-simple td ul {margin:0 15px;padding:0;}

a.button, span.button, del.button{
   
   display:-moz-inline-box;
   display:inline-block;
   cursor:pointer;
   border:none;
    font-size:0;
    line-height:0;
   
   /*
   for Safari, read this first
   http://creativebits.org/webdev/safari_background_repeat_bug_fix
   */
   background-position:0 0;
   background-repeat:no-repeat;
   height:30px;
   text-decoration:none;
   color:#2e523b;
   font-style:normal;
   margin:0 6px 0px 0;
   padding:0 10px 0 0;   
   vertical-align:middle;   
   
    padding-top:-2px;
   _position:relative;
   _width:10px;   
   _overflow-y:hidden;
}



a.button, span.button, del.button,
a.button span, span.button button, span.button input, del.button span{
    background-image:url(../images/buttonset.png);
    _background-image:url(../images/buttonset.gif);
}


a.button span, span.button button, span.button input, del.button span{
   
   white-space:nowrap;
   cursor:pointer;
    color:#222;
   display:-moz-inline-box;
   display:inline-block;
   line-height:1;
    letter-spacing:0 !important;
    font-family:"Arial" !important;
    font-size:12px !important;
    font-style:normal;   
    background-color:transparent;
   background-position:100% 0;
   background-repeat:no-repeat;
   height:30px;
   padding:8px 20px 0 10px;
   margin:0 -16px 0 10px;
   border:none;
   vertical-align:text-top;
   zoom:1;
   _position:relative;
    _padding-left:0px;
   _padding-right:12px;
   _margin-right:-10px;   
   _display:block;
   _top:0;
   _right:-5px;
   
}


span.button button{
  line-height:2.5;/*Opera need this*/
}

html.safari a.button span,
html.safari del.button span{
  line-height:1.3;
}

html.safari span.button button{
  line-height:2.6;
}

html.safari a.button:focus,
html.safari span.button button:focus{
    outline:none;
}



del.button{
   /* cursor:not-allowed;   */
   background-position:0 -120px;
   
}

del.button span{
   cursor:default;
    color:#aaa !important;
   background-position:100% -120px;
}


span.button button, span.button input{
   padding-top:0px;
   line-height:2.5;/*Opera need this*/
}


/** optional **/
/*
a.button:visited{
   color:#aaa;
}
*/


/*Hover Style*/

a.button:hover,
span.button:hover,
a.button:focus,

a.dom-button-focus,
span.button-behavior-hover{
   background-position:0 -60px;
   color:#222;
   text-decoration:none;
}





a.button:hover span,
span.button:hover button,
a.button:focus span,

span.button-behavior-hover button,
span.button-behavior-hover input{
   background-position:100% -60px;
}


a.button:active, a.button:focus span{
   color:#444;
}




del.button-behavior-hover, del.button:hover{
   background-position:0 -180px;
   /* cursor:not-allowed; */
}


del.button-behavior-hover span, del.button:hover span{
   background-position:100% -180px;
   /* cursor:not-allowed; */
   
}




/*Optional hack for IE6 to simulate :hover selector*/

span.button button, del.button span, span.button input{


   
   _behavior:expression(
      (function(el){

         if( typeof( behavior_onMouseEnter) == 'undefined'){

            
            behavior_onMouseEnter = function(el){
               
               var dEl = this.parentNode;               
               var sClass = dEl.className ;
               dEl.__defaultClassName = sClass ;
               dEl.className = sClass + ' button-behavior-hover';   
               this.setCapture();
            };

            behavior_onMouseLeave = function(el) {
               var dEl = this.parentNode;
               dEl.className = dEl.__defaultClassName ;
               dEl.__defaultClassName = undefined;
               this.releaseCapture();
            };


         };
         
         
         el.runtimeStyle.behavior = 'none';
         el.onmouseenter = behavior_onMouseEnter;
         el.onmouseleave = behavior_onMouseLeave;
         
         
      })(this));
      
}

.api-item {background:#e7e7e7;border:1px solid #cdcdcd;padding:10px;margin-bottom:15px;}

.mobile {border:1px solid #cdcdcd;background:#f1f1f1;margin-bottom:15px;}
.mobile-head {background:#cdcdcd;color:#555;font-weight:900;font-size:11px;padding:5px;}
.mobile-head em {float:right;}
.mobile-head em a {color:#666;font-weight:400;font-style:normal;}
.mobile-left {float:left;padding:15px;width:393px;border-right:1px solid #cdcdcd;font-size:11px;color:#666;}
.mobile-right {float:left;padding:15px;width:393px;font-size:11px;color:#666;}
.mobile-left h4 {font-size:14px;font-weight:900;margin:0;padding:0;color:#444;}
.mobile-left h4 em {font-weight:400;color:#e26910}
.mobile-right h4 {font-size:14px;font-weight:900;margin:0;padding:0;color:#444;}
.mobile-right h4 em {font-weight:400;color:#e26910}
.mobile a {text-decoration:none;}
Bleachzor
Bleachzor
Forumember

Posts : 211
Reputation : -10
Language : Dutch

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum