...

View Full Version : CSS Horiz. Menu not working in Frontpage



timole99
12-06-2006, 01:51 PM
Subject = JavaScript Kit lean CSS Horizontal List Menu on show @
http://www.javascriptkit.com/script/script2/csstopmenu.shtml

Environment = Use in MS FrontPage 2000 in Top Border so it can show up on all pages.

Problem = Menu displays correctly in Preview of Top Border page within FrontPage programme but only shows as bulleted list in ordinary pages and on test of published web, which is quite unsatisfactory.

Test Website = http://test.timleitch.net.nz

Observations =
1. Don't try to take off the bullet formatting - it only mucks up all the "ul" and "li" coding. So that doesn't improve anything.

2. I have put in the code suggested here - <!--webbot bot="HTMLMarkup" startspan --> - [plus endspan] - to prevent FrontPage changing lines of code (although FP hadn't actually done that).

3. I have put in a DocType code on the Top Border HTML page to enable code to be properly recognised. I use this one because it seemed that FrontPage works in a sort of "frame" style.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><html>

4. I tried it with the actual URL path to my folder containing the DD menu I am trying to use and FTP copied to the website but that didn't make any difference as FrontPage actually updates the file path when a file is moved.

Request =
Help please. I would very much like to get this CSS Horizontal Drop Down Menu to work correctly. Any and all advice and assistance would be much appreciated. Thanks.

Tim :confused:

timole99
12-26-2006, 09:06 AM
I have finally come across a solution to this problem. I put in the info in case it might help someone else.

Firstly: The menu "Directions" from JKF (JavaKit Script) or DD (Dynamic Drive) - "Step 1: Add the following code to the <head> section of your page:"
has to be added in both the HTML Page and the Top Border page in FrontPage 2000.

Secondly: The path for the menu's external css and js files in the HTML page needs to differ from that in the Top Border page. In the TB it stays the same as provided. In the HTML page it has to be shown "_borders/csshorizontalmenu.css" or whatever folder you have the css and js files in.

I found that doing these things allowed the menu to display in FrontPage's "Preview" view although it doesn't actually appear in the "Normal" view.

Thirdly: Unfortunately that same Step 1 code has to be added to every page on my web for the Menu to display in each case. That rather does away with the concept of a Top Border to display consistently throughout the web.

Lastly: All I need now is a fix so that the left cell in the horizontal menu shows the text within it in the same manner as all the other cells as I need it to do. Unfortunately I've run in to a problem with publish this to the web so here is the code -


.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 105px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url("menubg.gif") center center repeat-x;
font: bold 12px Tahoma;
color: white;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 180px; /*width of sub menu levels*/
padding: 2px 5px;
background: #cae2fd;
border-width: 0 1px 1px 1px;
font: normal 12px Tahoma;
color: black;
}

Anyone got any ideas, please? Thanks.

Tim
To protect yourself from the adverse health risks of EMF go to TimLeitch.net.nz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum