Center of CSS Menu

Post your questions and problem reports here.

Center of CSS Menu

Postby six3323 » Mon Feb 27, 2017 4:29 pm

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 ...
six3323
 
Posts: 5
Joined: Mon Feb 27, 2017 4:21 pm

Re: Center of CSS Menu

Postby Aivars » Mon Feb 27, 2017 5:42 pm

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.
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 2453
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: Center of CSS Menu

Postby six3323 » Mon May 01, 2017 5:46 pm

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%;
}
six3323
 
Posts: 5
Joined: Mon Feb 27, 2017 4:21 pm

Re: Center of CSS Menu

Postby Aivars » Fri May 05, 2017 3:35 pm

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.
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 2453
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: Center of CSS Menu

Postby six3323 » Thu May 11, 2017 7:15 pm

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.
six3323
 
Posts: 5
Joined: Mon Feb 27, 2017 4:21 pm

Re: Center of CSS Menu

Postby Aivars » Fri May 12, 2017 8:37 am

Can you just send me link to the page that you inserted the menu into?
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 2453
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: Center of CSS Menu

Postby six3323 » Sun May 14, 2017 4:19 pm

The Page is Not online yet.
Can i send you the files or the Project file by E-Mail?
six3323
 
Posts: 5
Joined: Mon Feb 27, 2017 4:21 pm

Re: Center of CSS Menu

Postby six3323 » Mon May 15, 2017 8:32 pm

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
six3323
 
Posts: 5
Joined: Mon Feb 27, 2017 4:21 pm

Re: Center of CSS Menu

Postby Aivars » Fri May 19, 2017 10:53 am

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.
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 2453
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia


Return to Easy Button & Menu Maker Support

Who is online

Users browsing this forum: No registered users and 13 guests

cron