View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

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 imthebest381601 | 2584 views | 3 replies

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!

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...