Hi,
I am gettting myself in a pickle as I can't seem to figure out how to change elements to my CSS menu...
The problem I have is that the borders have disappeared around the main menu, and when you mouseover the "services" link next to it moves over? And I can't get the sub menu for "services" and "Approved centre" to align underneath the main links (serviecs and approved centre"
<!-- m --><a class="postlink" href="http://www.synaxissolutions.co.uk/test/chaplane/index.htm">http://www.synaxissolutions.co.uk/test/ ... /index.htm</a><!-- m -->
Can anyone help?check this out its a working model just modify its what i did
john
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript">
function big(lyr) {
document.all[lyr].style.height='180px'; }
/* small() makes selected layer shorter (height property)*/
function small(lyr) {
document.all[lyr].style.height='32px';
}
/* start() makes all layers short to start with (height property)*/
function start() {
document.all.Layer1.style.height='32px';
document.all.Layer2.style.height='32px';
document.all.Layer3.style.height='32px'; }
//-- !>
</script>
</HEAD>
<BODY onLoad="start()">
<div id="Layer1" style="position:absolute; width:155px; height:180px; z-index:1; left: 74px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu1.html">Menu 1</a>
<br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.html">Link 1</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.html">Link 2</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.html">Link 3</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link4.html">Link 4</a></font></div>
</div>
<div id="Layer2" style="position:absolute; width:155px; height:180px; z-index:1; left: 236px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu2.html">Menu 2</a>
<br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link5.html">Link 5</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link6.html">Link 6</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link7.html">Link 7</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link8.html">Link 8</a></font></div>
</div>
<div id="Layer3" style="position:absolute; width:155px; height:180px; z-index:1; left: 398px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu3.html">Menu 3</a>
<br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link9.html">Link 9</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link10.html">Link 10</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link11.html">Link 11</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link12.html">Link 12</a></font></div>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
</body>
</html>
good luck
john
ps when things jump around like that its usually because you havent allowed enough space a few <br> here and there usually sort the problemHi,
Many thanks for that, have upload and made some adjustments...
DO I need to keep the javascriptsource.com link in there?might be working..
i didnt see your previous code, but as you say in your post, it sounded like it was a CSS drop down menu(which often includes a tiny bit of javascript to make it work in IE)
anyway as said on ALA (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->)
鎻嘓TML?dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.
--
i believe you can get rid of that javascriptsource.com link, or at least comment it outHeres what I was working on...and stuck on!!! Whihc is a shame...
And this is now what I am working on...PS what I don;t like about the new menu, is when you refresh the browser the first lines of the drop down part of the menu appears!!!!You might be interested in this code: ADxMenu (<!-- m --><a class="postlink" href="http://www.aplus.co.yu/adxmenu/intro/">http://www.aplus.co.yu/adxmenu/intro/</a><!-- m -->)
See some examples here (<!-- m --><a class="postlink" href="http://www.aplus.co.yu/adxmenu/examples/">http://www.aplus.co.yu/adxmenu/examples/</a><!-- m -->).
But always mind the compatibility (<!-- m --><a class="postlink" href="http://www.aplus.co.yu/adxmenu/intro/#browsers">http://www.aplus.co.yu/adxmenu/intro/#browsers</a><!-- m -->)
I am gettting myself in a pickle as I can't seem to figure out how to change elements to my CSS menu...
The problem I have is that the borders have disappeared around the main menu, and when you mouseover the "services" link next to it moves over? And I can't get the sub menu for "services" and "Approved centre" to align underneath the main links (serviecs and approved centre"
<!-- m --><a class="postlink" href="http://www.synaxissolutions.co.uk/test/chaplane/index.htm">http://www.synaxissolutions.co.uk/test/ ... /index.htm</a><!-- m -->
Can anyone help?check this out its a working model just modify its what i did
john
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript">
function big(lyr) {
document.all[lyr].style.height='180px'; }
/* small() makes selected layer shorter (height property)*/
function small(lyr) {
document.all[lyr].style.height='32px';
}
/* start() makes all layers short to start with (height property)*/
function start() {
document.all.Layer1.style.height='32px';
document.all.Layer2.style.height='32px';
document.all.Layer3.style.height='32px'; }
//-- !>
</script>
</HEAD>
<BODY onLoad="start()">
<div id="Layer1" style="position:absolute; width:155px; height:180px; z-index:1; left: 74px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu1.html">Menu 1</a>
<br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.html">Link 1</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.html">Link 2</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.html">Link 3</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link4.html">Link 4</a></font></div>
</div>
<div id="Layer2" style="position:absolute; width:155px; height:180px; z-index:1; left: 236px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu2.html">Menu 2</a>
<br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link5.html">Link 5</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link6.html">Link 6</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link7.html">Link 7</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link8.html">Link 8</a></font></div>
</div>
<div id="Layer3" style="position:absolute; width:155px; height:180px; z-index:1; left: 398px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')">
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu3.html">Menu 3</a>
<br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link9.html">Link 9</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link10.html">Link 10</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link11.html">Link 11</a><br>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link12.html">Link 12</a></font></div>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
</body>
</html>
good luck
john
ps when things jump around like that its usually because you havent allowed enough space a few <br> here and there usually sort the problemHi,
Many thanks for that, have upload and made some adjustments...
DO I need to keep the javascriptsource.com link in there?might be working..
i didnt see your previous code, but as you say in your post, it sounded like it was a CSS drop down menu(which often includes a tiny bit of javascript to make it work in IE)
anyway as said on ALA (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->)
鎻嘓TML?dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.
--
i believe you can get rid of that javascriptsource.com link, or at least comment it outHeres what I was working on...and stuck on!!! Whihc is a shame...
And this is now what I am working on...PS what I don;t like about the new menu, is when you refresh the browser the first lines of the drop down part of the menu appears!!!!You might be interested in this code: ADxMenu (<!-- m --><a class="postlink" href="http://www.aplus.co.yu/adxmenu/intro/">http://www.aplus.co.yu/adxmenu/intro/</a><!-- m -->)
See some examples here (<!-- m --><a class="postlink" href="http://www.aplus.co.yu/adxmenu/examples/">http://www.aplus.co.yu/adxmenu/examples/</a><!-- m -->).
But always mind the compatibility (<!-- m --><a class="postlink" href="http://www.aplus.co.yu/adxmenu/intro/#browsers">http://www.aplus.co.yu/adxmenu/intro/#browsers</a><!-- m -->)