| Autor | Zpráva | ||
|---|---|---|---|
| Adrifinel Profil |
#1 · Zasláno: 15. 11. 2011, 22:16:10
Marně se snažím udělat struktorovaný seznam....
Chci aby to vypadalo asi takhle: Ukázka Bohužel se mi to nedaří neboť mi moje css to vyruší. Co jsem zjistila, tak je tohle základní vlastnost html...jaká je toho defenice v css? |
||
| jenikkozak Profil |
#2 · Zasláno: 15. 11. 2011, 22:34:21
Adrifinel:
V čem konkrétně vidíš problém? <style>
ul{color:red}
ul ul{color:blue}
</style>
<ul><li>Položka první úrovně
<ul><li>První položka druhé úrovně
<li>Druhá položka druhé úrovně
</ul>
</ul> |
||
| margin Profil * |
#3 · Zasláno: 15. 11. 2011, 23:03:34
Adrifinel:
„se mi to nedaří neboť mi moje css to vyruší“ Používáš CSS reset, nebo máš špatně navržené CSS. Protože jsi nedala odkaz na živou ukázku, ale jen malůvku, tak jen hádám, že by to šlo nějak takto: <style>
body, ul, li {margin: 0; padding: 0; list-style: none;} /* pokus o tvé CSS, co to vyruší */
body {background: navy;} /* nastavení podobného pozadí */
ul.kronika {margin: 1.5em 0 0 20px; list-style: disc; color: aqua;}
ul.kronika ul {margin: 0 0 0 40px; list-style: square;}
.kronika a {color: #fff;}
</style>
<ul class="kronika">
<li><a href="#">kronika</a>
<ul>
<li><a href="#">kronika 1</a>
<li><a href="#">kronika 2</a>
<li><a href="#">kronika 3</a>
</ul>
</ul> |
||
| Adrifinel Profil |
#4 · Zasláno: 15. 11. 2011, 23:36:26
jenikkozak:
No : http://digitalnimonstra.cz/sitemap.php když přidávám další položky, tak se to nějak lepí na levé menu... |
||
| Adrifinel Profil |
#5 · Zasláno: 15. 11. 2011, 23:41:21
margin:
aby se vědělo, jak to má vypadat, pač se mi to nedařilo na stránce udělat... a tvůj kód úplně přebarvil pozadí a zrušil ukazování odrážek :) |
||
| jenikkozak Profil |
#6 · Zasláno: 16. 11. 2011, 08:05:25
Adrifinel:
„když přidávám další položky, tak se to nějak lepí na levé menu...“ Položka menu (<li>) nemá povinnou ukončovací značku. Pro snazší chápání víceúrovňového menu může být pro někoho lepší ty koncové značky neuvádět. Odkazy ale ukončovací značku mají vždy. Ty jsi ukončila položky menu, ale odkazy ne. |
||
| Adrifinel Profil |
#7 · Zasláno: 16. 11. 2011, 18:13:16 · Upravil/a: Adrifinel
jenikkozak:
A se mi upravou nějak smazaly, koukala jsem, že mi to udělá seznam, když to mám takhle: ul><li><a href="digimonduskpribeh.php">Kronika města Darkmoon</a></li>
<div> <div>
<ul><li><a href="digimonduskpribeh2.php">Kronika města Darkmoon strana 2</a></li> |
||
| jenikkozak Profil |
#8 · Zasláno: 16. 11. 2011, 18:39:02
Adrifinel:
Dávat <div> do <ul> se mi nezdá být dobrým nápadem. Navíc je tam úplně zbytečně. Čeho chceš jeho vložením dosáhnout? |
||
| Adrifinel Profil |
#9 · Zasláno: 16. 11. 2011, 18:41:53
jenikkozak:
No bez toho div se mi nevytvoří strukturovaný seznam, všechny položky jsou zarovnané nasteno, nejsou odskočené. |
||
| jenikkozak Profil |
#10 · Zasláno: 16. 11. 2011, 18:57:20
Adrifinel:
„No bez toho div se mi nevytvoří strukturovaný seznam, všechny položky jsou zarovnané nasteno, nejsou odskočené.“ Přidej tomu seznamu na mapě webu nějakou třídu. A potom mu můžeš přidat levý margin. Dokud tam ty <div>y budeš mít, problémů se nezbavíš. Mimochodem tu uzavírací značku <li> na prvním řádku také nemáš mít. V seznamech můžeš použít pouze elementy <li>, nic jiného tam nedávej. |
||
| yFang Profil |
#11 · Zasláno: 16. 11. 2011, 19:07:04
Adrifinel:
Tvůj problém se nachází hned na prvním řádku stylopisu, kde nastavuješ značce <ul> padding a margin na 0, čímž zrušíš jakékoliv odsazení. |
||
| margin Profil * |
#12 · Zasláno: 16. 11. 2011, 19:13:35
yFang:
„Tvůj problém se nachází hned na prvním řádku stylopisu...“ Ale je řešitelný, viz ukázka výše [#3], kde taky dělám na prvém řádku jednoduchý CSS reset. |
||
| yFang Profil |
#13 · Zasláno: 16. 11. 2011, 19:19:01
margin:
Je to věc názoru, ale nezdá se mi logické nastavovat jednu věc několikrát. Přijde mi jednodušší upravit si to tam, kde je potřeba. Pak vznikají chyby, na které se špatně přichází, viz toto téma. |
||
| Adrifinel Profil |
#14 · Zasláno: 16. 11. 2011, 19:19:04
jenikkozak:
Myslíš v těch více úrovněnových seznamech? Pač používání </li> je na diskuzi o tom, jestli ji používat nebo ne, přičemž se část shodne, že klidně ano, že to nevadí a druhá, že je to zbytečnost atd. A něco jako: .ul1 (ul){margin-left: 1.5em} Zkusila jsem to dát jako < ul class="ul1"> a levý margin nefunguje, neodskočí to. A pak, když tam chci mít čtverečky, tak list-style-type: square nefunguje. |
||
| Adrifinel Profil |
#15 · Zasláno: 16. 11. 2011, 19:29:03
yFang:
No, když odstraním ul ze seznamu položek, tak seznam sice odskočí, ale rozhodí mi to desing menu: viz momentální situace: http://digitalnimonstra.cz/sitemap.php |
||
| Taurus Profil |
#16 · Zasláno: 16. 11. 2011, 19:30:05
Adrifinel:
marginův kód ze trojky funguje, jen na 4. a 5. řádku je třeba přidat li před otevírací složenou závorku. Pokud máš stále problém, je to pak otázka priority a něco ti to přebíjí. Buď v css doplň kontext nebo přidej important (což není úplně nejlepší nápad). Lepší bude si to projet a zjistit příčinu. Každopádně psaní jedné třídy na řádek je pěkně nepřehledné, ten zvyk ti doporučuju opustit. |
||
| Adrifinel Profil |
#17 · Zasláno: 16. 11. 2011, 19:45:23 · Upravil/a: Adrifinel
Taurus:
To psaní té třídy na jeden řádek je důsledem toho, že jsem řešila css kompresy, kterou mi doporučoval Google pro zvýšení rychlosti stránek a ještě někde jsem to četla. Tak to už funguje až na ty odrážky ve tvaru čtverečku. |
||
| jenikkozak Profil |
#18 · Zasláno: 16. 11. 2011, 19:46:14
Adrifinel:
„Pač používání </li> je na diskuzi o tom, jestli ji používat nebo ne, přičemž se část shodne, že klidně ano, že to nevadí a druhá, že je to zbytečnost atd.“ To ne diskusi není. Ovšem je dobré si uvědomit, že když koncovou značku nepíšeš, nemusíš vědět, kde má být. Pokud ji píšeš, vědět to musíš. Ovšem ty, jak se zdá, to nevíš. Takže buď si zjisti, kde má být (na konci seznamu či před začátkem další položky), nebo ji prostě nepiš. |
||
| Adrifinel Profil |
#19 · Zasláno: 16. 11. 2011, 19:57:11
jenikkozak:
Hele měla bych takový dotaz: {margin: 0; padding: 0; list-style: none;}Proč tu vlastně nastavuješ none? jestli jsem dobře pochopila, tak to v tom kódu je priorintní a další nastavení odrážek, tudíž nefunguje.... Já to píšu, jak jsem se naučila: <ul><li><a href="digimonduskpribeh6.php">Kronika města Darkmoon strana 6</a></li></ul> Takže ti nějak nerozumím, chceš říct, že by se měla psát něco jako: <li><a href="digimonduskpribeh6.php">Kronika města Darkmoon strana 6</a> </li><li><a href="digimonduskpribeh6.php">Kronika města Darkmoon strana 6</a> či až jako poslední </li> v seznamu x položek.... btw. neukončené li vadí, když děláš validitu. |
||
| jenikkozak Profil |
#20 · Zasláno: 16. 11. 2011, 20:04:02 · Upravil/a: jenikkozak
Adrifinel:
„Proč tu vlastně nastavuješ none?“ To já nepsal. :-) „Já to píšu, jak jsem se naučila:“ Však je to ok. „chceš říct, že by se měla psát něco jako:“ Ne. Šlo mi jen a jen o to, že když dáváš do seznamu další seznam, musí být v <li>, ne za ní. „btw. neukončené li vadí, když děláš validitu.“ Nedělám validitu, ale stránky. Ty tvé jsou validní, když dáváš divy a seznamy přímo do seznamů? Ačkoliv seznamy nemohou obsahovat nic jiného než položky seznamu (<li>)? Asi ne. Tu zelenou ikonku si tudíž na web dát nemůžeš. Však ani nechceš. A navíc nemáš pravdu. Stránka bez koncových značek položek seznamu validní je. |
||
| margin Profil * |
#21 · Zasláno: 16. 11. 2011, 20:14:13
Adrifinel:
„neukončené li vadí, když děláš validitu“ Nevadí, je to validní. Vadí chybějící </ul>. „Proč tu vlastně nastavuješ none?“ Ze tvého dotazu jsem vytušil, že používáš CSS reset, ale nevěděl jsem přesně jaký. První dva (komentované) řádky v mém CSS měly simulovat podmínky, jaké panují na tvém webu, nejsou tam proto, abys je použila. |
||
| Taurus Profil |
#22 · Zasláno: 16. 11. 2011, 20:15:39
Adrifinel:
„To psaní té třídy na jeden řádek je důsledem toho, že jsem řešila css kompresy, kterou mi doporučoval Google pro zvýšení rychlosti stránek a ještě někde jsem to četla.“ Komprese je dobrá věc, ne však na úkor srozumitelnosti. Komentáře taky zabírají místo, ale je dobrým zvykem je uvádět. Zaměřil bych se na kvalitní zmenšení obrázků, kde se dá úšetřit mnoho oproti pár maličkostem v css. |
||
| jenikkozak Profil |
#23 · Zasláno: 16. 11. 2011, 20:24:11 · Upravil/a: jenikkozak
Taurus:
Řešit (ne)zalamování řádků v CSS je zrovna věc, na kterou bych se v tomto případě úplně vybodnul. Já už spoustu let píšu styly podobně jako Adrifinel, navíc mezi vlastnostmi a hodnotami nedělám mezery. A zrovna toto řešení mi přijde přehlednější. Takže to je jen věc názoru. Teď by měla vyřešit jiné problémy. |
||
| Adrifinel Profil |
#24 · Zasláno: 16. 11. 2011, 22:06:51
jenikkozak:
A překuk :) No pokud se bavíme jako o celku tak ne, ale některé stránky jo. A ono jde o to, že když mi něco nejde, tak se třeba argumentuje právě tou validitou, jako důvod vyřešení chyby apod. čili někteří lidé se není zaměřují jako na podstatný problém. Když to schválně projedu validátorem: Line 206, Column 4: document type does not allow element "UL" here; assuming missing "LI" start-tag <ul><li><a href="page.php?digimon=agumonkarta/agumon1">Agumon</a></li> A nevím proč, ale v době, kdy jsem to ladila, tak mu neukončené li vadilo, možná jsem se trefila do doby, kdy neměl svůj den... margin: Aha, to jsem nepochopila :) Nicméně, stále tu zůstává ten problém s tím vzhledem odrážky... Taurus: No tady narážíme asi na to, že jedna strana to považuje za dobrý způsob psaný kódu a druhá za špatný, asi jako jestli mít v menu odkaz na hlavní stránku.... |
||
| jenikkozak Profil |
#25 · Zasláno: 16. 11. 2011, 22:24:01
Adrifinel:
„Když to schválně projedu validátorem: Line 206, Column 4: document type does not allow element "UL" here; assuming missing "LI" start-tag“ Víš, to je právě to, o čem tu celou dobu „melu“. Takže naposledy a jinak: Přímým potomkem <ul> může být jen <li>. Pokud chceš mít dva seznamy v sobě, nemůžeš použít <ul><ul><li></li></ul></ul>, ale <ul><li><ul><li></li></ul></li></ul>.
„tak mu neukončené li vadilo, možná jsem se trefila do doby, kdy neměl svůj den...“ Asi tak to bude. :-) „Nicméně, stále tu zůstává ten problém s tím vzhledem odrážky...“ Použij list-style-type: .ul1 li{list-style-type:square}
|
||
| Adrifinel Profil |
#26 · Zasláno: 16. 11. 2011, 22:35:56
jenikkozak:
Počkej, vidím blbě a nebo vy sami tu máme ten první příklad: <ul><li>Položka první úrovně
<ul><li>První položka druhé úrovně
<li>Druhá položka druhé úrovně
</ul>
</ul> |
||
| margin Profil * |
#27 · Zasláno: 16. 11. 2011, 22:38:37
Tohle smaž, psal jsem to jako obecný návod v době, kdy jsem neviděl tvé CSS:
body, ul, li {margin: 0; padding: 0;}
ul.ul1{margin: 1.5em 0 0 20px; list-style-type:square}
ul.ul1 ul {margin: 0 0 0 40px; list-style: square;}Dej někam tohle, nebo něco podobného: #pagemain ul {margin: 0 0 0 20px; list-style: disc;}
#pagemain ul ul {margin: 0 0 0 20px; list-style: square;}
#pagemain ul a {color: #fff}Je možné, že bude funguvat i to, co radí jenikkozak, nezkoumal jsem. |
||
| Adrifinel Profil |
#28 · Zasláno: 16. 11. 2011, 23:04:19
margin:
Dokonce se to i správně zarovnalo (nelepí se to na to menu).... |
||
|
Časová prodleva: 12 let
|
|||
0