sucker Tree horizontal menu

[teresamar2]

How do I get the "Home Decor" on the same line of my menu? I want the menu to be 900px, how can I do this? All help is appreciated. Here is the url to my dropdown menu I'm working on.

http://www.ttcollectiblegifts.com/dynamicdrive.html

[tech_support]

Edit this line of code:

width: 110px; /*Width of top level menu link items*/
to whatever width you want.

[Sliight]

I think that will actually work. All of his menu items are short words, and you could cut the width of all of them by 20% which would probably get rid of that extra line that shows up under plush.

[teresamar2]

Thank you. I reduced the width to 100 px, that's the least I could go without having "Home Decor" on 2 lines. The blank space is still underneath "Baby" items. Anymore suggestions?

[Sliight]

I think I figured it out... it works for my testing: I added one extra </ul> at the end, and the extra block below plush disappears... should fix it


<li><a href="#">Plush</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">For Baby</a></li>
<li><a href="http://www.ttcollectiblegifts.com/jellycat.html">Jellycat Truffles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/webkinz.html">Webkinz</a></li>
</ul>
</li>
</ul>


<br style="clear: left;" />
</div>

[teresamar2]

Thank you very much. I knew it had to be something simple.

[Sliight]

One other side note... This is a quote from a post that Veronica helped me out with. The post was from someone else, but her advice totally helped me. I expext to have well over 70 pages on my site, and didn't want to deal with having to change every single page if I made a navigation menu change.

Here is the link to the post: http://www.dynamicdrive.com/forums/showthread.php?t=22838

Here is the main quote that helped me out. Totally saved me, now I have 4 .txt files that I just edit when I need to make a menu change. I only make the .txt file from the first <li> to the last </li> I wanted to leave everything else right in the page. Essentially a browser just pulls the text from the .txt file and places it right in the page where it would actually be. Very cool...


A server side include basically works on the same principle as any external script. That is, you cut the code from your html page, paste in into a separate document, and then link to that document in your html code. So, for example, if you have a div that contains navigation on all your pages, you would simply put all that code into a document, and replace it with a link to that document. That way, when you change the navigation, you only have to change that one document.

You may need to change the extension of your html pages to use server side includes, for example to .shtml or .php If you use .shtml, the code you would use to link to your external includes file would be:
<!--#include virtual="/path_relative_to_site/name_of_file.txt" -->
If the file is in the same directory as the ssi, you use:
<!--#include file="name_of_file.txt" -->

Two sites with more info that are fairly easy to understand are http://www.freewebmasterhelp.com/tutorials/ssi and http://bignosebird.com/ssi.shtml

Best bet is to create a test page and practice with that on your server, before you start to slice and dice your actual files!

**Note: If you use this, your page has to end with .shtml for it to work. Dunno why, it's just what they said... and is true :)