Photo2dot0 help page [Sitemap] - Digital Grin Photography Forum

codiac2600

Mar-31-2008, 09:45 PM

I'm almost done with my site but have a few items that have not been addressed and I can't find a single thread on how to do them.

One at a time!

My first is to edit the default smugmug sizes and price page. I've seen it done on others pages where they took this: http://www.photo2dot0.com/prints/catalog.mg

and edited it to this: http://www.smugmug.com/prints/catalog2.mg

And there was another one where the page was exactly like the first link I posted, but the prices had been editted. I'd rather just remove the prices and show the sizes I offer.

Help me so I can move on to the next part of my custimization.

Htpp://photo2dot0.com

codiac2600

Apr-01-2008, 06:58 AM

Ok, I figured it out so far, just had to make the page #2, but had a question about it...

Brandolino has a print size page that matches his site because it's in a gallery of his. How do I do that?

Link: http://www.brandolinoimaging.com/gallery/2175653

I'm almost done with my site but have a few items that have not been addressed and I can't find a single thread on how to do them.

One at a time!

My first is to edit the default smugmug sizes and price page. I've seen it done on others pages where they took this: http://www.photo2dot0.com/prints/catalog.mg

and edited it to this: http://www.smugmug.com/prints/catalog2.mg

And there was another one where the page was exactly like the first link I posted, but the prices had been editted. I'd rather just remove the prices and show the sizes I offer.

Help me so I can move on to the next part of my custimization.

Htpp://photo2dot0.com

codiac2600

Apr-01-2008, 12:37 PM

Anybody know how to make a custom price page just like brandolino but with a different style to match carbonite? I'd love the help :)

Ok, I figured it out so far, just had to make the page #2, but had a question about it...

Brandolino has a print size page that matches his site because it's in a gallery of his. How do I do that?

Link: http://www.brandolinoimaging.com/gallery/2175653

denisegoldberg

Apr-01-2008, 04:00 PM

You can do a view source and grab the code from that pricing page, then create your own. Details in this thread - http://www.dgrin.com/showthread.php?t=87467.

--- Denise

codiac2600

Apr-01-2008, 07:47 PM

Man I searched and searched and never found that. Thank you Denise you're always a great help.

I finished working on it and it's perfect. It's all setup and running now! YAY! I can copy lots of pages now and do this which will be tons of fun IMO.

You can do a view source and grab the code from that pricing page, then create your own. Details in this thread - http://www.dgrin.com/showthread.php?t=87467.

--- Denise

codiac2600

Apr-01-2008, 10:13 PM

On to my next area to fix/clean/orranize.

I want a MAP only page.

I know how to create another home page, but it took me a million years to get the CSS right so I could have the three that I have right now and a fourth would probably kill me.

What is the CSS code if I want homepage just my slideshow; gallery to only show my galleries; my find page to have popular, timeline and keyword; then a map page with just the map nothing else.

Might as well make a featured gallery page as well so that code as well. Man that would be like 5 homepages! LOL I'm nuts, but I thank you guys ahead of time cause I know someone will figure it out.

codiac2600

Apr-02-2008, 09:39 PM

Just a friendly bump to see if this could be done and I sat down and tried for a bit, but it was messing up my current code I'm leaving it be till an expert can look at it.

:dunno

On to my next area to fix/clean/orranize.

I want a MAP only page.

I know how to create another home page, but it took me a million years to get the CSS right so I could have the three that I have right now and a fourth would probably kill me.

What is the CSS code if I want homepage just my slideshow; gallery to only show my galleries; my find page to have popular, timeline and keyword; then a map page with just the map nothing else.

Might as well make a featured gallery page as well so that code as well. Man that would be like 5 homepages! LOL I'm nuts, but I thank you guys ahead of time cause I know someone will figure it out.

codiac2600

Apr-03-2008, 11:04 AM

Here is the code I have so far but I can't get the featured stuff to show up on the featured page... any suggestions plus anyone know how to clean this is up if it needs it?

#bioText {display: none;}

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox,
.homepage #datesBox,
.homepage #keywordsBox {display:none;}

.homepage #popularPhotos,
.galleries #popularPhotos {display:none;}

.galleries #bioBox {display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox {display: block;}

.homepage #galleryTitle {display: none;}

.find #datesBox,
.find #popularPhotos,
.find #keywordsBox {display: block;}

.find #bioBox,
.find #categoriesBox,
.find #communitiesBox,
.find #featuredBox,
.find #ffBox,
.find #galleriesBox {display:none;}

.featured #featuredBox {display: block;}

.featured #bioBox,
.featured #categoriesBox,
.featured #communitiesBox,
.featured #ffBox,
.featured #datesBox,
.featured #popularPhotos,
.featured #keywordsBox,
.featured #galleriesBox {display:none;}

Allen

Apr-03-2008, 11:17 AM

Here is the code I have so far but I can't get the featured stuff to show up on the featured page... any suggestions plus anyone know how to clean this is up if it needs it?
... Perhaps if you created another duplicate homepage called featured it would help.:D

<script type="text/javascript">

if (hasPath("galleries"))
YD.addClass(document.body, "galleries");

if (hasPath("find"))
YD.addClass(document.body, "find");

if (hasPath("featured"))
YD.addClass(document.body, "featured");

</script>

codiac2600

Apr-03-2008, 11:55 AM

Dang I missed that step! Thats why we love you so much Allen, you always catch our silly coding mistakes!

Man, I actually feel smart cause the other code really worked! Maybe thats why my map page didn't work... man oh man.

Perhaps if you created another duplicate homepage called featured it would help.:D

<script type="text/javascript">

if (hasPath("galleries"))
YD.addClass(document.body, "galleries");

if (hasPath("find"))
YD.addClass(document.body, "find");

if (hasPath("featured"))
YD.addClass(document.body, "featured");

</script>

codiac2600

Apr-03-2008, 01:54 PM

Hey Allen, I can't get the map page to work because the silly map box won't get off my homepage...

can you check this code over for me?

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox,
.homepage #datesBox,
.homepage #keywordsBox {display:none;}

.homepage #popularPhotos,
.homepage #mapbox {display:none;}
.galleries #popularPhotos {display:none;}

.galleries #bioBox {display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox {display: block;}

.homepage #galleryTitle {display: none;}

.find #datesBox,
.find #popularPhotos,
.find #keywordsBox {display: block;}

.find #bioBox,
.find #categoriesBox,
.find #communitiesBox,
.find #featuredBox,
.find #ffBox,
.find #mapbox,
.find #galleriesBox {display:none;}

.featured #featuredBox {display: block;}

.featured #bioBox,
.featured #categoriesBox,
.featured #communitiesBox,
.featured #ffBox,
.featured #datesBox,
.featured #popularPhotos,
.featured #keywordsBox,
.featured #mapbox,
.featured #galleriesBox {display:none;}

.map #mapbox {display: block;}

.map #featuredBox
.map #bioBox,
.map #categoriesBox,
.map #communitiesBox,
.map #ffBox,
.map #datesBox,
.map #popularPhotos,
.map #keywordsBox,
.map #galleriesBox {display:none;}

Allen

Apr-03-2008, 02:00 PM

Hey Allen, I can't get the map page to work because the silly map box won't get off my homepage...
...
Sure it's not hidden in your control panel? It doesn't show on any page here.

codiac2600

Apr-03-2008, 02:04 PM

I'll put it back on, but it ends up on my homepage as well as the map page. I just want it on the map page which is the problem.

Plus the map looks funny to me... does it look ok to u?

Sure it's not hidden in your control panel? It doesn't show on any page here.

Allen

Apr-03-2008, 02:59 PM

I'll put it back on, but it ends up on my homepage as well as the map page. I just want it on the map page which is the problem.
Plus the map looks funny to me... does it look ok to u?
Try these. One thing that was bad was mapbox sb mapBox. You were also
missing a comma on this, .map #featuredBox, in the last one.

.homepage #popularPhotos,
.homepage #mapBox,
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox,
.homepage #datesBox,
.homepage #keywordsBox {display:none;}

.galleries #mapBox,
.galleries #popularPhotos,
.galleries #bioBox {display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox {display: block;}

.homepage #galleryTitle {display: none;}

.find #datesBox,
.find #popularPhotos,
.find #keywordsBox {display: block;}

.find #bioBox,
.find #categoriesBox,
.find #communitiesBox,
.find #featuredBox,
.find #ffBox,
.find #mapBox,
.find #galleriesBox {display:none;}

.featured #featuredBox {display: block;}

.featured #bioBox,
.featured #categoriesBox,
.featured #communitiesBox,
.featured #ffBox,
.featured #datesBox,
.featured #popularPhotos,
.featured #keywordsBox,
.featured #mapBox,
.featured #galleriesBox {display:none;}

.map #bioBox,
.map #featuredBox,
.map #categoriesBox,
.map #communitiesBox,
.map #ffBox,
.map #datesBox,
.map #popularPhotos,
.map #keywordsBox,
.map #galleriesBox {display:none;}

.map #mapBox {display: block;}

codiac2600

Apr-03-2008, 03:14 PM

That works just fine Allen! I'm still having trouble seeing my map properly but I should check another computer when I get a chance.

codiac2600

Apr-04-2008, 01:50 PM

Hey guys how do I remove the MAP THIS button from just my homepage? Any suggestion?

denisegoldberg

Apr-04-2008, 01:56 PM

Hey guys how do I remove the MAP THIS button from just my homepage? Any suggestion?
Add this to your CSS:

.homepage .map_this {
display: none;
}
--- Denise

codiac2600

Apr-04-2008, 07:09 PM

You know I need to find myself a woman thats as good at wed work as you Denise! You always here to save teh day and the code works perfect.

Thank you and if you know of anyone in the Illinois area like that send'em my way LOL> :rofl

Add this to your CSS:

.homepage .map_this {
display: none;
}
--- Denise

codiac2600

Apr-11-2008, 07:21 AM

I've been updatig my photos and shooting events and models like mad and now it's time to edit the site some more.

I have a question but not sure it's possible to do.

On my homepage http://photo2dot0.com I have the banner at the bottom that says Pentax Photo Gallery. Can I make that not show up on my homepage? I want the homepage looking cleaner is all.

Allen

Apr-11-2008, 07:32 AM

I've been updatig my photos and shooting events and models like mad and now it's time to edit the site some more.

I have a question but not sure it's possible to do.

On my homepage http://photo2dot0.com I have the banner at the bottom that says Pentax Photo Gallery. Can I make that not show up on my homepage? I want the homepage looking cleaner is all.
Put the image/link in a div in your footer.

<div id="ENTAXPhotogallery">
<a href="http://www.pentaxphotogallery.com/chriswarkocki" target="_blank">
<img src="http://www.pentaxphotogallery.com/images/black_link.jpg" alt="See my photos featured in the PENTAX Photogallery"></a>
</div>

.. and add this to your CSS.

.homepage #ENTAXPhotogallery {display: none;}
.galleries #ENTAXPhotogallery {display: block;}

codiac2600

Apr-11-2008, 07:43 AM

Thanks Allen that worked perfectly.

It seems now though that my slideshow doesn't work.

I know my code must have some errors in it somewhere... got any suggestions?

Put the image/link in a div in your footer.

<div id="ENTAXPhotogallery">
<a href="http://www.pentaxphotogallery.com/chriswarkocki" target="_blank">
<img src="http://www.pentaxphotogallery.com/images/black_link.jpg" alt="See my photos featured in the PENTAX Photogallery"></a>
</div>

.. and add this to your CSS.

.homepage #ENTAXPhotogallery {display: none;}
.galleries #ENTAXPhotogallery {display: block;}

Allen

Apr-11-2008, 07:49 AM

Thanks Allen that worked perfectly.

It seems now though that my slideshow doesn't work.

I know my code must have some errors in it somewhere... got any suggestions?
It's working here in Firefox. Did you reload the page to restart the show?

codiac2600

Apr-11-2008, 07:51 AM

I finally got it to run after a few reloads... it seems to happen a lot that the site hangs up.

Is that a problem on my end?

It's working here in Firefox. Did you reload the page to restart the show?

Allen

Apr-11-2008, 08:01 AM

I finally got it to run after a few reloads... it seems to happen a lot that the site hangs up.

Is that a problem on my end?
Occasionally funny things happen, usually deleting cookies fixes it.

codiac2600

Apr-11-2008, 08:38 AM

I seem to have too big a gap from the bottom of my slideshow on the homepage to the email me link...

I'm guessing it has something to do with the code in the slide show. I' not seeing any place to edit the gap though in that code??? Any ideas guys?

Allen

Apr-11-2008, 08:49 AM

I seem to have too big a gap from the bottom of my slideshow on the homepage to the email me link...

I'm guessing it has something to do with the code in the slide show. I' not seeing any place to edit the gap though in that code??? Any ideas guys?
See if this helps. Add to CSS.

#bioBox {margin-bottom: 0px;}

codiac2600

Apr-11-2008, 09:07 AM

Thats much better Allen! It cut the gap in half which is where I wanted it.

Well, time for work tonight I'll see what else needs to be tweaked here and there.

Thanks much Allen!

See if this helps. Add to CSS.

#bioBox {margin-bottom: 0px;}

codiac2600

Apr-17-2008, 10:21 PM

Need to change up my NavBar and I know I'll mess this up so I'm loking for some help.

I want to pull "Portfolio" out of my galleries drop down and make it's own section on the NavBar. I'm thinkin there isn't enough room but would love to hear from an expert.

Allen

Apr-17-2008, 10:43 PM

Need to change up my NavBar and I know I'll mess this up so I'm loking for some help.

I want to pull "Portfolio" out of my galleries drop down and make it's own section on the NavBar. I'm thinkin there isn't enough room but would love to hear from an expert. Looks like it will work ok, not too wide. Replace this section.

<li><a class="drop" href="/galleries">Galleries
</a> 
<ul>
<li><a class="drop" href="/galleries">Professional >
</a> 
<ul>
<li><a class="drop" href="/Model%20Photography">Models >
</a> 
<ul>
<li><a href="/gallery/4739075_V4d7X">Shanon</a></li>
<li><a href="/gallery/4717514_wuCCN">Jen</a></li>
<li><a href="/gallery/4592799_Hac6e">Mandy Lee</a></li>
<li><a href="/gallery/4552283_X7ywy">Anna Wang</a></li>
<li><a href="/Model%20Photography/479338">Kristen</a></li>
<li><a href="/Model%20Photography/479337">Tamara</a></li>
<li><a href="/gallery/4483507_AQfxy">Jasmina</a></li>
<li><a href="/Model%20Photography/479339">Kayla</a></li>
<li><a href="Model%20Photography/479769">Danielle</a></li>
<li><a href="/gallery/3868520_58cHR">Judy</a></li>
<li><a href="/gallery/3858938_Sp43G">Sherese</a></li>
<li><a href="/gallery/3773748_ooU3k">Lauren</a></li>
</ul> 
</li>
<li><a class="drop" href="/Family%20Portraits">Family Portraits >
</a> 
<ul>
<li><a href="/gallery/3996808_Ucbr5">Sartinos</a></li>
<li><a href="/gallery/4145593_iDUQ8">Scordatos</a></li>
</ul> 
</li>
<li><a href="/Weddings">Weddings</a></li>
<li><a class="drop" href="/Events">Events >
</a> 
<ul>
<li><a href="/gallery/4661124_wNtnD">Roller Derby</a></li>
<li><a href="/gallery/4601125_HqDup">Nursing Expo 08</a></li>
<li><a href="/gallery/4523644_ksd5W">St Pats Party</a></li>
<li><a href="/gallery/4480474_oXcNG">Mardi Gras 08</a></li>
<li><a href="/gallery/3753264_4gopX">Halloween 07a</a></li>
<li><a href="/gallery/3727316_5Gphn">Halloween 07b</a></li>
<li><a href="/gallery/3590241_DS5Y3">Mancow</a></li>
</ul> 
</li>

</ul> 
</li>
<li><a class="drop" href="/Nature">Nature >
</a> 
<ul>
<li><a href="/gallery/3643387_TiMiS">Insect Macro</a></li>
<li><a href="/gallery/4180427_2AKhM">Landscape</a></li>
<li><a href="/gallery/4663835_Sa7Ly">Flowers</a></li>
<li><a href="/gallery/3640603_YZRjg">Birds</a></li>
</ul> 
</li>
<li><a href="/Experiments">Experiments</a></li>
<li><a href="/Pets">Pets</a></li>
<li><a href="/gallery/4575562_DzVLg">Videos</a></li>
</ul> 

</li>
<li><a class="drop" href="/Portfolio">Portfolio
</a> 
<ul>
<li><a href="/gallery/3567891_mpKtf">Models</a></li>
<li><a href="/gallery/4744757_UgbFZ">Nature</a></li>
<li><a href="">Events</a></li>
<li><a href="">Weddings</a></li>
</ul> 
</li>

Change the width.

.menu {
position: relative;
display: block;
z-index: 99;
padding: 10px 0px 15px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 760px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

codiac2600

Apr-18-2008, 05:41 AM

It worked, but ended up with the guestbook dropping down to the second line so I put popular into the galleries section.

Now my probelm is in IE... the navbar is completely off and was wondering what to do to fix it? Seems the navbar is thicker too which really sucks.

ANy clue as to the fix?

Looks like it will work ok, not too wide. Replace this section.

<li><a class="drop" href="/galleries">Galleries
</a> 
<ul>
<li><a class="drop" href="/galleries">Professional >
</a> 
<ul>
<li><a class="drop" href="/Model%20Photography">Models >
</a> 
<ul>
<li><a href="/gallery/4739075_V4d7X">Shanon</a></li>
<li><a href="/gallery/4717514_wuCCN">Jen</a></li>
<li><a href="/gallery/4592799_Hac6e">Mandy Lee</a></li>
<li><a href="/gallery/4552283_X7ywy">Anna Wang</a></li>
<li><a href="/Model%20Photography/479338">Kristen</a></li>
<li><a href="/Model%20Photography/479337">Tamara</a></li>
<li><a href="/gallery/4483507_AQfxy">Jasmina</a></li>
<li><a href="/Model%20Photography/479339">Kayla</a></li>
<li><a href="Model%20Photography/479769">Danielle</a></li>
<li><a href="/gallery/3868520_58cHR">Judy</a></li>
<li><a href="/gallery/3858938_Sp43G">Sherese</a></li>
<li><a href="/gallery/3773748_ooU3k">Lauren</a></li>
</ul> 
</li>
<li><a class="drop" href="/Family%20Portraits">Family Portraits >
</a> 
<ul>
<li><a href="/gallery/3996808_Ucbr5">Sartinos</a></li>
<li><a href="/gallery/4145593_iDUQ8">Scordatos</a></li>
</ul> 
</li>
<li><a href="/Weddings">Weddings</a></li>
<li><a class="drop" href="/Events">Events >
</a> 
<ul>
<li><a href="/gallery/4661124_wNtnD">Roller Derby</a></li>
<li><a href="/gallery/4601125_HqDup">Nursing Expo 08</a></li>
<li><a href="/gallery/4523644_ksd5W">St Pats Party</a></li>
<li><a href="/gallery/4480474_oXcNG">Mardi Gras 08</a></li>
<li><a href="/gallery/3753264_4gopX">Halloween 07a</a></li>
<li><a href="/gallery/3727316_5Gphn">Halloween 07b</a></li>
<li><a href="/gallery/3590241_DS5Y3">Mancow</a></li>
</ul> 
</li>

</ul> 
</li>
<li><a class="drop" href="/Nature">Nature >
</a> 
<ul>
<li><a href="/gallery/3643387_TiMiS">Insect Macro</a></li>
<li><a href="/gallery/4180427_2AKhM">Landscape</a></li>
<li><a href="/gallery/4663835_Sa7Ly">Flowers</a></li>
<li><a href="/gallery/3640603_YZRjg">Birds</a></li>
</ul> 
</li>
<li><a href="/Experiments">Experiments</a></li>
<li><a href="/Pets">Pets</a></li>
<li><a href="/gallery/4575562_DzVLg">Videos</a></li>
</ul> 

</li>
<li><a class="drop" href="/Portfolio">Portfolio
</a> 
<ul>
<li><a href="/gallery/3567891_mpKtf">Models</a></li>
<li><a href="/gallery/4744757_UgbFZ">Nature</a></li>
<li><a href="">Events</a></li>
<li><a href="">Weddings</a></li>
</ul> 
</li>

Change the width.

.menu {
position: relative;
display: block;
z-index: 99;
padding: 10px 0px 15px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 760px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

codiac2600

Apr-18-2008, 05:50 AM

I fixed the second row issue in IE, but the boxes are still like 5px too thick IMO.

Also is there a way to widen each box out so it can fill more of the space? just a couple of pixels to each would make me happy I think and if it's not just point me to the code and I'll play for a while :)

Allen

Apr-18-2008, 08:26 AM

I fixed the second row issue in IE, but the boxes are still like 5px too thick IMO.

Also is there a way to widen each box out so it can fill more of the space? just a couple of pixels to each would make me happy I think and if it's not just point me to the code and I'll play for a while :) Play with the red. The right/left padding widdens the cells then re-adjust total width to center.

.menu {
position: relative;
display: block;
z-index: 99;
padding: 5px 0px 10px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 770px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #fff; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 90px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: #000; /* main button color */
padding: 0 7px; /* top/bottom right/left */
line-height: 20px; /* positions text up/down in box */
}

codiac2600

Apr-18-2008, 08:49 AM

Hey Allen, that works fine in FF, but much too long in IE...

Also in IE the boxes are thicker? how do I slim them down to a reasonable size like when I view it in FF?

Allen

Apr-18-2008, 09:00 AM

I fixed the second row issue in IE, but the boxes are still like 5px too thick IMO...
This is tricky, couldn't solve, how about removing the background for the
main buttons so you don't see the box height difference.:D

Played with a bunch of things so rather then trying to show each, here's the
whole nav CSS. Save your current in text file first for background.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 5px 0px 10px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 770px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
_width: 770px; /* IE6 */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #fff; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 90px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* main button color */
padding: 0 7px; /* top/bottom right/left */
_padding: 0 5px; /* IE6 */
line-height: 20px; /* positions text up/down in box */
_line-height: 16px;
}

* html .menu ul li a, .menu ul li a:visited {
width: 100px; w\idth: 100px; /* IE main button */
}

.menu ul li ul {
display: none;}

/* */
/* Specific to Non-IE browsers */
/* */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: none; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 100px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #666; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 100px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 100px; /* FF FO box width */
}

/* */
/* Specific to IE browsers */
/* */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #ccc; /* main hover */
background: none; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #fff; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 100px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #666; /* DD FO hover includes menu 6 */
color: #fff; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 100px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 100px;
w\idth: 100px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 100px; /* unknown */
w\idth: 100px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

codiac2600

Apr-18-2008, 10:42 AM

Works fine in FF, but in IE some of the items don't drop down :(

Thank you for the effort Allen.

This is tricky, couldn't solve, how about removing the background for the
main buttons so you don't see the box height difference.:D

Played with a bunch of things so rather then trying to show each, here's the
whole nav CSS. Save your current in text file first for background.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 5px 0px 10px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 770px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
_width: 770px; /* IE6 */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #fff; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 90px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: none; /* main button color */
padding: 0 7px; /* top/bottom right/left */
_padding: 0 5px; /* IE6 */
line-height: 20px; /* positions text up/down in box */
_line-height: 16px;
}

* html .menu ul li a, .menu ul li a:visited {
width: 100px; w\idth: 100px; /* IE main button */
}

.menu ul li ul {
display: none;}

/* */
/* Specific to Non-IE browsers */
/* */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: none; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 100px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #000; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #666; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 100px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 100px; /* FF FO box width */
}

/* */
/* Specific to IE browsers */
/* */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #ccc; /* main hover */
background: none; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #fff; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 100px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #666; /* DD FO hover includes menu 6 */
color: #fff; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 100px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 100px;
w\idth: 100px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 100px; /* unknown */
w\idth: 100px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

Allen

Apr-18-2008, 11:00 AM

Works fine in FF, but in IE some of the items don't drop down :(

Thank you for the effort Allen.
See if any of this in the IE section helps, still can't get the box heights in IE
consistent. Adjusted the drop and flyout positions.

/* */
/* Specific to IE browsers */
/* */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #fff; /* main hover */
background: #666; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 6px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background: #000; /* IE DD color non-hover */
color: #fff; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0;
width: 100px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #666; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -17px; /* FO up down */
color: #000000; /* unknown */
left: 100px; /* FO right left */
}

codiac2600

Apr-18-2008, 09:16 PM

Thank you for saving the day again Allen!

I'll live with that code because atleast it work and more than 60% of my site viewers use FF anyway and the ones using IE shoudl just switch :rofl

If you ever figure out how to skinny it up in IE let me know and I'll love you even more, which is hard to believe.