Autor Zpráva
Tomáš123
Profil
#1 · Zasláno: 17. 3. 2014, 21:27:49
Odpovědět Citovat
Zdravím,
Tu je živá ukážka stránky, na ktorej je menu aké by som chcel. Po skopírovaní CSS-ka všetko ide, problém je ale v tom, že nerozumiem, čo k čomu patrí. Nepáči sa mi, keď iba kopírujem, preto prosím niekoho skúseného, aby mi k tomu napísal komentáre, ktoré budú vystihovať čo, k čomu patrí (tým myslím tie <ul> a <li> lebo je to tam celé pomiešané a keď chcem urobiť repliku s použitím <li class="...">tak sa to pletie a menu sa nevysúva) a prečo je tam napr.:použitý display: block; alebo display:inline;. Vopred ďakujem za ochotu a rady.
jefitto44
Profil
#2 · Zasláno: 18. 3. 2014, 10:52:05
Odpovědět Citovat
Display block znamená, že ti z niečoo urobí bolkový element. Napr., ak by si mal text, tak by sa normálne zalomil riadok. Ak však nastavíš display:block, nebude sa zalamovať nič (teda bude, ale len podľa toho, aký široký ten block nastavíš).
A zas naopak. Obrázok sa bežne správa ako blok, to znamená, že ho obteká text. Ak ho chceš zaradiť do riadku medzi text, jednoducho mu nastavíš display: inline;

Kus športové vysvetlenie, ale na začiatok by mohlo stačiť :D
Bubák
Profil
#3 · Zasláno: 18. 3. 2014, 11:43:47 · Upravil/a: Bubák o 18 minut později
Odpovědět Citovat
jefitto44:
petovatíš, je to snůška nesmyslů, možná jsi to myslel dobře, ale napsal jsi bláboly, které nemám náladu vyvracet. Souhlasil bych pouze s první větou, přestože je v ní nepříjemný překlep.

Tomáš123:
http://jsfiddle.net/ferar720/hRy32/
CSS, řádky 56 až 60: 
ul li {
    display: block;
    position: relative;
    float: left;
}
Smysl deklarace display: block; nechápu, protože element LI se chová jako blok, navíc má odrážku, předně jde o list-item. Deklarace display: block; zbaví položky menu odrážek, ale mám za to, že vhodnější je použít list-lyle: none; protože z takové deklarace je zřejmé, co dělá.
Také float: left; způsobí, že se položky menu budou chovat jako blokové.

„prečo je tam napr.:použitý display: block; alebo display:inline;“
display:inline; jsem v ukázce nenašel
display:none; je použit k zneviditelnění podmenu.

CSS, řádky 75 až 78: 
li:hover ul {
    display: block;
    position: absolute;
}
Změní display:none; na display: block;, příslušné podmenu se zobrazí na požadované pozici.
Tomáš123
Profil
#4 · Zasláno: 18. 3. 2014, 13:03:39
Odpovědět Citovat
Bubák:
(Chápem, že ti ide o poriadok, ale aj jeffito44 to nenapísal nepochopiteľne-ako povedal "športovo")
Nemám problém s list-style alebo inými vlastnosťami-viem čo znamenajú. Ja som si vytvoril menu: 
<div>
<ul class="h_menu">
 <li class="h_menu_item"><a href....</a>
  <ul class="submenu">
   <li class="submenu_item"><a href....</a>
   <li class="submenu_item"><a href....</a>
   <li class="submenu_item"><a href....</a>
  </ul>
 <li class="h_menu_item"><a href....</a>
 <li class="h_menu_item"><a href....</a>
 <li class="h_menu_item"><a href....</a>
</ul>
</div>
Problém je v tom že neviem ul a li priradiť triedy z indexu. (dúfam že ma chápeš). je tam toho veľa a keď to v tom príklade nemá triedy tak tomu nerozumiem.
jefitto44
Profil
#5 · Zasláno: 18. 3. 2014, 14:30:27
Odpovědět Citovat
Tak musíš dať triedy manuálne- na ostro, na drzáka, na holáka, alebo ako sa tomu ešte hovorí...

Čo sa týka automatického priradzovania tried, tak to sa rieši cez php cykly (mám na mysli položku active napr.)
jenikkozak
Profil
#6 · Zasláno: 18. 3. 2014, 16:04:46
Odpovědět Citovat
Tomáš123:
„Problém je v tom že neviem ul a li priradiť triedy z indexu. (dúfam že ma chápeš).“
A pokud chápeš, mohl bys to vysvětlit i nám, co zatím tápeme?

Když místo <ul> použiješ značku <menu>, budeš nejspíš potřebovat třídu jedinou - na označení právě zobrazené stránky.

jefitto44:
„Ak však nastavíš display:block, nebude sa zalamovať nič (teda bude, ale len podľa toho, aký široký ten block nastavíš).“
Ne, tak tomu není. (Ne)blokovost prvku nemá se zalamováním obsažených prvků nic společného.
„Obrázok sa bežne správa ako blok“
Ale kdepak.
„to znamená, že ho obteká text.“
To z toho skutečně nevyplývá.
„Ak ho chceš zaradiť do riadku medzi text, jednoducho mu nastavíš display: inline;“
Není mu potřeba nic nastavovat, jako inline prvek se chová už „od narození“.
jefitto44
Profil
#7 · Zasláno: 18. 3. 2014, 17:09:39
Odpovědět Citovat
jj, máš pravdu, overil som to... obrázok nebol zrovná ten pravý príklad :O
Tomáš123
Profil
#8 · Zasláno: 18. 3. 2014, 17:32:48 · Upravil/a: Tomáš123
Odpovědět Citovat
jenikkozak:
„Není mu potřeba nic nastavovat, jako inline prvek se chová už ‚od narození‘.“
Ani nie, veď od narodenia sa <li> radia pod seba.

„A pokud chápeš, mohl bys to vysvětlit i nám, co zatím tápeme?“
Všimni si ten kód hore..Ja chcem dosiahnuť aby po "najdení myšky" sa to submenu premenilo z display:none na display:block;(to je celá veda, ale neviem ako to správne a valídne zapísať)
Keby si mi tu prosím mohol hodiť kód menu úplne bez všetkého, len aby fungovalo vysúvanie, možno by som všetko pochopil.


jefitto44:
Ja viem, že manuálne, ale pletie sa tam <ul> a <li>, pretože jedny sú súčasťou stabilného a druhé vysúvacieho menu. A ja im neviem určiť vlastnosti v CSS.
Bubák
Profil
#9 · Zasláno: 18. 3. 2014, 18:08:48
Odpovědět Citovat
Tomáš123:
„Problém je v tom že neviem ul a li priradiť triedy z indexu. (dúfam že ma chápeš). je tam toho veľa a keď to v tom príklade nemá triedy tak tomu nerozumiem.“
Já zase nechápu, k čemu se dobré menu s přemnoženými třídami.

„Keby si mi tu prosím mohol hodiť kód menu úplne bez všetkého, len aby fungovalo vysúvanie, možno by som všetko pochopil.“
Vždyť takový kód je v je živé ukázce, na kterou jsi odkázal.

„A ja im neviem určiť vlastnosti v CSS.“
Vlastnosti nech, jak jsou, přepiš pouze selektory.
Tomáš123
Profil
#10 · Zasláno: 18. 3. 2014, 19:52:46 · Upravil/a: Tomáš123 o minutu později
Odpovědět Citovat
Bubák:
„selektory“
presne-nenašiel som na to výraz.
Takže triedy sú tam potrebné preto, lebo keď tam bude náhodou ešte jedno menu tak sa to bude prelínať a tak to musí byť smerované konkrétne.
-Ak si myslíš, že tried je tam priveľa a dá sa to urobiť oveľa jednoduchšie tak mi napíš čo mám prerobiť a ako jednoduchšie by to šlo a hneď sa dám do práce.
-predtým som vysúvacie menu nerobil a nemám o tom prehľad, ale za žiadnych okolností nechcem iba kopírovať strofy kódu z internetu-preto aj žiadam o vysvetlenie
-ten zdroják v ukážke nie je môj, ja mám externý CSS súbor
- a tie premnožené triedy- snažím sa triedy použivať iba tam kde je to nutné

„Vlastnosti nech, jak jsou, přepiš pouze selektory.“
tam sú iba <ul> a <li>(nemajú žiadnu triedu a to znamená že to je určené všetkým <ul> a <li> v celom súbore-to práve nechcem) preto im musím nejaké triedy priradiť, a keďže z toho kódu čo je v živej ukážke neviem vydedukovať, ktoré <ul> patrí ku submenu a ktoré je menu ako celok a tak isto ktoré <li> patrí ku celku a ktoré pod submenu-tak ani neviem správne priradiť selektory v danom CSS kóde.
jefitto44
Profil
#11 · Zasláno: 19. 3. 2014, 07:38:38
Odpovědět Citovat
aha
<div id="menu">
<ul>
<li>Položka normálneho menu</li>
<li>Položka normálneho menu</li>
<li>Položka normálneho menu</li>
<li>Položka normálneho menu</li>
<ul>
<li>Položka vyskakovacieho menu</li>
<li>Položka vyskakovacieho menu</li>
<li>Položka vyskakovacieho menu</li>
</ul>
<li>Položka normálneho menu</li>
<li>Položka normálneho menu</li>
<li>Položka normálneho menu</li>
</ul>
</div>

V CSS pre hlavné menu:
#menu ul {blablabla;}
#menu ul lu {blablabla;}

V CSS pre vyskakovacie menu
#menu ul ul {blablabla; display:none;}
#menu ul ul li {blablabla; haťapaťa;}

CSS hover zabezpečí, že sa menu zobrazí pri najetí myšou
#menu ul ul:hover {display:block; blablabla}


Hodnoty si hádam zvládneš doplniť
Tomáš123
Profil
#12 · Zasláno: 19. 3. 2014, 09:06:24
Odpovědět Citovat
jefitto44
Správne-Ďakujem,presne to som potreboval-hodnoty si doplním. Ešte raz dik.
Časová prodleva: 10 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0