| Autor | Zpráva | ||
|---|---|---|---|
| FYP Profil * |
#1 · Zasláno: 5. 5. 2013, 22:26:21
Zdravím,
Když tvořím menu pro webové stránky jsem zvyklí používat tento druh zápisu: <menu> <li><a href="#">Odkaz 1</a></li> <li><a href="#">Odkaz 2</a></li> <li><a href="#">Odkaz 3</a></li> </menu Jenže na tenhle styl zápisu nikde nemohu najít postup, jak vytvořit vysouvací horizontální menu. Můžete mi někdo prosím poradit? Předem díky. |
||
| quatzael Profil |
#2 · Zasláno: 5. 5. 2013, 23:40:57
To musíš vyřešit javascriptem. Kdyžtak mrkni na stránky kde to je a uvidíš jak to mají udělaný. Každopádně klasický vysouvací menu není ani trochu in v dnešní době.. Hodí se tak akorát pro banky nebo finanční společnosti..
|
||
| martin1312 Profil |
#3 · Zasláno: 6. 5. 2013, 00:55:22
quatzael:
„klasický vysouvací menu není ani trochu in v dnešní době.. Hodí se tak akorát pro banky nebo finanční společnosti..“ Mohol by si túto myšlienku rozvinúť? Čo je zlé na horizontálnom menu (teraz neviem či si myslel "vysúvací efekt" alebo celú podstatu tohto typu menu)? |
||
| FYP Profil * |
#4 · Zasláno: 6. 5. 2013, 14:25:36
Na svém webu prakticky potřebuji jen to, aby jedna z rubrik dejme tomu "Odkaz 1" byla rozšířena o další podkategorie po najetí.
|
||
| quatzael Profil |
#5 · Zasláno: 6. 5. 2013, 14:42:29
martin1312:
Myslel jsem rozbalovací menu, který se samo rozbalí po najetí myši.. Pokud je potřeba je podle mě lepší klikací menu. Záleží hodně na tom co v tom menu je a jestli to splňuje účel.. Třeba celkem dobře vymyšlený to má alza.cz |
||
| RockFire Profil |
#6 · Zasláno: 6. 5. 2013, 17:35:44
FYP:
HTML: <menu>
<li>
<a href="#">Odkaz 1</a>
<menu>
<li><a href="#">Pododkaz1</a></li>
<li><a href="#">Pododkaz2</a></li>
</menu>
</li>
<li><a href="#">Odkaz 2</a></li>
<li><a href="#">Odkaz 3</a></li>
</menu>CSS (částečně): menu li menu{display:none;}
menu li:hover menu{display:block;}toto řešení už si nastyluješ podle potřeby. Pokud chceš vysouvací menu s efektem, bude potřeba použít JavaScript, doporučuji framework jQuery quatzael: „Každopádně klasický vysouvací menu není ani trochu in v dnešní době.. Hodí se tak akorát pro banky nebo finanční společnosti..“ Toto ti prozradil kdo? |
||
|
Časová prodleva: 2 měsíce
|
|||
| quatzael Profil |
#7 · Zasláno: 10. 7. 2013, 16:00:25
Tady je na to taky jeden názor SEO odborníka Jana Tichého.. (to jak moc velký SEO odborník ve skutečnosti je samozřejmě nejsem schopen posoudit)
Čas od 1:27:45 Úvod do praktického SEO |
||
|
Časová prodleva: 1 rok
|
|||
| Harison Profil * |
#8 · Zasláno: 10. 9. 2014, 14:52:57
Zdravím ,
Mám to to CSS vysouvací menu, a potřeboval bych aby z toho co se vysunulo se vysunulo ještě další políčko. Poradí někdo jak na to. Jsem začátečník. .menu {color: #000000; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; width: 200px; white-space: nowrap;}
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: #fff; background-color: rgb(141,135,81); display: block; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);}
.menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
.menu li li {float: none; border: none; padding: 0; margin: 0;}<table> <tr> <td> <ul class="menu"> <li><a href="../html/">HTML</a> <ul> <li><a href="../html/text.php">Textové značky</a></li> <li><a href="../html/seznamy.php">Seznamy</a></li> <li><a href="../html/odkazy.php">Odkazy</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../css/">CSS</a> <ul> <li><a href="../css/border/">border</a></li> <li><a href="../css/margin/">margin</a></li> <li><a href="../css/font/">font</a></li> <li><a href="../css/color/">color</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../php/">PHP</a> <ul> <li><a href="../php/kniha_navstev.php">Kniha návštěv</a></li> <li><a href="../php/generovani-formulare.php">Generování formuláře</a></li> </ul> </li> </ul> </td> </table> |
||
| Tomáš123 Profil |
Harison:
„Poradí někdo jak na to.“ Najprv musíš upraviť HTML. Neodporúčam miešať tabuľky a zoznamy... Malo by to byť asi v takejto podobe: <ul>
<li><a href="#">Hlavná položka</a>
<ul>
<li><a href="#">Sub položka</a>
<ul>
<li><a href="#">Sub položka 2.úrovne</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Hlavná položka</a></li>
.
.
.
</ul>A potom, umiestni prosím svoj kód do tohto editora. Nikomu sa nechce skúmať tvoj neprehľadný kód. |
||
| Harison Profil * |
#10 · Zasláno: 10. 9. 2014, 17:56:46
Tomáš123:
Děkuji mockrát, ale nějak teď to menu není vysovací. Jsem asi na to levej. |
||
| Marschmallow Profil |
#11 · Zasláno: 10. 9. 2014, 17:58:44
Harison:
Ukážeš nám kód? Třeba pomocí stránky, co odkazoval Tomáš123. |
||
| Tomáš123 Profil |
Harison:
„ale nějak teď to menu není vysovací. Jsem asi na to levej.“ Nie je, pretože zatiaľ sme upravili iba HTML. Ak si ho upravil presne podľa uvedenej štruktúry, tak možno nefunguje vôbec, pretože CSS im nedeklaruje všetky vyššie[#8] uvedené vlastnosti. Ešte musíme upraviť CSS. Najprv, aby sa pekne vysúvalo a potom si sám doplníš potrebné deklarácie vzhľadu. Kľúčom k dokončeniu je živá ukážka. |
||
| Harison Profil * |
#13 · Zasláno: 10. 9. 2014, 19:37:13
Potřeboval bych, aby po najetí na sub položku se ukázala sub položka 2. úrovně.
http://kod.djpw.cz/iofb - kód z editoru. Děkuji za rady a pomoc |
||
| Tomáš123 Profil |
#14 · Zasláno: 10. 9. 2014, 20:14:47
Harison:
Takže pripravil som pre teba krátku učebnicu tvorby vysúvacieho dvojúrovňového menu. Informácie:• Znak " >" v selektore znamená priamy potomok elementu
Napríklad li > ul preložené do slovenčiny hovorí: „Nastav vlastnosti nižšie každému elementu <ul>, ktorý je priamym potomkom elementu <li>“.
• Ak nejaká vlastnosť nie je popísaná v komentároch, stačí ju vymazať a pozorovať zmeny. Ak by niečo nebolo jasné, len píš :-) |
||
| Harison Profil * |
#15 · Zasláno: 10. 9. 2014, 23:34:13 · Upravil/a: Harison
Díky moc pomohlo to, ale ještě bych potřeboval když se nastránku koukám je moc velliká v prohlížeči dá se to nějak napsat rovnou v kódu. aby byla menší?
Jo KDYŽ DÁM oddaluji stránku zmenšuje se ale opakuje se pozadí a není uprostřed. Dá se to nějak vyřešit? |
||
| Hando Profil |
#16 · Zasláno: 11. 9. 2014, 02:29:39
Co tím myslíš, moc velká?
Samozřejmě si se stránkou můžeš dělat co se ti zlíbí. Je-li široká, nastav jí šířku dle svého uvážení (třeba něco kolem 960 px) a nastav centrování pomocí margin: auto. Řešilo se to tu mockrát. Na výšku stránky bych nešahal, od toho je kolečko myši. Texty atd. si můžeš rozměrově taky přizpůsobit dle libosti. CSS je silný nástroj. :) Jen tak mimochodem, těžko hádat, o čem přesně mluvíš - jestli máš někde stránku nahranou, hoď sem odkaz. |
||
| Tomáš123 Profil |
#17 · Zasláno: 11. 9. 2014, 16:03:50
Harison:
„Jo KDYŽ DÁM oddaluji stránku zmenšuje se ale opakuje se pozadí a není uprostřed. Dá se to nějak vyřešit?“ Samozrejme áno. Použi vlastnosť background-size: cover;.
|
||
| Harison Profil * |
#18 · Zasláno: 12. 9. 2014, 13:58:30
Tomáš123:
tak pozadí jsem vyřešil ale teď celkově vše co mám na stránce tak po odálení stránky v prohlížeči se vše posune do leva a nezůstane v prostřed. Jak na to? |
||
| Bubák Profil |
#19 · Zasláno: 12. 9. 2014, 14:05:34
Pravděpodobně máš jen stránku odsunutou od levého okraje (marginem nebo relativním pozicováním) podle rozlišení svého monitoru, ale při jiném rozlišení to nesedí.
Řešením je vycentrovat web tak, že obalovému elementu deklaruješ margin: auto;
Pokud rada nepomohla, dej odkaz na živou ukázku. |
||
| Harison Profil * |
#20 · Zasláno: 13. 9. 2014, 09:04:11
|
||
| Hando Profil |
#21 · Zasláno: 13. 9. 2014, 11:27:13
Mohu se zeptat, v čem ty stránky tvoříš? To je pěknej bordel v tom kódu...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40"><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style></style> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2"><title> Mateřská škola Dyjákovice</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Bych to skoro viděl na nějaký Word. :) Jaký smysl má toto: <body style="margin-top: 575px; height: 85px; margin-left: 112px; width: 983px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url('pozadi.jpg');" alink="#ee0000" link="#0000ee" vlink="#551a8b">.podklad {
<body style="margin-top: 362px; height: 85px; margin-left: 112px; width: 983px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(pozadi.jpg);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
}Je tam takových věcí strašně moc - tedy má rada zní - SMAZAT a začít odznovu. Vytvoř si kostru, kde budeš přesně vědět, kam co pozicuješ (když už tedy chceš pozicovat absolutně) a teprve potom tomu dodávej detaily typu "alink", "vlink" a nějaké boční prvky s počasím. Když někdo půjde na stránky školky, nebo co to je, tak ho budou zajímat informace o školce, o jídelně atd., pro počasí si dojde na specializované stránky. Pokud teď opravíš centrování (jak na centrování), tak za chvíli určitě narazíš na další probém. Zkus to napsat čistě a jen s tím, co víš, co která část kódu přesně dělá. |
||
| Harison Profil * |
#22 · Zasláno: 13. 9. 2014, 21:13:59 · Upravil/a: Harison
Jo je to Word :-)
Hando: Tam to mi dělá po zadí stránky a podklad je zprusvitnění okna do kterého chci psát. |
||
| Hando Profil |
#23 · Zasláno: 14. 9. 2014, 01:17:46
Harison:
„Jo je to Word :-)“ Pryč od toho, není snad nic horšího než Word na tvorbu stránek. Možná tak ji udělat celou v malování. :) Pokud to myslíš trochu vážně, stáhni si nějaký editor se zvýrazněnou syntaxí, třeba PSPad, nebo nějaký ekvivalent. Takhle si přiděláváš práci navíc... „Tam to mi dělá po zadí stránky a podklad je zprusvitnění okna do kterého chci psát.“ ".podklad {<body style..." Spíš to dělá paseku v kódu. Nemůžeš přeci deklarovat css třídu pomocí html kódu, ne? Máš v tom, soudě dle kódu, dost zmatek. Jak jsem psal v předchozím příspěvku - vykašli se na to a napiš to od začátku znovu. |
||
| Harison Profil * |
#24 · Zasláno: 14. 9. 2014, 11:44:18
Hando:
Tak jsem začal od znovu. http://kod.djpw.cz/frfb Udělal se mi problém stim že ta mám odrážky (tečky), a jak udělat aby výsledná stránka v prohlížeči se nezobrazovala tak velká. Díky |
||
| Bubák Profil |
Harison:
Do CSS nemůžeš psát to, co tam nepatří, třebas <rozbalovací menu>, deklarace následující za takovým nesmyslem nefunguje.
Pokud chceš mít v CSS komentář, tak syntaxe je /* rozbalovací menu */
„jak udělat aby výsledná stránka v prohlížeči se nezobrazovala tak velká“ Udělej ji menší, přesněji řečeno užší. Kód je pořád takový děs, že doporučuji smazat a začít znova. Vidím, že jsi převážnou většinu balastu odstranil, ale pořát ho tam hodně zůstalo. Třebas CSS máš 2×, máš pro to nějaký důvod? Pokud ano, sem s ním, dozvíš se, jak to udělat podle tvého přání, ale lépe. Nedoporučuji používat na layout a rozmístění elementů pozicování, ale udělat stránku klasickým způsobem. Třebas nyní, pokud změníš šířku položek menu, musíš přepsat každé položce menu pozici. |
||
| Harison Profil * |
#26 · Zasláno: 14. 9. 2014, 16:27:40
Hando:
Teď jsem teda zmatený. CSS mám 2x ? Jednou menu a po druhý pozice. Důvod css mám kvůli tomu menu. A nevím jak jinak rozmístit věci než pozicováním. :-( |
||
|
Časová prodleva: 10 let
|
|||
0