How to center Smooth Navigational Menu (v1.4) ?

[Joke*]

1) Script Title: Smooth Navigational Menu (v1.4)

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

3) Describe problem: Well, i tried to center the menu but i cant..

This is how my ul looks like:


.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

Can somone help me ?

[azoomer]

could you be more specific about what you want to achieve? Is it the horzontal menu you are using? Is it the whole <div id="smoothmenu1" class="ddsmoothmenu"></div> you need to center or only the unordered list. A link to your site and some more explanations would be a great help.

[Joke*]

Soo, i have the horizontal menu, as u can see the menu is on the left and i want it centered like this: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

1st demo


This is my forum:

http://123warez.org

[azoomer]

try this

.ddsmoothmenu ul {
list-style-type:none;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
padding-bottom:4px;
padding-left:0;
padding-right:0;
padding-top:4px;
width:744px;
z-index:100;
}

[lilpete]

Hi,
I used that menu once I like it, have you noticed the description on the script page?:-

Quote:
"Ability to easily "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align"."

Is that what you require?
If not I would just put the whole menu inside a div with a center property like this:
<div align="center">[menu here]</div>

or add the center property to your style sheet for the wrapheader div. Hope that helps.

[Joke*]

ok, i did wat u guyz told me..

@lilpete: not workin` this metode


@azoomer: i center something but not wat i want..i want to center the tabs on the middle, and now i`m having trouble with the drop-down on Other Links tab..


EDIT: i put everything back..
how to center the tabs, damn it.. :(

[azoomer]

I have attached a screenshot of how your page looks with the css changes I suggested before. The drop down works fine with these changes. Take a look at the picture. If that's what you want then try it again. If you want it differently then a further explanation is needed.

[tomywie]

Hi there,
i got it working here :), tho i had to try some times..
okay here you go:

you forgot to close some of the tags for the code inb the body, so therefore i corrected it..

<div id="wrapheader">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.123warez.org/">Home</a></li>
<li><a href="./ucp.php?mode=register&amp;sid=77de9980072ba5a0429e2b159960991b">Register</a></li>
<li><a href="./faq.php?sid=77de9980072ba5a0429e2b159960991b">FAQ</a></li>
<li><a href="./search.php?sid=77de9980072ba5a0429e2b159960991b">Search</a></li>
<li><a href="javascript:bookmarksite('123Warez.Org - Easy as 1 2 3', 'http://www.123warez.org')"><img src="images/star.png" width="10" height="10">&nbsp;Bookmark Us</a></li>
<li><a href="http://www.123warez.org/sitemap.xml">Sitemap</a></li>
<li><a href="http://www.123warez.org/dmca.html" target="_blank">DMCA Policy</a></li>
<li><a href="http://123warez.org/contact/contact">Contact</a></li>
<li><a class="noborder" href="#">Other Links</a>
<ul>
<li><a href="http://www.123warez.org/viewtopic.php?f=2&t=2737">Forum Rules</a></li>
<li><a href="http://www.123warez.org/tos.html" target="_blank">TOS</a></li>
<li><a href="http://tiny.cc/123warezdonation" target="_blank">Donate</a></li>
<li><a href="http://www.123warez.org/postgen.php" target="_blank">Post Generator</a></li>
<li><a href="http://www.trafic.ro/?rid=123warezorg" target="_blank">Statistics</a></li>
<li><a href="http://clean.katz.cd/" target="_blank">Katz</a></li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
</div>

now then, delete the css for your #wrapheader and insert this instead:

#wrapheader{
background:#414141;
width:100%;
margin: 0 auto;
}

and if the menu is going to be centered, after my opinion it looks bad if there's a 1px border on the last menu item.. so while you're at it insert this in you css too:

.ddsmoothmenu .noborder{
border: 0;
}


now you just have to replace this:

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

but keep in mind that if you replace/remove/add a menu item you will have to adjust the width.. i marked it with red above.

if it's needed i also uploaded an example to my web site:
http://saynogo.com/assist/index.html

best regards from toby and hope you get it working, else you're welcome to contact me :)

[Joke*]

thanks a bunch for ur help and time


ok, untill adding ur code i want u to log in and watch on the menu..when u login u will see 3 more tabs. (logout,ucp and private message) wat does will happen` then ? will be centered even when u login and in order, or will be messed up ?

u can login with test and pass 123test or u can make an account of course, thanks again.


Regards, Alex

[Joke*]

any answer ? sorry for double-post, thanks

[Joke*]

btw, i tried wat u told me to do but without luck.. :( still not any change to my menu..and i realised another problem: when i`m changing the window of my browser the menu is not static..is going like this: http://i178.photobucket.com/albums/w245/Alexutzu10/AlexXxuTzZu/untitled-1.png

i attached even my css from the menu if anyone wants to help me..please



Kind regards, Alex

[tomywie]

If three more tabs appear it probably won't work, because the menu has a fixed width;


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

I'll take a look and see what I can do :)

Best regards from Toby

[Joke*]

If three more tabs appear it probably won't work, because the menu has a fixed width;


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

I'll take a look and see what I can do :)

Best regards from Toby


Thanks bro..wat about with the 2nd problem ? the one u see in the picture ?

[tomywie]

Well.. What I see in the picture is the problem I just mentioned ;b

[tomywie]

I'm terribly sorry, but I can't find any solution to this besides what I already posted..

[Joke*]

I'm terribly sorry, but I can't find any solution to this besides what I already posted..

Ok.. :( damn..thanks anyway for ur time and help