Blumentals Software Community

Hi ...

i've created a horizontal css menu ... but ist always placed at the left.

How do i Center my menu?

I already tryed to add the follwing in my css ... but it did not work.

#mbuw9yebul_wrapper {
text-align: center;
}

thank you ...

This part "#mbuw9yebul" is unique and generated for each menu, it's more than likely that your menu has a different ID.
Can you give me a link to your page? I'll take a look and tell you exactly what to add to the css.

Hi, now i understand that my unique "mbc0awebul" ... but i can't Center the my css menu.

Here ist my mbcsmbc0aw.css ... i hoppe you can help my ...

Are there any further files which must be edited to center the menu?

Thanks

#mbc0awebul_wrapper {
padding: 0;
border-style: solid;
border-color: #000000;
border-width: 1px;
border-radius: 5px;
background-color: #333333;
box-shadow: 0 0 5px -1px #333333, 0 1px 2px -1px #FFFFFF inset;
border-collapse: separate;
font-size: 0;
line-height: 0;
}

#mbc0awebul_wrapper.quirks {
margin-bottom: 0px;
margin-right: 0px;
}

#mbc0awebul_wrapper.quirks #mbc0awebul_table ul li {
width: 100%;
}

#mbc0awebul_table {
margin: 0px;
margin-bottom: -0px;
margin-right: -0px;
padding: 0;
line-height: 0px;
font-size: 0px;
display: inline-block;
width: auto;
}

#mbc0awebul_table li a {
line-height: 16px;
font-size: 13px;
font-family: Arial,sans-serif;
text-decoration: none;
color: #FFFFFF;
font-style: normal;
font-weight: bold;
padding: 22px 30px 12px 37px;
display: block;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mbc0awebul_table li div.buttonbg {
height: 60px;
width: 130px;
line-height: 0;
background-color: transparent;
border-style: solid;
border-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
text-align: center;
}

#mbc0awebul_table li:hover div.buttonbg a, #mbc0awebul_table li.expanded a.topitem, #mbc0awebul_table li.active a.topitem,
#mbc0awebul_table li.itemhot a.topitem, #mbc0awebul_table li a:hover {
color: #FFFFFF;
font-style: normal;
font-weight: bold;
text-decoration: none;
}


#mbc0awebul_table li.expanded div.buttonbg, #mbc0awebul_table li.active div.buttonbg, #mbc0awebul_table li.itemhot div.buttonbg, #mbc0awebul_table li:hover div.buttonbg {
background-color: transparent;
box-shadow: 0 1px 2px -1px #FFFFFF inset;
}

#mbc0awebul_table li.expanded div.buttonbg, #mbc0awebul_table li.active div.buttonbg, #mbc0awebul_table li.itemhot div.buttonbg, #mbc0awebul_table li:hover div.buttonbg {
border-color: transparent;
}

#mbc0awebul_table li.first_button div.buttonbg {
border-radius: 4px 0 0 4px;
}

#mbc0awebul_table li.last_button div.buttonbg {
border-radius: 0 4px 4px 0;
}

#mbc0awebul_table ul li a {
color: #000000;
font-family: Arial,sans-serif;
font-size: 13px;
line-height: 16px;
font-style: normal;
font-weight: normal;
text-decoration: none;
display: block;
vertical-align: middle;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mbc0awebul_table ul li:hover > a {
color: #FFFFFF;
font-family: Arial,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-decoration: none;
}

#mbc0awebul_table ul li.subexpanded a.subexpanded, #mbc0awebul_table ul li.subitemhot a.subitemhot, #mbc0awebul_table ul li a:hover {
color: #FFFFFF;
font-family: Arial,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-decoration: none;
}

#mbc0awebul_table ul li:hover, #mbc0awebul_table ul li.subexpanded, #mbc0awebul_table ul li.subitemhot {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}

#mbc0awebul_table ul {
margin: 0;
border-style: solid;
border-color: #98B7E4;
border-width: 0;
padding: 0;
background: transparent;
font-size: 0;
border-radius: 5px;
}

#mbc0awebul_table ul li a {
padding: 7px 15px 7px 13px;
text-align: left;
}

#mbc0awebul_table ul li.separator {
padding: 7px;
cursor: default;
background: none;
box-shadow: none;
border-width: 0;
}

#mbc0awebul_table ul li.separator div {
border-top: 1px solid #858585;
font-size: 0px;
}

#mbc0awebul_table ul li {
border-style: solid;
border-color: transparent;
border-width: 0;
height: auto;
width: auto;
text-align: left;
line-height: 0;
font-size: 0;
cursor: pointer;
float: none;
margin: 0 0 0px 0;
border-radius: 0;
padding: 0;
box-shadow: none;
background-color: transparent;
display: block;
}

#mbc0awebul_table ul li.first_item {
border-radius: 5px 5px 0 0;
}

#mbc0awebul_table ul li.last_item {
border-radius: 0 0 5px 5px;
}


#mbc0awebul_table ul {
box-shadow: 0 0 7px -1px #666666;
}

#mbc0awebul_table a img {
border: none;
}

#mbc0awebul_table li {
list-style: none;
float: left;
margin: 0px 0px 0px 0px;
padding: 0;
float: left;
display: inline-block;
}

#mbc0awebul_table.css_menu li {
position: relative;
}

#mbc0awebul_table.css_menu ul li:hover > ul {
opacity: 1;
}

#mbc0awebul_table.css_menu li:hover > ul {
top: 100%;
left: 0;
right: auto;
opacity: 1;
}

#mbc0awebul_table.css_menu ul li:hover > ul {
top: -0px;
left: 100%;
right: auto;
}

#mbc0awebul_table.css_menu ul {
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-property:opacity;
-webkit-transition-property:opacity;
-moz-transition-property:opacity;
-ms-transition-property:opacity;
opacity: 0;
}

#mbc0awebul_table ul {
position: absolute;
top:-99999px;
z-index: 4000;
}

#mbc0awebul_table ul ul {
position: absolute;
z-index: 5000;
}

#mbc0awebul_table .submenu_arrow {
margin-left: 8px;
}


@media screen and (max-width: 500px) {
#mbc0awebul_wrapper:not(.scripted) {
text-align: center;
}

#mbc0awebul_wrapper:not(.scripted) #mbc0awebul_table li {
float: none;
vertical-align: top;
}
}

#mbc0awebul_wrapper.centeritems {
text-align: center;
}

#mbc0awebul_wrapper.centeritems #mbc0awebul_table li {
float: none;
vertical-align: top;
}
#mbc0awebul_table a.with_img_4 span.img_4x5, .mbc0awebul_menulist span.img_4x5 {
width: 4px;
height: 5px;
display: inline-block;
vertical-align: middle;
}

#mbc0awebul_table li:hover > a span.img_4x5, #mbc0awebul_table li.subexpanded > a span.img_4x5 {
background-position: 0 -5px;
}

#mbc0awebul_table div.arrow {
background-image: url(ebab_mbc0aw_d.png);
background-repeat: no-repeat;
background-position: right center;
height: 100%;
}

#mbc0awebul_table ul li a.with_arrow {
background-image: url(ebab_mbc0aw_c.png);
background-repeat: no-repeat;
background-position: right center;
padding-right: 19px;
}

#mbc0awebul_table ul li a.with_arrow:hover, #mbc0awebul_table ul li:hover > a.with_arrow, #mbc0awebul_table ul li.subexpanded > a.with_arrow {
background-image: url(ebab_mbc0aw_c2.png);
}

#mbc0awebul_table li:hover div.gradient60, #mbc0awebul_table li.expanded div.gradient60, #mbc0awebul_table li.active div.gradient60, #mbc0awebul_table li.itemhot div.gradient60 {
background-image: url('buttonhot_bg.png');
background-repeat: repeat-x;
background-color: #636363;
}

#mbc0awebul_table li:hover div.gradient_button, #mbc0awebul_table li.expanded div.gradient_button, #mbc0awebul_table li.active div.gradient_button, #mbc0awebul_table li.itemhot div.gradient_button {
background-image: -moz-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
background-image: -webkit-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
background-image: linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
}

#mbc0awebul_table ul.gradient30 {
background-image: url('menu_bg.png');
background-repeat: repeat-x;
background-color: #E8E8E8;
}

#mbc0awebul_table ul.gradient90 {
background-image: url('menu_bg1.png');
background-repeat: repeat-x;
background-color: #E8E8E8;
}

#mbc0awebul_table ul.gradient_menu {
background-image: -moz-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
background-image: -webkit-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
background-image: linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
}

#mbc0awebul_table ul li.gradient30:hover, #mbc0awebul_table ul li.gradient30.subexpanded, #mbc0awebul_table ul li.gradient30.subitemhot {
background-image: url('menuitemhot_bg.png');
background-repeat: repeat-x;
background-color: #424242;
}

#mbc0awebul_table ul li.gradient_menuitem:hover, #mbc0awebul_table ul li.gradient_menuitem.subexpanded, #mbc0awebul_table ul li.gradient_menuitem.subitemhot {
background-image: -moz-linear-gradient(top, #858585 0%, #424242 100%);
background-image: -webkit-linear-gradient(top, #858585 0%, #424242 100%);
background-image: linear-gradient(top, #858585 0%, #424242 100%);
}

#mbc0awebul_table li a.button_1, #mbc0awebul_table li div a.button_1 {
padding-right: 15px;
}

#mbc0awebul_table div.icon_1 {
background-image: url(ebab_mbc0aw_ico_0.png);
background-repeat: no-repeat;
background-position: 15px center;
height: 100%;
}

#mbc0awebul_table div.icon_2 {
background-image: url(ebab_mbc0aw_ico_1.png);
background-repeat: no-repeat;
background-position: 15px center;
height: 100%;
}

#mbc0awebul_table li a.button_3, #mbc0awebul_table li div a.button_3 {
padding-left: 15px;
}

#mbc0awebul_table li a.button_4, #mbc0awebul_table li div a.button_4 {
padding-left: 15px;
}

#mbc0awebul_table li a.button_5, #mbc0awebul_table li div a.button_5 {
padding-right: 15px;
}

#mbc0awebul_table div.icon_5 {
background-image: url(ebab_mbc0aw_ico_4.png);
background-repeat: no-repeat;
background-position: 15px center;
height: 100%;
}

#mbc0awebul_table li a.button_6, #mbc0awebul_table li div a.button_6 {
padding-right: 15px;
}

#mbc0awebul_table div.icon_6 {
background-image: url(ebab_mbc0aw_ico_5.png);
background-repeat: no-repeat;
background-position: 15px center;
height: 100%;
}

#mbc0awebul_table div.icon_7 {
background-image: url(ebab_mbc0aw_ico_6.png);
background-repeat: no-repeat;
background-position: 15px center;
height: 100%;
}

#mbc0awebul_table li a.button_8, #mbc0awebul_table li div a.button_8 {
padding-right: 15px;
}

#mbc0awebul_table div.icon_8 {
background-image: url(ebab_mbc0aw_ico_7.png);
background-repeat: no-repeat;
background-position: 15px center;
height: 100%;
}

If I read the CSS correctly, you seem to have created full-width menu, which is probably why you can't center it. Open your menu in Easy Button & Menu Maker, look for Top Menu -> Style -> Menu Size, make sure Full Width is not checked. You won't be able to center the menu any further if it already takes up the whole space.

Hi,

thanks ... but full width is not checked. In Easy Button & Menu Maker it looks like its left aligned. Also when i take a Preview in the Browser. Its not over the full width ... only left aligned.

Hope you can helf me.

Can you just send me link to the page that you inserted the menu into?

The Page is Not online yet.
Can i send you the files or the Project file by E-Mail?

I uploaded my homepage files to dropbox as a zip file.

Here is the dropbox Link:
https://www.dropbox.com/s/74eoygham2j6y86/homepage_six3323.zip?dl=0

The page is not already complete ... but you can see and test the css menu. I also include the Project File from Easy Button & Menu Maker (button.bamp).

I hope you can help me ... best regards ...

six3323

Add this to your CSS:

#mbc0awebul_wrapper {
margin: 0 auto;
}

(use margin: 0 auto; instead of text-align: center)

Tested in your project and it centers the menu just fine.