html - Can't use certain Width - CSS menu -
i got menu , need items same width (155px). don't seem doing right way, appreciate tips , possible solutions.
#menu { width: 1000px; height: 625px; text-transform: uppercase; text-align: left; font-size: 10px; margin: 0 auto; font-family: 'raleway', sans-serif; font-weight: 400; } #menu span { padding-left: 11px; } #menu ul { margin: 0; padding: 25px 0 0 0; } #menu li { background: url(../img/menu_dots.jpg) no-repeat; display: inline; padding-bottom: 614px; padding-top: 25px; width: 155px; } #menu li { text-decoration: none; color: #d1d3d4; } #menu li a:hover { color: #000; font-weight: 700; } #menu li .current { color: #000; font-weight: 700; }
<div id="menu"> <ul> <li><a href="index.html" class="current"><span>octo</span></a> </li> <li><a href="equipa.html"><span>equipa</span></a> </li> <li><a href="reconhecimento.html"><span>reconhecimento</span></a> </li> <li><a href="parceiros.html"><span>parceiros</span></a> </li> <li><a href="porque_nao.html"><span>porque nÃo?</span></a> </li> <li><a href="contactos.html"><span>contactos</span></a> </li> </ul> </div>
easiest solution change display on list items (#menu li
) inline
inline-block
.
#menu { width: 1000px; height: 625px; text-transform: uppercase; text-align: left; font-size: 10px; margin: 0 auto; font-family: 'raleway', sans-serif; font-weight: 400; } #menu span { padding-left: 11px; } #menu ul { margin: 0; padding: 25px 0 0 0; } #menu li { background: url(../img/menu_dots.jpg) no-repeat; display: inline-block; padding-bottom: 614px; padding-top: 25px; width: 155px; } #menu li { text-decoration: none; color: #d1d3d4; } #menu li a:hover { color: #000; font-weight: 700; } #menu li .current { color: #000; font-weight: 700; }
<div id="menu"> <ul> <li><a href="index.html" class="current"><span>octo</span></a> </li> <li><a href="equipa.html"><span>equipa</span></a> </li> <li><a href="reconhecimento.html"><span>reconhecimento</span></a> </li> <li><a href="parceiros.html"><span>parceiros</span></a> </li> <li><a href="porque_nao.html"><span>porque nÃo?</span></a> </li> <li><a href="contactos.html"><span>contactos</span></a> </li> </ul> </div>
Comments
Post a Comment