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
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.
#btmnav .navbox ul li ul.row {
[B] width:611px;[/B]
background:transparent;
border:none;
}
#btmnav .navbox ul li ul.row li {
float:left;
position:static;
clear:none;
background:white;
border:none;
[B] width:195px;[/B]
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;
[B] width:187[/B]px; /*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.
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
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
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
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:
/*--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.
HI Val,
This is bit rough and ready but I think its what you were asking.
The html needs 2 classes added like so:
<div class="navbox rc20 clearfix[B] navdrop[/B]">
<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>
<[B]ul class="row"[/B]>
<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.
/*--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).
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
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
Could have been a cache issue
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:
var sfEls = document.getElementById("[B]footernav[/B]").getElementsByTagName("LI");
It will work if all you have done is change the ID only:
var sfEls = document.getElementById([B]"btmnav[/B]").getElementsByTagName("LI");
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