Autor | Zpráva | ||
---|---|---|---|
Pearljam Profil |
#1 · Zasláno: 20. 2. 2016, 20:43:17
Vytvořil jsem si číslovaný seznam, kde jsem si vytvořil styly pro nadpisy a číslované seznamy. Nemohu přijít na to jak udělat aby číslo nadpisu bylo stejné jako nadpis a nezměnilo styl pod nadpisem. Zkoušel jsem několik variant ale už mě opravdu nic nenapadá. Ukázka zde webnice.cz/text.html
CSS: ol { counter-reset: item; } .seznam li { display: block; } .seznam li:before { content: counters(item, ".") ") "; counter-increment: item; font-size: 1.3em; color: #202020; font-weight: 700; } /* FONTS */ .font-content-head { font-family: 'Roboto', sans-serif; font-size: 1.8em; font-weight: 700; color: #BA4D4E; text-align: left; line-height: 1.3; margin: 50px 0px 30px; } .font-content-strong { font-family: 'Roboto', sans-serif; font-size: 1.2em; font-weight: 700; color: #202020; text-align: left; margin-bottom: 15px; } .s-content { display: block; margin: 15px 0px 35px; font-family: 'Roboto', sans-serif; font-size: 1em; font-weight: 400; color: #202020; text-align: left; line-height: 1.2; } HTML <h1>Hlavní nadpis</h1> <div class="seznam"> <ol> <li><span class="font-content-head">Nadpis 1</span> <ol> <li><span class="font-content-strong"> Lorem ipsum dolor sit amet consectetuer </span><span class="s-content"> drásníky postínkuc lžičkočaj. Umyva onouby sólo z rohlínům lásná škový zavě. </span></li> <li><span class="font-content-strong"> Lorem ipsum dolor sit amet consectetuer </span><span class="s-content"> drásníky postínkuc lžičkočaj. Umyva onouby sólo z rohlínům lásná škový zavěď odobzor drávadlov sudba. hudbalo sestí Lákamí hulák nám Rozcuchře kuce </span></li> </ol> </li> </ol> </div> |
||
zub277 Profil |
Dyžtak tady:
codepen.io/anon/pen/EPBjge ol { counter-reset: item; } .seznam li { display: block; } .seznam li:before { content: counters(item, ".") ") "; counter-increment: item; font-size: 1.8em; font-weight: 700; color: #BA4D4E; text-align: left; line-height: 1.3; } div ol:nth-child(2) > li:before { font-family: 'Roboto', sans-serif; font-size: 1.2em; font-weight: 700; color: #202020; text-align: left; margin-bottom: 15px; } /* FONTS */ .font-content-head { font-family: 'Roboto', sans-serif; font-size: 1.8em; font-weight: 700; color: #BA4D4E; text-align: left; line-height: 1.3; margin: 50px 0px 30px; } .font-content-strong { font-family: 'Roboto', sans-serif; font-size: 1.2em; font-weight: 700; color: #202020; text-align: left; margin-bottom: 15px; } .s-content { display: block; margin: 15px 0px 35px; font-family: 'Roboto', sans-serif; font-size: 1em; font-weight: 400; color: #202020; text-align: left; line-height: 1.2; } |
||
Lonanek Profil |
#3 · Zasláno: 20. 2. 2016, 21:15:42
Zkoušel jste přiřadit položce <li> vlastní třídu a nepoužívat jen .seznam li{...}
|
||
Tomáš123 Profil |
#4 · Zasláno: 20. 2. 2016, 21:22:43
Pearljam:
„Nemohu přijít na to jak udělat aby číslo nadpisu bylo stejné jako nadpis a nezměnilo styl pod nadpisem“ Pridaj položkám zoznamu <li> , ktoré obsahujú nadpis, nejakú triedu. Konkrétnejším selektorom (zmeny na riadku 16) potom zacieliš zmenu iba u požadovaných riadkov.
V ukážke som použil symbol priameho potomka; použitím nejakej triedy by mohla byť podpora lepšia. Do tej ukážky by sa mi hodil skôr definičný zoznam. |
||
Pearljam Profil |
#5 · Zasláno: 20. 2. 2016, 21:45:57
zub277, Tomáš123:
Děkuji mnohokrát za příklady, tyhle složitější seznamy jsem tvořil poprvé. |
||
Časová prodleva: 8 let
|
0