| 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