| Autor | Zpráva | ||
|---|---|---|---|
| hrncal.junior Profil |
#1 · Zasláno: 11. 4. 2014, 10:51:32
Ahoj,
Potřeboval bych pořešit problém se seznamem. Seznam je na jednom řádku, ale zarovnání na řádek mi zmizí puntík, který tam chci mít. Dá se tento puntík ostylovat barvou? Děkuji <ul><li>Okrasné dřeviny</li><li>Balkonové rostliny</li><li>Bylinky</li><li>Sklaničky</ul> {display:inline;} |
||
| Plaváček Profil |
#2 · Zasláno: 11. 4. 2014, 11:15:16
hrncal.junior:
Nejspíš pomůže, když místo display:inline použiješ pro jednotlivé položky float:left a pohraješ si s nastavením okrajů. Další možností je použít obrázek na pozadí položky LI. |
||
| Bubák Profil |
#3 · Zasláno: 11. 4. 2014, 11:18:10
Odrážku nohou mít jen elementy, které mají
display: list-item;
Nejjednodušeji to jde obrázkem: http://teststranek.kvalitne.cz/menu7/ Narychlo jsem spáchal http://kod.djpw.cz/jrcb, ale kontroloval jsem to jen v Opeře, je možné, že se to bude muset pro jiné prohlížeče poladit, nebo to může být slepá cesta. |
||
| Trejpa Profil |
#4 · Zasláno: 11. 4. 2014, 11:19:48
hrncal.junior:
Třeba takto: <style>
ul { overflow: auto; margin-left: 0; padding-left: 0; }
li { float: left; padding-left: 0; margin-left: 3ex; }
</style>Změnou hodnoty display přijde položka seznamu o svůj puntík. Barva puntíku se přebírá z barvy textu v položce. Pokud má být jiná, tak je třeba text v položce vnořit do dalšího elementu s barvou textu: <style>
li { color: green; }
li span { color: black; }
</style>
<ul>
<li><span>černý text, zelený puntík</span>
</ul>Pokud máš na stylování puntíku více požadavků, schovej ho a pod levý padding položky dej obrázek na pozadí, který tento puntík bude představovat. U něj jde nastavit vertikální zarovnání vůči textu a různé tvary, jaké si jen nakreslíš. |
||
| hrncal.junior Profil |
#5 · Zasláno: 11. 4. 2014, 11:34:24 · Upravil/a: hrncal.junior
Bubák:
To jde pěkně, až na to, že mám 3 seznamy pod sebou a musí to být vycentrované ke středu stránky Trejpa: Ha to funguje přesně, jak potřebuji. díky moc :-) |
||
| Bubák Profil |
#6 · Zasláno: 11. 4. 2014, 11:46:45 · Upravil/a: Bubák
Vycentrovaný seznam uděláš třebas takto: http://teststranek.kvalitne.cz/menu7.3/, jak na umístění obrázkové odrážky se už tu probralo a je tu i ukázka a jinak umístěnou odrážkou.
hrncal.junior: „Ha to funguje přesně, jak potřebuji.“ Můžu vědět, jak jsi to vycentroval? Jde to, od IE 8 není problém, pro starší IE existují různé netriviální způsoby. |
||
| hrncal.junior Profil |
#7 · Zasláno: 11. 4. 2014, 11:54:22
Ale ja to vycentrovat na střed stránky?
|
||
| Str4wberry Profil |
#8 · Zasláno: 11. 4. 2014, 12:01:52
Pro IE 8 a novější bych celý postup viděl takto: Živá ukázka
|
||
| hrncal.junior Profil |
#9 · Zasláno: 11. 4. 2014, 12:09:40
Jde o to, jak to vezmou ostatní prohlížeče...
|
||
| Plaváček Profil |
#10 · Zasláno: 11. 4. 2014, 12:13:32
hrncal.junior:
Stejně. |
||
| hrncal.junior Profil |
#11 · Zasláno: 11. 4. 2014, 12:13:54
Nojo, ale jak odstraním před první položkou puntík? :-D
|
||
| Str4wberry Profil |
#12 · Zasláno: 11. 4. 2014, 12:17:47
Třeba: Živá ukázka
|
||
| hrncal.junior Profil |
#13 · Zasláno: 11. 4. 2014, 12:21:57
Ha děkuji mockrát. V těhlech "nových věcech" se ztrácím...nemáte odkaz na nějaký souhrn těhlech before, child atd?
|
||
| Bubák Profil |
#14 · Zasláno: 11. 4. 2014, 12:29:55
|
||
| anonymníí Profil * |
#15 · Zasláno: 11. 4. 2014, 17:19:10
Str4wberry:
hezká ukázka, ale proč tak složitě? Pominu-li obrázek na pozadí, bylo by v tomto případě přidávat před všechny vyjma první, abych to nemusel další deklarací hned rušit: li + li:before {content: "● "; color: red; padding-right: 1em;}Zbytek stylopisu vyjma posledního řádku z [#12] může zůstat. |
||
|
Časová prodleva: 10 let
|
|||
0