Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Hi, guys
    I'm trying to implement the list on the left at http://sitekreator.com/stldesign/200...home_page.html
    and I'm almost there just one little thing is in my way. I am using a blue image that I cropped from the page for the >> and I want to change it to the orange-ish colored one on hover but I it wouldn't work. I tried using visibility:hidden on the blue one on hover and visibile on the on_hover one, but no... If anyone could give a hint on this one I would be very grateful.
    In case it would be helpful, here's the part of the code for the list:
    Code:
    <div class="leftContainer">
      <h1><span>911 INCONSISTENCIES</span></h1>
        <ul class="leftUl">
          <li>Pentagon Strike / Flash <br /> Presentation<img class="sign_small"
              src="sign_small.jpg" alt=""/></li>
          <li>WTC 7 - The OTHER building <br /> that went Straight Down <img class="sign_small"
              src="sign_small.jpg" alt=""/></li>
          <li class="showAll"><span class="bold">SHOW ALL</span></li>              
        </ul>
    </div>
    <div class="leftContainer">
      <h1><span>PNAC DOCUMENTARY</span></h1>
        <ul class="leftUl">
          <li>American Take over revealed<img class="sign_small" src="sign_small.jpg" alt=""/></li>
          <li>Everything you should have <br /> been told before<img class="sign_small"
              src="sign_small.jpg" alt=""/></li>
          <li class="showAll"><span class="bold">SHOW ALL</span></li>              
        </ul>
    </div>
    Code:
    ul.leftUl
    {
        color:#3779c4;
        font-size:10pt;
        margin-left:35px;
    }
    
    .leftContainer
    {
        margin-top:17px;
        margin-bottom:10px;
    }
    
    ul.leftUl li
    {
        list-style-image:url('http://i.data.bg/06/09/27/78779_orig.jpg');
        text-align:left;
        padding:5px 0px 2px 0px;
    }
    
    ul.leftUl li:hover
    {
        color:#f7bf52;
        text-decoration:underline;
        cursor:pointer;
    }
    
    ul.leftUl li.showAll
    {
        list-style-type:none;
        list-style-image:url('');
    }
    
    h1 
    {
        width: 208px;
        height: 20px;
        border-bottom: 2px solid #dfdfdf;
        background-color: white;
        font-size: 10pt;
        line-height: 23px;
    }
       
    h1 span 
    {
        background: #dfdfdf url('http://i.data.bg/06/09/27/78666_orig.jpg') no-repeat top right;
        padding: 0px 25px 0 15px;
        display: block;
        float: left;
        height:100%;
    }

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    You will have to use the 'a' element inside of the 'li' to make it compatable with IE(these are links anyway so its required reguardless) so you will have to rewrite your markup as such..

    HTML Code:
    <div class="leftContainer">
                        <h1><span>Headline</span></h1>
                        <ul class="leftUl">
                            <li><a href="" />content</a></li>
                            <li><a href="" />content</a></li>
                            <li><a href="" />content</a></li>              
                        </ul>
    </div>

    Then using the background property you can switch out what image appears to the right of the link. also do not forget to apply some padding to the right to make room for the image.

    Code:
    ul.LeftUl li a:link {
      background: url('http://path_to_blue_img.jpg') no-repeat top right;
      padding-right: 10px;
      ..
      ..
    }
    
    ul.LeftUl li a:hover {
      background: url('http://path_to_orange_image.jpg') no-repeat top right;  
      ..
      ..
    }


  4. #3
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Thanks, glyakk. I will try this after supper and let you know how it worked out.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I'll mention that I'm not sure this'll work. This would apply the list-style-type property to the a element, if I'm not mistaken, and that wouldn't change the li's list-style-type property. Instead, you'll probably have to go for a JS-based solution for IE.

    But let's wait and see if it works first :-)

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Of course it will not work!! I forgot to change 'list-style-image' to 'backround'!! my mistake.. Thanks for catching that.

    Of course you will still have to change the color of the text as well as any other properties that you changed on the hover state and if you want different values for the :visited and :active states. I was just concentrating on switching the image.. personally I would have used the 'content' property and inserted '>>' after the link instead of using images, such as..

    Code:
    ul.LeftUl li a:after {
      content: " >>";
    }
    
    ul.LeftUl li a:link {
      color: blue;
      ..
      ..
    }
    
    ul.LeftUl li a:hover {
      color: orange;
      ..
      ..
    }


  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    But then, since IE doesn't support `content', either, or the :after pseudoclass, you're still stuck :-D

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Phooy to IE!!


  9. #8
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    It's working perfect, glyakk & Shadowfiend. Thank you very much. I used background: url('...') in li a:hover not list-style-image and I didn't specify the :link but rather just formatted "a". Everything is as it should be and I am happy.
    Btw, the reason I am using images cropped from the page is that these guys want the layout to be exactly as shown on the picture and unfortunately for me the >> that I used doesn't look like the one on the page. That's why I had to run to that bul****.
    Anyways, thanks again for the suggestions, pals.

    Best wishes,
    V


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com