SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do popups/dropdowns in double column?

    Hi - on this page, if you click on the dropdown at the top headed "Books" you'll see the books are in 2 columns:

    http://www.rawpower.com/cgi-bin/index.cgi

    Is there a way to do this 2-col for my pop-ups on this page, scroll down to "Fun to Read" -

    http://www.greensmoothie.com/1gs/blend/green.html

    I would like two options:

    (1) a popup that pops across into a second column, like I have already for "Recipes" under that "Fun to Read"

    (2) a popup that pops up into 2 columns like the one under "Books" at rawpower.com

    rawpower is using tables but ideally I'd like it in the css if possible.

    thank you! - Val

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Val,

    Your pop ups have more levels that the example you showed above. If you hover on recipes then that popup menu has another popup menu. How would that fit into your double column scenario?

    It's quite easy to turn the popup into two columns or more as you would need to use nested lists in the popup and float them across but that would complicate the issue where you have further nested flyouts.

    Dropdown/up menus are useful where you have a lot of products on offer but more often than not they are a bit of a hindrance and perhaps a sub page with listed items would be more relevant and easier for the user.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - thanks for the link! I'd like the option of both (1) 3-levels as in recipes and (2) 2-columns as in your link. So I can choose whether a popup displays in 3 levels or in 2 columns so different links will display differently! But at this time I think I'll leave it till later.

    You recall this script you wrote for the pop-ups:

    <!--js 4 dropup btmnav IE6 + b4-->
    <!--[if lt IE 7]>
    <script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("footernav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" over";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" over\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->

    When trying to load a page in IETester v.6, I get the message that there's a script error in that line "getElementById".

    A while ago in the css I renamed #footernav to #btmnav, and the popups are now in "#btmnav .navbox"

    In your js, I tried changing "footernav" first to "btmnav" then to "navbox" but IETester still complains about that line and so the popups still don't work

    Do you know how the line "getElementById" should be now, to match #btmnav .navbox?

    thank you! - Val

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    When trying to load a page in IETester v.6, I get the message that there's a script error in that line "getElementById".
    You will get an error message if the ID referenced in the JS is missing in the html.

    If you have changed the ID in the html then change this line in the js:

    Code:
    var sfEls =  document.getElementById("footernav").getElementsByTagName("LI");
    It will work if all you have done is change the ID only:

    Code:
        var sfEls = document.getElementById("btmnav").getElementsByTagName("LI");

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - that's so weird,

    >In your js, I tried changing "footernav" first to "btmnav"

    but IE Tester still complained. Now I changed it again and this time it works! After checking first that btmnav was in the html which it was.

    I think you waved a magic wand at my laptop and all the twinkly sparkles mesmerized IETester into humble submission...

    thanks! - Val

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Could have been a cache issue

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - Is there any possibility you may have time one day to switch my single-column popups to multiple column dropdowns? I really love your horizontal dropdown link.

    The problem with single-column is that the column often extends beyond the window.

    The problem with popups is that readers have to scroll UP if the links extend beyond window, whereas with dropdowns they scroll down. The popups were my idea and I thought it was creative at the time, but now I see it's counter-intuitive because readers expect to scroll down.

    I'm looking at your css but don't know how to begin to apply it to my #btmnav and .navbox. If you're able to change page.css then I'll be able to change the styles.css on my wordpress pages.

    I don't need the further nested flyouts on Recipes, instead I'll switch them to horizontal columns headed protein/carbs/fat/etc. This is better because then reader can see all available recipes at once.

    It's the bottom navbox headed "Fun to Read" at:

    http://www.greensmoothie.com/test/blend/choc.php

    There's no rush, whenever you're feeling bored and want to play It's gonna take me 6 weeks to convert all the old <table>s pages to receive a header + footer-navs.

    thank you for your kind help, I'm sure there must be a country + western song, "I'm lost without you" - Val

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Val,

    This is bit rough and ready but I think its what you were asking.

    The html needs 2 classes added like so:

    Code:
    <div class="navbox rc20 clearfix navdrop">
        <div class="navimg clear"><img src="../imgpg/icdocs24.gif" alt="article icon" title="Go to Index for All Info" width="24px" height="24px" /> </div>
        <h3>Fun to Read : <span>Hover Here to Learn a Lot...</span></h3>
        <ul>
            <li><a href="../eat/rawfood.html">Eating Raw</a><span>|</span>
                <ul>
                    <li><a href="../eat/">testing 1</a></li>
                    <li><a href="../eat/">testing 2nd link</a></li>
                    <li><a href="../eat/">test 3</a></li>
                </ul>
            </li>
            <li><a href="../eat/recipes.html">Recipes</a><span>|</span>
                <ul class="row">
                    <li><a href="../eat/recipes.html#"><strong> Plant Fats</strong></a>
                        <ul>
                            <li><a href="../eat/recipes.html#">Nut + Seed Yogurts</a></li>
                            <li><a href="../eat/recipes.html#">Nut + Seed Milks</a></li>
                            <li><a href="../eat/recipes.html#">Nut Butters</a></li>
                            <li><a href="../eat/recipes.html#">Cashew Date Crunch</a></li>
                            <li><a href="../eat/recipes.html#">Hot Nachos Chips</a></li>
                            <li><a href="../eat/recipes.html#">Chocolate Recipes </a></li>
                        </ul>
                    </li>
                    <li><a href="#"><strong>Carbohydrates</strong> </a>
                        <ul>
                            <li><a href="#">Animal Companions</a></li>
                            <li><a href="#">How to Sprout + Grind Wheat</a></li>
                            <li><a href="#">Pie Crust + homemade SOD</a></li>
                            <li><a href="#">Sprouted Pasta Snacks</a></li>
                            <li><a href="#">Spicy Sprouted Muffins</a></li>
                            <li><a href="#">Fat-Free Desserts</a></li>
                            <li><a href="#">Carrot Cake Crackers</a></li>
                            <li><a href="#">Ginger Oat Cookies</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><strong>Proteins</strong></a>
                        <ul>
                            <li><a href="#">My High-Nutrient Blend</a></li>
                            <li><a href="#">Quinoa Crunch</a></li>
                            <li><a href="#">Pizza Crackers</a></li>
                            <li><a href="#">Energy Soup</a></li>
                            <li><a href="#">Green Smoothies</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="../index.html">Sprouting</a><span>|</span>
                <ul>
                    <li><a href="../commercial.html">Commercial Sprouters</a></li>
                    <li><a href="../picwater.html">Deciding on Water Source</a></li>
                    <li><a href="../picgreens.html">Photos Baby Greens</a></li>
                    <li><a href="../picwheatgr.html">Photos Wheatgrass</a></li>
                    <li><a href="../pickit.html">Photos Mist Kits</a></li>
                    <li><a href="../vitem-spr.html">Photos Sprouters</a></li>
                    <li><a href="../juice.html">How much Wheatgrass Juice?</a></li>
                    <li><a href="../faq.html">Sprouter FAQs</a></li>
                    <li><a href="../best.html">Get Sprouter, Kit or Plans?</a></li>
                    <li><a href="../pickit.html#mainlist">Compare Sprouters + Mist Kits</a></li>
                    <li><a href="../compare.html">Compare Automatic Sprouters</a></li>
                    <li><a href="../feedback.html">Feedback from Sprouter Users</a></li>
                    <li><a href="../index.html">Why Sprouting Is Essential</a></li>
                </ul>
            </li>
            <li><a href="../blend/index.html">Blending</a><span>|</span>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
            <li><a href="../juice/index.html">Juicing</a><span>|</span>
                <ul>
                    <li><a href="../juice/">testing 1</a></li>
                    <li><a href="../juice/">testing 2nd link</a></li>
                    <li><a href="../juice/">test 3</a></li>
                </ul>
            </li>
            <li><a href="../juice/dhd/index.html">Dehydrating</a><span>|</span>
                <ul>
                    <li><a href="../juice/dhd/">testing 1</a></li>
                    <li><a href="../juice/dhd/">testing 2nd link</a></li>
                    <li><a href="../juice/dhd/">test 3</a></li>
                </ul>
            </li>
            <li><a href="../water/index.html">Alkaline Water</a>
                <ul>
                    <li><a href="../water/need.html">When Not to Buy Ionizer</a></li>
                    <li><a href="../water/food2.html">How ATP Is Made</a></li>
                    <li><a href="../water/food.html">Oxidizing Food</a></li>
                    <li><a href="../water/osteo.html">Stop Osteoporosis</a></li>
                    <li><a href="../water/heart.html#immune">Strong Immune System</a></li>
                    <li><a href="../water/heart.html#cancer">Prevent Cancer</a></li>
                    <li><a href="../water/heart.html">Reduce High Blood Pressure</a></li>
                    <li><a href="../water/reverse.html#loseweight">Lose Weight</a></li>
                    <li><a href="../water/reverse.html">Reverse Aging</a></li>
                    <li><a href="../water/specs.html#coral">Benefits of Coral Calcium</a></li>
                    <li><a href="../water/works.html">How Ionizers Work</a></li>
                    <li><a href="../water/acid.html">Acid Water</a></li>
                    <li><a href="../water/specs.html">Ionizer Specs</a></li>
                    <li><a href="../water/fir.html">Far Infrared Energy</a></li>
                    <li><a href="../water/specs2.html">Melody + Microlite</a></li>
                    <li><a href="../water/compare.html">Compare Jupiter with Others</a></li>
                    <li><a href="../water/specs3.html">Compare Jupiter Models</a></li>
                    <li><a href="../water/filter.html">Filter Specs</a></li>
                    <li><a href="../water/pray.html">Prayer Re-Energizes Water</a></li>
                    <li><a href="../water/alkaline2.html">How to Quench Free Radicals</a></li>
                    <li><a href="../water/alkaline.html">Why Drink Alkaline Water</a></li>
                    <li><a href="../water/index.html">Benefits of Ionizing Your Water</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="navbox rc20 clearfix">
    The css is quite revised so I am posting the whole of your page.css as it was copied from your site but with my changes added.

    Code:
    /*--LINKS--*/
    a {
        font: 1.1em Arial, sans-serif
    }
    a:link {
        color: blue;
        text-decoration:underline
    }
    a:visited, a:active {
        color: #f00251;
        text-decoration:underline
    }
    a:hover {
        background: white;
        color: red;
        text-decoration:none
    }
    a img {
        border:none;
        text-decoration:none
    }
    /*--BODY--*/
    body {/*here in body .88 reduces all child font-sizes, in main.php it's in p not body*/
        font: 0.88em "Lucida Sans Unicode", Verdana, sans-serif;
        color:black;
        line-height:1.5;
        background:#e5ffbf;
        margin:2.5% auto;
    }
    #wrapper {
        width:97%; /*Do NOT increase to 98%, wrecks tag in ie6*/
        min-width:770px; /*Reducing this width will cause floats to fall @ min-width: Do Not Disturb*/
        max-width:1150px;
        margin:0 auto;
    }
    table {
        text-align:left
    }
    .tweet {
        width:200px;
        height:63px;
        margin:0 auto;
        text-align:center;
    }
    .clear {
        clear:both
    }
    .clearfix:after { /*used to contain floats within a parent, 
                if parent is floated then clearfix not needed because floats enclose their floated children*/
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /*mac hide \*/
    * html .clearfix {
        height:1%;
    }
    .clearfix {
        display:block;
    }
    /*End hide*/
    /*--FONTS + SPACING--*/
    em, i, cite {
        font-family: "Lucida Sans", Verdana, sans-serif
    }
    blockquote {
        font-family: "Lucida Sans", Verdana, sans-serif;
        font-style: italic
    }
    h1 {
        padding:40px 0 40px;
        margin:0;
        font:bold 2.3em Helvetica, sans-serif;
        color:#f00251;
        text-align: center;
    }
    h2 {
        font: bold 1.5em Helvetica, sans-serif;
        color: #f00251;
        text-align: center;
        line-height: 1.3;
        display: inline;
    }
    h2.lft {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #f00251;
        text-align: left;
        line-height: 1.3
    }
    .cnt {
        text-align:center
    }
    .prgt10 {
        padding-right:10px
    } /*head*/
    /*--ROUNDCORNERS--*/
    .rc15 { /*ebk*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -op-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
    }
    .rc20 { /*endnav*/
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -op-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-radius: 20px;
    }
    /*--HEAD--
        --CAREFUL in head floats - enlarging widths/margins/padding may cause floats to fall - check in 800x600--*/
    #head {
        width:100%;
        margin-bottom:15px; /*keep MB here*/
    }
    .toprgt {
        float:right;
        display:inline; /*for ie6*/
        margin-right:15px;
    }
    /*--GOOGLE--*/
    .se-btm {
        margin:0;
        padding:0
    }
    /*zoom:1 in google but omit 'cause wrecks ie6*/
    .se-btm:after {
        clear:both;
        content: ".";
        display:block;
        height:0;
        visibility:hidden;
    }
    .se-txt {
        font:10px Arial;
        color:green
    }
    .se-form form {
        margin-bottom:0;
        padding-bottom:0
    }
    /*google img at bottom*/
    .se-btm .se-logo, .se-btm .se-txt {
        float:left;
        display:block
    }
    .se-btm .se-form {
        margin-bottom:3px;
    }
    .se-btm .se-logo {
        padding:0
    }
    .se-btm .se-txt {
        padding-top:4px
    }
    /*--END GOOGLE--*/
    .logosm {
        float:left;
        display:inline;
        margin: 0 10px 0 5px;
    }
    .logo {
    }
    .ebk {
        clear:left;
        float:left;
        background: #f2ffdf;
        display:inline;
        width:322px;
        margin:18px 0 0 20px; /*MB in hdr*/
        padding-bottom:5px;
    }
    .ebk h2 {
        display:block;
        padding:0; /*keep*/
        margin: 5px 0;
        font: bold 1.3em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    .ebk p {
        padding: 0 6px 6px;
        margin: 3px 0;
        font: 1em Arial, sans-serif;
        color: green;
        text-align:left;
    }
    .ebk .recip {
        float:left;
        display:inline;
        margin:10px 15px 10px 10px;
    }
    form {
        margin:0
    }
    .ebk .submit {
        width:170px
    }
    .red2 {
        color:#f00251
    }
    .tel {
        clear:right;
        float:right;
        display:inline;
        width:250px;
        margin:20px 50px 10px 0;
    }
    .tel h3 {
        padding:0;
        font: bold 1.3em Georgia, serif;
        color:green;
        text-align:center;
        line-height: 1.3;
    }
    .tel a:link, .tel a:visited, .tel a:active {
        font: bold 0.95em Georgia, serif;
        color:green;
        text-decoration: none
    }
    /*--TXTNAV--*/
    #txtnav {
        background: #f2ffdf;
        zoom:1.0;
        padding:10px 5px 15px 10px;
        margin: 0 50px;
    }
    .buynow {
        float: right;
        padding: 0 20px 10px 10px; /*positions img*/
    }
    #txtnav h3 {
        font: bold 1.4em "Comic Sans MS", sans-serif;
        color: #a1b37f;
        text-align: center;
        padding:8px 0 0 30px;
        margin:-2px 0 8px;
    }
    #txtnav ul { /* position of links within box */
        padding: 0 35px;
        list-style: none;
        margin:0;
    }
    #txtnav li {
        display: inline;
        position: relative;
        font: 0.85em Arial, sans-serif;
        line-height: 1.9em;
    }
    #txtnav li span {
        position: relative;
        color: green;
        font-size: 1em;
        padding: 0 3px 0 6px; /*gives space each side of pipe*/
        top: -2px;
    }
    #txtnav li a:link {
        color: blue;
        text-decoration: none
    }
    #txtnav li a:visited, #txtnav li a:active {
        color: #f00251;
        text-decoration: none
    }
    #txtnav li a:hover {
        background: white;
        color: red;
        text-decoration: none
    }
    /*--BTMNAV--*/
    #btmnav {
        clear:both; /*leafbtm-lft/rgt*/
        width:100%;
        zoom:1.0;
    }
    .ebk-sm {
        width:500px;
        text-align:center;
        margin:5px auto 40px;
    }
    .ebk-sm form {
        text-align:center;
        margin-top:10px
    }/*submit width 4 IE6/7 does not work here*/
    #btmnav h2 { /*for ebk*/
        padding-bottom: 10px;
        font: bold 1.3em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    #btmnav h3 { /*for navs*/
        font:bold 1.35em "Comic Sans MS", sans-serif;
        color: #a1b37f;
        padding:8px 0 0 30px;
        margin: -2px 0 11px;
    }
    #btmnav h3 span {
        font:bold 0.8em Arial, sans-serif;
        color:green;
    }
    #btmnav h3 a {
        font:0.7em Arial
    }
    #btmnav h3 a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav h3 a:visited, #btmnav h3 a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav h3 a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    #btmnav ul { /*position of links within boxes*/
        padding:0 30px;
        list-style:none;
        margin:0;
        zoom:1.0;
    }
    #btmnav li {
        float:left; /*don't clear in .shop*/
        display:inline;
        position:relative;
        font: 0.85em Arial, sans-serif;
        line-height: 1.9em;
    }
    #btmnav li a {
        white-space:nowrap
    }
    #btmnav li span {
        position:relative;
        padding:0 6px; /*gives space each side of pipe*/
        top: -2px;
        font-size:0.9em;
        color:green;
    }
    #btmnav a {
        font-weight:normal
    }
    #btmnav a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav a:visited, #btmnav a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    .navimg {
        width:24px;
        height:24px;
        float:left
    }
    .navbox, .truebox {
        background:#f2ffdf;
        zoom:1.0;
        padding:10px 30px 15px 10px;
        margin:0 120px; /*width of text within box*/
        margin-bottom:20px !important;
    }
    .truebox p {
        padding: 0 10px;
        font: 1em "Trebuchet MS", sans-serif;
        color: #f00251;
    }
    .truebox blockquote {
        padding:0
    }
    .truebox blockquote p {
        padding:0;
        font:italic 0.9em Georgia, serif;
        color:#2e2eff;
        line-height:1.8;
    }
    /*--DROPUPS - code from Paul @ http://www.pmob.co.uk
    --below shows 2nd + 3rd levels when hover over artnav links (1st level)*/
    #btmnav .navbox ul li:hover ul, #btmnav .navbox ul li.over ul {
        left:0
    }
    /*now target 3rd level + hide it
    #btmnav .navbox ul li:hover ul ul,
    #btmnav .navbox ul li.over ul ul {left:-99em}
    */
    /*now target 3rd level + reveal it
    #btmnav .navbox ul li li:hover ul,
    #btmnav .navbox ul li li.over ul {left:0}
    */    
    
    /*above shows on top of 2nd level, so now shift 3rd to lft or rgt by menu width 197+little extra*/
    /*#btmnav .navbox ul ul ul {margin-left:-207px; bottom:0}*/
        /*above shifts 3rd level to lft of 2nd and - #artnav ul ul ul {margin-left:207px; bottom:0} - shifts it to rgt*/
    #btmnav .navdrop {
        position:relative;
        z-index:999
    }
    #btmnav .navbox ul ul {
        background:white;
        position:absolute;
        top:1.6em; /*not too far away or you lose focus*/
        left:-999em;
        padding:0;
        border:1px solid #f00251;
        border-bottom:none;
        text-align:left;
        z-index:99;
    }
    #btmnav .navbox li li {
        clear:left;
        float:left;
        border-bottom:1px solid #f00251;
        font-size:100%;
        padding:0;
    }
    #btmnav .navbox ul li ul.row {
        width:680px;
        background:transparent;
        border:none;
    }
    #btmnav .navbox ul li ul.row li {
        float:left;
        position:static;
        clear:none;
        background:#fff;
        border:1px solid red;
        border:none;
        width:218px;
        padding:0;
        margin:0 0 0 -1px;
    }
    #btmnav .navbox ul li ul.row li li {
        clear:left;
        border:none;
    }
    #btmnav .navbox ul li ul.row li ul {
        position:relative;
        clear:left;
        left:0;
        top:0;
        z-index:99;
        width:auto;
    }
    #btmnav .navbox li li a {
        clear:left;
        float:left;
        position:relative;
        width:207px; /*max menu charactrs 28 for 1-line + matches - .navbox ul ul ul - above*/
        padding:2px 5px; /*2px is height of each line in popup*/
        white-space:normal;
        line-height:normal;
    }
    #btmnav .navbox ul li ul.row li a {
        border:1px solid red;
        margin-bottom:-1px;
    }
    #btmnav .navbox ul li ul.row li strong {
        display:block;
        background:#ccc;
        color:#f00;
        padding:2px;
        text-align:center;
    }
    #btmnav .navbox li li a:hover {
        background:red;
        font-weight:bold;
        color:white
    }
    /*--End DROPUPS--*/
    .f4w-pic {
        width:100%;
        background:#e5ffbf;
        text-align:center
    }
    .f4w-txt {
        width:707px;
        background:white;
        text-align:center;
        padding:15px 10px 5px;
        margin:0 auto
    }
    .f4w-txt a:link {
        color:blue;
        text-decoration:underline !important
    }
    .f4w-txt a:visited, .f4w-txt a:active {
        color:#f00251;
        text-decoration:underline !important
    }
    .f4w-txt a:hover {
        background:#f2ffdf !important;
        color:#f00251 !important;
        text-decoration:none !important
    }
    /*--LOGOBTM--*/
    .logobtm {/*bg url does not work in old non-wp*/
        clear:both; /*navs*/
        width:188px;
        height:75px;
        margin:30px auto;
    }
    /*--NEWBOX--*/
    .newbox {
        background:#f2ffdf;
        zoom:1.0;
        padding:20px 10px 5px;
        margin:0 120px; /*width of text within box*/
    }
    .newbox h2 {
        margin:0 auto;
        padding:0;
        display:block;
        font:bold 1.4em "Comic Sans MS", sans-serif;
        color:#f00251;
        text-align:center;
    }
    .leafend {
        width:300px;
        height:67px;
        margin:30px auto;
    }
    /*--FOOTNAV--*/
    #footnav {
        width:100%;
        zoom:1.0;
    }
    .footlft {
        float:left;
        display:inline;
        width:450px;
        margin:0 0 10px 20px;
    }
    .footlft p {
        margin:0 0 10px
    }
    .btmlft {/*icons*/
        float:left;
        display:inline;
        margin:0 0 30px 15px;
    }
    .fda {
        clear:left
    }
    .fda p {
        font:0.65em Arial, sans-serif;
        color:#666666;
        line-height:1.2
    }
    .footrgt {
        float:right;
        display:inline;
        width:250px;
        margin:0 20px 10px 0;
    }
    .footrgt p {
        margin:0 0 10px
    }
    .send {
        width:100%;
        height:23px;
        text-align:center;
        margin:0 0 25px;
    }
    .copy {
        margin:0 0 10px
    }
    .copy p {
        font:0.8em arial, sans-serif;
        color:green;
        text-align:right
    }
    .last {
        margin:0
    }
    .last p {
        font:0.66em Arial, sans-serif;
        color:#666666;
        text-align:right
    }
    .last a {
        padding:2px
    }
    .last a:link, .last a:visited, .last a:active {
        color:#666666;
        text-decoration:none
    }
    .last a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    You should be able to replace the original file with the code above (but make sure you keep back ups of course).

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - wow that is SO COOL I just watched Men in Black last night and it's like you fly in from another planet! Except you're one of those good aliens with a zapper that dissolves all plastic + oil "spills"...

    I love that the columns don't move so my cursor can cross blank space from "Ginger Oat Cookies" to "Green Smoothies" and the columns hang in there till my cursor arrives.

    Few questions:
    http://www.greensmoothie.com/test/blend/choc.php

    (1) all 3 columns have floated to the left of their headers e.g. "Yogurts" belong under "Plant Fats"

    (2) can the first column be to the left of the bottom 1st level link? so 3 columns will fit over the first and last links in that row.

    I've noticed I must keep those links in one line in 800x600 otherwise it doesn't work properly.

    (3) Since I'm no longer using the nested flyouts, please can you tell me where I delete them in the css? so I don't get confused. I have it saved! e.g. this doesn't seem to apply any more:

    --below shows 2nd + 3rd levels when hover over 1st level*/
    #btmnav .navbox ul li:hover ul,
    #btmnav .navbox ul li.over ul {left:0}
    /*now target 3rd level + hide it*/
    #btmnav .navbox ul li:hover ul ul,
    #btmnav .navbox ul li.over ul ul {left:-99em}
    /*now target 3rd level + reveal it*/
    #btmnav .navbox ul li li:hover ul,
    #btmnav .navbox ul li li.over ul {left:0}
    /*above shows on top of 2nd level, so now shift 3rd to lft or rgt by menu width 197+little extra*/
    #btmnav .navbox ul ul ul {margin-left:-207px; bottom:0}
    /*above shifts 3rd level to lft of 2nd, + mgn-lft:207px shifts it to rgt*/

    Thank you for leaving them as popups (not convert to dropdowns). I realized a reader is scrolling down so they're likely to be at the bottom of their window when they arrive on that line - so no space below for dropdown. Best to keep them as popup.

    thank you! - Val

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Val,

    Actually I changed the drop ups to drown down in the code I gave you above because it looks better. You don't seem to have copied it correctly. (I already commented out the redundant code in the code I gave you.)

    Just copy and replace the whole css with this:
    Code:
    /*--LINKS--*/
    a {
        font: 1.1em Arial, sans-serif
    }
    a:link {
        color: blue;
        text-decoration:underline
    }
    a:visited, a:active {
        color: #f00251;
        text-decoration:underline
    }
    a:hover {
        background: white;
        color: red;
        text-decoration:none
    }
    a img {
        border:none;
        text-decoration:none
    }
    /*--BODY--*/
    body {/*here in body .88 reduces all child font-sizes, in main.php it's in p not body*/
        font: 0.88em "Lucida Sans Unicode", Verdana, sans-serif;
        color:black;
        line-height:1.5;
        background:#e5ffbf;
        margin:2.5% auto;
    }
    #wrapper {
        width:97%; /*Do NOT increase to 98%, wrecks tag in ie6*/
        min-width:770px; /*Reducing this width will cause floats to fall @ min-width: Do Not Disturb*/
        max-width:1150px;
        margin:0 auto;
    }
    table {
        text-align:left
    }
    .tweet {
        width:200px;
        height:63px;
        margin:0 auto;
        text-align:center;
    }
    .clear {
        clear:both
    }
    .clearfix:after { /*used to contain floats within a parent, 
                if parent is floated then clearfix not needed because floats enclose their floated children*/
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /*mac hide \*/
    * html .clearfix {
        height:1%;
    }
    .clearfix {
        display:block;
    }
    /*End hide*/
    /*--FONTS + SPACING--*/
    em, i, cite {
        font-family: "Lucida Sans", Verdana, sans-serif
    }
    blockquote {
        font-family: "Lucida Sans", Verdana, sans-serif;
        font-style: italic
    }
    h1 {
        padding:40px 0 40px;
        margin:0;
        font:bold 2.3em Helvetica, sans-serif;
        color:#f00251;
        text-align: center;
    }
    h2 {
        font: bold 1.5em Helvetica, sans-serif;
        color: #f00251;
        text-align: center;
        line-height: 1.3;
        display: inline;
    }
    h2.lft {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #f00251;
        text-align: left;
        line-height: 1.3
    }
    .cnt {
        text-align:center
    }
    .prgt10 {
        padding-right:10px
    } /*head*/
    /*--ROUNDCORNERS--*/
    .rc15 { /*ebk*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -op-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
    }
    .rc20 { /*endnav*/
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -op-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-radius: 20px;
    }
    /*--HEAD--
        --CAREFUL in head floats - enlarging widths/margins/padding may cause floats to fall - check in 800x600--*/
    #head {
        width:100%;
        margin-bottom:15px; /*keep MB here*/
    }
    .toprgt {
        float:right;
        display:inline; /*for ie6*/
        margin-right:15px;
    }
    /*--GOOGLE--*/
    .se-btm {
        margin:0;
        padding:0
    }
    /*zoom:1 in google but omit 'cause wrecks ie6*/
    .se-btm:after {
        clear:both;
        content: ".";
        display:block;
        height:0;
        visibility:hidden;
    }
    .se-txt {
        font:10px Arial;
        color:green
    }
    .se-form form {
        margin-bottom:0;
        padding-bottom:0
    }
    /*google img at bottom*/
    .se-btm .se-logo, .se-btm .se-txt {
        float:left;
        display:block
    }
    .se-btm .se-form {
        margin-bottom:3px;
    }
    .se-btm .se-logo {
        padding:0
    }
    .se-btm .se-txt {
        padding-top:4px
    }
    /*--END GOOGLE--*/
    .logosm {
        float:left;
        display:inline;
        margin: 0 10px 0 5px;
    }
    .logo {
    }
    .ebk {
        clear:left;
        float:left;
        background: #f2ffdf;
        display:inline;
        width:322px;
        margin:18px 0 0 20px; /*MB in hdr*/
        padding-bottom:5px;
    }
    .ebk h2 {
        display:block;
        padding:0; /*keep*/
        margin: 5px 0;
        font: bold 1.3em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    .ebk p {
        padding: 0 6px 6px;
        margin: 3px 0;
        font: 1em Arial, sans-serif;
        color: green;
        text-align:left;
    }
    .ebk .recip {
        float:left;
        display:inline;
        margin:10px 15px 10px 10px;
    }
    form {
        margin:0
    }
    .ebk .submit {
        width:170px
    }
    .red2 {
        color:#f00251
    }
    .tel {
        clear:right;
        float:right;
        display:inline;
        width:250px;
        margin:20px 50px 10px 0;
    }
    .tel h3 {
        padding:0;
        font: bold 1.3em Georgia, serif;
        color:green;
        text-align:center;
        line-height: 1.3;
    }
    .tel a:link, .tel a:visited, .tel a:active {
        font: bold 0.95em Georgia, serif;
        color:green;
        text-decoration: none
    }
    /*--TXTNAV--*/
    #txtnav {
        background: #f2ffdf;
        zoom:1.0;
        padding:10px 5px 15px 10px;
        margin: 0 50px;
    }
    .buynow {
        float: right;
        padding: 0 20px 10px 10px; /*positions img*/
    }
    #txtnav h3 {
        font: bold 1.4em "Comic Sans MS", sans-serif;
        color: #a1b37f;
        text-align: center;
        padding:8px 0 0 30px;
        margin:-2px 0 8px;
    }
    #txtnav ul { /* position of links within box */
        padding: 0 35px;
        list-style: none;
        margin:0;
    }
    #txtnav li {
        display: inline;
        position: relative;
        font: 0.85em Arial, sans-serif;
        line-height: 1.9em;
    }
    #txtnav li span {
        position: relative;
        color: green;
        font-size: 1em;
        padding: 0 3px 0 6px; /*gives space each side of pipe*/
        top: -2px;
    }
    #txtnav li a:link {
        color: blue;
        text-decoration: none
    }
    #txtnav li a:visited, #txtnav li a:active {
        color: #f00251;
        text-decoration: none
    }
    #txtnav li a:hover {
        background: white;
        color: red;
        text-decoration: none
    }
    /*--BTMNAV--*/
    #btmnav {
        clear:both; /*leafbtm-lft/rgt*/
        width:100%;
        zoom:1.0;
    }
    .ebk-sm {
        width:500px;
        text-align:center;
        margin:5px auto 40px;
    }
    .ebk-sm form {
        text-align:center;
        margin-top:10px
    }/*submit width 4 IE6/7 does not work here*/
    #btmnav h2 { /*for ebk*/
        padding-bottom: 10px;
        font: bold 1.3em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    #btmnav h3 { /*for navs*/
        font:bold 1.35em "Comic Sans MS", sans-serif;
        color: #a1b37f;
        padding:8px 0 0 30px;
        margin: -2px 0 11px;
    }
    #btmnav h3 span {
        font:bold 0.8em Arial, sans-serif;
        color:green;
    }
    #btmnav h3 a {
        font:0.7em Arial
    }
    #btmnav h3 a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav h3 a:visited, #btmnav h3 a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav h3 a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    #btmnav ul { /*position of links within boxes*/
        padding:0 30px;
        list-style:none;
        margin:0;
        zoom:1.0;
    }
    #btmnav li {
        float:left; /*don't clear in .shop*/
        display:inline;
        position:relative;
        font: 0.85em Arial, sans-serif;
        line-height: 1.9em;
    }
    #btmnav li a {
        white-space:nowrap
    }
    #btmnav li span {
        position:relative;
        padding:0 6px; /*gives space each side of pipe*/
        top: -2px;
        font-size:0.9em;
        color:green;
    }
    #btmnav a {
        font-weight:normal
    }
    #btmnav a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav a:visited, #btmnav a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    .navimg {
        width:24px;
        height:24px;
        float:left
    }
    .navbox, .truebox {
        background:#f2ffdf;
        zoom:1.0;
        padding:10px 30px 15px 10px;
        margin:0 120px; /*width of text within box*/
        margin-bottom:20px !important;
    }
    .truebox p {
        padding: 0 10px;
        font: 1em "Trebuchet MS", sans-serif;
        color: #f00251;
    }
    .truebox blockquote {
        padding:0
    }
    .truebox blockquote p {
        padding:0;
        font:italic 0.9em Georgia, serif;
        color:#2e2eff;
        line-height:1.8;
    }
    /*--DROPUPS - code from Paul @ http://www.pmob.co.uk
    --below shows 2nd + 3rd levels when hover over artnav links (1st level)*/
    #btmnav .navbox ul li:hover ul, #btmnav .navbox ul li.over ul {
        left:0
    }
    /*now target 3rd level + hide it
    #btmnav .navbox ul li:hover ul ul,
    #btmnav .navbox ul li.over ul ul {left:-99em}
    */
    /*now target 3rd level + reveal it
    #btmnav .navbox ul li li:hover ul,
    #btmnav .navbox ul li li.over ul {left:0}
    */    
    
    /*above shows on top of 2nd level, so now shift 3rd to lft or rgt by menu width 197+little extra*/
    /*#btmnav .navbox ul ul ul {margin-left:-207px; bottom:0}*/
        /*above shifts 3rd level to lft of 2nd and - #artnav ul ul ul {margin-left:207px; bottom:0} - shifts it to rgt*/
    #btmnav .navdrop {
        position:relative;
        z-index:999
    }
    #btmnav .navbox ul ul {
        background:white;
        position:absolute;
        top:1.6em; /*not too far away or you lose focus*/
        left:-999em;
        padding:0;
        border:1px solid #f00251;
        border-bottom:none;
        text-align:left;
        z-index:99;
    }
    #btmnav .navbox li li {
        clear:left;
        float:left;
        border-bottom:1px solid #f00251;
        font-size:100%;
        padding:0;
    }
    #btmnav .navbox ul li ul.row {
        width:680px;
        background:transparent;
        border:none;
    }
    #btmnav .navbox ul li ul.row li {
        float:left;
        position:static;
        clear:none;
        background:#fff;
        border:1px solid red;
        border:none;
        width:218px;
        padding:0;
        margin:0 0 0 -1px;
    }
    #btmnav .navbox ul li ul.row li li {
        clear:left;
        border:none;
    }
    #btmnav .navbox ul li ul.row li ul {
        position:relative;
        clear:left;
        left:0;
        top:0;
        z-index:99;
        width:auto;
    }
    #btmnav .navbox li li a {
        clear:left;
        float:left;
        position:relative;
        width:207px; /*max menu charactrs 28 for 1-line + matches - .navbox ul ul ul - above*/
        padding:2px 5px; /*2px is height of each line in popup*/
        white-space:normal;
        line-height:normal;
    }
    #btmnav .navbox ul li ul.row li a {
        border:1px solid red;
        margin-bottom:-1px;
    }
    #btmnav .navbox ul li ul.row li strong {
        display:block;
        background:#ccc;
        color:#f00;
        padding:2px;
        text-align:center;
    }
    #btmnav .navbox li li a:hover {
        background:red;
        font-weight:bold;
        color:white
    }
    /*--End DROPUPS--*/
    .f4w-pic {
        width:100%;
        background:#e5ffbf;
        text-align:center
    }
    .f4w-txt {
        width:707px;
        background:white;
        text-align:center;
        padding:15px 10px 5px;
        margin:0 auto
    }
    .f4w-txt a:link {
        color:blue;
        text-decoration:underline !important
    }
    .f4w-txt a:visited, .f4w-txt a:active {
        color:#f00251;
        text-decoration:underline !important
    }
    .f4w-txt a:hover {
        background:#f2ffdf !important;
        color:#f00251 !important;
        text-decoration:none !important
    }
    /*--LOGOBTM--*/
    .logobtm {/*bg url does not work in old non-wp*/
        clear:both; /*navs*/
        width:188px;
        height:75px;
        margin:30px auto;
    }
    /*--NEWBOX--*/
    .newbox {
        background:#f2ffdf;
        zoom:1.0;
        padding:20px 10px 5px;
        margin:0 120px; /*width of text within box*/
    }
    .newbox h2 {
        margin:0 auto;
        padding:0;
        display:block;
        font:bold 1.4em "Comic Sans MS", sans-serif;
        color:#f00251;
        text-align:center;
    }
    .leafend {
        width:300px;
        height:67px;
        margin:30px auto;
    }
    /*--FOOTNAV--*/
    #footnav {
        width:100%;
        zoom:1.0;
    }
    .footlft {
        float:left;
        display:inline;
        width:450px;
        margin:0 0 10px 20px;
    }
    .footlft p {
        margin:0 0 10px
    }
    .btmlft {/*icons*/
        float:left;
        display:inline;
        margin:0 0 30px 15px;
    }
    .fda {
        clear:left
    }
    .fda p {
        font:0.65em Arial, sans-serif;
        color:#666666;
        line-height:1.2
    }
    .footrgt {
        float:right;
        display:inline;
        width:250px;
        margin:0 20px 10px 0;
    }
    .footrgt p {
        margin:0 0 10px
    }
    .send {
        width:100%;
        height:23px;
        text-align:center;
        margin:0 0 25px;
    }
    .copy {
        margin:0 0 10px
    }
    .copy p {
        font:0.8em arial, sans-serif;
        color:green;
        text-align:right
    }
    .last {
        margin:0
    }
    .last p {
        font:0.66em Arial, sans-serif;
        color:#666666;
        text-align:right
    }
    .last a {
        padding:2px
    }
    .last a:link, .last a:visited, .last a:active {
        color:#666666;
        text-decoration:none
    }
    .last a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    It should then look like the attachment.
    Attached Images Attached Images

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - my apologies, I don't know how I managed to mangle what I copied

    (1) Is there a reason why there's a spare 26px in 680px wide with ea column 218px? I tried to reduce column-width to 180px (from 218) in:

    #btmnav .navbox ul li ul.row li {

    then tried changing 680 to 566px (180x3+26) in:
    #btmnav .navbox ul li ul.row {

    and also tried changing 207px to 180px in
    #btmnav .navbox li li a {

    but whatever I try isn't working!

    Please can you change those three figures - 680px, 218px and 207px - so the columns are narrower, say about 180px each?

    (2) Is there a way for the middle column to fall roughly directly under the 1st-level link so that the last link on right - Water - will display all 3 columns inside the window? I added 3 columns of links to water so you can see what I mean.

    thank you for your kind help - Val

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I've reduced it a bit but if you reduce it any more then the text will run to 2 lines on some entries. As it is you are making the text bold on hover which will make some lines move to 2 lines when hovered anyway which isnt very nice.

    Either remove the bold on hover or widen the menu items a bit more.
    Code:
    #btmnav .navbox ul li ul.row {
        width:611px;
        background:transparent;
        border:none;
    }
    #btmnav .navbox ul li ul.row li {
        float:left;
        position:static;
        clear:none;
        background:white;
        border:none;
        width:195px;
        padding:0;
        margin:0 0 0 -1px;
    }
    #btmnav .navbox ul li ul.row li li {clear:left; border:none}
    #btmnav .navbox ul li ul.row li ul {
        position:relative;
        clear:left;
        left:0;
        top:0;
        z-index:99;
        width:auto;
    }
    #btmnav .navbox li li a {
        clear:left;
        float:left;
        position:relative;
        width:187px; /*max menu charactrs 28 for 1-line*/
        padding:2px 2px 2px 5px; /*2px is height of each line in popup*/
        white-space:normal;
        line-height:normal;
    }
    This is my last post before I go on holiday - back in about 10 days.

  13. #13
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - hope you're enjoying a lovely holiday! It's always tough to get started again when we get back from a break

    When you return.. I realized what I really need is not to reduce the column widths (for the reasons you give) but rather to have it display the same as your link to horizontal dropdowns, in your May 22 post above. So the last link on right drops down to the left, ditto first link on left displays to the right.

    if that requires the same number of 1st-level links as dropdown columns (you have 4 1st-level + 4 columns whereas I have 7 1st-level + 3 columns. I don't know if your 4-match is intentional - the only way the css will work - or accidental) then maybe I can add a navbox and move some links into the next box?

    thanks! - Val

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - I'd also like to clear that border on the top row of dropdowns please - e.g. you can see it under "Water" and apply it only when there's a <strong> link in that row, e.g. as under "Recipes." Perhaps if it's easier, just move it to the html?

    e.g. <strong class="red2bord">

    or is it <a class="red2bord" href="..."><strong>

    .red2bord {border:1px solid #f00251}

    I tried playing with the css but needless to say... (I haven't learnt Klingon yet)

    thanks! - Val

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Val,

    Just back from holiday today so if you are still having problems then post the details here again and I'll take a look when I can.

  16. #16
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - thanks, no rush! I can wait while you catch up on your critical work first. It'll take me months to sandwich every old file into the new header + footer! So it's months before btmnav goes live

    For my pop-ups on this page, scroll down to "Fun to Read" -

    http://www.greensmoothie.com/test/blend/1mst.php

    you switched it to multiple dropdown columns for me (search Paul in the css). Now I need:

    (1) the dropdown columns to look the same as yours at:

    http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm

    So all dropdown columns fit within a specific holding box size. You'll see that my dropdowns under "Water" extend outside of window on right.

    if that requires the same number of 1st-level links as dropdown columns (you have 4 1st-level + 4 columns whereas I have 7 1st-level + 3 columns. I don't know if your 4-match is intentional - the only way the css will work - or accidental) then maybe I can add a navbox and move some links into the next box?

    (2) Also need to clear that border on the top row of my current dropdowns, e.g. you can see it under "Eating Raw." I'd like to apply it only when there's a <strong> link in that row, e.g. as under "Recipes." Perhaps just move it to the html?

    e.g. <strong class="red2bord">text</strong>

    or is it <a class="red2bord" href="..."><strong>text</strong></a>

    .red2bord {border:1px solid #f00251}

    thank you! - Val

  17. #17
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - do you perhaps have time for this now?

    Basically I'd like 3 drop-down columns (under each 1st level link) that drop down the same way as your drop-downs (but keeping my width for each column)

    AND with the option to have a sub-header at the top of each of the 3 columns by using <strong> with css applying to strong.

    thanks million - Val

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Val,

    If I understand you correctly you want a dropdown like this that has 3 columns for each sub menu and always starts at the left?

    What will you do for the entry like "sprouting" where you only have three links. Do you want three columns but only one link in each column or do you want them in one column but starting at the left?

    For the menu to work easily there needs to be some uniformity otherwise we will be coding exceptions all the time and in a dropdown that gets awkward.

  19. #19
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul -

    >3 columns for each sub menu and always starts at the left

    Yes that's right

    >the entry like "sprouting" where you only have three links

    Actually they all have tons of links, with more added all the time. I just haven't added them yet. Those 3 links are just test links from your original code.

    So there's no exceptions EXCEPT -

    "Recipes" needs a sub-header (the 1st row) on each of the 3 columns and I'd like to apply this sub-header in the html, by using <strong>.

    Currently the css is causing the first row in all sub-headers to display differently, whereas I need that 1st row to display the same as all the other rows in dropdown (as in your example) and *only* display differently if I write <strong> in the html.

    thank you! - Val

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Val,

    I had to change the structure of the nav and used an h4 heading instead of the strong element to give you your headings. The h4 sits above the nested ul and if it's not needed you just use the nested list structure for the links as shown in the other menus.

    The list now looks like this:

    Code:
    <h3>Fun to Read : <span>Hover Here to Learn a Lot...</span></h3>
    <ul>
        <li><a href="../eat/index.html">Eating Raw</a><span>|</span>
            <ul class="row">
                <li>
                    <ul>
                        <li><a href="../water/benefits.php">Benefits of Ionizing Your Water</a></li>
                        <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                        <li><a href="../water/alkaline2.php">How to Quench Free Radicals</a></li>
                        <!--            <li><a href="../water/pray.html">Prayer Re-Energizes Water</a></li>-->
                        <li><a href="../water/filter.php">Filter Specs</a></li>
                        <!--            <li><a href="../water/need.html">When Not to Buy Ionizer</a></li>-->
                        <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                        <li><a href="../water/specs.php">Melody + Orion</a></li>
                        <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                        <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                        <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                        <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                        <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                        <li><a href="../water/reverse.php">Reverse Aging</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                        <li><a href="../water/specs.php#coral">Benefits of Coral Calcium</a></li>
                        <li><a href="../water/works.php">How Ionizers Work</a></li>
                        <li><a href="../water/acid.php">Acid Water</a></li>
                        <li><a href="../water/food.php">Oxidizing Food</a></li>
                        <li><a href="../water/food2.php">How ATP Is Made</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../eat/recipes.html">Recipes</a><span>|</span>
            <ul class="row">
                <li>
                    <h4><a href="../eat/recipes.html#">Plant Fats</a></h4>
                    <ul>
                        <li><a href="../eat/recipes.html#">Nut + Seed Yogurts</a></li>
                        <li><a href="../eat/recipes.html#">Nut + Seed Milks</a></li>
                        <li><a href="../eat/recipes.html#">Nut Butters</a></li>
                        <li><a href="../eat/recipes.html#">Cashew Date Crunch</a></li>
                        <li><a href="../eat/recipes.html#">Hot Nachos Chips</a></li>
                        <li><a href="../eat/recipes.html#">Chocolate Recipes </a></li>
                    </ul>
                </li>
                <li>
                    <h4><a href="#">Carbohydrates</a></h4>
                    <ul>
                        <li><a href="#">Animal Companions</a></li>
                        <li><a href="#">How to Sprout + Grind Wheat</a></li>
                        <li><a href="#">Pie Crust + homemade SOD</a></li>
                        <li><a href="#">Sprouted Pasta Snacks</a></li>
                        <li><a href="#">Spicy Sprouted Muffins</a></li>
                        <li><a href="#">Fat-Free Desserts</a></li>
                        <li><a href="#">Carrot Cake Crackers</a></li>
                        <li><a href="#">Ginger Oat Cookies</a></li>
                    </ul>
                </li>
                <li>
                    <h4><a href="#">Proteins</a></h4>
                    <ul>
                        <li><a href="#">My High-Nutrient Blend</a></li>
                        <li><a href="#">Quinoa Crunch</a></li>
                        <li><a href="#">Pizza Crackers</a></li>
                        <li><a href="#">Energy Soup</a></li>
                        <li><a href="#">Green Smoothies</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../index.html">Sprouting</a><span>|</span>
            <ul class="row">
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                        <li><a href="../blend/">test 4</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../blend/index.html">Blending</a><span>|</span>
            <ul class="row">
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                        <li><a href="../blend/">test 4</a></li>
                        <li><a href="../blend/">test 5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../juice/index.html">Juicing</a><span>|</span>
            <ul class="row">
                <li>
                    <ul>
                        <li><a href="../juice/">testing 1</a></li>
                        <li><a href="../juice/">testing 2nd link</a></li>
                        <li><a href="../juice/">test 3</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../juice/dhd/index.html">Dehydrating</a><span>|</span>
            <ul class="row">
                <li>
                    <ul>
                        <li><a href="../juice/dhd/">testing 1</a></li>
                        <li><a href="../juice/dhd/">testing 2nd link</a></li>
                        <li><a href="../juice/dhd/">test 3</a></li>
                        <li><a href="../blend/">test 4</a></li>
                        <li><a href="../blend/">test 5</a></li>
                        <li><a href="../blend/">test 6</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../blend/">testing 1</a></li>
                        <li><a href="../blend/">testing 2nd link</a></li>
                        <li><a href="../blend/">test 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../water/index.html">Water</a>
            <ul class="row">
                <li>
                    <ul>
                        <li><a href="../water/benefits.php">Benefits of Ionizing Your Water</a></li>
                        <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                        <li><a href="../water/alkaline2.php">How to Quench Free Radicals</a></li>
                        <!--            <li><a href="../water/pray.html">Prayer Re-Energizes Water</a></li>-->
                        <li><a href="../water/filter.php">Filter Specs</a></li>
                        <!--            <li><a href="../water/need.html">When Not to Buy Ionizer</a></li>-->
                        <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                        <li><a href="../water/specs.php">Melody + Orion</a></li>
                        <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                        <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                        <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                        <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                        <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                        <li><a href="../water/reverse.php">Reverse Aging</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                        <li><a href="../water/specs.php#coral">Benefits of Coral Calcium</a></li>
                        <li><a href="../water/works.php">How Ionizers Work</a></li>
                        <li><a href="../water/acid.php">Acid Water</a></li>
                        <li><a href="../water/food.php">Oxidizing Food</a></li>
                        <li><a href="../water/food2.php">How ATP Is Made</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </div>
    <div class="navbox rc20 clearfix">
    The css is changed as follows:

    Code:
    /*--BTMNAV--*/
    #btmnav {
        clear:both; /*leafbtm-lft/rgt*/
        width:100%;
        zoom:1.0;
    }
    .ebk-sm {
        width:500px;
        text-align:center;
        margin:5px auto 40px;
    }
    .ebk-sm form {
        text-align:center;
        margin-top:10px
    }/*submit width 4 IE6/7 does not work here*/
    #btmnav h2 { /*for ebk*/
        padding-bottom: 10px;
        font: bold 1.25em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    #btmnav h3 { /*for navs*/
        font:bold 1.2em "Comic Sans MS", sans-serif;
        color: #a1b37f;
        padding:8px 0 0 30px;
        margin: -2px 0 11px;
    }
    #btmnav h3 span {
        font:bold 0.8em Arial, sans-serif;
        color:green;
    }
    #btmnav h3 a {
        font:0.7em Arial
    }
    #btmnav h3 a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav h3 a:visited, #btmnav h3 a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav h3 a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    #btmnav ul { /*position of links within boxes*/
        padding:0 30px;
        list-style:none;
        margin:0;
        zoom:1.0;
        position:relative;
    }
    #btmnav li {
        float:left; /*don't clear in .shop*/
        display:inline;
        /*position:relative;*/
        font: 0.8em Arial, sans-serif;
        line-height: 1.9em;
    }
    #btmnav li a {
        white-space:nowrap
    }
    #btmnav li span {
        position:relative;
        padding:0 6px; /*gives space each side of pipe*/
        top: -2px;
        font-size:0.9em;
        color:green;
    }
    #btmnav a {
        font-weight:normal
    }
    #btmnav a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav a:visited, #btmnav a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    .navimg {
        width:24px;
        height:24px;
        float:left
    }
    .navbox, .truebox {
        background:#f2ffdf;
        zoom:1.0;
        padding:10px 20px 15px 10px;
        margin:0 120px; /*position of box*/
        margin-bottom:20px !important;
    }
    .truebox p {
        padding:0 10px;
        font:0.9em "Trebuchet MS", sans-serif;
        color: #f00251;
    }
    .truebox blockquote {
        padding:0
    }
    .truebox blockquote p {
        padding:0;
        margin:0 0 10px;
        font:italic 0.8em Georgia, serif;
        color:#2e2eff;
        line-height:1.8;
    }
    /*--DROPDOWNS - code from Paul @ http://www.pmob.co.uk*/
    #btmnav .navbox ul li:hover ul, #btmnav .navbox ul li.over ul {
        left:0
    }
    #btmnav .navdrop {
        position:relative;
        z-index:999
    }
    #btmnav .navbox ul ul {
        background:white;
        position:absolute;
        top:1.6em; /*not too far away or you lose focus*/
        left:-999em;
        padding:0;
        border-bottom:none;
        text-align:left;
        z-index:99;
    }
    #btmnav .navbox li li {
        clear:left;
        float:left;
        font-size:100%;
        padding:0;
        position:static;
    }
    #btmnav .navbox ul li:hover a, #btmnav .navbox ul li.over a {
        background:#e8e8ff;
        color:#f00
    }
    #btmnav .navbox ul li:hover li a, #btmnav .navbox ul li.over li a {
        background:#fff;
        color:blue
    }
    #btmnav .navbox li li a {
        clear:left;
        float:left;
        position:relative;
        width:207px; /*max menu charactrs 28 for 1-line*/
        padding:2px 5px; /*2px is height of each line in popup*/
        white-space:normal;
        line-height:normal;
    }
    #btmnav .navbox li li a:hover {
        background:red!important;
        font-weight:bold;
        color:white!important;
    }
    #btmnav .navbox ul li ul.row {
        width:680px;
        background:#fff;
        border:1px solid #ccc;
        border-top:5px solid #f00;
        border-bottom:5px solid #f00;
        padding:5px 0;
    }
    #btmnav .navbox ul li ul.row li {
        float:left;
        position:static;
        clear:none;
        background:white;
        border:none;
        width:218px;
        padding:0;
        margin:0 0 0 7px;
        display:inline
    }
    #btmnav .navbox ul li ul.row li li {
        margin:0
    }
    #btmnav .navbox ul li h4, #btmnav .navbox ul li h4 a {
        background:#e8e8ff!important;
        color:red;
        text-align:center;
        display:block;
        margin:0;
        font-size:100%;
    }
    #btmnav .navbox ul li h4 a {
        border:1px solid #f00;
        padding:2px 4px
    }
    * html #btmnav .navbox ul h4 a {
        height:1%
    }
    #btmnav .navbox ul li ul.row li li {
        clear:left;
        border:none
    }
    #btmnav .navbox ul li ul.row li ul {
        position:static;
        clear:left;
        left:0;
        top:0;
        z-index:99;
        width:auto;
    }
    You can change the colours to suit and make the minor adjustments you need.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here's the whole page in case I missed any changes.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Raw</title>
    <meta name="Description" content="Raw">
    <meta name="KeyWords" content="raw">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Val Archer">
    <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
    <link rel="stylesheet" type="text/css" href="../1cde/page.css">
    <style>
    /*--RESETS--*/
    img, a img {
        border:none
    } /*images get border by default*/
    /*--BODY--*/
    body {
        background:#e5ffbf;
        margin:2.5&#37; auto
    }
    table {/*here in body .9 reduces all child font-sizes, in main.php it's in p not body*/
        font: 0.95em "Lucida Sans Unicode", Verdana, sans-serif;
        color:black;
        line-height:1.5;
        text-align:left
    }
    #wrapper {
        width:97%; /*Do NOT increase to 98%, wrecks tag in ie6*/
        min-width:770px; /*Reducing this width will cause floats to fall @ min-width: Do Not Disturb*/
        max-width:1150px;
        margin:0 auto;
    }
    a:link {
        color:blue;
        text-decoration:underline
    }
    a:visited, a:active {
        color:#f00251;
        text-decoration:underline
    }
    a:hover {
        background:#f2ffdf;
        color:#f00251;
        text-decoration:none
    }
    .clear {
        clear:both
    }
    .clearfix:after { /*used to contain floats within a parent, 
                if parent is floated then clearfix not needed because floats enclose their floated children*/
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /*mac hide \*/
    * html .clearfix {
        height:1%;
    }
    .clearfix {
        display:block;
    }
    /*End hide*/
    /*--FONTS + SPACING--*/
    em, i, cite {
        font-family: "Lucida Sans", Verdana, sans-serif
    }
    blockquote {
        font-family:"Lucida Sans", Verdana, sans-serif;
        font-style:italic
    }
    h1 {
        padding:40px 7px 40px;
        margin:0;
        font:bold 2.1em Helvetica, sans-serif;
        color:#f00251;
        text-align: center;
    }
    h2 {
        font:bold 1.5em Helvetica, sans-serif;
        color:#f00251;
        text-align:center;
        line-height:1.3;
        display:inline;
    }
    h2.lft {
        font:bold 1.22em Helvetica, sans-serif;
        color:#f00251;
        text-align:left;
        display:block;
    }
    h2.lft.bl {
        font:bold 1.22em Helvetica, sans-serif;
        color:blue;
        text-align:left;
        display:block;
    }
    .bl {
        color:blue
    }
    .red {
        color:red
    }
    .red2 {
        color:#f00251
    }
    .high {
        background:yellow
    }
    .cnt {
        text-align:center
    }
    .prgt10 {
        padding-right:10px
    } /*head*/
    /*--ROUNDCORNERS--*/
    .rc15 { /*ebk*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -op-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
    }
    .rc20 { /*endnav*/
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -op-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-radius: 20px;
    }
    /*--HEAD--
        --CAREFUL in head floats - enlarging widths/margins/padding may cause floats to fall - check in 800x600--*/
    #head {
        width:100%;
        margin-bottom:15px; /*keep MB here*/
    }
    .toprgt {
        float:right;
        display:inline; /*for ie6*/
        margin-right:15px;
    }
    /*--GOOGLE--*/
    .se-btm {
        margin:0;
        padding:0
    }
    /*zoom:1 in google but omit 'cause wrecks ie6*/
    .se-btm:after {
        clear:both;
        content: ".";
        display:block;
        height:0;
        visibility:hidden;
    }
    .se-txt {
        font:10px Arial;
        color:green
    }
    .se-form form {
        margin-bottom:0;
        padding-bottom:0
    }
    /*google img at bottom*/
    .se-btm .se-logo, .se-btm .se-txt {
        float:left;
        display:block
    }
    .se-btm .se-form {
        margin-bottom:3px;
    }
    .se-btm .se-logo {
        padding:0
    }
    .se-btm .se-txt {
        padding-top:4px
    }
    /*--END GOOGLE--*/
    .logosm {
        float:left;
        display:inline;
        margin: 0 10px 0 5px;
    }
    .logo {
    }
    .ebk {
        clear:left;
        float:left;
        background: #f2ffdf;
        display:inline;
        width:322px;
        margin:18px 0 0 20px; /*MB in hdr*/
        padding-bottom:5px;
    }
    .ebk h2 {
        display:block;
        padding:0; /*keep*/
        margin: 5px 0;
        font: bold 1.1em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    .ebk p {
        padding: 0 6px 6px;
        margin: 3px 0;
        font: 0.9em Arial, sans-serif;
        color: green;
        text-align:left;
    }
    .ebk .recip {
        float:left;
        display:inline;
        margin:10px 15px 10px 10px;
    }
    form {
        margin:0
    }
    .ebk .submit {
        width:170px
    }
    .tel {
        clear:right;
        float:right;
        display:inline;
        width:250px;
        margin:20px 50px 10px 0;
    }
    .tel h3 {
        padding:0;
        font: bold 1.2em Georgia, serif;
        color:green;
        text-align:center;
        line-height: 1.3;
    }
    .tel a:link, .tel a:visited, .tel a:active {
        font: bold 0.9em Georgia, serif;
        color:green;
        text-decoration: none
    }
    /*--TOP LEAF--*/
    #leaftop {
        clear:both; /*head floats*/
        padding:0 40px; /*position leaf lft + rgt*/
    }
    .leaftoplft {
        background: url(http://www.greensmoothie.com/test/imgpg/leaftoplft.gif) no-repeat;
        float:left;
    }
    .leaftoprgt {
        background: url(http://www.greensmoothie.com/test/imgpg/leaftoprgt.gif) no-repeat;
        float:right;
    }
    .leaftoplft, .leaftoprgt {
        width:200px;
        height:63px;
        margin:0
    }
    .tweet { /*background:url(imgpg/tweetme.gif) no-repeat 50% 0;*/
        width:200px;
        height:63px;
        margin:0 auto;
        text-align:center;
    }
    /*--BOTTOM LEAF--*/
    #leafup {
        clear:both; /*leftcol + rightcol*/
        position:relative;
        min-height:177px;
        margin:15px 0 10px 0; /* keeps txtnav 15px away */
    }
    * html #leafup {
        height:177px;
    }
    .leafuplft, .leafuprgt {
        position:absolute;
        width:53px;
        height:177px;
        bottom: -10px; /*aligns leaf with mrgn-btm of leafup*/
    }
    .leafuplft {
        left:0;
        background: url(http://www.greensmoothie.com/test/imgpg/leafuplft.gif)
    }
    .leafuprgt {
        right:0;
        background: url(http://www.greensmoothie.com/test/imgpg/leafuprgt.gif)
    }
    #leafbtm {
        height:63px;
        padding:0 40px; /*position images lft + rgt*/
    }
    .leafbtmlft, .leafbtmrgt {
        width:200px;
        height:63px;
        margin:0;
    }
    .leafbtmlft {
        float:left;
        background: url(http://www.greensmoothie.com/test/imgpg/leafbtmlft.gif)
    }
    .leafbtmrgt {
        float:right;
        background: url(http://www.greensmoothie.com/test/imgpg/leafbtmrgt.gif);
        clear:right; /*buynow*/
    }
    .pagetop {
        width:25px;
        height:31px; /*need w+h*/
        padding-top:5px;
        margin:0 auto;
    }
    /*--TXTNAV--*/
    #txtnav {
        background:#f2ffdf;
        zoom:1.0;
        padding:10px 5px 15px 10px;
        margin:0 110px;
    }
    .buynow {
        float:right;
        padding:0 20px 10px 10px; /*positions img*/
    }
    #txtnav h3 {
        font:bold 1.2em "Comic Sans MS", sans-serif;
        color:#a1b37f;
        text-align:center;
        padding:8px 0 0 30px;
        margin: -2px 0 12px;
    }
    #txtnav ul { /*position of links within box*/
        padding:0 35px;
        list-style:none;
        margin:0;
    }
    #txtnav li {
        display:inline;
        position:relative;
        font:0.8em Arial, sans-serif;
        line-height:1.9;
    }
    #txtnav li span {
        position:relative;
        color:green;
        font-size:1em;
        padding:0 3px 0 6px; /*gives space each side of pipe*/
        top: -2px;
    }
    #txtnav li a:link {
        color:blue;
        text-decoration:none
    }
    #txtnav li a:visited, #txtnav li a:active {
        color:#f00251;
        text-decoration:none
    }
    #txtnav li a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    /*--BTMNAV--*/
    #btmnav {
        clear:both; /*leafbtm-lft/rgt*/
        width:100%;
        zoom:1.0;
    }
    .ebk-sm {
        width:500px;
        text-align:center;
        margin:5px auto 40px;
    }
    .ebk-sm form {
        text-align:center;
        margin-top:10px
    }/*submit width 4 IE6/7 does not work here*/
    #btmnav h2 { /*for ebk*/
        padding-bottom: 10px;
        font: bold 1.25em "Comic Sans MS", sans-serif;
        color: #f00251;
        text-align:center;
    }
    #btmnav h3 { /*for navs*/
        font:bold 1.2em "Comic Sans MS", sans-serif;
        color: #a1b37f;
        padding:8px 0 0 30px;
        margin: -2px 0 11px;
    }
    #btmnav h3 span {
        font:bold 0.8em Arial, sans-serif;
        color:green;
    }
    #btmnav h3 a {
        font:0.7em Arial
    }
    #btmnav h3 a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav h3 a:visited, #btmnav h3 a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav h3 a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    #btmnav ul { /*position of links within boxes*/
        padding:0 30px;
        list-style:none;
        margin:0;
        zoom:1.0;
        position:relative;
    }
    #btmnav li {
        float:left; /*don't clear in .shop*/
        display:inline;
        /*position:relative;*/
        font: 0.8em Arial, sans-serif;
        line-height: 1.9em;
    }
    #btmnav li a {
        white-space:nowrap
    }
    #btmnav li span {
        position:relative;
        padding:0 6px; /*gives space each side of pipe*/
        top: -2px;
        font-size:0.9em;
        color:green;
    }
    #btmnav a {
        font-weight:normal
    }
    #btmnav a:link {
        color:blue;
        text-decoration:none
    }
    #btmnav a:visited, #btmnav a:active {
        color:#f00251;
        text-decoration:none
    }
    #btmnav a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    .navimg {
        width:24px;
        height:24px;
        float:left
    }
    .navbox, .truebox {
        background:#f2ffdf;
        zoom:1.0;
        padding:10px 20px 15px 10px;
        margin:0 120px; /*position of box*/
        margin-bottom:20px !important;
    }
    .truebox p {
        padding:0 10px;
        font:0.9em "Trebuchet MS", sans-serif;
        color: #f00251;
    }
    .truebox blockquote {
        padding:0
    }
    .truebox blockquote p {
        padding:0;
        margin:0 0 10px;
        font:italic 0.8em Georgia, serif;
        color:#2e2eff;
        line-height:1.8;
    }
    /*--DROPDOWNS - code from Paul @ http://www.pmob.co.uk*/
    #btmnav .navbox ul li:hover ul, #btmnav .navbox ul li.over ul {
        left:0
    }
    #btmnav .navdrop {
        position:relative;
        z-index:999
    }
    #btmnav .navbox ul ul {
        background:white;
        position:absolute;
        top:1.6em; /*not too far away or you lose focus*/
        left:-999em;
        padding:0;
        border-bottom:none;
        text-align:left;
        z-index:99;
    }
    #btmnav .navbox li li {
        clear:left;
        float:left;
        font-size:100%;
        padding:0;
        position:static;
    }
    #btmnav .navbox ul li:hover a, #btmnav .navbox ul li.over a {
        background:#e8e8ff;
        color:#f00
    }
    #btmnav .navbox ul li:hover li a, #btmnav .navbox ul li.over li a {
        background:#fff;
        color:blue
    }
    #btmnav .navbox li li a {
        clear:left;
        float:left;
        position:relative;
        width:207px; /*max menu charactrs 28 for 1-line*/
        padding:2px 5px; /*2px is height of each line in popup*/
        white-space:normal;
        line-height:normal;
    }
    #btmnav .navbox li li a:hover {
        background:red!important;
        font-weight:bold;
        color:white!important;
    }
    #btmnav .navbox ul li ul.row {
        width:680px;
        background:#fff;
        border:1px solid #ccc;
        border-top:5px solid #f00;
        border-bottom:5px solid #f00;
        padding:5px 0;
    }
    #btmnav .navbox ul li ul.row li {
        float:left;
        position:static;
        clear:none;
        background:white;
        border:none;
        width:218px;
        padding:0;
        margin:0 0 0 7px;
        display:inline
    }
    #btmnav .navbox ul li ul.row li li {
        margin:0
    }
    #btmnav .navbox ul li h4, #btmnav .navbox ul li h4 a {
        background:#e8e8ff!important;
        color:red;
        text-align:center;
        display:block;
        margin:0;
        font-size:100%;
    }
    #btmnav .navbox ul li h4 a {
        border:1px solid #f00;
        padding:2px 4px
    }
    * html #btmnav .navbox ul h4 a {
        height:1%
    }
    #btmnav .navbox ul li ul.row li li {
        clear:left;
        border:none
    }
    #btmnav .navbox ul li ul.row li ul {
        position:static;
        clear:left;
        left:0;
        top:0;
        z-index:99;
        width:auto;
    }
    /*--FOOD4WEALTH--*/
    .f4w-pic {
        width:100%;
        background:#e5ffbf;
        text-align:center
    }
    .f4w-txt {
        width:707px;
        background:white;
        padding:15px 10px 5px;
        margin:0 auto;
        font: 0.9em "Lucida Sans Unicode", Verdana, sans-serif;
        color:black;
        line-height:1.5;
        text-align:center
    }
    .f4w-txt a:link {
        color:blue;
        text-decoration:underline !important
    }
    .f4w-txt a:visited, .f4w-txt a:active {
        color:#f00251;
        text-decoration:underline !important
    }
    .f4w-txt a:hover {
        background:#f2ffdf !important;
        color:#f00251 !important;
        text-decoration:none !important
    }
    /*--LOGOBTM--*/
    .logobtm {
        clear:both; /*navs*/
        background: url(http://www.greensmoothie.com/test/imgpg/logo.gif) no-repeat 50% 0;
        width:100%;
        height:75px;
        margin:30px 0;
    }
    /*--NEWBOX--*/
    .newbox {
        background:#f2ffdf;
        zoom:1.0;
        padding:20px 10px 5px 5px;
        margin:0 100px; /*hcnt of box*/
    }
    .newbox h2 {
        margin:0 auto;
        padding:0;
        display:block;
        font:bold 1.6em "Comic Sans MS", sans-serif;
        color:#f00251;
        text-align:center;
    }
    .newbox table {
        font:0.9em "Lucida Sans Unicode", Verdana, sans-serif;
        line-height:1.5
    }
    /*--LEAFEND--*/
    .leafend {
        clear:both; /*com+newbox*/
        background: url(http://www.greensmoothie.com/test/imgpg/leafend.gif) no-repeat 50% 0;
        width:100%;
        height:67px;
        margin:30px 0 30px;
    }
    /*--FOOTNAV--*/
    #footnav {
        width:100%;
        zoom:1.0;
    }
    .footlft {
        float:left;
        display:inline;
        width:450px;
        margin:0 0 10px 20px;
    }
    .footlft p {
        margin:0 0 10px
    }
    .btmlft {/*icons*/
        float:left;
        display:inline;
        margin:0 0 30px 15px;
    }
    .fda {
        clear:left
    }
    .fda p {
        font:0.59em Arial, sans-serif;
        color:#666666;
        line-height:1.2
    }
    .footrgt {
        float:right;
        display:inline;
        width:250px;
        margin:0 20px 10px 0;
    }
    .footrgt p {
        margin:0 0 10px
    }
    .btmrgt {/*send*/
        float:right;
        display:inline;
        margin:0 0 25px;
        width:100%;
        height:23px;
        text-align:center;
    }
    .last {
        margin:0 0 10px;
        clear:right
    }
    .last .copy {
        font:0.7em arial, sans-serif;
        color:green;
        text-align:right
    }
    .last p {
        font:0.6em Arial, sans-serif;
        color:#666666;
        text-align:right
    }
    .last a {
        padding:2px
    }
    .last a:link, .last a:visited, .last a:active {
        color:#666666;
        text-decoration:none
    }
    .last a:hover {
        background:white;
        color:red;
        text-decoration:none
    }
    /*--*/
    </style>
    <!--js 4 dropup btmnav IE6 + b4-->
    <!--[if lt IE 7]>
    <script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("btmnav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    </head>
    <body>
    <!--CHANGE-->
    <a NAME="blenders"></a>
    <div id="wrapper">
        <div id="head" class="clearfix">
            <div class="logosm"> <img  src="http://www.greensmoothie.com/test/imgpg/logosm.gif" alt="GoGreen  Automatic Sprouters" title="GoGreen Automatic Sprouters" width="133px"  height="51px" /> </div>
            <div class="toprgt prgt10"><a  href="../store/vbasket.php"> <img  src="http://www.greensmoothie.com/test/imgpg/icshop32.gif" alt="View  Cart" title="View Cart" width="32px" height="32px" /></a>  </div>
            <div class="toprgt">
                <!--begin google-->
                <div class="se-btm">
                    <div class="se-form">
                        <form action="http://www.greensmoothie.com/test/google.php" id="cse-search-box">
                            <div>
                                <input type="hidden" name="cx" value="partner-pub-3903628552926468:a7c93isjhhr" />
                                <input type="hidden" name="cof" value="FORID:9" />
                                <input type="hidden" name="ie" value="UTF-8" />
                                <input type="text" name="q" size="20" />
                                <input type="submit" name="sa" value="go" />
                            </div>
                        </form>
                    </div>
                    <!--end se-form-->
                    <div class="se-logo"><img  src="http://www.greensmoothie.com/test/imgpg/google.gif" alt="google  logo" width="56" height="20" /> </div>
                    <div class="se-txt">Search this Site</div>
                </div>
                <!--end se-btm-->
                <!--end google-->
            </div>
            <div class="toprgt"><a href="../"> <img  src="http://www.greensmoothie.com/test/imgpg/ichome24.gif" alt="Site  Home" title="Site Home" width="24" height="24" /></a>  </div>
            <div class="toprgt"><a  href="http://twitter.com/valarcher" target="_blank"> <img  src="http://www.greensmoothie.com/test/imgpg/ictwit24.gif" alt="Val's  Hot Raw Tips on Twitter" title="Val's Hot Raw Tips on Twitter"  width="17" height="22" /></a> </div>
            <div class="ebk rc15">
                <h2>FREE - 100+ RAW Recipes!</h2>
                <div class="recip"> <img  src="http://www.greensmoothie.com/test/imgpg/rec05.jpg" alt="raw  recipes" title="raw recipes" width="100px" height="100px" />  </div>
                <p>Snacks, Main Meals, Salads, Desserts, Drinks,  <span class="red2">Color Photos</span>, Kitchen Tour + 
                    Inspiring <span class="red2">Testimonials!</span></p>
                <form action="http://www.greensmoothie.com/cgi-bin/dada/mail.cgi">
                    <input type="hidden" name="flavor" value="subscribe" />
                    <input type="hidden" name="list" value="health" />
                    <input type="text" name="email" value="enter email--strict privacy" size="24" />
                    <p>
                        <input class="submit" type="submit" name="sub" value="Send my Free eBook =&gt;" />
                    </p>
                </form>
            </div>
            <div class="tel">
                <h3>Get Help!<br />
                    Call 989-689-0005<br />
                    <br />
                    <a href="mailto:help@greensmoothie.com">help@greensmoothie.com</a></h3>
            </div>
        </div>
        <div id="leaftop">
            <div class="leaftoplft"></div>
            <div class="leaftoprgt"></div>
            <div class="tweet">
                <!--&nbsp; does not work-->
                <a target="_blank"  href="http://twitter.com/home?status=wow did u read  http://www.greensmoothie.com/blend/choc.php by @valarcher?"> <img  src="http://www.greensmoothie.com/test/imgpg/tweet.gif" alt="tweet"  title="click to share" width="98px" height="66px" /></a>  </div>
        </div>
        <!--leaftop-->
        <center>
            <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" >
                <tr>
                    <td ALIGN=RIGHT VALIGN=TOP WIDTH="53"  BGCOLOR="#E5FFBF"><img SRC="pg-lft-dwn.gif" height=177  width=53></td>
                    <td VALIGN=TOP BGCOLOR="#FFFFFF"><center>
                            <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="86%" >
                                <tr>
                                    <td><h1>Raw Chocolate Recipes</h1>
                                        One day along the raw food path, you discover demon Chocolate has left
                                        you. Oh Happy Day!
                                        <p>It not longer sits on your left shoulder babbling Dark Thoughts of Gluttony.
                                            It's gone to find a weaker cooked-food shoulder to cry on.
                                        <p>In the late 80's I ate two large slabs of Cadbury's every day when I
                                            sat down to my computer. Today I  can't stand the taste of factory-made chocolate.</td>
                                </tr>
                            </table>
                        </center>
                        <br>
                        &nbsp;
                        <table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=2 WIDTH="100%" >
                            <tr>
                                <td ALIGN=CENTER  BGCOLOR="#FFFFFF"><img SRC="pg-mid-30.gif" height=25  width=30></td>
                                <td ALIGN=CENTER WIDTH="370" HEIGHT="45"  BGCOLOR="#E5FFBF"><h2> Chocolate Falls  Away!</h2></td>
                            </tr>
                        </table>
                        <img SRC="btn-space.gif" height=10 width=10>
                        <center>
                            <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="86%" >
                                <tr>
                                    <td><span style="BACKGROUND-COLOR: #FFFF00"></span> <br>
                                        Susie Miller and Karen Knowledge write in <i>Feel-Good Food</i> (2000):
                                        <blockquote>"We were amazed by our effortless
                                            ability to lose our well-entrenched chocolate addictions, but in time,
                                            after eating a high raw diet, we came to find that it genuinely didn't
                                            taste good any more!"
                                            <p>"After the initial two seconds' taste explosion
                                                we both grew to really dislike the aftertaste of chocolate and how we felt
                                                for hours after eating it." 
                                        </blockquote>
                                        Yeah, right. I thought. That will never happen to me. In the first years
                                        of healing my unbearable tooth-aches (from 1992 to 1995) I ate cashew-date
                                        crunch instead of chocolate (<a href="../dhd/recipes.php">see recipe here</a>).
                                        When the toothaches ended, chocolate crept back in.
                                        <p><span style="BACKGROUND-COLOR: #FFFF00">Up to December 2005, I bought
                                            chocolate every week I went shopping.</span> Over 13 years I'd reached
                                            a steady 95% raw foods, but the other 5% was whatever I felt like. Usually
                                            pizza, chips and chocolate on a Friday evening.
                                        <p>Mainly because I could not bear to spend one minute in a kitchen preparing
                                            anything. You want a break! I never wanted pizza, I just wanted something
                                            tasting good. Where I live at the bottom of Africa, there's no wholefood
                                            take-aways.</td>
                                </tr>
                            </table>
                        </center>
                        <br>
                        &nbsp;</td>
                    <td ALIGN=LEFT VALIGN=TOP WIDTH="53"  BGCOLOR="#E5FFBF"><img SRC="pg-rgt-dwn.gif" height=177  width=53></td>
                </tr>
            </table>
        </center>
        <div id="leafup">
            <div class="leafuplft"></div>
            <div class="leafuprgt"></div>
            <div id="txtnav" class="rc20 clearfix">
                <div class="buynow"> <a  href="../store/vitem-bl.php"><img  src="http://www.greensmoothie.com/test/imgpg/buynow.gif" alt="buy now"  title="Go to Order page for Blenders"
         width="60px" height="61px" /></a> </div>
                <!--end buynow-->
                <h3>Blending Links</h3>
                <ul>
                    <li><a href="../vitem-gde.php">Buy Plans to  build Sprouter</a><span>|</span></li>
                    <li><a href="../vitem-spr.php">Buy GoGreen  Automatic Sprouter</a><span>|</span></li>
                    <li><a href="../vitem-kit.php">Buy Mist Kit  to build Sprouter</a><span>|</span></li>
                    <li><a href="../index.php">Why Sprouting Is Essential</a><span>|</span></li>
                    <li><a href="../feedback.php">Feedback from  Sprouter Users</a><span>|</span></li>
                    <li><a href="../compare.php">Compare All  Automatic Sprouters</a><span>|</span></li>
                    <li><a href="../pickit.php#mainlist">Compare  Sprouters + Mist Kits</a><span>|</span></li>
                    <li><a href="../best.php">Get Sprouter, Kit or Plans?</a><span>|</span></li>
                    <li><a href="../faq.php">Sprouter FAQs</a><span>|</span></li>
                    <li><a href="../juice.php">How much Wheatgrass Juice?</a><span>|</span></li>
                    <li><a href="../vitem-spr.php">Photos Sprouters</a><span>|</span></li>
                    <li><a href="../pickit.php">Photos Mist Kits</a><span>|</span></li>
                    <li><a href="../picwheatgr.php">Photos Wheatgrass</a><span>|</span></li>
                    <li><a href="../picgreens.php">Photos Baby Greens</a><span>|</span></li>
                    <li><a href="../picwater.php">Deciding on  Water Source</a><span>|</span></li>
                    <li><a href="../commercial.php">Commercial Sprouters</a></li>
                </ul>
            </div>
        </div>
        <!--leafup-->
        <div id="leafbtm">
            <div class="leafbtmlft"></div>
            <div class="leafbtmrgt"></div>
            <div class="pagetop">
                <!--CHANGE-->
                <a href="#blenders"> <img  src="http://www.greensmoothie.com/test/imgpg/top.gif" alt="top"  title="Go to top of page" width="25px" height="31px" /></a>  </div>
        </div>
        <!--leafbtm-->
        <div id="btmnav">
            <!--ebk 2 logobtm-->
            <br />
            <div class="ebk-sm">
                <h2>FREE TODAY - RAW RECIPE eBOOK !</h2>
                <form action="http://www.greensmoothie.com/cgi-bin/dada/mail.cgi">
                    <input type="hidden" name="flavor" value="subscribe" />
                    <input type="hidden" name="list" value="health" />
                    <input type="text" name="email" value="enter email--strict privacy" size="24" />
                    <input class="submit" type="submit" name="sub" value="Send my Free eBook =&gt;" />
                </form>
            </div>
            <div class="navbox rc20 clearfix">
                <div class="navimg"><img  src="http://www.greensmoothie.com/test/imgpg/icshop24.gif" alt="shop"  title="shop" width="24px" height="24px" /> </div>
                <h3>Shop Here</h3>
                <ul>
                    <li><a  href="../store/vitem-spr.html">Automatic  Sprouters</a><span>|</span></li>
                    <li><a href="../store/vitem-kit.html">Mist Kits</a><span>|</span></li>
                    <li><a href="../store/vitem-gde.html">Sprouter Plans</a><span>|</span></li>
                    <li><a  href="../store/vitem-xtra.html">Sprouter  Extras</a><span>|</span></li>
                    <li><a  href="../store/vitem-hyd.html">Hydroponic  Units</a><span>|</span></li>
                    <li><a href="../store/vitem-wf.html">Water Ionizers</a><span>|</span></li>
                    <li><a href="../store/vitem-bl.html">Blenders</a><span>|</span></li>
                    <li><a href="../store/vitem-jcr.html">Juicers</a><span>|</span></li>
                    <li><a href="../store/vitem-dhd.html">Dehydrators</a><span>|</span></li>
                    <li><a href="../store/vitem-rav.html">Rave  Diet Book + DVD</a><span>|</span></li>
                    <li><a  href="mailto:help@greensmoothie.com?subject=Please Email Organic Seeds  Price List">Dan's Seeds</a></li>
                </ul>
            </div>
            <div class="navbox rc20 clearfix">
                <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icmagn24.gif" alt="focus"  title="focus" width="24px" height="24px" /> </div>
                <h3>Focus : <span>Begin Living Today the Lowcost Way...</span></h3>
                <ul>
                    <li><a  href="http://www.sprouthouse.com/Organic_Sprouting_Seeds_s/1.htm&amp;Click=6102"  target="_blank">Organic Sprouting  Seeds</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Organic_Sproutng_Seeds_Mixtures_s/24.htm&amp;Click=6102"  target="_blank">Organic Sprouting Seed  Mixes</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Tray_Sprouters_s/2.htm&amp;Click=6102"  target="_blank">Sprout Master Tray  Sprouters</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Jar_Sprouters_s/3.htm&amp;Click=6102"  target="_blank">Easy Sprout  Sprouter</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/category_s/34.htm&amp;Click=6102"  target="_blank">Terra Cotta  Sprouter</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Hemp_Bag_Sprouter_s/4.htm&amp;Click=6102"  target="_blank">Hemp Bag  Sprouter</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/category_s/36.htm&amp;Click=6102"  target="_blank">Organic  Fertilizers</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Wheat_Grass_and_Barley_Grass_Trays_and_Tray_Stands_Shelves_s/20.htm&amp;Click=6102"  target="_blank">Wheatgrass  Trays</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/category_s/30.htm&amp;Click=6102"  target="_blank">Sure To Grow  Mats</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Easy_Green_Automatic_Sprouter_s/5.htm&amp;Click=6102"  target="_blank">EasyGreen Auto  Sprouter</a><span>|</span></li>
                    <li><a  href="http://www.sprouthouse.com/Sprouts_for_Pets_s/7.htm&amp;Click=6102"  target="_blank">Sprouts for Pets</a></li>
                </ul>
            </div>
            <div class="navbox rc20 clearfix navdrop">
                <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icdocs24.gif" alt="article  icon" title="Go to Index for All Info" width="24px" height="24px" />  </div>
                <h3>Fun to Read : <span>Hover Here to Learn a Lot...</span></h3>
                <ul>
                    <li><a href="../eat/index.html">Eating Raw</a><span>|</span>
                        <ul class="row">
                            <li>
                                <ul>
                                    <li><a  href="../water/benefits.php">Benefits of Ionizing Your  Water</a></li>
                                    <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                                    <li><a  href="../water/alkaline2.php">How to Quench Free  Radicals</a></li>
                                    <!--            <li><a  href="../water/pray.html">Prayer Re-Energizes  Water</a></li>-->
                                    <li><a href="../water/filter.php">Filter Specs</a></li>
                                    <!--            <li><a  href="../water/need.html">When Not to Buy  Ionizer</a></li>-->
                                    <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                                    <li><a href="../water/specs.php">Melody + Orion</a></li>
                                    <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                                    <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                                    <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                                    <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                                    <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                                    <li><a href="../water/reverse.php">Reverse Aging</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                                    <li><a  href="../water/specs.php#coral">Benefits of Coral  Calcium</a></li>
                                    <li><a href="../water/works.php">How Ionizers Work</a></li>
                                    <li><a href="../water/acid.php">Acid Water</a></li>
                                    <li><a href="../water/food.php">Oxidizing Food</a></li>
                                    <li><a href="../water/food2.php">How ATP Is Made</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="../eat/recipes.html">Recipes</a><span>|</span>
                        <ul class="row">
                            <li>
                                <h4><a href="../eat/recipes.html#">Plant Fats</a></h4>
                                <ul>
                                    <li><a href="../eat/recipes.html#">Nut + Seed Yogurts</a></li>
                                    <li><a href="../eat/recipes.html#">Nut + Seed Milks</a></li>
                                    <li><a href="../eat/recipes.html#">Nut Butters</a></li>
                                    <li><a href="../eat/recipes.html#">Cashew Date Crunch</a></li>
                                    <li><a href="../eat/recipes.html#">Hot Nachos Chips</a></li>
                                    <li><a href="../eat/recipes.html#">Chocolate Recipes </a></li>
                                </ul>
                            </li>
                            <li>
                                <h4><a href="#">Carbohydrates</a></h4>
                                <ul>
                                    <li><a href="#">Animal Companions</a></li>
                                    <li><a href="#">How to Sprout + Grind Wheat</a></li>
                                    <li><a href="#">Pie Crust + homemade SOD</a></li>
                                    <li><a href="#">Sprouted Pasta Snacks</a></li>
                                    <li><a href="#">Spicy Sprouted Muffins</a></li>
                                    <li><a href="#">Fat-Free Desserts</a></li>
                                    <li><a href="#">Carrot Cake Crackers</a></li>
                                    <li><a href="#">Ginger Oat Cookies</a></li>
                                </ul>
                            </li>
                            <li>
                                <h4><a href="#">Proteins</a></h4>
                                <ul>
                                    <li><a href="#">My High-Nutrient Blend</a></li>
                                    <li><a href="#">Quinoa Crunch</a></li>
                                    <li><a href="#">Pizza Crackers</a></li>
                                    <li><a href="#">Energy Soup</a></li>
                                    <li><a href="#">Green Smoothies</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="../index.html">Sprouting</a><span>|</span>
                        <ul class="row">
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                    <li><a href="../blend/">test 4</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="../blend/index.html">Blending</a><span>|</span>
                        <ul class="row">
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                    <li><a href="../blend/">test 4</a></li>
                                    <li><a href="../blend/">test 5</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="../juice/index.html">Juicing</a><span>|</span>
                        <ul class="row">
                            <li>
                                <ul>
                                    <li><a href="../juice/">testing 1</a></li>
                                    <li><a href="../juice/">testing 2nd link</a></li>
                                    <li><a href="../juice/">test 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="../juice/dhd/index.html">Dehydrating</a><span>|</span>
                        <ul class="row">
                            <li>
                                <ul>
                                    <li><a href="../juice/dhd/">testing 1</a></li>
                                    <li><a href="../juice/dhd/">testing 2nd link</a></li>
                                    <li><a href="../juice/dhd/">test 3</a></li>
                                    <li><a href="../blend/">test 4</a></li>
                                    <li><a href="../blend/">test 5</a></li>
                                    <li><a href="../blend/">test 6</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../blend/">testing 1</a></li>
                                    <li><a href="../blend/">testing 2nd link</a></li>
                                    <li><a href="../blend/">test 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="../water/index.html">Water</a>
                        <ul class="row">
                            <li>
                                <ul>
                                    <li><a  href="../water/benefits.php">Benefits of Ionizing Your  Water</a></li>
                                    <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                                    <li><a  href="../water/alkaline2.php">How to Quench Free  Radicals</a></li>
                                    <!--            <li><a  href="../water/pray.html">Prayer Re-Energizes  Water</a></li>-->
                                    <li><a href="../water/filter.php">Filter Specs</a></li>
                                    <!--            <li><a  href="../water/need.html">When Not to Buy  Ionizer</a></li>-->
                                    <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                                    <li><a href="../water/specs.php">Melody + Orion</a></li>
                                    <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                                    <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                                    <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                                    <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                                    <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                                    <li><a href="../water/reverse.php">Reverse Aging</a></li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                                    <li><a  href="../water/specs.php#coral">Benefits of Coral  Calcium</a></li>
                                    <li><a href="../water/works.php">How Ionizers Work</a></li>
                                    <li><a href="../water/acid.php">Acid Water</a></li>
                                    <li><a href="../water/food.php">Oxidizing Food</a></li>
                                    <li><a href="../water/food2.php">How ATP Is Made</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="navbox rc20 clearfix">
                <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icinfo24.gif" alt="info"  title="info" width="24px" height="24px" /> </div>
                <h3>Info Links</h3>
                <ul>
                    <li><a href="../blend/green.html">Green Smoothies</a><span>|</span></li>
                    <li><a href="../hydro/indoor.html">Hydroponics</a><span>|</span></li>
                    <li><a href="../ebks/loseweight.html">Lose  Weight Easily</a><span>|</span></li>
                    <li><a href="../eat/lifestyle.html">End Cancer</a><span>|</span></li>
                    <li><a href="../eat/teeth.html">Teeth + Gum Care</a><span>|</span></li>
                    <li><a  href="http://www.1shoppingcart.com/app/?af=778047"  target="_blank">Eye  Care</a><span>|</span></li>
                    <li><a  href="http://www.skinsosilky.com/?a_aid=497451e2cb6eb"  target="_blank">Skin  Care</a><span>|</span></li>
                    <li><a href="../links/index.html">Rawfood Sites</a><span>|</span></li>
                    <li><a href="../web/index.html">How to Build + Monetize a Website and Mail List</a></li>
                </ul>
            </div>
            <div class="navbox rc20 clearfix">
                <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icweb24.gif" alt="web icon"  title="Go to Ann Wigmore Home Study Course" width="24px" height="24px"  /> </div>
                <h3>Web Links : <span>If a link does not work,  use Firefox! &ndash;</span> <a  href="http://www.getfirefox.com/"  target="_blank">GetFirefox.com</a></h3>
                <ul>
                    <li><a  href="http://www.1shoppingcart.com/app/?Clk=3184246"  target="_blank">DVDs for Lowfat Raw  Recipes</a><span>|</span></li>
                    <li><a  href="https://www.e-junkie.com/ecom/gb.php?ii=273868&amp;c=ib&amp;aff=77168&amp;cl=52844"  target="ejejcsingle">Raw Savory Veggie  Stews</a><span>|</span></li>
                    <li><a  href="http://www.1shoppingcart.com/app/?af=1059558"  target="_blank">Juice  Feasting</a><span>|</span></li>
                    <li><a  href="http://www.1shoppingcart.com/app/?af=675301"  target="_blank">Reverse  Diabetes</a><span>|</span></li>
                    <li><a  href="https://bewellbuzz.infusionsoft.com/go/launch/gogreen/"  target="_blank">Longevity  Now</a><span>|</span></li>
                    <li><a  href="http://www.1shoppingcart.com/app/?af=945189"  target="_blank">Ann Wigmore Home Study  Course</a><span>|</span></li>
                    <li><a  href="http://click.linksynergy.com/fs-bin/stat?id=OaoirKdJ9Sk&amp;offerid=144043&amp;type=3&amp;subid=0">Eco-Home  + Solar Products</a></li>
                </ul>
            </div>
            <div class="truebox rc20 clearfix">
                <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/iccomp24.gif"  alt="feedback" width="24px" height="24px" /> </div>
                <h3>Sprouter Feedback</h3>
                <p>Rev. George Malkmus of Hallelujah Acres, Shelby, NC, loves his GoGreen Sprouter:</p>
                <blockquote>
                    <p>"Sprouter up and running - HALLELUJAH!</p>
                    <p>Dear Val, the sprouter is fantastic!</p>
                    <p>Just harvested our first 5 trays, one of them  sunflower sprouts, and they all turned out great!</p>
                    <p>Thanks for making it happen! Blessings!"</p>
                </blockquote>
            </div>
            <div class="f4w-pic"> <a  href="http://d4c13dpat5s77oaj7cghdp3m2q.hop.clickbank.net/"  target="_blank"> <img  src="http://www.greensmoothie.com/test/imgpg/food4w.gif" alt="eco-garden  info" width="728px" height="90px" /></a> </div>
            <div class="f4w-txt">
                <p>What's an Eco-Organic Garden? NO Digging ... REPELS Pests ... Virtually NO WEEDS<br />
                    ANY soil, ANY climate ... Fresh ORGANIC Vegetables + Fruit Daily ALL YEAR ...<br />
                    SAFE for You, Safe for Your Family, Safe for our Planet ... Enjoy Permaculture at its Best ...</p>
                <p><a  href="http://d4c13dpat5s77oaj7cghdp3m2q.hop.clickbank.net/"  target="_blank"> Download Your How-To Guide + Videos Here  Today</a></p>
                <p><em>"You can succeed if you know the Power  within you."</em> (Dr Normal Walker in <cite>Become  Younger</cite>)</p>
            </div>
            <div class="logobtm"></div>
        </div>
        <div class="newbox rc20">
            <h2 class="cnt">Web Specials Today !</h2>
            <table BORDER=0 CELLSPACING=0 CELLPADDING=20 COLS=2 WIDTH="100%" >
                <tr>
                    <td ALIGN=CENTER WIDTH="30%"><a  href="http://www.sprouthouse.com/?Click=6102" target="_blank"><img  src="http://www.greensmoothie.com/test/imgnew/sproutmstr.jpg"  alt="Sprout Master" width="100px" height="88px" /></a>  </td>
                    <td><b><a  href="http://www.sprouthouse.com/?Click=6102" target="_blank">FREE  Organic Sprout Seeds!</a></b>
                        <p>Get a Sprout Master ($13.95) or Easy Sprout  Sprouter ($13.50) Today, and you get one lb of organic Sprouting seeds  for Free! &nbsp;<a href="http://www.sprouthouse.com/?Click=6102"  target="_blank">Read more...</a></p></td>
                </tr>
                <tr>
                    <td ALIGN=CENTER WIDTH="30%"><a  href="http://www.rawpower.com/cgi-bin/index.cgi?af=1070&amp;display=single&amp;item_id=0020"  target="_blank"><img  src="http://www.greensmoothie.com/test/imgnew/swing.jpg" alt="Workout  Swing" width="150px" height="128px" /></a> </td>
                    <td><b><a  href="http://www.rawpower.com/cgi-bin/index.cgi?af=1070&amp;display=single&amp;item_id=0020"  target="_blank">30% Discount on Workout Swing!</a></b>
                        <p>Today's price only $139 (other websites  $199). Unique way to stretch + strengthen your muscles, joints and  spine. Safely hang upside down! Get your blood flowing...  &nbsp;<a  href="http://www.rawpower.com/cgi-bin/index.cgi?af=1070&amp;display=single&amp;item_id=0020"  target="_blank">Read more...</a></p></td>
                </tr>
                <tr>
                    <td ALIGN=CENTER WIDTH="30%"><a  href="http://www.1shoppingcart.com/app/?af=1199263&u=http://www.waveshield.com/videos/WakeUpCall/Cell-Phone-Wake-Up-Call.html"><img  src="http://www.greensmoothie.com/test/imgnew/cellph.jpg"  alt="Cellphone Video" width="150px" height="136px" /></a>  </td>
                    <td><b><a  href="http://www.1shoppingcart.com/app/?af=1199263"  target="_blank">Is Your BRAIN Safe?</a></b>
                        <p>Doctors report cell phones are doubling the  risk of malignant brain tumours. This is deadly if you or your children  are hooked on mobile phones (and cordless phones).
                        <p><a  href="http://www.1shoppingcart.com/app/?af=1199263"  target="_blank">Get the best wave shield I know to Protect your  Brain.</a> Proven test results. Buy 3 + Get 1 Free - only $59.85  Today. Protect your family! &nbsp;<a  href="http://www.1shoppingcart.com/app/?af=1199263"  target="_blank">Read more...</a></p></td>
                </tr>
            </table>
        </div>
        <div id="footnav">
            <div class="leafend"></div>
            <div class="footlft">
                <div class="btmlft"><a href="../"> <img  src="http://www.greensmoothie.com/test/imgpg/ichome32.gif" alt="Site  Home" title="Site Home" width="32" height="32" /></a>  </div>
                <div class="btmlft"> <img  src="http://www.greensmoothie.com/test/imgpg/cards.gif" alt="accept  Mastercard, Visa, Amex, Discover, Paypal" title="accept Mastercard,  Visa, Amex, Discover, Paypal" width="256" height="33" /> </div>
                <div class="btmlft"><a  href="../store/vbasket.php"> <img  src="http://www.greensmoothie.com/test/imgpg/icshop32.gif" alt="View  Cart" title="View Cart" width="32px" height="32px" /></a>  </div>
                <div class="fda">
                    <p class="clear">Notes required by US FDA (Food +  Drug Administration) and US FTC (Federal Trade Commission): This website  is for information only. It is not intended to diagnose, treat, cure,  or prevent any specific disease. Its products are for complementing a  healthy lifestyle. Commission is earned on products sold here or linked  to from this site. Feedback on our GoGreen Sprouter reflects typical  results, substantiated by scientific evidence that seeds containing the  germ of life will germinate when given water and light.</p>
                </div>
            </div>
            <div class="footrgt">
                <div class="btmrgt"><a  href="mailto:enter_emails_of_friends_here?subject=greensmoothie.com  -super health + rawfood info"> <img  src="http://www.greensmoothie.com/test/imgpg/sendsite.gif" alt="Email  this site to a Friend" title="Email this site to a Friend" width="118"  height="23" /></a> </div>
                <div class="last">
                    <p class="copy">&copy; copyright 1998-2010, Valerie K. Archer</p>
                    <p>&copy; <a  href="http://twitter.com/valarcher" target="_blank">Theme by Val  Archer</a><br />
                        helped by <a  href="http://www.sitepoint.com/forums/" target="_blank">Sitepoint.com  Forums</a> and <a href="http://www.ivycat.com/"  target="_blank">IvyCat.com</a></p>
                    <!--CHANGE-->
                    <p><a href="#blenders">⇑Top⇑&nbsp;Blending Raw Foods + Best Blender</a></p>
                </div>
                <!--last-->
            </div>
            <!--footrgt-->
        </div>
        <!--footnav-->
    </div>
    <!--wrapper-->
    </body>
    </html>

  22. #22
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - this is lovely thank you! It does the essence of what I need and as you say I can play with colors and borders. It's interesting you decided to leave out the borders, hoping there's no technical reason for that...

    I believe this completes my css! phew, 2 years since July 2008. Thanks million for hanging in there with me

    all the best, Val

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,284
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I just thought the child elements looked neater without borders as you will have uneven looking columns inside otherwise. It's just the way that these mega type menus are usually done.

  24. #24
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it looks lovely thank you! They say happiness is a quality of soul and not an attribute of matter but this material css makes me so happy Everything's working perfectly...

    thank you so much for finalizing it

  25. #25
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - one small problem. I need all the dropdown links to change color when they're active and visited. This is the format:

    #btmnav a {font-weight:normal}
    #btmnav a:link {color:blue; text-decoration:none}
    #btmnav a:visited, #btmnav a:active {color:#f00251; text-decoration:none}
    #btmnav a:hover {background:yellow; color:red; text-decoration:none}

    This works:

    #btmnav .navbox li li a:visited, #btmnav .navbox li li a:active {color:#f00251!important}

    Is that all I need? Can I ignore the other 2 hovers in your dropdown? Or do I also need something like:

    #btmnav .navbox ul li:visited a,
    #btmnav .navbox ul li:active a {color:#f00251}

    #btmnav .navbox ul li:visited li a,
    #btmnav .navbox ul li:active li a {color:#f00251}

    I get confused because those other 2 hovers also have an .over

    thank you! - Val


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •