October 24th, 2012AWM: How to set the width of the menu when it has image
Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.
Initial Email From: Paul
Initial Email Subject: Setting width of sliding menu
Support Case Month: April 2012
Sorry for really basic question but just changed the image on a menu item and the width of the whole menu has increased.
Image width is 168px and should be the widest item, can not see that I have introduced any margins or padding anywhere and can't find anywhere to set width other than min width that doesn't help!
MTIA
Paul
Reply From: Likno Customer Support
Dear Paul,
The extra width of the menu is due to the space reserved for the “hasSubmenu” image:
You can remove this if you want:
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From: Paul
Hi Kostas
Many thanks for that
Obvious next question can the "hasSubmenu" be included without adding width - it would be good to set a width or max width for dropdown sliding menus as their width is often an important design and layout consideration
Thanks again
Paul
Reply From: Likno Customer Support
Dear Paul,
I am afraid that it is not possible to add “hasSubmenu” images without affecting the menu width.
Still, your image does not really have to be part of the menu… Why don’t you just add it directly beneath the menu? This way you can also keep your “HasSubmenu” images.
To do this properly you need to:
1) Change this line:
<td id="awmAnchor-BraidsVert" style="width: 163px; height: 470px;" class="style1" > </td>
Into this:
<td style="width: 163px; height: 470px;" class="style1" >
<div id="awmAnchor-BraidsVert"> </div>
<a href="/ContactUs.asp">
<img src=" http://www.braidhillsgolf.co.uk/awmdata/BraidsVert/ContactusLate2.jpg"/>
</a>
</td>
Obviously you can move the image file somewhere else and change the img “src” accordingly
2) Make sure that the menu has the desired width:
3) Make sure that the menu will push/pull its positioning element (hence the extra <div> in the HTML code above):
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Tags: code, css menu, design, div, drop-down menu, html, image, javascript menu, jquery, layout, margin, Menu, padding, sliding menu, style+, td, website, width