Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issues with multiple hover effects

    Hi everybody,
    First of all, I don't have a very solid base in code. I never took a class or formally learned about HTML or CSS. I've only experimented with Dreamweaver or looked through tutorials I found on google to get the results I wanted. I'm really stumped at the moment and would really appreciate some help.

    I'm helping a friend create a website for his artwork. Where I'm struggling right now is with the image gallery, as I'm not sure how to do anything complex that requires Javascript or Flash. So I found a nice tutorial here that shows you how to do it in CSS.

    The problem I'm having now is, I can't get it to work with the rollover buttons I have on the top of the page. Not sure what to do, but with all the things I've tried, here are the two closest attempts at getting what I want. In terms of look, this version is closer. In terms of functionality, as in with the buttons on the top and the artwork thumbnails, this is what I want. So, my end product, should be the combination of the two.

    If it helps any, the tutorial I used to create the buttons at the top can be found here. I'm wondering if there's something about combining the two tutorials that creates a conflict, or if I just did something wrong.

    Thanks for taking the time to read this and I hope someone out there can help!

    -Andrew

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    I am really not sure what your problem is or what your looking for, but you do need to put <li> tags inside of <ul> tags

    Code:
    <div class="buttons">
    <ul>
      <li id="home"><a href="news.html"></a></li>
      <li id="illustration"><a href="illustration.html"></a></li>
      <li id="design"><a href="design.html"></a></li>
      <li id="madison"><a href="madison.html"></a></li>
      <li id="about"><a href="about.html"></a></li>
      <li id="personal"><a href="personal.html"></a></li>
      <li id="blog"><a href="http://arteelin.blogspot.com" target="_blank"></a></li>  
      <li id="facebook"><a href="http://www.facebook.com/profile.php?id=6302796" target="_blank"></a></li>
      <li id="news"><a href="news.html"></a></li>
      <li id="contact"><a href="contact.html"></a></li>
      <li id="email"><a href="mailto:Artee023@yahoo.com"></a></li>
    </ul>  
      </div>
    What do you need to get this magnificent artists works on line?

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I may have found a solution! After including the correct tags, and playing with the .gallerycontainer class positioning and the z-index, I was able to achieve what I was looking for! Basically the original problem was that the way I had the gallery positioned was making the navigation items at the top (blog, facebook, news, contact, etc) not function. But after giving the .gallerycontainer an absolute position, and making the z-index higher than the .buttons container, I got it to work.

    Thanks for helping out! Here is the correctly working page now!
    Last edited by andrewmaul; 07-21-2011 at 10:36 AM. Reason: solved issue


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •