Autor Zpráva
Pearljam
Profil
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
Zkoušel jste přiřadit položce <li> vlastní třídu a nepoužívat jen .seznam li{...}
Tomáš123
Profil
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
zub277, Tomáš123:
Děkuji mnohokrát za příklady, tyhle složitější seznamy jsem tvořil poprvé.

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: