<table width="970" height="20" border="5" bordercolor="grey" cellspacing="0" align="center" style="border-bottom: hidden; margin-top: 1px;" bgcolor="#CCCCCC"><tr><td>
<div align="center">
<a class="block-button1" href="uvod.html" target="hlavne"><img src="images/home.png">&nbsp;&nbsp;&nbsp;&nbsp;Domov</a>
<a class="block-button1" href="kontakt.html" target="hlavne"><img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Kontakt</a>
<a class="block-button1" href="cenik.html" target="hlavne"><img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Cennik</a>
</div>
</td></tr></table>

hatto13 · Napísal **hatto13**: 19.05.2014 13:35

lukyno: nie je dovod nepouzivat ul, li - na to je to urcene kedze menu je zoznam (list) odkazov.

na tabulky zabudni, nepouzivaj ich! a uz vobec nie tak ako si to predviedol. tabulky sa pouzivaja na tvorbu tabuliek, nie na strukturu stranky.

menu sa da vytvorit vselijako - len z divov, len z odkazov, kombinaciou vsetkeho mozneho je to na tebe, ale best practice je

Kód:

<nav>
 <ul>
  <li>...</li>
  <li>...</li>
 ...
</ul>
</nav>

lukyno010 · Napísal autor témy **lukyno010**: 19.05.2014 14:33

tak je potom lepšie toto?

Kód:

HTML:
<div align="center" class="menu">
<a class="block-button1" href="uvod.html" target="hlavne"><img src="images/home.png">&nbsp;&nbsp;&nbsp;&nbsp;Domov</a>
<a class="block-button1" href="kontakt.html" target="hlavne"><img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Kontakt</a>
<a class="block-button1" href="cenik.html" target="hlavne"><img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Cennik</a>
</div>

CSS:
.menu {
   margin-left: 309px;
   border: 5px solid; 
   border-color: grey;
   border-bottom: hidden;
   width: 957px; 
   height: 31px;
   background-color: #CCCCCC;
}

Kamahl · Napísal **Kamahl**: 19.05.2014 16:23

Povedali sme ti co je best practice, preco sa pytas, ci horsie je lepsie

A ta tabua v prvom rieseni je uplne zla.

hatto13 · Napísal **hatto13**: 19.05.2014 17:11

toto tam nedavaj - align="center" na to je css

a takisto ikonky pre menu nevkladaj ako obrazok, ale cez css ako background. a ani nebudes potrebovat  

border-bottom: hidden - hidden neexistuje pre border

lukyno010 · Napísal autor témy **lukyno010**: 19.05.2014 17:16

to hidden pri border-bottom mi funguje. a ako teraz dám do toho to podmenu ? .. vnorím ďalší div do toho prvého? Zoznamom ul a li mi to nefunguje( možno len preto že to neviem dobre spraviť, ale ja to musím všetko spraviť a nemôžem kopírovať kódy z netu lebo to mám ako prácu do školy)

hatto13 · Napísal **hatto13**: 19.05.2014 17:45

toto by ti na menu malo stacit a zvysok by si si mal vystacit s CSS (popridavaj triedy ak treba) a popripadne JS (ale nie je nutny).

Kód:

<nav>
 <ul class'menu'>
  <li>
     <a href="#" class='home'>menu1</a>
     <ul class='submenu'>
       <li><a href="#">submenu1</a></li>
       <li><a href="#">submenu2</a></li>
       <li><a href="#">submenu3</a></li>
     </ul>
   </li>
   <li>
     <a href="#" class='kontakt'>menu2</a>
     <ul class='submenu'>
       <li><a href="#">submenu1</a></li>
       <li><a href="#">submenu2</a></li>
       <li><a href="#">submenu3</a></li>
     </ul>
   </li>
   <li>
     <a href="#">menu3</a>
     <ul class='submenu'>
       <li><a href="#">submenu1</a></li>
       <li><a href="#">submenu2</a></li>
       <li><a href="#">submenu3</a></li>
     </ul>
   </li>
 </ul>
</nav>

to hidden ti 'funguje' iba preto, lebo to berie ako nespravnu hodnotu a preto nezobrazi nic.

lukyno010 · Napísal autor témy **lukyno010**: 19.05.2014 22:00

a to nemôžem tak nechať ten hidden aj keď je to len nesprávna hodnota? .... a načo je dobrý ten tag <nav> s ním aj bez neho to jednoduchí menu čo si tu pridal vyzerá rovnako

Ďuri · Napísal **Ďuri**: 19.05.2014 22:44

Nemozes, daj tam 0. A <nav> nie je dobry na nic, mozes ho dat prec.

hatto13 · Napísal **hatto13**: 19.05.2014 22:51

je dobry zo semantickeho hladiska. nie je nevyhnutny ale prave na to je urceny

shaggy · Napísal **shaggy**: 19.05.2014 23:08

Z akého sémantického hľadiska? Staršie prehliadače to neprečítanú a nové prehliadače/vyhľadávače/čítačky si poradia s "klasickým" menu.

Kamahl · Napísal **Kamahl**: 20.05.2014 1:09

Shaggy, ty vyvijas kod, ktory sa ma pouzivat len mesiac alebo rok? O par rokov budu <nav> rozpoznavat vsetky prehliadace a verim tomu, ze tieto nove html5 semanticke tagy najdu svoje uplatnenie. Tak preco sa nenaucit vyuzivat ich uz teraz.

hatto13 · Napísal **hatto13**: 20.05.2014 7:47

mas pravdu, mali sme ostat pouzivat tabulky...

nejde o konstrukciu, ale o semantiku webu. je jedno ci je tam div alebo nav, ale nav bol navrhnuty presne na tento ucel. mas pravdu nepodporuju - resp. nepodporuje ie8 - to normalize riesi, netreba robit nic naviac.
pouzivam semanticke tagy article, section, nav, footer, header ... vsade, kde sa to hodi a nemam problem ani pri ie7.

Kraliček · Napísal **Kraliček**: 20.05.2014 15:04

aby sa ti to zmenilo tak

Kód:

.trieda{
xyz
background: url('cesta');
.trieda::hover{
background: url('stlaceny_obrazok');
}
}

Ja keď kodim menu v html (doooosť malo) tak použijem <div><li>Domov napriklad</li></div>

hatto13 · Napísal **hatto13**: 20.05.2014 15:12

kralice:

Kód:

.trieda {
  xyz
  background: url('cesta');
}
// v css sa neda vnarat
// jedna dvojbodka
.trieda:hover {
  background: url('stlaceny_obrazok');
}

li nemoze byt v div - musim byt priamo v ul alebo ol.

a ako inak kodis menu ak nie v html?

Ďuri · Napísal **Ďuri**: 21.05.2014 2:00

hatto13 píše:

nav bol navrhnuty presne na tento ucel.

Ked si precitas nieco o (ozajstnej) historii HTML 5, zistis, ze tieto elementy navrhol akysi panko pohladom z okna bez analyzy a nejakou nahodou v specifikacii ostali, kde sa ich potom chytili nadsenci a zrazu sa z toho robi nieco, bez coho sme nemohli zit. Aky realny prinos si spozoroval, odkedy pouzivas tieto znacky?
Ja napriklad stale nerozumiem, preco sa upusta od pouzivania <menu> + <li> (okrem toho, ze v HTML 5 ma <menu> spraseny semanticky vyznam).

hatto13 · Napísal **hatto13**: 21.05.2014 9:37

ideme teraz rozoberat detaily ako bol navrhnuty?
napisal som mu best practice pre menu. je jedno ci tam das nav/div/menu fungovat bude rovnako. nav a menu sa lepsie hlada v kode a upravuje v css. a ohladom toho menu - ak si pozriet specifikaciu a aj dokumenty tak zistis ze je viac zamerany na menu v zmysle apikacie (buttony pre rte, ulozit, nahrat) a aj vacsina cms pouziva nav. ale ako som pisal, je to jedno. teraz je to nav o 2 roky to bude nieco ine

shaggy · Napísal **shaggy**: 21.05.2014 17:36

Ďuri - ja som používal menu ešte predtým, než to bolo cool (čiže som vlastne hipster). A potom ma pri jednej z návštev v ÚNSS upozornili na to, že s nim majú problém čítačky (aj keď nešlo o nový element).
hatto13 - nemám pocit, že by použitie určitého elementu + dotiahnutie JS knižnice pre staršie prehliadače bolo považované za best practice. Aký je prínos nav oproti UL?

// diky za info ; ) duri

lukyno010 · Napísal autor témy **lukyno010**: 21.05.2014 22:42

ďakujem všetkým za odpovede, niečo poskúšam a dúfam že to už konečne spravím

// Spojený príspevok Štv 22.05.14 8:06

ale chcel by som sa ešte spýtať že ako zamedzím tomu že, ja mám stránku teraz spravenú pomocou toho div a cez css to mám odsunuté určitými pixelmi. Ale keď to zobrazím na monitore s väčším rozlíšením tak mi to odsunie. Dá sa tomu nejako zabrániť?

MEnu

Podobné témy