SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simply Javascript Book - CSS - page 259

    on page 259 the css in slider.css goes like this:

    Code:
    span.sliderControl {
      display: block;
      height: 79px;
      position: relative;
    }
    
    span.sliderTrack {
      background: url(slider_scale.jpg);
      display: block;
      height: 72px;
      left: 0;
      position: absolute;
      top: 7px;
      width: 430px;
    }
    
    span.sliderControl span.sliderThumb {
      background-image: url(slider_thumb.gif);
      cursor: w-resize;
      height: 35px;
      position: absolute;
      top: 0;
      width: 20px;
    }
    
    span.sliderControl input.slider {
      margin-left: 430px;
    }
    and on page 258 the html goes like this:

    Code:
           <label for="percent">Percentage
              <span class="sliderControl">
                 <span class="sliderTrack"></span>
                 <span class="sliderThumb"></span>
                 <input id="percent" name="percent" class="slider from0 to100 scale4" type="text" value="0" />
              </span>
            </label>
    Why is there in the css:

    Code:
    span.sliderControl span.sliderThumb
    but only:

    Code:
    span.sliderTrack
    ??

    Thanks

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Looking at the code, I don't really see a reason for the extra class mention.

    In fact they could have done something like
    Code:
    .sliderControl {
      display: block;
      height: 79px;
      position: relative;
    }
    
    .sliderControl span {
      position: absolute;
      left: 0; 
      top: 0;
      height: 100%; /*of Control, so 79px*/
      width: 100%; /*430? width of Control or containing form element)*/
    }
    
    .sliderTrack {
      background: url(slider_scale.jpg) 0 7px no-repeat; /*move bg image down 7px instead of different height... doesn't matter*/
    }
    
    .sliderThumb {
      background-image: url(slider_thumb.gif);
      cursor: w-resize;
      height: 35px;
      width: 20px;
    }
    
    .slider {
      margin-left: 430px;
    }
    The way they have it is a little bit redundant and I think written for clarity. Though I'm not sure if adding the whole other span just for the thumb was for that reason... or maybe they originally had more class names and edited them out later.

    I mean, they don't even need sliderControl *and* sliderTrack at all. I could just make sliderControl hold the bg image of sliderTrack and so now there's only 2 spans, one position-relative parent and one position-absolute child.
    And then actually, since their wrapping all this in a label (not really recommended because some accessibility software still pukes on this), get rid of the outer span and just have
    Code:
    <label for="percent">Percentage
      <span class="slider"></span>
      <input id="percent"... blah blah...>
    </label>
    
    label[for="percent"], label[htmlFor="percent"] {
      position: relative;
      display: block;
      min-height: 79px;
      background: url(slider_scale.jpg) 0 7px no-repeat;
    }
    label span {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 5px;
      cursor: w-resize; <--I dunno this one actually
      background-image: url(slider_thumb.gif);
    }
    label input {
      margin-left: 430px;
    }
    The above values would prolly get adjusted so label could have padding and stuff... but something like the above. Plus I can't tell from the book where they expect the word "percentage" to go, so the values for the bg image prolly would need to accound for that anyway...

    Unless the Javascript precludes that, but I dunno, the one span seemed to only exist to hold a bg image.

    But so anyway, that extra class listing isn't necessary in this case that I can see, and being a textbook it's probably got a little bit more verbosity than you would ever really need.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fascinating, thanks so much, i'm going to study your comments more, got lots to learn with css, thanks again


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
  •