New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Hover link coding problem


Post Reply New Thread Subscribe

 
Thread Tools
fender1100

 
Member Since: Nov 18, 2006
Posts: 41
fender1100 is on a distinguished road

fender1100 is offline
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
QUOTE Thanks
CrimsonRequiem

 
CrimsonRequiem's Avatar
 
Member Since: Jul 24, 2008
Posts: 6,006
CrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to all
Mac Specs: MBP 2.3 Ghz 4GB RAM 860 GB SSD, iMac 3.4 GHz Intel Core i7 32GB RAM, Fusion Drive 1TB

CrimsonRequiem is offline
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.
QUOTE Thanks
fender1100

 
Member Since: Nov 18, 2006
Posts: 41
fender1100 is on a distinguished road

fender1100 is offline
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
QUOTE Thanks
JGruber

 
Member Since: Aug 20, 2005
Location: Redlands, CA
Posts: 739
JGruber has a spectacular aura about
Mac Specs: Macbook Pro 15" 2ghz/2GB/250gb/SD - White Macbook 2.16ghz/2.5GB/250GB/SD

JGruber is offline
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.
QUOTE Thanks
fender1100

 
Member Since: Nov 18, 2006
Posts: 41
fender1100 is on a distinguished road

fender1100 is offline
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.
QUOTE Thanks
JGruber

 
Member Since: Aug 20, 2005
Location: Redlands, CA
Posts: 739
JGruber has a spectacular aura about
Mac Specs: Macbook Pro 15" 2ghz/2GB/250gb/SD - White Macbook 2.16ghz/2.5GB/250GB/SD

JGruber is offline
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;


QUOTE Thanks
fender1100

 
Member Since: Nov 18, 2006
Posts: 41
fender1100 is on a distinguished road

fender1100 is offline
hmm i think I had tried that already :S ...this is what happens when I do that:

Untitled Document
QUOTE Thanks
JGruber

 
Member Since: Aug 20, 2005
Location: Redlands, CA
Posts: 739
JGruber has a spectacular aura about
Mac Specs: Macbook Pro 15" 2ghz/2GB/250gb/SD - White Macbook 2.16ghz/2.5GB/250GB/SD

JGruber is offline
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.
QUOTE Thanks

Post Reply New Thread Subscribe


« Sites Losing My Preserved UserName/Passwords | how to change the page order in iweb »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
Problem Darwin Server + VLC nanaki Web Design and Hosting 0 03-13-2008 08:27 AM
Problem with ethernet board after installing RAM and upgrading from 10.2.8 to 10.3.5 ydonofrio Apple Desktops 4 02-11-2008 08:16 PM
HELP wierd iMac startup problem iluvmacs Apple Desktops 8 09-13-2004 07:47 AM
Problem with Finder in OS X 10.3.4 Bright_Eyes OS X - Operating System 3 07-06-2004 06:02 PM
Apple posts iTunes Link Maker Murlyn Web Design and Hosting 2 02-28-2004 11:35 PM

All times are GMT -4. The time now is 09:31 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?