Witam.
Menu stworzone za pomocą listy, nie chce się dać wyśrodkować za pomocą position: relative; left: 50%, co jest?
Czy takie rozwiązanie dla wyśrodkowania takiego menu jest dobre? A może należy użyć innego sposobu?
Tak to wygląda:
<div id="navigation">
<ul>
<li><a href="index.html">O szkole</a></li>
<li><a href="index.html">Kontakt</a></li>
<li><a href="index.html">Pracownicy</a></li>
<li><a href="index.html">Galeria</a></li>
</ul>
</div>
#navigation
{
width: 100%;
height: 50px;
padding: 0;
background-color: #64B5F6;
position: relative;
top: 0;
left: 0;
overflow: hidden;
}
ul
{
display: block;
list-style: none;
margin: auto;
padding: 0;
line-height: 30px;
text-align: center;
position: relative;
left: 50%;
}
ul li
{
float: left;
}
ul a:link, ul a:visited {
text-decoration: none;
display: block;
text-align: center;
color: white;
padding: 10px;
font-size: 18px;
font-family: Arial;
font-weight: 500;
letter-spacing: 2px;
}
ul a:hover
{
background-color: #53A5E5;
}