Chainblade
New Member
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.Below is the codes to the menu bar. CSS\[code\]<style type="text/css"> * { padding: 0; margin: 3; } body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px} ul { list-style: none; } ul li {float: left;padding: 1.5px;position: relative;margin: auto;}ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; } ul a:hover {background-color:#5A87B4; }\[/code\]HTML\[code\]<div> <ul><li> <div align="center"><a href="http://stackoverflow.com/questions/Software.html" >Software</a> </div></li> <li> <div align="center"><a href="http://stackoverflow.com/questions/Products.html">Products</a></div> </li><li><a href="http://stackoverflow.com/questions/Order Online.html">FAQ</a></li></ul>\[/code\]This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciatedEDIT: Its like having some space after each button but instead theres a horizontal line