Rollover Link Box, How to create a rollover link box? |
Rollover Link Box, How to create a rollover link box? |
Dante Monaldo |
Nov 15 2009, 02:20 PM
Post
#1
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
Does anyone know how I would create a menu with rollover link boxes to look like the one found on http:? It would also be great if i could do it all in one HTML file.
Thanks! |
rcanpolat |
Nov 15 2009, 03:03 PM
Post
#2
|
Member Group: Members Posts: 76 Joined: 4-August 09 Member No.: 9,327 |
you could try stick this in an i-frame. i dont know though - im not really a code junky
CODE <script type="text/javascript"> function mouseOver() { document.rollover_one.src ="http://url/to/rollover-image" } function mouseOut() { document.rollover_one.src ="http://url/to/normal-image" } </script> <a href="http://link.com"> <img alt="Link Title" src="http://url/to/normal-image" name="rollover_one" width="103" height="34" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a> |
Dante Monaldo |
Nov 15 2009, 03:07 PM
Post
#3
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
It worked, but I was leaning more to a way that would simply change the colors, that way I don't have to create images and wait for them to load.
Do you know how I would do it simply with colors and not images? |
pandy |
Nov 15 2009, 04:53 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
The two links at top where it says "Home" and "Partners"? You could do it with CSS. Change the backgound color on hover.
CODE #menu a { background: black; color: white } #menu a:hover { background: red } HTML <div id="menu"> <a href="http://google.com">Google</a> <a href="http://yahoo.com">Yahoo!</a> <div> http://www.w3.org/TR/CSS2/selector.html#dy...-pseudo-classes |
Dante Monaldo |
Nov 15 2009, 09:26 PM
Post
#5
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
Thanks, it worked!
But now I have another problem. When I hover over a link, it highlights it red, but there is also a gray line above it, between the red and the black. How would I fix this and make it even? Also, I would like the links to be spread out across the table. I tried <div="justify"> but that makes the links look like they are aligned left. I would really appreciate the help. You can check out the site at http://www.priceprospector.com/testing.html. |
pandy |
Nov 15 2009, 10:15 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Odd that justify does nothing. I would have expected it to spread out, not the links, but the words.
Anyway, try this. CODE #menu a { background: #848484; color: white; width: 20%; float: left; text-align: center } Inline elements like A can't have a width. Hence the float. A floated box is automatically block, sort of. The 'text-align: center' is to center the link text inside each A box, not to center the A boxes themselves. Oh, I don't see the gray line. What browser? |
pandy |
Nov 15 2009, 10:26 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
In IE6 (don't know about other IE) the links are scrambled up to the left, both as you have it now and with the new CSS above. The cause of that is mainly that you have set the width of the TD that contains the links to something way to small. Remove the width altogether. There's still some oddness in IE6, but I don't see what the problem is right off and have to go to bed now. I'll look closer tomorrow. It will be fine in other browsers anyway.
|
Dante Monaldo |
Nov 15 2009, 11:58 PM
Post
#8
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
I have been using Firefox, but anyways, do you know of a way to create <id="current"> when you are using highlights? Please nothing with a:visited, but that way my visitors will know what page they are on. Talk to you tomorrow!
|
pandy |
Nov 16 2009, 05:37 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Give BODY a uniqe ID on every page. Say you call them #home, #templates, #contact and so on. You also need to give each menu link an id. Let's call them #home-link, #templates-link and #contact-link. Then you go...
#home #home-link, #templates #templates-link, #contact #contact-link { /*styling for current page link */ } http://www.w3.org/TR/CSS2/selector.html#descendant-selectors IMO the "link" to the current page shouldn't be a link. But that you can't do with CSS. |
Dante Monaldo |
Nov 16 2009, 11:30 AM
Post
#10
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
I just gave the BODY a unique id with <body id="home"> for my home page. I am not using an unordered list, so I don't know where I would put the id for each link. I really appreciate the help.
|
pandy |
Nov 16 2009, 01:01 PM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
<a href="blah.html" id="blah">
|
Dante Monaldo |
Nov 16 2009, 07:50 PM
Post
#12
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
I added the <id="home"> to one of my links, but it didn't do anything. Then I tried adding
CODE #menu a:home { color: yellow } into my <style> in the header, but it still didn't change. What am I doing wrong?This post has been edited by Dante Monaldo: Nov 16 2009, 07:56 PM |
pandy |
Nov 16 2009, 08:03 PM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You wrote a colon where there shouldn't be one.
It's a#home or just #home. |
Dante Monaldo |
Nov 16 2009, 08:17 PM
Post
#14
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
I changed it on a copy of the site on my desktop, but nothing happened. Here is the code for the style:
CODE <STYLE TYPE="text/css"> body,table { margin: 0; padding: 0; } a:link { color: blue; text-decoration: none } a:active { color: red; text-decoration: none } a:visited { color: blue; text-decoration: none } a:hover { color: green; text-decoration: none } #menu a { background: #848484; color: black } #home { color: yellow } #menu a:hover { background: #FFFFFF } </STYLE> And here is the code for the links: CODE <b><a href="http://google.com">Home</a> <a href="http://yahoo.com" id="home">Free Templates</a> <a href="http://yahoo.com">Contact Us</a> <a href="http://yahoo.com">Website Hosting</a> <a href="http://yahoo.com">Contact Us</a></b> I really appreciate the help! |
pandy |
Nov 16 2009, 08:59 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
The Yahoo!-link is yellow.
But what are you trying to do now? The point of giving the links an id is to use it together with the id for BODY. |
Dante Monaldo |
Nov 16 2009, 09:04 PM
Post
#16
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
I am not sure what browser you are looking at this in, but in Firefox and IE, the link hasn't changed.
|
pandy |
Nov 16 2009, 09:12 PM
Post
#17
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Then your actual code isn't the same as what you pasted above.
|
Dante Monaldo |
Nov 16 2009, 09:17 PM
Post
#18
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
I am obviously very confused, so below is the code, and if you could change it and tell me what you did, that would be great.
CODE <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="AUTHOR" content="Dante Monaldo"> <meta name="KEYWORDS" content="replace, these, words, that, describe, your, site, and, page, contents, separated, by, commas"> <meta name="DESCRIPTION" content="Here is where you put a short sentence or two describing this page and it's goals"> <title>Dark Age Templates.com</title> <STYLE TYPE="text/css"> body,table { margin: 0; padding: 0; } a:link { color: blue; text-decoration: none } a:active { color: red; text-decoration: none } a:visited { color: blue; text-decoration: none } a:hover { color: green; text-decoration: none } #menu a { background: #848484; color: black } #home { color: yellow } #menu a:hover { background: #FFFFFF } </STYLE> </head> <body bgcolor="#A4A4A4" id="home"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="1020" height="110"> <tr> <td width="260" valign="center" align="center" bgcolor="#000000" height="110"> <p><image src="cooltext440295374.jpg" alt="Dark Ages Templates.com Logo"</p> </td> <td width="760" valign="center" align="center" bgcolor="#000000" height="110"> <p><script type="text/javascript"><!-- google_ad_client = "pub-4828388096208010"; /* 728x90, created 11/14/09 */ google_ad_slot = "6184423822"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></p> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="1020" > <tr> <td width="1020" valign="center" align="center" bgcolor="#848484"> <font color="000000" size="5"> <div id="menu" align="center"> <b><a href="http://google.com">Home</a> <a href="http://yahoo.com" id="home">Free Templates</a> <a href="http://yahoo.com">Contact Us</a> <a href="http://yahoo.com">Website Hosting</a> <a href="http://yahoo.com">Contact Us</a></b> </div> </font> </td> </tr> </table> </div> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="1020"> <tr> <td width="1020" height="524" valign="top" bgcolor="#FFFFFF" </td> </tr> </table> </div> </body> </html> |
pandy |
Nov 16 2009, 09:48 PM
Post
#19
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You use the same id twice. An id is supposed to be unique, it can only occur once in a document. This time it seems browsers choose to use the first instance and ignore the second.
HTML <body bgcolor="#A4A4A4" id="home"> HTML <a href="http://yahoo.com" id="home">Free Templates</a> You should use a doctype. Firstly, it enables you to validate. The validator would have told you about the duplicate id. Secondly, if you choose the right doctype browsers will be in Standards Mode. Without doctype they are in Quirks Mode. That means they emulate older and buggier versions of themselves. You don't want that. You have other errors too, so use that validator. http://htmlhelp.com/tools/validator/doctype.html http://htmlhelp.com/tools/validator/ http://hsivonen.iki.fi/doctype/ |
Dante Monaldo |
Nov 16 2009, 10:01 PM
Post
#20
|
Advanced Member Group: Members Posts: 124 Joined: 22-March 09 From: California, USA Member No.: 8,132 |
Man, this is driving me crazy! I just took the body id tag out all together, and nothing happened! I am sorry that I am frustrated, but this seems to be taking forever!
|
Lo-Fi Version | Time is now: 29th March 2024 - 10:26 AM |