Autor Zpráva
hrncal.junior
Profil
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
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
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
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
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
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
Ale ja to vycentrovat na střed stránky?
Str4wberry
Profil
Pro IE 8 a novější bych celý postup viděl takto: Živá ukázka
hrncal.junior
Profil
Jde o to, jak to vezmou ostatní prohlížeče...
Plaváček
Profil
hrncal.junior:

Stejně.
hrncal.junior
Profil
Nojo, ale jak odstraním před první položkou puntík? :-D
Str4wberry
Profil
Třeba: Živá ukázka
hrncal.junior
Profil
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
http://jecas.cz/css-selektory
anonymníí
Profil *
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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