Help needed please

**spook** · 06-29-2006, 07:33 AM

Hello everyone,

I would like your input and suggestions please. I am brand new to web design, 5 weeks practice so far. I chose html as it seemed most accessible to me.

My site is almost at the point that I want it to be, however I am stuck with how to improve the links menu. The galleries I have, for example (Black and White) are growing rapidly and I would like to break the gallery down into sub-galleries.

http://www.williamsphotography.fi

I have tried adding the sub-galleries to the existing links menu, but it becomes too long and looks awkward. Is there a way to overcome this?
I would ultimately like visitors to click a gallery link and then they could be presented with a list of sub galleries.

Any help or suggestions will be greatly appreciated.

Peter

**soupdragon** · 06-29-2006, 08:38 AM

Hi

I'm still learning myself but at the beginning found the scripts on this site very very useful. With regard to the menu you could try this script,

http://www.dynamicdrive.com/style/cs...e-blocks-menu/

It's a nice simple vertical menu that with a bit of alteration could be used in your site.

Simply add the code in red into the head of your html code

<style type="text/css">

#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #000000; /* Change the Menu's background color*/
border-bottom: 1px solid #ffffff; /*Change the bottom border color*/
border-left: 7px solid #ffffff; /* Change the left border color*/
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu li a:hover {
background-color: #ffffff; /* Change background color on mouseover*/
border-left-color: #000000; /* Change the left border color on mouseover*/
color: black; /* Change text color on mouseover */
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

Now add the html below into the body of the doc and your away! (Edit the links and Titles of the script to suit).



<div id="ddblueblockmenu">

<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>

<div class="menutitle">CSS Library</div>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>

</div>

<div style="margin-top: 1em; font-size: 90%">Credit: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS library</a></div>

Hope this is of some use to you

Thanks

**soupdragon** · 06-29-2006, 08:43 AM

Also found this script which maybe more useful to you. Its another dynamic drive script that is css and javascript. Use the script in the same way as above.

<head>
<style type="text/css">

#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #900054;
}

</style>
</head>

<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54659" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Biology</a><br>
<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=59318" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Chemistry</a><br>
<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54661" onMouseover="showmenu(event,linkset[2], '180px')" onMouseout="delayhidemenu()">Physics</a>
<script type="text/javascript">

/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var defaultMenuWidth="150px"

var linkset=new Array()

linkset[0]='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54659">Biology Homepage</a>'
linkset[0]+='<hr>'
linkset[0]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=44604">GCSE</a>'
linkset[0]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=44618">AS/A-Level</a>'
linkset[0]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54669">Triple Science</a>'
linkset[0]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=56299">W.A.S.P.S</a>'

linkset[1]='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=59318">Chemistry Homepage</a>'
linkset[1]+='<hr>'
linkset[1]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=44606">GCSE</a>'
linkset[1]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=44619">AS/A-Level</a>'
linkset[1]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54668">Triple Science</a>'

linkset[2]='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54661">Physics Homepage</a>'
linkset[2]+='<hr>'
linkset[2]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupId=44608">GCSE</a>'
linkset[2]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=54670">Triple Science</a>'
linkset[2]+='<a href="http://www.school-portal.co.uk/GroupHomepage.asp?GroupID=44620">AS/A-Level</a>'
////No need to edit beyond here

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>

**spook** · 06-29-2006, 12:26 PM

These are really great options Soupdragon

I am only familiar with html

and i was wondering which part of the code shpuld i play with so that i could center the menu?

This really is a great help, thanks again.

Peter

**BLiZZaRD** · 06-29-2006, 01:18 PM

Why be manual, when you can just customize? Gallery is freeware/opensource Photo Gallery that allows for unlimeted albums, each with unlimited sub-albums, complete control, give captions to photos, rearrange... and tons more.

I use 4 of them on my site, happiest with 2.X version, but 1.x is fine too.

To answer your above question add your center tag between:

onMouseout="delayhidemenu()">Physics</a>
<script type="text/javascript">

and close after the </script>

P.S. Gallery is widely accepted and a TON of web hosts offer auto install (requires ONE SQL db)

**soupdragon** · 06-29-2006, 03:03 PM

Sorry I did'nt explain very well. Basically all you need to change is listed below,
All you have to do is change the piece of code in red

To change the link destination
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>

To Change the links title

<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>

To Change Background Color

#ddblueblockmenu li a:hover {
background-color: #ffffff; /* Change background color on mouseover*/
border-left-color: #000000; /* Change the left border color on mouseover*/
color: black; /* Change text color on mouseover */
}

Thats all I have time to list at the moment. If you need any more just list them
and I'll walk you through it.

Thanks

**spook** · 06-30-2006, 06:44 PM

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" />

<style type="text/css">
.menutitle{
cursor

ointer;
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">

<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>

<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>

<br>
<br>
</div>
</BODY>
</HTML>

I would be very thankful, if you have any ideas or suggestions that would help with this

Peter

**soupdragon** · 07-04-2006, 10:57 AM

Hi

If you what the text aligned as it was on your orginal website. You can left align your text in the menu box as below,

<!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" />

<style type="text/css">
.menutitle{
cursorointer;
margin-bottom: 5px;
margin-left:auto;
margin-right:auto;
background-color:#000000;
color:#F0F0F0;
width:100px;
padding:1px;
align:center;
text-align:left;
font-weight:bold;

Hope this solves your problem!

Your website is looking good

Thanks

Thread: Help needed please

Thread Tools

Search Thread

Help needed please

Thanks a million Soupdragon!!

Thank you everyone for the great responce

Bookmarks

Bookmarks

Posting Permissions