Website rollover menu dev help - GameCreators Forum

Author

Message

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 25th Jun 2009 21:37

Link

Hello all,

I am working on a site for a client in which I need to get a menu like this working:

When the user scrolls over the work tab, I want "Print, web, ect..." to appear horizontally underneath and be clickable. Every button has a roll over effect.

I figured doing this is in flash might be the best way to do it, but I have 0% knowledge with Flash. Is Flash the way to go here, or does anyone have any suggestions on how to go about this?

I don't expect you to give me teh codez, but if you could point me in the right direction/give some advice on how to best do this, I would greatly appreciate it.

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

Megaton Cat

21

Years of Service

User Offline

Joined: 24th Aug 2003

Location: Toronto, Canada

Posted: 26th Jun 2009 00:10

Link

I can't tell you teh codez but I just wanna say I've seen that effect done always without flash so don't even bother.

Back to top

Profile PM Email Website

Benjamin

22

Years of Service

User Offline

Joined: 24th Nov 2002

Location: France

Posted: 26th Jun 2009 00:30 Edited at: 26th Jun 2009 00:31

Link

[edit] Not quite the same...

Anyway, pretty sure this can be done with just javascript.

Multisync - TCP Server/Client Multiplayer Plugin (DBP/DBCe)

Back to top

Profile PM Email

Clbembry

18

Years of Service

User Offline

Joined: 10th Dec 2006

Location: Minnesota

Posted: 26th Jun 2009 00:35

Link

You shouldn't use Javascript because you have the option to turn it off. Some people do this to prevent those annoying pop-ups. I'm pretty sure I know how to do this, I'll try and see what I get.

If it works I'll give you teh codez.

Back to top

Profile PM Email Website

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 26th Jun 2009 01:31

Link

You can use javascript to either replace the links contained within a DIV or SPAN when you roll over the link or just use hidden DIVs and show/hide them as needed.

[url="http://dbcc.zimnox.com"]

[/url]

Back to top

Profile PM Email Website

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 26th Jun 2009 01:53

Link

Ugh, I have a bad cold right now, I can't even begin to tinker with the code. I feel like my head is going to explode like a Boomer from Left4Dead.

So no go with Flash, awesome, I actually do know some javascript. I had a 10 week class on it two semester's ago. I'll do some googling to see if I can find any good examples and hack something together after this nasty is head cold is gone.

*moans*

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

Clbembry

18

Years of Service

User Offline

Joined: 10th Dec 2006

Location: Minnesota

Posted: 26th Jun 2009 01:55

Link

Don't use javascript.

Back to top

Profile PM Email Website

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 26th Jun 2009 02:08 Edited at: 26th Jun 2009 02:10

Link

You can do this with CSS.

Observe:

+ Code Snippet

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
li {display:inline-block; float:left; padding: 0 5px 0 5px}
ul {display:inline-block; position:relative; float:left}
li ul{display:none}
li:hover ul{display:inline-block; position:absolute; top: 20px; left:0px; width:400px}
ul#submenu:hover {display:inline-block; position:absolute; top: 20px; left:0px}

</style>
</head>

<body>
<ul>
<li><a href="#">Home</a>
	<ul id="submenu">
    <li><a href="#">Home2</a></li>
    <li><a href="#">Home2</a></li>
    <li><a href="#">Home2</a></li>
    </ul>
</li>
<li><a href="#">About</a>
<ul id="submenu">
    <li><a href="#">About2</a></li>
    <li><a href="#">About2</a></li>
    <li><a href="#">About2</a></li>
    </ul>
</li>
<li><a href="#">Gallery</a>
<ul id="submenu">
    <li><a href="#">Gallery2</a></li>
    <li><a href="#">Gallery2</a></li>
    <li><a href="#">Gallery2</a></li>
    </ul>
</li>
</ul>
</body>
</html>

Hope that helps. Code is a little messy (Probably some commands in there that don't need to be there)

Cheers,
BiggAdd

Back to top

Profile PM

Clbembry

18

Years of Service

User Offline

Joined: 10th Dec 2006

Location: Minnesota

Posted: 26th Jun 2009 02:17

Link

Beat me too it BigAdd

Oh well

Back to top

Profile PM Email Website

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 26th Jun 2009 02:29

Link

Do those CSS rollovers work in every browser?

[url="http://dbcc.zimnox.com"]

[/url]

Back to top

Profile PM Email Website

Clbembry

18

Years of Service

User Offline

Joined: 10th Dec 2006

Location: Minnesota

Posted: 26th Jun 2009 02:33 Edited at: 26th Jun 2009 02:34

Link

Yes, but you might need to use "IE hacks".

Back to top

Profile PM Email Website

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 26th Jun 2009 11:17 Edited at: 26th Jun 2009 11:27

Link

There might be some positioning issues, and perhaps flickering, but the main problem is IE's lack of the understanding of :hover when its not applied to a link.

You can use this tiny bit of javascript:

+ Code Snippet

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

And replace the hover command with:
li:hover ul, li.over ul{..........}

I found the hack a while back from here:
http://www.alistapart.com/articles/dropdowns/

Back to top

Profile PM

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 26th Jun 2009 12:45 Edited at: 26th Jun 2009 13:20

Link

Double Post:

Here is a fully working menu (That matches your design style)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

html, body {padding:0; margin:0; background:#f6f6f6}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px; position:relative;}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 20px 0 20px}
a:link, a:visited{text-decoration:none; color:#9b9389; letter-spacing: 2px; font:font-weight:700}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:18px; left:10px}

</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

+ Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

<style type="text/css">

html, body {padding:0; margin:0; background:#f6f6f6}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px; position:relative;}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 20px 0 20px}
a:link, a:visited{text-decoration:none; color:#9b9389; letter-spacing: 2px; font:font-weight:700}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:18px; left:10px}

</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

With a few minor changes, you can convert the above to drop down boxes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

html, body {padding:0; margin:0; background:#f6f6f6}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px;}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 20px 0 20px;  position:relative;}
ul#subNav li {list-style:none; padding:0; display:block; float:none; margin: 0 20px 0 20px}
a:link, a:visited{text-decoration:none; color:#9b9389; letter-spacing: 2px; font:font-weight:700}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:18px; left:-10px}

</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

+ Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

<style type="text/css">

html, body {padding:0; margin:0; background:#f6f6f6}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px;}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 20px 0 20px;  position:relative;}
ul#subNav li {list-style:none; padding:0; display:block; float:none; margin: 0 20px 0 20px}
a:link, a:visited{text-decoration:none; color:#9b9389; letter-spacing: 2px; font:font-weight:700}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:18px; left:-10px}


</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

And because they both use Absolute positioning, it shouldn't mess up the layout of anything underneath.
For Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

html, body {padding:0; margin:0; background:#f6f6f6}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 10px 0 10px; position:relative}
a:link, a:visited{text-decoration:none; color:#333333; letter-spacing: 2px; font:font-weight:700}
a:hover {color:#ffa72c}
ul#subNav a:link, ul#subNav a:visited {display:block; text-decoration:none; color:#CCCCCC; font-size:13px; padding:0 5px 0 5px}
ul#subNav a:hover {text-decoration:none; color:#ffcc85; font-size:13px; background:#999999}
ul#subNav li {float:none; display:block; margin:0; background:#666666}

ul#subNav {display:none}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:18px; left:0px}

div {color:#CCCCCC; clear:left; padding:20px 0 0 20px}
</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#">MENU1</a>
	<ul id="subNav">
    <li><a href="#">ITEM1</a></li>
    <li><a href="#">ITEM2</a></li>
    <li><a href="#">ITEM3</a></li>
    <li><a href="#">ITEM4</a></li>
    <li><a href="#">ITEM5</a></li>
    </ul>
</li>
<li><a href="#">MENU2</a>
	<ul id="subNav">
    <li><a href="#">ITEM1</a></li>
    <li><a href="#">ITEM2</a></li>
    <li><a href="#">ITEM3</a></li>
    <li><a href="#">ITEM4</a></li>
    <li><a href="#">ITEM5</a></li>
    </ul>
</li>
<li><a href="#">MENU3</a>
	<ul id="subNav">
    <li><a href="#">ITEM1</a></li>
    <li><a href="#">ITEM2</a></li>
    <li><a href="#">ITEM3</a></li>
    <li><a href="#">ITEM4</a></li>
    <li><a href="#">ITEM5</a></li>
    </ul>
</li>
</ul>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu lectus at ipsum ultrices rutrum et sit amet neque. Quisque tellus neque, vulputate sed tempus at, imperdiet at sapien. Proin sed lacus nec mauris ornare vulputate nec sed augue. Curabitur dignissim suscipit magna non ultricies. Sed venenatis purus varius justo cursus rhoncus. Morbi in erat elit, sed lobortis augue. Vivamus in risus nec nisi facilisis rutrum. Donec scelerisque ultricies semper. Nullam vel massa id mi aliquam consectetur. Sed vulputate lacinia laoreet. Integer porta mi id nunc rhoncus vitae dictum quam ultrices. Donec a neque odio. Proin volutpat felis neque. Vestibulum rutrum varius neque sit amet vestibulum. 
</div>

</body>
</html>

+ Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

<style type="text/css">

html, body {padding:0; margin:0; background:#f6f6f6}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 10px 0 10px; position:relative}
a:link, a:visited{text-decoration:none; color:#333333; letter-spacing: 2px; font:font-weight:700}
a:hover {color:#ffa72c}
ul#subNav a:link, ul#subNav a:visited {display:block; text-decoration:none; color:#CCCCCC; font-size:13px; padding:0 5px 0 5px}
ul#subNav a:hover {text-decoration:none; color:#ffcc85; font-size:13px; background:#999999}
ul#subNav li {float:none; display:block; margin:0; background:#666666}

ul#subNav {display:none}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:18px; left:0px}

div {color:#CCCCCC; clear:left; padding:20px 0 0 20px}
</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#">MENU1</a>
	<ul id="subNav">
    <li><a href="#">ITEM1</a></li>
    <li><a href="#">ITEM2</a></li>
    <li><a href="#">ITEM3</a></li>
    <li><a href="#">ITEM4</a></li>
    <li><a href="#">ITEM5</a></li>
    </ul>
</li>
<li><a href="#">MENU2</a>
	<ul id="subNav">
    <li><a href="#">ITEM1</a></li>
    <li><a href="#">ITEM2</a></li>
    <li><a href="#">ITEM3</a></li>
    <li><a href="#">ITEM4</a></li>
    <li><a href="#">ITEM5</a></li>
    </ul>
</li>
<li><a href="#">MENU3</a>
	<ul id="subNav">
    <li><a href="#">ITEM1</a></li>
    <li><a href="#">ITEM2</a></li>
    <li><a href="#">ITEM3</a></li>
    <li><a href="#">ITEM4</a></li>
    <li><a href="#">ITEM5</a></li>
    </ul>
</li>
</ul>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu lectus at ipsum ultrices rutrum et sit amet neque. Quisque tellus neque, vulputate sed tempus at, imperdiet at sapien. Proin sed lacus nec mauris ornare vulputate nec sed augue. Curabitur dignissim suscipit magna non ultricies. Sed venenatis purus varius justo cursus rhoncus. Morbi in erat elit, sed lobortis augue. Vivamus in risus nec nisi facilisis rutrum. Donec scelerisque ultricies semper. Nullam vel massa id mi aliquam consectetur. Sed vulputate lacinia laoreet. Integer porta mi id nunc rhoncus vitae dictum quam ultrices. Donec a neque odio. Proin volutpat felis neque. Vestibulum rutrum varius neque sit amet vestibulum. 
</div>

</body>
</html>

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 26th Jun 2009 20:11

Link

WOW! Thanks a TON BigAdd, very nice code. I should be able to replace that text with images though right? I don't see why not, I'll tinker with it later.

Thanks again!

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 26th Jun 2009 23:23 Edited at: 26th Jun 2009 23:23

Link

BigAdd, I got the menu code to work and it's all in place, but IE is still having trouble even WITH that hack you posted.

Visit the link in both FF and IE to see what I mean: http://www.landgraff.com/newsite/index.html

What's the next step in fixing the IE issue?

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 27th Jun 2009 00:43 Edited at: 27th Jun 2009 01:03

Link

I think there is a conflict with your rollover javascript code and the menu code.

What I would suggest is replace your javascript rollover and use CSS.

If you need to use an image for the "work process etc etc", then I suggest using a background replace for the <a> tags using CSS.

I'll whip up an example now, and test it in firefox and IE.

Back to top

Profile PM

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 27th Jun 2009 01:00 Edited at: 27th Jun 2009 11:23

Link

Ok I think i've got it sorted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

html, body {padding:0; margin:0; background:#FFF}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px; position:relative;}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 5px 0 5px}
a:link, a:visited{display:inline-block; text-decoration:none; color:#9b9389; letter-spacing: 2px; font:font-weight:700; text-indent:-9999px}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px; text-indent:0}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:25px; left:5px}

a#work:link {width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png)}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process:link {width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png)}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients:link {width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png)}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact:link {width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png)}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home:link {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png)}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}
</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#" id="work">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#" id="process">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#" id="clients">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#" id="contact">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#" id="home">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

+ Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

<style type="text/css">

html, body {padding:0; margin:0; background:#FFF}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px; position:relative;}
li {list-style:none; padding:0; display:inline-block; float:left; margin: 0 5px 0 5px}
a:link, a:visited{display:inline-block; text-decoration:none; color:#9b9389; letter-spacing: 2px; font:font-weight:700; text-indent:-9999px}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px; text-indent:0}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:inline-block; position:absolute; top:25px; left:5px}

a#work:link {width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png)}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process:link {width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png)}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients:link {width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png)}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact:link {width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png)}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home:link {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png)}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}
</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#" id="work">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#" id="process">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#" id="clients">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#" id="contact">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#" id="home">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

Seems to be working in firefox and IE. It also removes the messy javascript from your markup.

One thing I would add (which I didn't in that code snippet), is a slice of javascript to pre-load the image files.

Something like:
<script type="text/javascript">
{
pic1= new Image(48,32);
pic1.src="images/button_work.png";
}
</script>

If you don't do this, when you initialy hover over a menu item, it won't show for a split second (as the image is loading)

Hope this helps!

(Nice website btw!)

Back to top

Profile PM

Jeku

Moderator

21

Years of Service

User Offline

Joined: 4th Jul 2003

Location: Vancouver, British Columbia, Canada

Posted: 27th Jun 2009 06:47

Link

You pretty much have to use javascript for most things fancy and interactive with HTML. I don't know anyone that turns it off 100% of the time, actually.

North Korea 2007 Tour Pictures

Back to top

Profile PM Website

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 27th Jun 2009 18:16 Edited at: 27th Jun 2009 18:18

Link

But you can do a lot with CSS.

I just noticed I put the Javascript for the IE hack in a <style> instead of a <script> Not sure if that makes a difference. (But the new image code I posted above should do you fine!)

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 27th Jun 2009 18:47 Edited at: 27th Jun 2009 18:53

Link

Yeah, that made a lot of different actually

That works in IE for you? I just get a blank page still. I'm using IE7.

EDIT:

After running a browser compatibility check it returns:

Unsupported Value: 'inline-block' (multiple lines)
Error Parsing Style: font: font-weight:700
Double Float Margin Bug (multiple lines)

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 27th Jun 2009 18:58 Edited at: 27th Jun 2009 19:30

Link

I got rid of the inline-blocks and the font-weight problem.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

html, body {padding:0; margin:0; background:#FFF}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px; position:relative;}
li {list-style:none; padding:0; display:block; float:left; margin: 0 5px 0 5px}
a:link, a:visited{display:block; text-decoration:none; color:#9b9389; letter-spacing: 2px; text-indent:-9999px}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px; text-indent:0}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:block; position:absolute; top:25px; left:5px}

a#work:link {width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png)}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process:link {width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png)}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients:link {width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png)}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact:link {width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png)}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home:link {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png)}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}
</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#" id="work">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#" id="process">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#" id="clients">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#" id="contact">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#" id="home">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

+ Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav</title>
<style type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

<style type="text/css">

html, body {padding:0; margin:0; background:#FFF}
ul {padding:0; margin:0}
ul#mainNav {margin: 30px 0 0 30px; position:relative;}
li {list-style:none; padding:0; display:block; float:left; margin: 0 5px 0 5px}
a:link, a:visited{display:block; text-decoration:none; color:#9b9389; letter-spacing: 2px; text-indent:-9999px}
a:hover {color:#cbc7c1}
ul#subNav a:link, ul#subNav a:visited {text-decoration:none; color:#cbc7c1; font-size:13px; text-indent:0}
ul#subNav a:hover {text-decoration:none; color:#9b9389; font-size:13px}
ul#subNav li {margin: 0 10px 0 10px}

ul#subNav {display:none; width:600px}
li:hover ul#subNav, li.over ul#subNav{display:block; position:absolute; top:25px; left:5px}

a#work:link {width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png)}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process:link {width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png)}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients:link {width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png)}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact:link {width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png)}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home:link {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png)}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}
</style>

</head>

<body>

<ul id="mainNav">
<li><a href="#" id="work">work</a>
	<ul id="subNav">
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#" id="process">process</a>
	<ul id="subNav">
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#" id="clients">clients</a>
	<ul id="subNav">
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#" id="contact">contact</a>
	<ul id="subNav">
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#" id="home">home</a>
	<ul id="subNav">
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>

</body>
</html>

I'm using IE8 btw.

[EDIT]
I just tried it in IE6, but it returns a blank page.
I hate Internet Explorer so much! But it seems to work in IE7

I'll have a little play around later, see if I can get it working in IE.

Sorry for the wait!

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 27th Jun 2009 19:39

Link

I hate IE as well, it complicates everything. Why not just go with the standards? Why does MS have to try and pave the way in everything? /rant

Alright, thanks. I really appreciate the help with this. Hopefully we can get this working 100%!

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 28th Jun 2009 13:42 Edited at: 28th Jun 2009 13:49

Link

Good news!

I got it all working in IE6, IE7, IE8 and Firefox!

<head>
<title>CSS Navigation</title>

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("mainNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>

ul, li{
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

a:link, a:visited {
	color: #9b9389;
	text-decoration: none;
	padding: 0;
	margin: 0;
	display: block;
	padding: 0 10px 0 10px
}
	
a:hover {
	color:#cbc7c1;
}

li {
	float: left;
}

ul#mainNav {
	position: relative;
}

li ul{
	display: none;
	width: 600px
}

/*IE subNav position*/
li.over ul{
	display: block;
	position: absolute;
	top: 25px;
	left: -293px;
}

/*Other Browser subNav position*/
li:hover ul{
	display: block;
	position: absolute;
	top: 25px;
	left: 0px;
}

/*Custom Link background images*/
a#work{width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png); text-indent: -9999px; padding: 0}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process{width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png); text-indent: -9999px; padding: 0}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients{width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png); text-indent: -9999px; padding: 0}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact{width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png); text-indent: -9999px; padding: 0}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png); text-indent: -9999px; padding: 0}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}

</style>

</head>

<body>
<ul id="mainNav">
<li><a href="#" id="work">work</a>
	<ul>
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#" id="process">process</a>
	<ul>
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#" id="clients">clients</a>
	<ul>
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#" id="contact">contact</a>
	<ul>
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#" id="home">home</a>
	<ul>
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>
</body>
</html>

+ Code Snippet

<head>
<title>CSS Navigation</title>

<script type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("mainNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>

<style type="text/css">
body, html {
	background: #FFF;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

ul, li{
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

a:link, a:visited {
	color: #9b9389;
	text-decoration: none;
	padding: 0;
	margin: 0;
	display: block;
	padding: 0 10px 0 10px
}
	
a:hover {
	color:#cbc7c1;
}

li {
	float: left;
}

ul#mainNav {
	position: relative;
}

li ul{
	display: none;
	width: 600px
}

/*IE subNav position*/
li.over ul{
	display: block;
	position: absolute;
	top: 25px;
	left: -293px;
}

/*Other Browser subNav position*/
li:hover ul{
	display: block;
	position: absolute;
	top: 25px;
	left: 0px;
}


/*Custom Link background images*/
a#work{width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png); text-indent: -9999px; padding: 0}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process{width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png); text-indent: -9999px; padding: 0}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients{width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png); text-indent: -9999px; padding: 0}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact{width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png); text-indent: -9999px; padding: 0}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png); text-indent: -9999px; padding: 0}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}



</style>

</head>

<body>
<ul id="mainNav">
<li><a href="#" id="work">work</a>
	<ul>
    <li><a href="#">PRINT</a></li>
    <li><a href="#">WEB</a></li>
    <li><a href="#">IDENTITY</a></li>
    <li><a href="#">BRANDING</a></li>
    <li><a href="#">ENVIRONMENTAL</a></li>
    <li><a href="#">MULTIMEDIA</a></li>
    </ul>
</li>
<li><a href="#" id="process">process</a>
	<ul>
    <li><a href="#">TEST</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">HELLO</a></li>
    </ul>
</li>
<li><a href="#" id="clients">clients</a>
	<ul>
    <li><a href="#">INSERT</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">ITEMS</a></li>
    <li><a href="#">HERE</a></li>
    </ul>
</li>
<li><a href="#" id="contact">contact</a>
	<ul>
    <li><a href="#">HOW</a></li>
    <li><a href="#">ARE</a></li>
    <li><a href="#">YOU</a></li>
    <li><a href="#">TODAY</a></li>
    <li><a href="#">?</a></li>
    </ul>
</li>
<li><a href="#" id="home">home</a>
	<ul>
    <li><a href="#">I</a></li>
    <li><a href="#">HAVE</a></li>
    <li><a href="#">RUN</a></li>
    <li><a href="#">OUT</a></li>
    <li><a href="#">OF</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">IDEAS</a></li>
    </ul>
</li>
</ul>
</body>
</html>

Huzzah!

Hope this helps!

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 29th Jun 2009 23:10 Edited at: 30th Jun 2009 01:38

Link

Just saw this! Thanks! From the initial test it sure does! I'm going to integrate with the site right now. I'll edit this post to confirm it.

Works great! Here is the final result: http://www.landgraff.com/newsite/index.html

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

xplosys

19

Years of Service

User Offline

Joined: 5th Jan 2006

Playing: FPSC Multiplayer Games

Posted: 30th Jun 2009 05:32

Link

BiggAdd,
Great work on the CSS. I hope you don't mind if we all take advantage of it.

Sid Sinister,
The site is simple and elegant. Great design.

Brian.

fpsFREE - Contact Me

Back to top

Profile PM

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 30th Jun 2009 12:42

Link

Quote: "Great work on the CSS. I hope you don't mind if we all take advantage of it."

Help yourself!

Quote: "
Works great! Here is the final result:"

Glad it works! You don't need that rollover javascript code in your markup you know?

The whole point of this in the CSS:

/*Custom Link background images*/
a#work{width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png); text-indent: -9999px; padding: 0}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process{width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png); text-indent: -9999px; padding: 0}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients{width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png); text-indent: -9999px; padding: 0}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact{width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png); text-indent: -9999px; padding: 0}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png); text-indent: -9999px; padding: 0}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}

+ Code Snippet

/*Custom Link background images*/
a#work{width:48px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_work.png); text-indent: -9999px; padding: 0}
a#work:hover {background:url(http://www.landgraff.com/newsite/images/button_work_rollover.png)}

a#process{width:68px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_process.png); text-indent: -9999px; padding: 0}
a#process:hover {background:url(http://www.landgraff.com/newsite/images/button_process_rollover.png)}

a#clients{width:58px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_clients.png); text-indent: -9999px; padding: 0}
a#clients:hover {background:url(http://www.landgraff.com/newsite/images/button_clients_rollover.png)}

a#contact{width:65px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_contact.png); text-indent: -9999px; padding: 0}
a#contact:hover {background:url(http://www.landgraff.com/newsite/images/button_contact_rollover.png)}

a#home {width:53px; height:32px; background:url(http://www.landgraff.com/newsite/images/button_home.png); text-indent: -9999px; padding: 0}
a#home:hover {background:url(http://www.landgraff.com/newsite/images/button_home_rollover.png)}

Is to remove the need for that. If you want to keep the javascript, you can remove the above from the CSS.

Back to top

Profile PM

draknir_

18

Years of Service

User Offline

Joined: 19th Oct 2006

Location: Netherlands

Posted: 30th Jun 2009 14:11

Link

Cheers indeed, very nice CSS code. I didn't know this was possible with CSS

Back to top

Profile PM Email

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 30th Jun 2009 17:22 Edited at: 30th Jun 2009 17:22

Link

Dang, I thought I had unchecked the "preload images" button on the rollovers... Thanks, I'll remove them and add in new lines to the CSS preload code for the other images.

@xplosys: Thanks

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

JoelJ

21

Years of Service

User Offline

Joined: 8th Sep 2003

Location: UTAH

Posted: 1st Jul 2009 03:44

Link

Quote: "You shouldn't use Javascript because you have the option to turn it off."

These days, disabling Javascript is like disabling HTML.

That CSS menu is quite nice though, I really like it. I may use it. If not just learn from it

Your mother has been erased by a mod because it's larger than 600x120

Back to top

Profile PM Website

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 6th Jul 2009 20:43

Link

I've gotten rid of the rollover button code and changed everything over to your CSS hover method. However, it produces this weird result when you click on the button. Is there anyway to prevent this? I've made a 5 second video of it. http://screencast.com/t/CGXiyYwNPS

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 6th Jul 2009 23:59 Edited at: 7th Jul 2009 00:00

Link

Hey Sid,

Sorry I diddn't notice the problem. In this block of CSS:

Quote: "a:link, a:visited {
color: #9b9389;
text-decoration: none;
padding: 0;
margin: 0;
display: block;
padding: 0 10px 0 10px;
}"

add the command:

overflow: hidden;

Should fix the problem.

Cheers,
BiggAdd

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 7th Jul 2009 00:51

Link

Hmmm, that still didn't do it. I updated the website with the new code, I forgot to do that when I asked the question, so if you just looked at it, look at it again.

http://www.landgraff.com/newsite/index.html

IE doesn't seem to do it, but Firefox does.

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 7th Jul 2009 01:19 Edited at: 7th Jul 2009 01:20

Link

From your code:

Quote: ".menu a:link, .menu a:visited {
color: #9b9389;
text-decoration: none;
padding: 0;
margin: 0;
display: block;
padding: 0 0px 0 0px <- This might be your problem There is no ";" to complete the command
overflow: hidden;
}
"

Try closing the above and see if it works!

Back to top

Profile PM

dab

20

Years of Service

User Offline

Joined: 22nd Sep 2004

Location: Your Temp Folder!

Posted: 7th Jul 2009 04:27

Link

Very nice BiggAdd, I was going to suggest the same method, but I don't think I would have coded the thing!

Beautifully done!

Need a hideout for conversations? dab-Media IRC. irc.dab-media.com:6667
PHP coder for hirer. Freelance/Job

Email me.

Back to top

Profile PM Email Website

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 7th Jul 2009 06:24

Link

Ah! That did it, great catch. I guess I should have ran it through a HTML checker. It probably would have spotted that. Thanks again BigAdd!

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

Clbembry

18

Years of Service

User Offline

Joined: 10th Dec 2006

Location: Minnesota

Posted: 7th Jul 2009 07:53

Link

Quote: "These days, disabling Javascript is like disabling HTML."

I know quite a few people that turn off Javascript to block annoying pop-ups.

Back to top

Profile PM Email Website

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 7th Jul 2009 23:45

Link

Is it possible to use that CSS rollover/hover technique to change multiple images when you scroll over one image?

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 8th Jul 2009 01:19

Link

How do you mean?

Back to top

Profile PM

Clbembry

18

Years of Service

User Offline

Joined: 10th Dec 2006

Location: Minnesota

Posted: 8th Jul 2009 01:21

Link

Quote: "Is it possible to use that CSS rollover/hover technique to change multiple images when you scroll over one image?"

I don't think you with CSS alone. That is something that will probably require Javascript.

Back to top

Profile PM Email Website

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 8th Jul 2009 01:57 Edited at: 8th Jul 2009 02:02

Link

Something like this perhaps?

div#hover_main {
	position:relative;
	background: #ccc;
}

a#link1, a#link1a {
	position: absolute;
	top: 50px;
	left: 50px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);
}

a#link2, a#link2a  {
	position: absolute;
	top: 50px;
	left: 100px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);
}

a#link3, a#link3a  {
	position: absolute;
	top: 50px;
	left: 150px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);
}

a#link1a, a#link2a, a#link3a {display: none}

div#hover_main:hover a#link1a{ display:block; background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);}
div#hover_main:hover a#link2a{ display:block; background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);}
div#hover_main:hover a#link3a{ display:block; background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);}
</style>
</head>

<div id="hover_main"><a href="#">Hover_Main</a>
<a href="#" id="link1a">Link1</a>
<a href="#" id="link2a">Link2</a>
<a href="#" id="link3a">Link3</a>
</div>

</body>
</html>

+ Code Snippet

<html>
<head>

<style type="text/css">
html, body {
	padding: 0;
	margin: 0;
	position: relative;
}

div#hover_main {
	position:relative;
	background: #ccc;
}

a#link1, a#link1a {
	position: absolute;
	top: 50px;
	left: 50px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);
}

a#link2, a#link2a  {
	position: absolute;
	top: 50px;
	left: 100px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);
}

a#link3, a#link3a  {
	position: absolute;
	top: 50px;
	left: 150px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);
}

a#link1a, a#link2a, a#link3a {display: none}

div#hover_main:hover a#link1a{ display:block; background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);}
div#hover_main:hover a#link2a{ display:block; background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);}
div#hover_main:hover a#link3a{ display:block; background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);}
</style>
</head>

<body>
<a href="#" id="link1">Link1</a>
<a href="#" id="link2">Link2</a>
<a href="#" id="link3">Link3</a>

<div id="hover_main"><a href="#">Hover_Main</a>
<a href="#" id="link1a">Link1</a>
<a href="#" id="link2a">Link2</a>
<a href="#" id="link3a">Link3</a>
</div>

</body>
</html>

Note - You don't have to use links if you only want a simple background replace, but I used links just for this demonstration. you can use any html element.

Also this bit of code demonstrates the need for the duplicate links:

div#hover_main {
	position:relative;
	background: #ccc;
}

a#link1 {
	position: absolute;
	top: 50px;
	left: 50px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);
}

a#link2 {
	position: absolute;
	top: 50px;
	left: 100px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);
}

a#link3  {
	position: absolute;
	top: 50px;
	left: 150px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);
}

div#hover_main:hover a#link1{ background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);}
div#hover_main:hover a#link2{ background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);}
div#hover_main:hover a#link3{ background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);}
</style>
</head>

<body>
<div id="hover_main"><a href="#">Hover_Main</a>
<a href="#" id="link1">Link1</a>
<a href="#" id="link2">Link2</a>
<a href="#" id="link3">Link3</a>
</div>

</body>
</html>

+ Code Snippet

<html>
<head>

<style type="text/css">
html, body {
	padding: 0;
	margin: 0;
	position: relative;
}

div#hover_main {
	position:relative;
	background: #ccc;
}

a#link1 {
	position: absolute;
	top: 50px;
	left: 50px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);
}

a#link2 {
	position: absolute;
	top: 50px;
	left: 100px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);
}

a#link3  {
	position: absolute;
	top: 50px;
	left: 150px;
	display: block;
	width:40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);
}


div#hover_main:hover a#link1{ background:url(http://img.photobucket.com/albums/v369/BiggAdd/link3.png);}
div#hover_main:hover a#link2{ background:url(http://img.photobucket.com/albums/v369/BiggAdd/link1.png);}
div#hover_main:hover a#link3{ background:url(http://img.photobucket.com/albums/v369/BiggAdd/link2.png);}
</style>
</head>

<body>
<div id="hover_main"><a href="#">Hover_Main</a>
<a href="#" id="link1">Link1</a>
<a href="#" id="link2">Link2</a>
<a href="#" id="link3">Link3</a>
</div>

</body>
</html>

Notice when you hover over the links in this one, the backgrounds change. (There is probably a simpler way to get round this, but I can remember it!)

Cheers,
BiggAdd

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 8th Jul 2009 18:52

Link

Well, the problem I'm having is in the way I sliced up the image. I'm probably just going to reslice it and stop being lazy, but I kind of wanted to reuse my frame images that make up the background.

Here is a video showing you the problem: http://screencast.com/t/hfRJ7SC1TS

Basically the way I sliced it up was to include 1 pixel of the white area on both the top and right in that image. That works on all the other sides, but when it comes to that side it doesn't because the tear rollover changes the top and right brown frames.

I'm not sure if you follow. If not, don't worry about it, I'm most likely just going to reslice anyway. Preloading two 1024x45 images probably won't be the best thing to do. I was curious about the answer though anyway for future reference

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

BiggAdd

Retired Moderator

20

Years of Service

User Offline

Joined: 6th Aug 2004

Location: != null

Posted: 8th Jul 2009 19:07

Link

I don't know what you mean sorry!

Probably best to re-slice it!

Back to top

Profile PM

Sid Sinister

19

Years of Service

User Offline

Joined: 10th Jul 2005

Location:

Posted: 8th Jul 2009 19:42

Link

Yup, already done with that. Should have just went that route to start with lol.

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
Current Project: http://strewnfield.wordpress.com/ (Last updated 06/11/09)

Back to top

Profile PM Email

Sorry your browser is not supported!

Geek Culture / Website rollover menu dev help