7 Replies Latest reply on Apr 17, 2013 7:58 AM by Ryan Rutan

    HTML Widget - Messing the CSS / HTML

    NathanielElliott

      I am trying to implement this following code and the HTML Widget messes with the output and makes it funky. I've put a screenshot at the bottom of this as well and would love any assistance with it. Thanks!

       

      <style>
      #nav-btns {
        float:left;
        margin:0px;
        padding:0px;
        font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
        font-size:13px;
      }
      .all-btn {
        width:210px;
        height:45px;
        display:block;
      }
      
      
      .home {
        background-image:url('http://full-jiveURL-11644/photo2814_orig.png/Home_a.png');
      }
      .home:hover {
        background-image:url('http://full-jiveURL-11646/photo2815_orig.png/Home_b.png');
      }
      .active-home {
        background-image:url('http://full-jiveURL-11646/photo2815_orig.png/Home_b.png');
      }
      .one {
        background-image:url('http://full-jiveURL-11684/photo2834_orig.png/Blank_1a.png');
      }
      .one:hover {
        background-image:url('http://full-jiveURL-11686/photo2835_orig.png/Blank_1b.png');
      }
      .active-one {
        background-image:url('http://full-jiveURL-11686/photo2835_orig.png/Blank_1b.png');
      }
      .two {
        background-image:url('http://full-jiveURL-11688/photo2836_orig.png/Blank_2a.png');
      }
      .two:hover {
        background-image:url('http://full-jiveURL-11690/photo2837_orig.png/Blank_2b.png');
      }
      .active-two {
        background-image:url('http://full-jiveURL-11690/photo2837_orig.png/Blank_2b.png');
      }
      .three {
        background-image:url('http://full-jiveURL-11692/photo2838_orig.png/Blank_3a.png');
      }
      .three:hover {
        background-image:url('http://full-jiveURL-11694/photo2839_orig.png/Blank_3b.png');
      }
      .active-three {
        background-image:url('http://full-jiveURL-11694/photo2839_orig.png/Blank_3b.png');
      }
      .four {
        background-image:url('http://full-jiveURL-11696/photo2840_orig.png/Blank_4a.png');
      }
      .four:hover {
        background-image:url('http://full-jiveURL-11698/photo2841_orig.png/Blank_4b.png');
      }
      .active-four {
        background-image:url('http://full-jiveURL-11698/photo2841_orig.png/Blank_4b.png');
      }
      .five {
        background-image:url('http://full-jiveURL-11700/photo2842_orig.png/Blank_5a.png');
      }
      .five:hover {
        background-image:url('http://full-jiveURL-11702/photo2843_orig.png/Blank_5b.png');
      }
      .active-five {
        background-image:url('http://full-jiveURL-11702/photo2843_orig.png/Blank_5b.png');
      }
      .six {
        background-image:url('http://full-jiveURL-11704/photo2844_orig.png/Blank_6a.png');
      }
      .six:hover {
        background-image:url('http://full-jiveURL-11706/photo2845_orig.png/Blank_6b.png');
      }
      .active-six {
        background-image:url('http://full-jiveURL-11706/photo2845_orig.png/Blank_6b.png');
      }
      .seven {
        background-image:url('http://full-jiveURL-11708/photo2846_orig.png/Blank_7a.png');
      }
      .seven:hover {
        background-image:url('http://full-jiveURL-11710/photo2847_orig.png/Blank_7b.png');
      }
      .active-seven {
        background-image:url('http://full-jiveURL-11710/photo2847_orig.png/Blank_7b.png');
      }
      .eight {
        background-image:url('http://full-jiveURL-11712/photo2848_orig.png/Blank_8a.png');
      }
      .eight:hover {
        background-image:url('http://full-jiveURL-11714/photo2849_orig.png/Blank_8b.png');
      }
      .active-eight {
        background-image:url('http://full-jiveURL-11714/photo2849_orig.png/Blank_8b.png');
      }
      .nine {
        background-image:url('http://full-jiveURL-11716/photo2850_orig.png/Blank_9a.png');
      }
      .nine:hover {
        background-image:url('http://full-jiveURL-11718/photo2851_orig.png/Blank_9b.png');
      }
      .active-nine {
        background-image:url('http://full-jiveURL-11718/photo2851_orig.png/Blank_9b.png');
      }
      .ten {
        background-image:url('http://full-jiveURL-11720/photo2852_orig.png/Blank_10a.png');
      }
      .ten:hover {
        background-image:url('http://full-jiveURL-11722/photo2853_orig.png/Blank_10b.png');
      }
      .active-ten {
        background-image:url('http://full-jiveURL-11722/photo2853_orig.png/Blank_10b.png');
      }
      
      
      .text-btn {
        color:white;
        display:block;
        pointer-events:none;
        text-align:center;
        width:140px;
        font-weight:bold;
        height:28px;
        float:right;
        margin:3px 22px 0 0;
        padding:8px 4px 2px 4px;
      }
      .double {
        padding:2px 4px 2px 4px;
      }
      
      
      </style>
      <!-- add the term active- infront of the number needed to be active, example like active-one allows it to be active -->
      <!-- add the term double when doubled lined-->
      
      
      <div id="nav-btns">
        <a href="#" class="all-btn home">
        <div class="text-btn" style="display:none;"></div></a>
        <!--End Home -->
        <a href="#" class="all-btn one">
        <div class="text-btn">Comparing Urgency</div></a>
        <!--End Home -->
        <a href="#" class="all-btn two">
        <div class="text-btn double">Applying the Time Matrix</div></a>
        <!--End Home -->
        <a href="#" class="all-btn three">
        <div class="text-btn double">Reporting Results of Matrix Scheduling</div></a>
        <!--End Home -->
        <a href="#" class="all-btn four">
        <div class="text-btn">Home</div></a>
        <!--End Home -->
        <a href="#" class="all-btn five">
        <div class="text-btn">Home</div></a>
        <!--End Home -->
        <a href="#" class="all-btn six">
        <div class="text-btn">Home</div></a>
        <!--End Home -->
      </div>
      
      
      
      
      
      
      
      
      
      
      
      

       

      Screen Shot 2013-04-11 at 1.57.22 PM.png