PDA

View Full Version : Resolved Smooth Menu - Editing Properties - del horizntl line / make menu fixed width & center



dmshep99
05-12-2009, 11:49 AM
1) Script Title: Smooth Navigational Menu (v1.3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem:

Hi,

What is the best way (for FF and IE compatibility) to achieve the following three goals with this menu:
1. eliminate the horizontal line and keep only buttons
2. make the menu width set (despite longer text/have the text wrap)...so that we can modify its contents (i.e. add/remove buttons) but it will stay the same width (as the content below i.e. an img)
3. center the menu on the page

I have tried several things by adjusting the CCS properties...
1.
- tried making the .ddsmoothmenu's bg-color transparent (unfortunately I had it layed out on top of another image and that made the color of buttons also vanish)
2. tried setting up the .ddsmoothmenu's width in pixels but it made the edges (right & left) beyond the buttons stick out in various length for FF and for IE
3. tried using the <center> for the included div (used the embedded html version of the menu) tag and tried also adjusting width/margin.. The latter works more or less but I what throws the center alignment off is the right and left edges sticking out beyond the buttons (see #2)

Does anyone have an idea?

Once again goal is to have the menu centered across the page, without the horizontal line and be able to make the width of the menu stay certain fixed width (no matter what the content of the buttons is), so that it aligns with the content below i.e. an image.

THANKS!

ddadmin
05-13-2009, 12:54 AM
You'll have to play around with the CSS to get the exact effect you're looking for. To get you started though, I tried replacing the following default block of CSS inside the .css file of the script:


.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

with:


.ddsmoothmenu{
font: bold 12px Verdana;
margin: 0 auto;
width: 500px;
}

This seems to center the menu. The 500px value should reflect the actual width of your menu bar.

dmshep99
05-13-2009, 02:01 AM
Thanks a bunch! I will play with it...