close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

How To Eliminate Gap Between Horizontal Menu Item Boxes

Thread began 6/17/2009 11:40 pm by imthebest381601 | Last modified 6/18/2009 6:15 pm by paputxi | 2854 views | 3 replies |

imthebest381601

How To Eliminate Gap Between Horizontal Menu Item Boxes

I used the CSS Menu Writer wizard to create a multi-level, vertical flyout menu with no problem. I then wanted to change the default width from 150 px to 110 px. So, I reentered the CSS Menu Writer wizard. In the Box tab, I then changed the Dimension Width from 150 px to 110 px under "Dimension, Margin & Padding". After applying the change, I now have what looks like 40 px gap between the boxes containing the menu items relative to the other boxes on the horizontal level. Of course, I want no gap between the boxes in the each row. (The vertical item boxes are still okay.)

Does anyone know how I can correct this problem? Obviously, using CSS Menu Writer is the preferred means of eliminating this gap since this is the tool I used it to create & modify the menu, and I'm trying not having to mess with the CSS or XML code directly (CSS Menu Writer generates several CSS and XML files associated with the generated menu) since using the menu wizard would be the easiest and fastest what of correcting this. However, if CSS or XML code changes are the only way, which CSS or XML related files (and item(s)) do I make the change(s) to?

Thanks in advance.

Sign in to reply to this post

biesheuvel378713

I could not reproduce this error you encountered, i suggest you look in the xml file at this section:

<component name="ul" type="" level="0" childSelector="false">
<css>
<media type="all">
<list-style-type>none</list-style-type>
<margin-top>0</margin-top>
<margin-right>0</margin-right>
<margin-bottom>0</margin-bottom>
<margin-left>0</margin-left>
<padding-top>0</padding-top>
<padding-right>0</padding-right>
<padding-bottom>0</padding-bottom>
<padding-left>0</padding-left>
<cursor>default</cursor>
</media>

This section describes the settings of: <ul class="level-0" id="cssmw"> that can be found in your HTML file

I think it's a problem with the margins and they should be zero in your case. I looked through the code and this is the only place where the class "level-0" is described. (It's probably set dynamicly with Javascript).

I hope this helps.

Sign in to reply to this post

Justin Nemeth

In the produced CSS, you can look for the "left" property. For some reason, that must be incorrect. You likely have a "left: 150px" on the level-1 CSS which can be changed to "left: 110px". Its possible the size might be more than that if you have any borders/margins applied to.

The easiest way for me to see for sure is with an example link I can look at.

Sign in to reply to this post

paputxi

Thanks, Justin and biesheuvel378713. I appreciate your replies.

I figured out a solution using the CSS Menu Writer wizard. I'll give an example below, which hopefully makes sense. Sorry for it being so wordy, but I wanted to make it understandable as possible for others needing a step-by-step process.

For my example, I created a three level, vertical menu where each level was a default value of 100 px width. I then wanted to shorten the Main level width from 100 px to 70 px, enlarge the Level-1 width from 100 px to 150 px, and no change to Level-2 width. (NOTE: I repeat some of the steps below for completeness.)

Bring up the CSS Menu Writer Wizard in the Edit Theme Menu window. Then enter the changes below:

Main level changes:
1) Select Main in Box tab
2) Under Dimensions, Margin & Padding (I'm shortening it's future reference to DM&P), select Item
3) Change Width from 100 px to 70 px
4) Select Apply to see change (i.e., shorter Main level boxes with a gap between Main and Level-1 boxes)

Level-1 changes:
1) Select Level-1 in Box tab
2) Under DM&P, select Item
3) Change Width from 100 px to 150 px
4) Select Group within DM&P
5) [Now for the tricky part] Change Left Margin value to -30 px (negative value to create a negative offset) [Old programing knowledge coming into play.]
6) Select Apply to see change (i.e., gap gone between Main and Level-1 boxes, and Level-1 width now at 150 px, and now an overlap between Level-1 and Level-2 boxes)

Level-2 changes:
1) Select Level-2 in Box tab
2) Select Group within DM&P
3) Change Left Margin value to 50 px (to create a positive offset)
4) Select Apply to see changes (i.e., overlap between Level-1 and Level-2 boxes
are gone)
5) Select Finish to save corrections.

Bottom line: For my vertical menu, I had to change certain Left Margin values to create offsets in order to eliminate the gap; and as it turned out, to eliminate overlapping.

Problem solved!

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...