html - Why wont this menu get aligned in the middle of the page? -
i have been trying create menu fixed in middle of page. menu of 1170px in width , 30px in height blue line @ bottom. now....i'd make menu positioned in middle of page rest of items on page.
align: center doesnt seem work. doing wrong?
<div align="center;" id="menu"> <ul> <li><a href="#">nuestros cursos</a> <ul> <li><a href="#">spanish</a></li> <li><a href="#">english</a></li> <li><a href="#">french</a></li> <li><a href="#">german</a></li> </ul> <!-- end inner ul--> </li> <!-- end main li--> </ul> <!-- end main ul--> <ul> <li><a href="#">preparación de exámenes</a> <ul> <li><a href="#">spanish</a></li> <li><a href="#">english</a></li> <li><a href="#">french</a></li> <li><a href="#">german</a></li> </ul> <!-- end inner ul--> </li> <!-- end main li--> </ul> <!-- end main ul--> <ul> <li><a href="#">estudiar en el extranjero</a> <ul> <li><a href="#">spanish</a></li> <li><a href="#">english</a></li> <li><a href="#">french</a></li> <li><a href="#">german</a></li> </ul> <!-- end inner ul--> </li> <!-- end main li--> </ul> <!-- end main ul--> <ul> <li><a href="#">quienes somos</a> <ul> <li><a href="#">spanish</a></li> <li><a href="#">english</a></li> <li><a href="#">french</a></li> <li><a href="#">german</a></li> </ul> <!-- end inner ul--> </li> <!-- end main li--> </ul> <!-- end main ul--> <ul> <li><a href="#">trabaja con nosotros</a> <ul> <li><a href="#">spanish</a></li> <li><a href="#">english</a></li> <li><a href="#">french</a></li> <li><a href="#">german</a></li> </ul> <!-- end inner ul--> </li> <!-- end main li--> </ul> <!-- end main ul--> </div> css
/*-----------------------new menu working on------------------------*/ #menu { width:1170px; height:30px; text-align:center; margin-left: auto; /*margin left es right fontosak olyan szinten hogy amit meretnek valasztok menure...azt szepent automatikusan kozepre helyezi*/ margin-right: auto; border-bottom:solid 3px #289dcb; /*#68bc1d szep zold szint jelent*/ border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; } #menu ul { margin:0; padding:0; line-height:30px; } #menu li { margin:0; padding:0; list-style:none; float:left; position:relative; background:#3b3b3b; /*colours menu , submenu background*/ } #menu ul li { display:block; height:30px; width:200px; text-align:center; font-family:arial, helvetica, sans-serif; text-decoration:none; color: #fff; /*colour of text in menu*/ border:1px solid #000; } #menu ul ul { position: absolute; /* orders nested links appear in block under main ul*/ visibility:hidden; top:32px; } #menu ul li:hover ul { /* makes dropdown menu appear on hovering on it*/ visibility:visible; } #menu li:hover { background:#ff5454; /* main menu box changes color (also submenus) on hovering on it, red in case*/ } here looks like: demo js fiddle
this css trick. demo
i didn't use display: inline-block because give gap between each <li>.
instead have used display: table , display: table-cell make align without gaps in between list.
#menu { width: 1170px; height: 30px; margin-left: auto; margin-right: auto; border-bottom: solid 3px #289dcb; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; display: table; } #menu ul { margin: auto; padding: 0; line-height: 30px; display: table-cell; } #menu li { margin: 0; padding: 0; list-style: none; float: left; position: relative; background: #3b3b3b; width: 100%; } #menu ul li { display: block; text-align: center; font-family: arial, helvetica, sans-serif; text-decoration: none; color: #fff; border: 1px solid #000; }
Comments
Post a Comment