Results 1 to 8 of 8
  1. #1
    Hover link coding problem

    Member Since
    Nov 18, 2006
    Posts
    41
    Hover link coding problem
    Hi,

    I'm quite new to web design and especially to coding, and I'm having a few problems making a hover effect on links.

    I've started making a template menu for my site and I've managed to position my menu items fine on the menu bar, as well as assign links to them, however when I try to make the images different upon hovering over them, it does not work properly. I have tried out the hover effect on the 'about' item on the bar, and you can view this here:

    Untitled Document

    You will see that between the 'Home' and 'Listen' menu items, there is an 'O', this is a section of the word 'About', except that it was cutoff. It seems like the actual hover effect has worked on it (as when the mouse goes over the 'O' the picture goes orange/yellow instead of the normal red, this is what I was looking for), just that the word is cut off and I don't know why.

    If you think you may know what could be going wrong I would really appreciate any advice you can give!

    Thanks a lot,

    Jamie

  2. #2
    Hover link coding problem
    CrimsonRequiem's Avatar
    Member Since
    Jul 24, 2008
    Posts
    6,004
    Specs:
    MBP 2.3 Ghz 4GB RAM 860 GB SSD, iMac 3.4 GHz Intel Core i7 32GB RAM, Fusion Drive 1TB
    I think something went horrible wrong when you did your image slicing or something. It doesn't look like a coding problem, because after I click on the O I see the whole picture of the word about.

  3. #3
    Hover link coding problem

    Member Since
    Nov 18, 2006
    Posts
    41
    hey,

    when you say you see a whole 'about', is that in the seperate 'who are we?' page?

    This is an old version of the code, without any :hover coding, so the word is fine.

    It's only when I put in the :hover coding that I get the cut-off problem :S

  4. #4
    Hover link coding problem

    Member Since
    Aug 20, 2005
    Location
    Redlands, CA
    Posts
    739
    Specs:
    Macbook Pro 15" 2ghz/2GB/250gb/SD - White Macbook 2.16ghz/2.5GB/250GB/SD
    Fixed it for ya... change this
    PHP Code:
    <div id="footer">
          <
    p><a href="Index2.html" alt="Home" class="menuhome"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/home.png" border="0"></a>
           <
    a href="About.html" alt="About" class="menuabout"> </a>
            <
    a href="Listen.html" alt="Listen" class="menulisten"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/listen.png" border="0"></a>
            <
    a href="Contact.html" alt="Contact" class="menucontact"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/contact.png" border="0"></a>

          <
    a href="Links.html" alt="Links" class="menulinks"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/links.png" border="0"></a></p>


     <
    p><class="siteownedby"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/site-owned-and-created-by-jamie.png"> </a></p>

    </
    div
    To this:
    PHP Code:
    <div id="footer">
          <
    p><a href="Index2.html" alt="Home" class="menuhome"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/home.png" border="0"></a>
           <
    a href="About.html" alt="About" class="menuabout"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/about.png" border="0"></a>
            <
    a href="Listen.html" alt="Listen" class="menulisten"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/listen.png" border="0"></a>
            <
    a href="Contact.html" alt="Contact" class="menucontact"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/contact.png" border="0"></a>

          <
    a href="Links.html" alt="Links" class="menulinks"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/links.png" border="0"></a></p>


     <
    p><class="siteownedby"> <img src="http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/site-owned-and-created-by-jamie.png"> </a></p>

    </
    div
    The error is at this section -
    PHP Code:
    <a href="About.html" alt="About" class="menuabout"> </a
    You forgot to include the location of the image.

  5. #5
    Hover link coding problem

    Member Since
    Nov 18, 2006
    Posts
    41
    hey!

    thanks for the fast replies

    I had tried adding in the location of the image there but it didnt work with it in neither, and i thought as the location of the image was already written under 'background-image' in the a.about part of the css style, it didnt need to be in the html as well...

    I've added the img src html coding in and re-uploaded the page to the same link:

    Untitled Document

    as you can see, there are now two 'about' images, one with hover, one without...!

    cheers for your help

    J.

  6. #6
    Hover link coding problem

    Member Since
    Aug 20, 2005
    Location
    Redlands, CA
    Posts
    739
    Specs:
    Macbook Pro 15" 2ghz/2GB/250gb/SD - White Macbook 2.16ghz/2.5GB/250GB/SD
    Try removing this from the style
    PHP Code:
    a.menuabout{
        
    padding-left:15px;
        
    position:relative;
         
    top:25.2px;
         
    width:149px;
        
    height:74px;
         
    background-imageurl(http://intranet.lcc.arts.ac.uk/srs/tandt/tandtgc/jamie/pictures/menu-buttons/about.png);
        
    background-repeatno-repeat;
        
    background-positioncenter;



  7. #7
    Hover link coding problem

    Member Since
    Nov 18, 2006
    Posts
    41
    hmm i think I had tried that already :S ...this is what happens when I do that:

    Untitled Document

  8. #8
    Hover link coding problem

    Member Since
    Aug 20, 2005
    Location
    Redlands, CA
    Posts
    739
    Specs:
    Macbook Pro 15" 2ghz/2GB/250gb/SD - White Macbook 2.16ghz/2.5GB/250GB/SD
    Without inspecting it more, I don't know what the problem is. I'm almost positive it has to do with the coding in the style, when I code something, I normally don't use images for hoverovers, or keep the style in the same page, I use a separate style sheet.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. hosting iweb with Hover
    By Stouthearted in forum Web Design and Hosting
    Replies: 0
    Last Post: 11-15-2010, 09:37 PM
  2. Snow Leopard hover problems
    By Agabus in forum OS X - Operating System
    Replies: 6
    Last Post: 09-28-2010, 08:34 AM
  3. Removing the hover from images
    By HusebyFun in forum Web Design and Hosting
    Replies: 0
    Last Post: 11-24-2009, 12:37 PM
  4. Safari Hover Tips
    By hot2cold in forum OS X - Apps and Games
    Replies: 1
    Last Post: 06-02-2008, 10:53 PM
  5. HELP!? Is there no Hover Ad software for mac!!!???
    By ajulynn in forum Web Design and Hosting
    Replies: 6
    Last Post: 04-24-2007, 07:37 PM

Posting Permissions

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