07-11-2011, 17:43
Namnożyło się ostatnio różnych frameworków typu Less, czy Foundation i zachciało mi się wypróbować kilka, żeby zobaczyć czy budowanie prototypów skalujących treść na różne wyświetlacze rzeczywiście zajmuje kilka chwil. Foundation daje radę, ale jak się temu bliżej przyjrzeć, to to nie jest taki znowu HTML5 jak by tego chcieli autorzy. Niby wszystko gra, ale dużo ludzi stęka, że to nie semantyczne. Mało mnie to obchodzi, ale zamieniłem <div id="nav"> na <nav>, żeby zobaczyć co się będzie działo. No i nie dzieje się zbyt dobrze. Problem leży w pozycjonowaniu listy menu.
Jeśli użyjemy takiej konstrukcji:
HTML:
CSS:
to dzięki #nav{display:table; text-align:center} menu będzie na środku. Jak tylko zamienię <div id="nav"> na <nav> (+zmiana w CSS) to display:table; text-align:center przestaje działać. Czy ktoś wie, jak to centrować?
Jeśli użyjemy takiej konstrukcji:
HTML:
Kod:
<div id="nav" class="nine columns">
<ul>
<li><a class="current" href="#">Start</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Get In Touch!</a></li>
</ul>
</div>
CSS:
Kod:
#nav{display:table; text-align:center}
#nav ul li{display:inline}
to dzięki #nav{display:table; text-align:center} menu będzie na środku. Jak tylko zamienię <div id="nav"> na <nav> (+zmiana w CSS) to display:table; text-align:center przestaje działać. Czy ktoś wie, jak to centrować?