Trouble With Son Of Suckerfish Menu

[webgyrl]

Hi all!

 

Just working on a site for my Dad and I'm trying to make this a CSS site (my first). OK, so far so good, most of it is working, but I can not for the life of me wrap my brain around these pure CSS drop down menus.

 

I got some code for the "Son of Suckerfish" menu, and tho it works, it looks horrid!

www.htmldog.com/articles/suckerfish/dropdowns/

 

I then tried the code from Dynamic Drive for the Sucker Tree Menu, but it's not working at all and it seems this is a big problem for many users. The menu shows up but it does not drop down.

www.dynamicdrive.com/style/csslibra...orizontal/P170/

 

OK so now I am back to this Son of Suckerfish menu.

 

My issues are that I can't seem to find what bits of code style certain things. I've fiddled around for 5 hours w/o making a whole lot of progress.

 

What I am looking to achieve is a menu that is like this:

www.dynamicdrive.com/style/csslibra...orizontal/P170/

I used this code, but it totally does not work in Firefox or IE. The drop downs don't work

This style is nice also:

demo.rockettheme.com/oct06/

 

I changed some values in the menu and that seems to have given me a margin between the template top and where the menu starts and I want the menu top to be flush with the top of the browser window. I set the margin to 0, but somehow it's being overwritten by some other thing I tweaked in the menu.

 

I'm linking to a zip file of the html file and css in case anyone has a second to look it over.

download.yousendit.com/3540BAEF54ADAEC8

 

I'm sure it's something simple for a more seasoned CSS coder, but it's escaping me!

 

This site is for my Dad and I really want to do a good job for him, so if anyone can help, I'd be much obliged.

 

Thanks!

[TCH-Thomas]

I confess...

 

I haven´t checked out your problem yet, but here is another site with alot of code examples you can use to create different kinds of menus in css.

 

I have tried some but not all and they seems to work.

I think it was TCH-Don that posted this link originally, so all should work.

It would have been another thing if it was posted by Bruce.

[webgyrl]

I confess...

 

I haven´t checked out your problem yet, but here is another site with alot of code examples you can use to create different kinds of menus in css.

 

I have tried some but not all and they seems to work.

I think it was TCH-Don that posted this link originally, so all should work.

It would have been another thing if it was posted by Bruce.

 

 

Thomas!

How are you?!!

 

Thank you for this link. I will check it out tomorrow. My brain is fried from working on this CSS menu all night and I am seeing double! LOL

 

I will report back with my success (hopefully!)

 

Thanks!

[webgyrl]

PS... Poor Bruce! Don't tease him so! LOL

[TCH-Thomas]

Doing fine here in Sweden. Bit chilly, winter will knock on the door any day now.

 

I hope all is well with you and that you do report back to us no matter it is a success or failure post.

[webgyrl]

Doing fine here in Sweden. Bit chilly, winter will knock on the door any day now.

 

I hope all is well with you and that you do report back to us no matter it is a success or failure post.

 

Oh I cheated and I'm looking now. I'm obsessed with solving this! LOL

 

Sorry it's cold again... seems winter came so swiftly this year. Well stay warm by the fire and get out your woolly socks!

 

I will let you know how I make out with the menu!

 

Merci Monsieur!

 

[webgyrl]

Doing fine here in Sweden. Bit chilly, winter will knock on the door any day now.

 

I hope all is well with you and that you do report back to us no matter it is a success or failure post.

 

Ok, well I sort of abandoned Son of Suckerfish for now, as I just don't have the CSS skills yet to style it the way I want. I'm in a bit of a rush to do this as Dad needs things working ASAP. I have to turn this template over to his regular web guy.

 

I did find an acceptable alternative called AnyLink CSS Menu over at Dynamic Drive.

www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

 

It almost does what I want it to!

 

I just have 2 issues:

1.) Some problems styling the top level of navigation links.

2.) An issue with a gradient showing in IE but not in Firefox.

 

I have done a screen capture video with audio so that you may see where my troubles are and hopefully help if you are so inclined as to school me! LOL

 

ht##p://www.nataliebrown.info/screencaps/sbp-menu/sbp-menu.html

Replace pounds with t and t to get URL and view Flash Video.

On that page, I have included a link to the zip file of the entire site, so if you need to see the CSS/HTML etc you can grab them.

 

Thanks so much for any help you can give.

 

If there is a better way to do this, then let me know

 

 

PS Thomas, winter has knocked on our door this week also. Time to get out the hot chocolate!

[webgyrl]

OK I am back again. I was looking at other options after I posted last night, and did find another nice CSS menu with dropdowns that I quite like!

 

So far, it's going pretty well. I am stumbling when it comes to one thing now. There is a gradient that is supposed to go from the bottom of the area that contains the navigation. It's a very small 36px gradient. For some reason, can't get it to sit in the right place. It's sitting inside the nav div, when it should be below. I'm sure it's something completely simple, but I am stumped.

 

So you can see waht I am talkign about, see this link below as I made a screencap video of my issue. On that page is the CSS/HTML... so if anyone has time to look over the files to see where my error is, I'd greatly appreciate it. Or if you want me to post the stuff here, let me know. It's just a bunch of long code and I didn't want to post it direct in the forum to save space.

 

The link to the video is:

h##p://www.mbstia.com/sbp-alt-menu/sbp-alt-menu.html

Please replace the ## with tt

 

Thanks so much... I think I'm almost there!

 

Thanks guys for all the help and suggestions.

[crippen]

Try yelling at it, that usually helps.

[webgyrl]

Try yelling at it, that usually helps.

 

So far I have tried:

Yelling

Feeding the son of suckefish some nice fishy pellets

Playing it some nice music

 

So far it's not cooperating totally with me.

 

Any other fish charming tricks you might know?

[crippen]

Is it positioned relative? If so you * should * be able to do what you want with it...

[webgyrl]

Is it positioned relative? If so you * should * be able to do what you want with it...

 

I'm not even sure. Can I post the CSS for you to look at?

[webgyrl]

Just in case this helps, here is the CSS for just that BG part:

>#bg {
margin: 0px 0 0;
height: 36px !important;
background: url(images/bg.gif) repeat-x !important;
}

 

If you would like me to post the HTML, let me know.

[TCH-Andy]

Hi Nat

 

There are several errors and issues here.

 

For the menu - I'd suggest creating a new class - say topmenu. Then in the code use that class e.g.

>  <a class="topmenu" href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'menu2')">Binding</a>

and then in menu.css create the topmenu class

>.topmenu {
margin-left: 19px;
}

 

In terms of the shift - I think it's mainly because your div's are not balanced correctly. You will also need to define the height for the header class - otherwise the bg header will appear behind it.

 

There are also a couple of other errors, for example you use

>color bold white;

in css whereas you should use

>color white;
font-weight: bold;

 

 

I had a quick play at tchtest.com/nat/

[webgyrl]

Hi Nat

 

There are several errors and issues here.

 

For the menu - I'd suggest creating a new class - say topmenu. Then in the code use that class e.g.

>  <a class="topmenu" href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'menu2')">Binding</a>

and then in menu.css create the topmenu class

>.topmenu {
margin-left: 19px;
}

 

In terms of the shift - I think it's mainly because your div's are not balanced correctly. You will also need to define the height for the header class - otherwise the bg header will appear behind it.

 

There are also a couple of other errors, for example you use

>color bold white;

in css whereas you should use

>color white;
font-weight: bold;

 

 

I had a quick play at tchtest.com/nat/

 

 

Hi Andy!

 

Thank you for this info...

 

I'm wrapping my brain around what you said to see if I make sense of it.

 

I tried to make a nav ID for the menu container, but you are saying that the actual menu should have a different name? Or you are saying that there should be an additional topmenu class? If that is the case, why is the additional class created? To create the space I need?

 

About the unbalanced DIVs... can you explain this to me more. I am confused as to why they are unbalanced. Did I position them wrong?

 

OK on the header. I just need to specify a height? That can be whatever I want?

 

And I get what you are saying by separating out properties. I'm still trying to understand how and when to combine things for shorthand.

 

I'm going to examine your code now. Thank you for the pointers.

 

If I wanted to use that second menu I posted, would I still make the changes you suggested?

 

I'm going to continue working on it tonight.

 

Thank you VERY much for the help!

[TCH-Bruce]

PS... Poor Bruce! Don't tease him so! LOL

 

As for unbalanced DIV's I would assume that he meant they were not nested properly. Run it through a validation site.

[webgyrl]

Hi again Andy,

 

OK I am looking at the code.... let me regurgitate what I think I have learned so far...

 

The .topmenu class and the margin value of 19px is to solve my issue of the squishy menu names. This is now what controlls the spacing between each menu item... is that correct?

 

I see what you mean about the height in the header area now. When I first wrote that up, I thought it would auto adjust to fit the nav, but I see what you mean now by the fact that the bg won't necessarily know where to sit becuase it doesn't have a firm idea of how high the header is.

 

How do I know when and how to combine certain things for shorthand? I will have to find a better guide to CSS shorthand!

 

This has been a great lesson for me. I see there are many small things that I need to pay more attention to!

[webgyrl]

 

As for unbalanced DIV's I would assume that he meant they were not nested properly. Run it through a validation site.

 

Bruce, I'll do that. Nesting is something I was struggling over. Any good tutorials that explain it that you know of?

[TCH-Andy]

Hi Nat,

 

In terms of unbalanced DIV's, yes I was referring to having them incorrectly nested. Personally I indent the code, so that I can see where each one opens, and gets closed again. If you want something to do that for you try a google for 'tidy html' and you'll find a free program for tidying up your source code, including indents. There are several versions online - so you can just cut and paste.

 

The .topmenu class and the margin value of 19px is to solve my issue of the squishy menu names. This is now what controls the spacing between each menu item... is that correct?

Yes that's correct. This was just added as the style for the menu items that are on the 'top' line - and hence only affects them, moving them apart nicely. Sub menus do not have that style, and hence are not indented.

 

I find w3schools.com/css/default.asp a good resource for css. I would also suggest using validator.w3.org to validate your html and jigsaw.w3.org/css-validator/ to validate your css.

[webgyrl]

Hi Andy!

 

I've been working all night here. I had to change colors etc as Dad wanted something 'brighter'...

 

I have now done the sub pages etc. I think this has been a great learning experience... just getting thrown into the proverbial fire. I see now why declaring height and width is so important.

 

Thank you for those links above and the checkers. I'm going to run my code through them when I'm finished tweaking.

 

You've been a huge help to me and I thank you for your explanations and assistance!

 

 

Nat

[webgyrl]

Oooooh! I feel so proud! My other pages validated.

 

I feel so....

 

Well...

 

Validated!

 

LOL

[TCH-Andy]

You're welcome Nat

 

With the checkers, I tend to run it through them before I've finished - especially if I'm having problems, often it will help identify where the problems are likely to be.

[webgyrl]

You're welcome Nat

 

With the checkers, I tend to run it through them before I've finished - especially if I'm having problems, often it will help identify where the problems are likely to be.

 

 

Those are all super tools GuruAndy!

 

I knew about the W3C validators, but to be honest, I've been terrified of using them because of my poor coding skills.

 

Merci!

[TCH-Andy]

Congratulations Not poor coding skills at all - your pages validated, so that's brilliant

 

Many of my pages don't pass first time but I use them as a quick check, because they are far quicker for spotting issues than I am

[webgyrl]

Well I have to say I get a little cross eyed doing all the divs... I can't keep track of them.

 

What is the best style to indent to keep track?

 

This is exciting, learning CSS. It's amazing what can be done.

 

Now if only all the browsers would become compliant and we didn't have to even deal with hacks, that would just be utopia!

[TCH-Thomas]

Now if only all the browsers would become compliant and we didn't have to even deal with hacks, that would just be utopia!

Hopefully it will, but I guess we will have to wait.

 

As for the poor Bruce....

He taught us everything we know about teasing, so he can handle it.

[webgyrl]

As for the poor Bruce....

He taught us everything we know about teasing, so he can handle it.

 

ha ha! He's the tutor of teasing!!

[webgyrl]

Quick question... I'm validating my CSS and it's telling me that I have a value error:

Value Error : font too few values for the property font : small-caps

The CSS is:

>.menu {
position: absolute;
visibility: hidden;
border: 1px solid #B4D77E;
border-bottom-width: 0;
line-height: 18px;
z-index: 100;
width: 205px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: small-caps;
}

 

What more values do I need?

Edited November 7, 2007 by webgyrl

[TCH-Bruce]

Not sure but here is info for font.

[webgyrl]

Not sure but here is info for font.

 

Hmmm, I read the page, but it doesn't really say what the problem is. It's the right property and value, and I wrote the correctly... this is very strange.

I said:

font-variant: small-caps;

 

I can understand if I said font: small-caps; but I definitely said font-variant.

 

Oh well, I'm not gonna freak out over it. It looks like a mistake in the validator, because it's saying: font too few values for the property font : small-caps

 

It's like it's not seeing that I wrote font-variant:

 

Werid!