SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rearranging some small gifs

    I have a page with a logo in one corner

    HTML Code:
    <img src='images/company_logo.gif' width='200' height='47'
       border='0' alt='Logo' align='middle'/>
    and I need to add a row of small graphics that look like LEDs. I'd like to be able to use CSS to switch between:

    O O O O
    [ Image ]

    and

    O
    O [ Image ]
    O
    O

    (where O is an LED) but I can't even get the LED images to go where I want. Modeling on another page, I started by changing to:

    HTML Code:
    <div id='LEDs'>
    <ul class='led'>
    <li class='ledOff'></li><br class='led'/>
    <li class='ledGreen'></li><br class='led'/>
    <li class='ledGreen'>c</li><br class='led'/>
    <li class='ledRed'></li><br class='led'/>
    </ul>
    </div>
    <div id='logoblock'>
    <img src='images/company_logo.gif' width='200' height='47'
       border='0' alt='Logo' align='middle'/>
    </div>
    with CSS:

    HTML Code:
    ul.led li {
      white-space: nowrap;
      list-style-type: none;
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
    
    /* display: none for horizontal LED bar, inline for vertical */
    br.led {
      display: none;
      height: 0;
    }
    
    .ledRed {
      background-image: url(images/redled.gif);
    }
    
    .ledGreen {
      background-image: url(images/greenled.gif);
    }
    
    .ledOff {
      background-image: url(images/offled.gif);
    }
    which gives me

    O
    O
    O
    O
    [ Image ]

    but switching to

    HTML Code:
    br.led {
      display: inline;
      height: 0;
    }
    gives me:

    O

    O

    O

    O

    [ Image ]

    and switching to


    HTML Code:
    ul.led li {
      display: inline;
      white-space: nowrap;
      list-style-type: none;
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
    gives me

    (
    (
    (
    (
    [ Image ]

    (where ( is the left third or so of the LED circle graphic).

    I don't need the UL/LI structure for anything but layout. I thought I had this working in another page using UL/LI but anything that works is fine. Any pointers appreciated...

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the dots are wrapped in a div and floated, the horizontal/vertical switch can be done by switching the lengths of the div.

    In vertical, the dot-div can be floated left and the image goes to the right.

    In horizontal, the image can be cleared left to go under the dots.

    Hope I got that right.

    Then
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    If the dots are wrapped in a div and floated, the horizontal/vertical switch can be done by switching the lengths of the div.

    In vertical, the dot-div can be floated left and the image goes to the right.

    In horizontal, the image can be cleared left to go under the dots.

    Hope I got that right.

    Are you suggesting:

    HTML Code:
    <div id='LEDs'>
    <div class='led greenled'></div>
    <div class='led redled'></div>
    </div>
    and

    HTML Code:
    /* height = n x LED height for vertical, LED height for horizontal
    #LEDs {
       height: 30;
    }
    .led {
       float: left;
    }
    .greenled {
       background-image: ...
    }
    .redled {
       background-image: ...
    }
    ?

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have vertical sort of working:

    HTML Code:
    <div id='statusLEDs'>
    <div class='led ledGreen'>1</div>
    <div class='led ledOff'>2</div>
    <div class='led ledGreen'>3</div>
    <div class='led ledRed'>4</div>
    <div class='led ledGreen' >5</div>
    <div class='lde ledBlink'>6</div>
    </div>
    <div id='logoblock'>
    <img src='images/company_logo.gif' width='200' height='47'
       border='0' alt='Logo' align='middle'/>
    </div>
    with

    HTML Code:
    #statusLEDs {
      height: 96px;
      float: left;
    }
    
    .led {
      width: 16px;
      height: 16px;
    }
    
    .ledRed {
      background-image: url(images/red-solid.gif);
    }
    
    .ledGreen {
      background-image: url(images/green-solid.gif);
    }
    
    .ledBlink {
      background-image: url(images/green-blink.gif);
    }
    And if I do:

    HTML Code:
    #logoblock {
       clear: left;
    }
    The logo goes beneath the LEDs but I can't get the LEDs horizontal. I think it's because the <div>s I'm using for the LEDs are block elements. Is there something else I can set the background image of that's not a block? If I try to use <span>s, the width doesn't take effect and I get

    C C C C C
    [ Logo ]

    (That is, the left 1/3 of the LED circle.)
    Last edited by Chris.Nelson; Feb 15, 2008 at 06:13.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I meant like this:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Rearrange Led Positions with One Css-declaration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    /* overflow:hidden is for IE5-6 not respecting width */
    /* display:inline is for the IE6 double margin bug */
    /* the #statusLEDs neg margins are necessary only for IE5-6 */
    /* works in all major browsers, bugfixes only for IE5-6 */
    /* the effective re-arranging declaration is the last one */
     
    #status{/* just enough room for leds to re-arrange */
      overflow: hidden;
      width: 138px;
      height: 138px;
    }
    #leds div{
      display: inline;
      float: left;
      margin: 0 2px 2px 0;
      width: 18px;
      height: 18px;
      font: 13px/16px arial;
      text-align: center;
      cursor: help;
    }
    .green{
      background: lime;
    }
    .gray{
      background: gray;
    }
    .red {
      background: red;
    }
    .yellow{
      background: yellow;
    }
    #image {
      margin: 20px 0 0 18px;
      width: 118px;
      height: 118px;
      background: steelblue;
      cursor: pointer;
    }
    #leds {
      float: left;
      overflow: hidden;
      display: inline;
    }
     
    /* shifts to horizontal leds above image */
    #leds {margin:0 0 -20px 18px; width: 120px;}
     
    /* shifts to vertical leds beside image */
    #leds {margin:20px -20px 0 0; width: 16px;}
     
    </style>
    </head>
    <body>
    <div id="status">
        <div id="leds">
            <div class="green" title="Green-1">1</div>
            <div class="gray" title="Gray-2">2</div>
            <div class="green" title="Green-3">3</div>
            <div class="red" title="Red-4">4</div>
            <div class="green" title="Green-5">5</div>
            <div class="yellow" title="Yellow-6">6</div>
        </div>
        <div id="image" title="Status-image"></div>
    </div>
    </body>
    </html>
    Edit) Simulated images with bg-colors and played with margins and stuff.
    Edit) Couldn't resist adding bug-fixes for IE5-6. (Comments are for myself, saving as example.)
    Last edited by Erik J; Feb 15, 2008 at 08:56.
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I meant like this: ...
    Thanks!

    I tweaked this just a bit to eliminate one class.

    HTML Code:
    .led{
      display: inline;
      float: left;
      margin: 0 20px 4px 0;
      width: 16px;
      height: 16px;
      font:13px/16px arial;
      text-align: center;
      cursor: help;
    }
    became

    HTML Code:
    #statusLEDs div{
      ...
    }
    and

    HTML Code:
       <div id="statusLEDs">
            <div class="led ledGreen" title="Green-1">1</div>
           ...
        </div>
    became

    HTML Code:
        <div id="statusLEDs">
            <div class="ledGreen" title="Green-1">1</div>
           ...
        </div>
    Last edited by Chris.Nelson; Feb 15, 2008 at 06:50.


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
  •