CSS Menu will not center - Page 3 -...

User 502526 Photo


Registered User
8 posts

Does anyone know if the width of each menu item (horizontal) can be unique - meaning one length is 165px; and another is 167px;? The CC menu builder outside of the editor allows you to control each menu item's length but I don't see this funtionality in the menu builder built into the HTML Editor. I am 20 px short on the right edge. it looks bad.
User 38401 Photo


Senior Advisor
10,951 posts

I don't see any settings that allow you to set the menu items separately, but maybe the checkbox for "Use fixed width for menu items" would help here? Not sure if that will take care of your problem since I can't see what you're trying to change :P I'm looking now to see if the code would be easily changed or not to accomodate separate widths.
User 38401 Photo


Senior Advisor
10,951 posts

I'm guessing here so don't shoot me lol.

Seems like any changes you need to make to your CSS menu setup you should change within the programs window rather than the HTML/CSS itself, unless you are sure you won't need to make anymore changes in the menu builder, because the menu builder itself won't load the changes you've manually done.

Having said that, I would think you could create separate CSS classes for each of the <li> menu lines so that you could have specific settings for each one that override the defaults. That I would think would be just normal CSS setup for the most part.

I did test the width situation without the Fixed width checkbox turned on and it works pretty good to stretch menu bars for longer names on them so I would think that would take care of it for the most part. As I said though I'm unsure what it is you're trying to achieve so if it's something other than just accommodating longer menu names please let me know. :)
User 476017 Photo


Ambassador
375 posts

Razz wrote:
Does anyone know if the width of each menu item (horizontal) can be unique - meaning one length is 165px; and another is 167px;? The CC menu builder outside of the editor allows you to control each menu item's length but I don't see this funtionality in the menu builder built into the HTML Editor. I am 20 px short on the right edge. it looks bad.


Hi Razz
In the options tab you can uncheck use fix menu item widths. Each menu item width then fits the description length.
You cannot specify the width of each menu item.
Its someting I have requested in future release.
Scott has also mentioned perhaps in another thread some future development work wil be given to the CSS menu.
Dave Butler
Yorkshire
England

Old Rishworthians Rugby Union Football club http://www.orrufc.co.uk
Tuxedo Junction Yorkshire Function Band http://www.riley-tuxedojunction.co.uk
The Commons Guest House http://www.thecommons-guesthouse.co.uk
all created with Coffee Cup html editor
User 502526 Photo


Registered User
8 posts

just for clarification: the width of my page is 1004px wide (the size of my banner). The problem is not the width of each menu item it is that i need the menu to extend to the same size as my banner 1004px. each menu item is set to 164px which ends up being about 20 px too short. if i change them all to 165px the menu is too long and wraps.

someone said it can be done by modifying the menu-menu.css file. from what i can see in the at file there are no separate settings for each item. in the file the menu items are set at the same length (as we know from the builder program).

"Having said that, I would think you could create separate CSS classes for each of the <li> menu lines so that you could have specific settings for each one that override the defaults. That I would think would be just normal CSS setup for the most part."

would i create the separate CSS class in the menu-menu.css file or in the index.html file? can you give me an idea of how this would look? thanks!
User 38401 Photo


Senior Advisor
10,951 posts

you would create them within the menu-menu.css file, keeping in mind of course that you cannot reload it back up in the Menu Builder part of the program after you have edited it as I mentioned above, as all your changes will not be there since they aren't incorporated in the mnu file the program spits out.

you could create classes such as: (rename them to whatever you want them to be called, I called them by menu width ul and menu width li with a number for each item of the menu. Keeping in mind there are 2 different widths involved between the menu and it's submenus.

.menuwidthul1 {
width:100px;
}
.menuwidthli1 {
width:100px;
}


Change the number to whatever number you want and then when you have it just insert the class in your html like so:

<li class="first menuwidthli1"><a href="http://">Untitled1</a></li>
<li class="menuwidthli2"><a href="http://">Untitled2</a></li>

and so on down the line for each different width you need. If you have only a few that need different widths you don't need to make a new class for each one just use the same class on any that are the same width etc.

This is hypothetical lol, I did not test this so dont' shoot me if it needs some adjustments, but it should work :)

P.S. the menuwidthul1 is for if you have submenus, i didn't make one with any but if you have some they will show up in your menu list and you will insert the class the same in them as you do in the <li> parts.
User 502526 Photo


Registered User
8 posts

Thanks very much Jo Ann. I will try it and let you know how it works.
User 122279 Photo


Senior Advisor
14,461 posts

Razz, if you have a menu 20 px shorter than 1004, it is 984, right?
And your menu item width is 164, that means you have 6 menu items, right?

Now, I have experimented with an item width up to 167 px, and I end up with a menu width of 1002. For each px you add to the item width, with 6 menu buttons you will have to add 6 px to the styling of your menu. Maybe you forgot that? See the first line of this code:

<div style="width:1004px; margin:0 auto; background-color:#003366;">
<ul class="menu-menu">
<li class="first"><a href="http://">Untitled1</a></li>
<li><a href="http://">Untitled2</a></li>
<li><a href="http://">Untitled3</a></li>
<li><a href="http://">Untitled4</a></li>
<li><a href="http://">Untitled5</a></li>
<li><a href="http://">Untitled6</a></li>
</ul>
</div>


To make up for the missing 2 px from 1002 to 1004 I have set the same background color for the div as I have for the buttons, and nobody will see that the menu is not the same width as the banner.

BTW, it is full possible to reopen a menu in the menu prog inside HTML Editor. Of course to be able to do that, the menu file, the .mnu, has to be saved.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 38401 Photo


Senior Advisor
10,951 posts

Inger Eik wrote:

BTW, it is full possible to reopen a menu in the menu prog inside HTML Editor. Of course to be able to do that, the menu file, the .mnu, has to be saved.


Hmm when I tried Inger (after I made manual changes to the HTML & CSS is when I'm talking about) it doesn't show me any of the changes, it only shows me what the .mnu file was at the time I saved it. How do you get it to show it as it currently is with all the changes you made outside the builder?
User 122279 Photo


Senior Advisor
14,461 posts

Maybe we are talking at cross purposes. I was thinking of reopening a menu to edit it in the css menu builder, not outside. That is what I'm doing.

If the menu is edited outside the programme, like opening the various files and edit them in Notepad or something, it does nothing to the .mnu file, and that is the one you open within the programme.

It's the same as trying to edit sites made in VSD outside that programme, doesn't work when you reopen the .vnu file.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.