+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: HTML5 <div id="nav"></div> vs <nav></nav> (/thread-html5-div-id-nav-div-vs-nav-nav)
HTML5 <div id="nav"></div> vs <nav></nav> - Storm - 07-11-2011
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:
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ć?
RE: HTML5 <div id="nav"></div> vs <nav></nav> - Kartofelek - 07-11-2011
(+zmiana w CSS)
??
Swoją drogą nie lepiej zastosować inline-block i text-align:center? Też będzie na środku a lepiej kontrolowane.
display:table jest tak samo suportowany przez starocie jak inline-block; ale do tego drugiego są łatwe tricki (jak choćby *display:inline)
RE: HTML5 <div id="nav"></div> vs <nav></nav> - Storm - 07-11-2011
No ale czy to zadziała z <nav>? A tak w ogóle to czemu ten sposób o którym pisałem nie działa? (zmiana w css: #nav ->nav)
RE: HTML5 <div id="nav"></div> vs <nav></nav> - SkuterPL - 07-11-2011
w css nie #nav tylko samo nav sprobuj, nie mialem stycznosci z html5, ale patrzalem jak to dziala, to bedzie podobne jak np to tego:
img {
broder: 0px;
}
i tutaj tez nie dajesz nic przed tym, bo to staly znaczink htmlu 4, a w 5 dochodza nav itp.
sprobuj i daj znac
RE: HTML5 <div id="nav"></div> vs <nav></nav> - Storm - 07-11-2011
No ale jak zmieniam div na nav to usuwam # w css. Po prostu sztuczka z display:table nie działa na nav.
RE: HTML5 <div id="nav"></div> vs <nav></nav> - Kartofelek - 07-11-2011
Sztuczka nie powinna działać. Bo to jest błędne w sumie.
Tabela to tabela. Jej dzieci to komórki. Komórki to jest table-cell a nie inline.
W sumie nawet nie wiem czemu to miało by służyć to table? Do rozciągania na 100%? Przecież block jest lepszym rozwiązaniem. Do równomiernego ułożenia LI? Ale wtedy inline nie zadziała...
RE: HTML5 <div id="nav"></div> vs <nav></nav> - Storm - 07-11-2011
Nie twierdzę, że to jest prawidłowe rozwiązanie tylko, że działa. Tak na prawdę to ciekawi mnie ta różnica pomiędzy div a nav, która sprawia, że centrowanie przestaje działać.
RE: HTML5 <div id="nav"></div> vs <nav></nav> - SkuterPL - 07-11-2011
bo samoo nav, napewno ma jakies stale inne linie, ktore moze to zmieniaja