Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
HTML5 <div id="nav"></div> vs <nav></nav>
#1
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ć?
Odpowiedz
#2
(+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)
Odpowiedz
#3
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)
Odpowiedz
#4
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
Odpowiedz
#5
No ale jak zmieniam div na nav to usuwam # w css. Po prostu sztuczka z display:table nie działa na nav.
Odpowiedz
#6
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...
Odpowiedz
#7
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ć.
Odpowiedz
#8
bo samoo nav, napewno ma jakies stale inne linie, ktore moze to zmieniaja
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Reset Stylu HTML5 Morfeusz_2005 12 7,035 09-02-2013, 01:37
Ostatni post: Morfeusz_2005
  SVG a canvas w html5 andrzejhi 1 2,064 03-01-2013, 16:35
Ostatni post: atp
  HTML5 Kartofelek 1 2,064 22-11-2012, 18:55
Ostatni post: hieroshima
  HTML5 a semantyka Morfeusz_2005 2 2,531 22-08-2012, 16:46
Ostatni post: Morfeusz_2005
  HTML5 History API hieroshima 0 1,318 23-07-2012, 17:54
Ostatni post: hieroshima

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl