PDA

View Full Version : Horizontal Hover Menu



Fyre
08-13-2006, 07:34 AM
1) Script Title: Horizontal Hover Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/hover.htm

3) Describe problem:

I am having problems placing the menu in the centre of the page under the header/banner:

I have tried all alignment and floating (left, right, centre)..

I have this website that used to have someone that did the design side but they have left... I do not know a great deal about all this but am learing -
If anyone could assist I would be most grateful...

jscheuer1
08-13-2006, 08:35 AM
I had the same problem, I needed to rewrite it to get a centered version. There may be an easier way but, I couldn't figure it out, and as I recall it got a little complicated, here is what I did:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#footer a {
font: bold 13px arial,sans-serif;
text-decoration:none;
padding: 2px 1ex;
text-decoration: none;
float: left;
color: black;
background-color: #ffffff;
border: 2px solid #ffffff;
}

#footer a:hover {
background-color: #dadada;
border-style: outset;
}

#footer {
border-collapse:collapse;
background-color:#ffffff;
}

* html #footer {
border:1px solid #ffffff;
}

#footer td {
height:1.5em
}

html>body #footer a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
</head>
<body>
<table id="footer" align="center"><tr><td valign="middle"><a href="main_1.htm">Home</a></td><td valign="middle"><a href="art_directory_2.htm">Art Directory Two</a></td><td valign="middle"><a href="directory_3_three/art_directory.asp">Art Directory Three</a></td><td valign="middle"><a href="about_orig.htm">About</a></td><td valign="middle"><a href="email_addys.htm">Contact Us</a></td><script type="text/javascript">
document.write('<td valign="middle"><a href="index.htm">View Intro</a></td>')
</script></tr></table>
</body>
</html>

Notes: I used the id 'footer' simply because, in my layout, it was a footer menu. I adapted the colors to my design. Hopefully, you can adapt them to yours as well.

Fyre
08-13-2006, 09:10 AM
Hi John

Thank you for the reply and the code -

I am trying it now - it doesn't seem to be working either - perhaps I haven't deleted all the relevant code for the previous menu bar he had in there.... So frustrating when you know not what you do!:confused: :confused: :eek:

jscheuer1
08-13-2006, 09:20 AM
The previous code shouldn't matter as long as you are using a unique id for the new version and its style selectors. The id of 'footer' may be a poor choice as, many pages already have a selector id of 'footer'. Anyways, try out my demo as a standalone page first, just to get the feel of it. A link to your page would help me assist you.

Fyre
08-13-2006, 09:30 AM
Thanks again John

Well I must be thinkimg correctly - I have just made a blank page with nothing else on it and am trying the code again - it feels good knowing you suggested it - I musn't be so senile after all!

I don't have it online so I cannot link you to it unless you know a way I can put it up there without changing the whole site (which I have done before - wow - didn't THAT hurt! lol)

I will try yours as well on this blank page - I am presuming I would just remove the "FOOTER" tag would I?

jscheuer1
08-13-2006, 09:51 AM
You can always make a copy of your new page and call it test.htm or something and upload it to the same directory where the page would go if it was working right. Then give me the link to your test page.

About 'footer', if you change id="footer" in the HTML section to something else, you need to change footer to that same thing everywhere it appears here (in the style for the menu):


#footer a {
font: bold 13px arial,sans-serif;
text-decoration:none;
padding: 2px 1ex;
text-decoration: none;
float: left;
color: black;
background-color: #ffffff;
border: 2px solid #ffffff;
}

#footer a:hover {
background-color: #dadada;
border-style: outset;
}

#footer {
border-collapse:collapse;
background-color:#ffffff;
}

* html #footer {
border:1px solid #ffffff;
}

#footer td {
height:1.5em
}

html>body #footer a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}

Fyre
08-13-2006, 11:08 AM
I have tried your version on a fresh page - It angles down across the page now -

I might go back and see if I can find the colouring of the old nav bar and just change that - I still have my updates on the site to do and I don't have any time left to try and win this battle - :)

I do so much appreciate your help John.... thank you

I will try again next week possibly and let you know how it went - if you are still around here of course!

jscheuer1
08-13-2006, 06:37 PM
What do you mean by 'angle down'?