Center menu inside a div tag
Posted: 08 September 2009 04:36 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-09-08

Hi guys,

Recently I was looking for a nice js/css dropdown menu. I found a great one, problem is: I can’t get it centered on my page and it looks awful this way…

Little screenshot of how it looks now is included in attachment.

This is the code for the menu itself (html):

<div id="sddm-container">
<
ul id="sddm">
    <
li><a href="#">Overview</a></li>
    <
li><a href="#" 
        
onmouseover="mopen('m1')" 
        
onmouseout="mclosetime()">Config</a>
        <
div id="m1" 
            
onmouseover="mcancelclosetime()" 
            
onmouseout="mclosetime()">
        <
a href="#">Test</a>
        <
a href="#">Test</a>
        <
a href="#">Test</a>
        </
div>
    </
li>
    <
li><a href="#" 
        
onmouseover="mopen('m2')" 
        
onmouseout="mclosetime()">Battle</a>
        <
div id="m2" 
            
onmouseover="mcancelclosetime()" 
            
onmouseout="mclosetime()">
        <
a href="#">Test</a>
        <
a href="#">Test</a>
        </
div>
    </
li>
    <
li><a href="#" 
        
onmouseover="mopen('m3')" 
        
onmouseout="mclosetime()">Specifics</a>
        <
div id="m3" 
            
onmouseover="mcancelclosetime()" 
            
onmouseout="mclosetime()">
        <
a href="#">Test</a>
        <
a href="#">Test</a>
        </
div>
    </
li>
     <
li><a href="#" 
        
onmouseover="mopen('m4')" 
        
onmouseout="mclosetime()">Technical</a>
        <
div id="m4" 
            
onmouseover="mcancelclosetime()" 
            
onmouseout="mclosetime()">
        <
a href="#">Test</a>
        <
a href="#">Test</a>
        </
div>
    </
li>
</
ul>
<
div style="clear:both"></div></div

The CSS code:

#sddm
{    margin0;
    
padding0;
    
z-index30}
#navcontainer
{
margin
-rightauto;
margin-leftauto;
padding0px 0px 0px 0px;
}

#sddm li
{    margin0;
    
padding0;
    list-
stylenone;
    
floatleft;
    
fontbold 11px arial}
#sddm li a
{    displayblock;
    
margin0 1px 0 0;
    
padding4px 10px;
    
width60px;
    
background#33779C;
    
color#FFF;
    
text-aligncenter;
    
text-decorationnone}
#sddm li a:hover
{    background#49A3FF}
#sddm div
{    positionabsolute;
    
visibilityhidden;
    
margin0;
    
padding0;
    
background#EAEBD8;
    
border1px solid #33779C}

    #sddm div a
    
{    positionrelative;
        
displayblock;
        
margin0;
        
padding5px 10px;
        
widthauto;
        
white-spacenowrap;
        
text-alignleft;
        
text-decorationnone;
        
background#EAEBD8;
        
color#2875DE;
        
font11px arial}

    
#sddm div a:hover
    
{    background#49A3FF;
        
color#FFF} 

And the js:

// Copyright 2006-2007 javascript-array.com

var timeout    500;
var 
closetimer    0;
var 
ddmenuitem    0;

// open hidden layer
function mopen(id)
{    
    
// cancel close timer
    
mcancelclosetime();

    
// close old layer
    
if(ddmenuitemddmenuitem.style.visibility 'hidden';

    
// get new layer and show it
    
ddmenuitem document.getElementById(id);
    
ddmenuitem.style.visibility 'visible';

}
// close showed layer
function mclose()
{
    
if(ddmenuitemddmenuitem.style.visibility 'hidden';
}

// go close timer
function mclosetime()
{
    closetimer 
window.setTimeout(mclosetimeout);
}

// cancel close timer
function mcancelclosetime()
{
    
if(closetimer)
    
{
        window
.clearTimeout(closetimer);
        
closetimer null;
    
}
}

// close layer when click-out
document.onclick mclose

I’ve been searching the web for a solution in this and I literally tried tens of combinations.

Any help would be appreciated!

Profile
 
 
Posted: 29 May 2010 11:11 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  17
Joined  2010-04-20

thanks for this
vhskid By Igec

Profile
 
 
Posted: 18 August 2010 04:25 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  17
Joined  2010-04-20

i m back again n say thanks again
Education Overseas, Los Angeles Holiday, Future Technology

Profile
 
 
Posted: 30 October 2010 11:22 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  1
Joined  2010-10-30

The scripts are much appreciated, and will be put to good use!
Panasonic Viera
Counselling in Dublin
Lasko Heater

Profile
 
 
Posted: 01 November 2010 11:55 PM   [ Ignore ]   [ # 4 ]
Jr. Member
RankRank
Total Posts:  39
Joined  2010-10-06

padding between the elements is missing..

Profile
 
 
Posted: 04 November 2010 04:24 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  2
Joined  2010-11-04

try cell padding codes. that would work. thanks

Profile
 
 
Posted: 04 November 2010 10:03 AM   [ Ignore ]   [ # 6 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-04

great piece of code. I have used it in my site :)

Profile
 
 
Posted: 05 November 2010 04:07 PM   [ Ignore ]   [ # 7 ]
Jr. Member
RankRank
Total Posts:  44
Joined  2010-10-13

not related with the main subject but, invisible links in js may cause big problem. You shouldn’t hide the links, if you dont want to be banned…

Profile
 
 
Posted: 06 November 2010 10:22 AM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  4
Joined  2010-10-23

Hello Gabiru,

Nice post. The code you are sharing with us is really helpful.

Thanks.

mountain home news | log cabin homes

Profile
 
 
Posted: 06 November 2010 01:31 PM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  2
Joined  2010-11-06

Thanks for sharing the code, I did not need all of it for a particular issue I was having with my site but looking at the way you coded this helped me to resolve a centre issue I was having inside a div tag that was causing problems.

It is great to find such an excellent resource where talented coders are willing to give up their time to save the less advanced coders and designers. Thanks again.

——————

Firebubble is a UK design studio that specialises in Logo Design for businesses of all sizes.

Profile
 
 
Posted: 06 November 2010 01:38 PM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-06

I can’t find any error in the code, it’s alright, but it is ok the navigation, I wouldn’t personally make any change. Nice work and thanks! I was looking for something like this since I’m building a new website!

—————————————————————————————————
codigos para gta san andreas
codigos para gta san andreas
codigos para gta san andreas ps2

Profile
 
 
Posted: 31 January 2011 02:16 PM   [ Ignore ]   [ # 11 ]
Newbie
Rank
Total Posts:  23
Joined  2011-01-06

This should give you a 770 pixel wide centered div with the nav elements aligning to the right of the box.

Profile
 
 
Posted: 01 February 2011 09:24 AM   [ Ignore ]   [ # 12 ]
Newbie
Rank
Total Posts:  1
Joined  2011-02-01

This is a great and innovative code too simple.
______________________________________________________________________________________________________________
Android Game Review | Mobile Twitter Client | Belly Fat

Profile