Hi all,
Thank you for putting me on to the menuscripts, Soupdragon, I have now chosen one and I'm currently working on it to make fit in the webpage.
But I got one more problem or challenge....
I took this script, which I added to my code. I centered the menu, but can't figure out how to get each item on the menu to align vertically as they do on my current homepage (now they start from different point depending on the length of the title).
Http://www.williamsphotography.fi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>Peter Williams photography</TITLE>
<META NAME="Keywords" CONTENT="photography finland, photographer helsinki, digital photography, canon, beach, birds, flowers, abstract, fine art, nature, landscape, portrait, black and white">
<META NAME="Description" CONTENT="Helsinki based digital photographer covering a diverse range of subjects with an emphasis on black and white images">
<META NAME="Author" CONTENT="peter@williamsphotography.fi">
<meta http-equiv="imagetoolbar" content="no" />
<!-- META Tags generated by http://submitexpress.com/metatag.html -->
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
margin-left:auto;
margin-right:auto;
background-color:#000000;
color:#F0F0F0;
width:100px;
padding:1px;
align:center;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
</HEAD>
<body bgcolor="#000000" LINK="#F0F0F0" VLINK="#F0F0F0" ALINK="#F0F0F0" topmargin="5" leftmargin="50" rightmargin="10" bottommargin="50">
<div align="center">
<br>
<br>
<br>
<font color="#F0F0F0" face="Arial" size="6"><p align="left">Peter Williams photography
<br>
<img src="Company.jpg" width="400" height="550" BORDER="0" align="right"></a><br><br>
<br>
<br>
<br>
<br>
<font color="#F0F0F0" face="Arial" size="2"><p align="center">
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Black and white</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>
<div class="menutitle"> <a href="http://www.williamsphotography.fi/mgallery.html">Miscellaneous</a></div>
<span class="submenu" id="sub2">
</span>
<div class="menutitle"> <a href="http://www.williamsphotography.fi/humangallery.html">Humanity</a></div>
<span class="submenu" id="sub3">
</span>
<div class="menutitle"> <a href="http://www.williamsphotography.fi/livegallery.html">Living world</a></div>
<span class="submenu" id="sub4">
</span>
<div class="menutitle"> <a href="http://www.williamsphotography.fi/info.html">About</a></div>
<span class="submenu" id="sub4">
</span>
<div class="menutitle"> <a href="http://105798.netguestbook.com/">Leave your mark</a></div>
<span class="submenu" id="sub5">
</span>
<div class="menutitle"> <a href="http://www.williamsphotography.fi/links.html">Photography links</a></div>
<span class="submenu" id="sub6">
</span>
</div>
<br>
<br>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1639627;
var sc_invisible=1;
var sc_partition=15;
var sc_security="cb33d095";
var sc_remove_link=1;
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><img src="http://c16.statcounter.com/counter.php?sc_project=1639627&java=0&security=cb33d095&invisible=1" alt="hidden hit counter" border="0"> </noscript>
<!-- End of StatCounter Code -->
<br>
<br>
</div>
</BODY>
</HTML>
I would be very thankful, if you have any ideas or suggestions that would help with this:)
Peter