Galleries

Simpler Album Description

AlbumDesc TextOnly

Example of how to create a "text-only" page In this example we w ...

Updated: Jul 30, 2007 10:10pm CST

Link Select page

My Galleries and Categories ...

Updated: Sep 25, 2007 10:55am CST

password protected gallery

Examples of more levels - Splitting Your Site

My Family Galleries by Year ...

Updated: Apr 22, 2008 11:48am CST

Side by Side Compare

Photo Comparsion Page text text text text text text ...

Updated: Feb 03, 2008 3:13pm CST

Menu Simple

Simple menu Menu 1Menu 2Menu 3Menu 4Menu 5 <div class="men ...

Updated: Feb 11, 2007 9:38pm CST

Dropdown Menu Tutor : Dropdown Menu Tutor Take a look at this simplified version of this menu first,below is the background of how it was created. See simple example here

Dropdown Menu Tutor

Dropdown Menu Tutor Take a look at this simplified version of this ...

Updated: Oct 15, 2006 11:52pm CST

Menu Tutor CSS : Return to Menu Tutor Click Here *************** Please Read First ************** This menu will not work correctly with the Carbonite theme. *** Update: might work in Carbonite theme now *** Note: This is just a starting point, it will need to be tweaked for width's, positions and colors. etc. Some elements might not be used and some are still unknown. The navBar at the top of this page uses this code with different color combinations so they can easily be found below. If you have the Webdeveloper extension for Firefox you can play with the CSS and HTML settings and see in real time how it effects the navBar above. Firefox webpage Web Developer Extension webpage This code goes in your CSS. /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */ /* http://www.cssplay.co.uk/ */ /* Edited by me for content, formatting and some elements */ /* Please help support CSSPlay at: */ /* http://www.cssplay.co.uk/support.html */ /* Common Styling */ .menu { position: relative; display: block; z-index: 99; padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */ height: 20px; /* menu container (div .menu) */ width: 616px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */ margin: 0 auto; /* this should center navbar, if not tweak with left's below */ } .menu ul { padding: 10px 0px 10px 0px; /* this effects menu centering if too big */ margin:0 auto; /* this maybe not needed? */ list-style-type: none; } .menu ul li { /* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */ float:left; /* WARNING: float right reverses menu */ position:relative !important; /* ***** Carbonite fix ***** */ } .menu ul li a, .menu ul li a:visited { display: block; font-size: 1em; /* main buttons */ color: black ; /* main buttons text non-hover*/ text-decoration:none; text-align: center; /* centers text in buttons */ width: 100px; /* main box width */ height: 20px; /* main box height */ border: 1px solid red; /* start your design with borders on, easier to position DD's & FO's */ border-width: 1px 1px 1px 1px; background: #00ff00; /* main button color */ padding-left: 0px; line-height: 20px; /* positions text up/down in box */ } * html .menu ul li a, .menu ul li a:visited { width: 104px; w&#92;idth: 104px; /* IE main button */ } .menu ul li ul { display: none;} /* +++++++++++++++++++++++++++ */ /* Specific to Non-IE browsers */ /* +++++++++++++++++++++++++++ */ .menu ul li:hover a { color: blue; /* main when hover DD */ background: white; /* main when hover DD */ } .menu ul li:hover ul { display: block; position: absolute !important; /* ***** Carbonite fix ***** */ top: -4px; /* FF DD up down */ margin-top: 17px; /* FF main mouse active vertical */ left: 0px; /* FF DD right left */ width: 104px; /* unknown */ } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display: block; background: yellow; /* DD FO non-hover */ color: green; /* DD FO non-hover */ height: auto; line-height: 20px; /* DD FO box height */ padding: 0px 0px; width: 100px; /* DD FO box width */ } .menu ul li:hover ul li a:hover { background: red; /* DD FO hover */ color: white; /* DD FO hover */ } .menu ul li:hover ul li:hover ul { display: block; position: absolute; left: 102px; /* FF FO right left */ top: -27px; /* FF FO up down */ width: 146px; /* FF FO box width */ } /* +++++++++++++++++++++++++++ */ /* Specific to IE browsers */ /* +++++++++++++++++++++++++++ */ .menu ul li a:hover { /* text-decoration: none; */ /* might be needed */ color: blue; /* main hover */ background:yellow; /* main hover */ } .menu ul li a:hover ul { display: block; position: absolute !important; /* ***** Carbonite fix ***** */ top: 2px; /* DD container up down */ background: none; /* gets rid of DD container */ margin-top: 7px; /* DD container up down */ left: 0px; /* DD right left */ } .menu ul li a:hover ul li a { display: block; background: white; /* IE DD color non-hover */ color: red; /* IE DD color non-hover */ height: auto; line-height: 20px; /* IE DD FO box height */ padding: 0px; width: 145px; /* IE DD FO box */ } .menu ul li a:hover ul li a ul { visibility:hidden; position:absolute; height: 0; width: 0; } .menu ul li a:hover ul li a:hover { background: blue; /* DD FO hover includes menu 6 */ color: gold; /* DD FO hover includes menu 6 */ } .menu ul li a:hover ul li a:hover ul { display: block; position: absolute; top: -22px; /* FO up down */ color: #000000; /* unknown */ left: 147px; /* FO right left */ } /*ADD TO FIX IE*/ /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { width: 125px; w&#92;idth: 139px; } /* another hack for IE5.5 */ * html .menu ul ul { top: 30px; t&#92;op: 31px; /* IE gap between main bar and the dropdown items */ } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table { position:absolute; top:auto 0; left:0; } /* yet another hack for IE5.5 */ * html .menu ul ul a { width: 125px; /* unknown */ w&#92;idth: 104px; /* DD FF width */ } /*END EXTRA ADDS FOR IE*/ /* ADD TO HIDE EXTRA LEVELS */ /* make the 2nd level visible when hover on 1st level list OR link */ .menu ul a:hover ul, /* IE */ .menu ul:hover ul { /* FF */ visibility:visible; } /* keep the 3rd level hidden when you hover on 1st level list OR link */ .menu ul a:hover ul ul, /* IE */ .menu ul:hover ul ul { /* FF */ visibility:hidden; } /* keep the 4th level hidden when you hover on 2nd level list OR link */ .menu ul li a:hover ul li a:hover ul ul, /* IE */ .menu ul li:hover ul li:hover ul ul { /* FF */ visibility:hidden; } /* make the 3rd level visible when you hover over 2nd level list OR link */ .menu ul a:hover ul a:hover ul, /* IE */ .menu ul:hover ul:hover ul { /* FF */ visibility:visible; } /* make the 4th level visible when you hover over 3rd level list OR link */ .menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */ .menu ul li:hover ul li:hover ul li:hover ul { /* FF */ visibility:visible; } /* ==== END NAVBAR CODE ==== */ /* ============ Advanced option =============== */ /* The following code allows the right most menu */ /* item dropdown flyouts to fly out to the left. */ /* Also need to assign the classes in the header code. */ /* &lt;ul class="main6DD"> and &lt;ul class="main6FO"> */ /* i.e &lt;ul class="main6FO"> */ /* &lt;li>&lt;a href="http ....... */ /* &lt;/ul> &lt;!--[if ....... */ /* =================================================== */ /* FF right most menu box dropdown/flyout */ .menu ul li:hover ul.main6DD li a { display:block; background: gray; /* DD FO non-hover FF */ color: white; /* DD FO non-hover FF */ height: auto; line-height: 20px; /* DD FO box height */ padding: 0px 0px; width: 100px; } /* DD box width */ /* IE right most menu box dropdown/flyout */ .menu ul li a:hover ul.main6DD li a, .menu ul li a:hover ul.main6FO li a, { width: 100px; /* IE DD FO box */ background: gray; /* DD FO non-hover IE */ color: white; } /* DD FO non-hover IE */ /* right most menu box dropdown */ .menu ul li:hover ul.main6DD { left: 0px;} /* FF DD move right left */ .menu ul li a:hover ul.main6DD { left: 0px;} /* IE DD move right left */ /* right most menu box flyout */ .menu ul li:hover ul li:hover ul.main6FO { left: -102px;} /* FF FO move right left */ .menu ul li a:hover ul li a:hover ul.main6FO { left: -102px;} /* IE FO move right left */ .menu ul li:hover ul.main6DD li a:hover { background: red; /* DD FO hover FF */ color: white;} /* DD FO hover FF */ /* ==== END NAVBAR OPTIONAL CSS CODE ==== */ Key: Do not add to CSS --------------------------------------- Abreviations: | DD = Dropdown used above | FO = Flyout in comments | IE = Internet Explorer | FF = Firefox Return to Menu Tutor Click Here

Menu Tutor CSS

Return to Menu Tutor Click Here ************* ...

Updated: Feb 05, 2007 4:48pm CST

Links journal style

My Links Page text text text text text text ...

Updated: Dec 10, 2006 11:24am CST