Changing the width of menu made with css menu generator

This is very short tutorial that should help you to customize the width of the css menus generated with my css menu generator tool.

There are 2 hypotheses here: you want to resize the top-menu bar (the always visible menu line) or you want to change the width of the submenu items.

1) Change the width of the menu bar

This one is quite simple — just put your menu in container with specified width, something like that:

Put whatever value you need instead of “100px” in the example above

2) Resize the submenu items

The sub-menu width needs some not so trivial changes in the css.

Look between lines 57-82 of the css file, it should look similar to that:

(the comments are pointing the values to be changed)

Let say you want to give 2 ems more for the submenu width. In such case it must look like that now:

As you see, the easiest way is to add/substract what you need, but keeping the proportion. Still, it’s up to you — I prefer to use “ems” but you can set pixels or points or what best suits your needs.

CSS Menu and !DOCTYPE

From time to time users are asking my why IE7/8/9 doesn’t show the popup menu on hover. And often the reason is bad !DOCTYPE of the html page.

For some reason IE is sensitive to these. For example, IE7 may not support the menu popup feature if your document starts with this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

And if you put the right code everything will start to work:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

In this case IE just wants to see the exact full definition for HTML 4.1 or else it doesn’t render the page as expected.

If there is no !DOCTYPE definition, add it.

If it is not the right one, replace it with the proper version.

Here are the most common:

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Most other modern browsers will be able to work even if the doctype isn’t in it’s full version, but IE is (as always) a special case…

 

css menu 4.1

The new version of css menu generator is now available for download. Free version users will not see most of the changes (because there are no images supported in the free version yet) but there are also some bugfixes in the menu code, so I offer you to download the update. And yes, there will be new version soon (I hope in the next weeks), this time — with new menu options.

css menu

css Menu Generator Version 4.0 is now ready for download…

What’s new?

  • The whole tool completely rewritten (based on TemplateShaker code, it now comes with far better functionality);
  • pull-down menu code rewritten, now the menu supports more sub-levels;
  • Multi-level vertical menu added;
  • Help info added;
  • The long-waited “Save” functionality added
  • Number of changes in the interface
  • Many fixes and improvements

How to update?

Just visit the website and download the new version:http://wonderwebware.com/css-menu/

Centering CSS Menu

I receive this question relatively often: “how to center a menu generated with css menu generator”. Well, here are two examples – one for centering the menu on page and one for centering menu items. For both examples — I am using simple menu saved directly as xhtml file.

A) centering the menu on page

1) Put the menu in new DIV container (in this example – container class=”wrapper”):

<div class=”wrapper“>
<div class=”pd_menu_01 “>
<ul>

</ul>
</div>
</div>

2) in the css section, add this code to center the wrapper div:

.wrapper {
width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}

B) Centering the text of the menu items

To center the text of the menu sub-items, just change the following css code:

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}

to:

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0; text-align:center;}