Center and browser problem on dropdown-menu

[AlexXxuTzZu]

Hello guyz, i have 2 big problemes.

1. I can’t center my dropdown menu..This is my hole css for my menu:

body {

font-family: helvetica, arial, sans-serif;

background: #e3e3e3;

}



/* MENU */



#nav {

float: center;

margin: 0; padding: 0;

border: 1px solid #3D3D3D;

border-bottom: none;

text-align: center;

}



#nav li a, #nav li {

float: left;

}



#nav li {

list-style: none;

position: relative;

}



#nav li a {

padding: 1em 2em;

text-decoration: none;

color: white;

background: #1D1D1D;

background: -moz-linear-gradient(top, black, #3c3c3c 1px, #1D1D1D 25px);

background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));

border-right: 1px solid #3c3c3c;

border-left: 1px solid #292929;

border-bottom: 1px solid #232323;

border-top: 2px solid #545454;

}



#nav li a:hover {

background: #17b1e8;



}





/* Submenu */



.hasChildren {

position: absolute;

width: 5px; height: 5px;

background: black;

right : 0;

bottom: 0;

}



#nav li ul {

display: none;

position: absolute;

left: 1;

top: 100%;

padding: 0; margin: 0

}



#nav li:hover > ul {

display: block;

}



#nav li ul li, #nav li ul li a {

float: none;

}



#nav li ul li {

_display: inline; /* for IE6 */

}



#nav li ul li a {

width: 150px;

display: block;

}



/* SUBSUB Menu */



#nav li ul li ul {

display: none;

}



#nav li ul li:hover ul {

left: 100%;

top: 0;

}





#nav li ul 

2.My second problem is, when i`m resizeing my web broswer my menu is going crazy, see image:
http://i51.tinypic.com/sw3709.png

soo, can someone help me please? thanks in advance, regards- Alex.

[AlexXxuTzZu]

thanks for replying but is still not centering..

another picture: http://tinypic.com/r/29mk94k/7

[zackw]

Post a link if u can

[swirv]

For an element to center with margin: 0 auto; the element must have a width set.

For your site set #nav to have a width: 820px; and height: 40px; and margin: 0 auto;
That will center up, and not fold in on itself when resizing the window.

swirv

[AlexXxuTzZu]

ok..here’s the link: http://www.123warez.org

I got it something but with a small problem: the last tab its standing down.
http://tinypic.com/r/2jc7d5u/7

I managed to put it in line like others tabs with a higher width but then the menu is not anymore centered, it’s more in the left..

Here is my final css:

/* MENU */



#nav {

float: none;

margin: 0 auto;

width: 1220px;

height: 9px;

border: 1px solid #3D3D3D;

border-bottom: none;

text-align: center;

}



#nav li a, #nav li {

float: left;

}



#nav li {

list-style: none;

position: relative;

}

and html code:

Home


   
{L_RESTORE_PERMISSIONS}
 





   
Logout
  

   
{L_PROFILE}
  

   
{PRIVATE_MESSAGE_INFO}, {PRIVATE_MESSAGE_INFO_UNREAD}
  

   
{L_REGISTER}
  



  
{L_FAQ}


   
{L_MEMBERLIST}
  

   
{L_SEARCH}
  

 Bookmark Us


Sitemap


Rules


DMCA Policy


Other Links



Forum Rules


T.O.S.


Post Generator


Statistics


Katz




Contact

[Chris Coyier]

Here is your fix. Your width was too big.

This is your full CSS code so just delete your old one and use this.

body {

font-family: helvetica, arial, sans-serif;

background: #e3e3e3;

}



/* MENU */



#nav {

float: none;

margin: 0 auto;

width: 885px;

height: 9px;

border: 1px solid #3D3D3D;

border-bottom: none;

text-align: center;

}



#nav li a, #nav li {

float: left;

}



#nav li {

list-style: none;

position: relative;



}



#nav li a {

padding: 1em 2em;

text-decoration: none;

color: white;

background: #1D1D1D;

background: -moz-linear-gradient(top, black, #3c3c3c 1px, #1D1D1D 25px);

background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));

border-right: 1px solid #3c3c3c;

border-left: 1px solid #292929;

border-bottom: 1px solid #232323;

border-top: 2px solid #545454;

}



#nav li a:hover {

background: #17b1e8;



}





/* Submenu */



.hasChildren {

position: absolute;

width: 5px; height: 5px;

background: black;

right : 0;

bottom: 0;

}



#nav li ul {

display: none;

position: absolute;

left: 1;

top: 100%;

padding: 0; margin: 0

}



#nav li:hover > ul {

display: block;

}



#nav li ul li, #nav li ul li a {

float: none;

}



#nav li ul li {

_display: inline; /* for IE6 */

}



#nav li ul li a {

width: 150px;

display: block;

}



/* SUBSUB Menu */



#nav li ul li ul {

display: none;

}



#nav li ul li:hover ul {

left: 100%;

top: 0;

}





#nav li ul

[AlexXxuTzZu]

ok, i changed but like i saw from the beggining the width it’s to small and menu is going like this:
http://tinypic.com/r/n6wbp/7

[Chris Coyier]

Worked for me in IE, Firefox and Safari

[AlexXxuTzZu]

yeah, only when ur not login cuz when u login it’s adding other tabs and dissapear others, adding user control panel, 0 messages [PM Box] , members and dissapear register tab and there will be logout.

means 10 tabs when ur not login and u have that width and 13 tabs when ur login and it stay with my width..

when i`m login:
http://tinypic.com/r/sy6v6f/7

when i`m not login:
http://tinypic.com/r/23iz509/7

the problem is why the last tab, contact one, it’s not standing in line..

[Chris Coyier]

Ok I added all 13 links to the navigation and got the width narrowed down to 1130px. Your problem isn’t a centering issue. Your problem is that you have too many links. This can’t be solved unless you break them up somehow. If this was my site I would have Home, Register, Rules, DMCA, Other, Contact. The rest can go above the board index where your facebook and RSS feed is floated to the left.

[AlexXxuTzZu]

will be the same buddy..

[Chris Coyier]

Check my post again

[AlexXxuTzZu]

i see..to do that i need to modify a lot..and to put other things near the social media icons i need to create a box something or anything else to look nice and i dont know to do such things..i`m not a pro..

[Chris Coyier]

Its actually not that much. If you go with what I think all you have to do is create a second CSS nav code and place the HTML for the second nav between the login section and the board index section.

OR

You can put the second nav above the login section.

In my opinion, go with my second suggestion for placement.

[AlexXxuTzZu]

i see..thanks for ur tips and time man. cheers

[Author]

Posts