Autor Zpráva
radekt
Profil
Dobrý den,
kdesi jsem viděl seznam, který měl před každou položkou obrázek ve tvaru teček uspořádaných do trojúhelníku. Zkusil jsem řešení bez obrázku, že jsem před seznam dal dvojtečku a tečku, přičemž tečku jsem polohoval tak, aby vzniknul kýžený trojúhelník. Není toto mé řešení kostrbaté, nešlo by to elegantněji?

CSS:
/* seznam má před každou položkou :. */
.dvojtecka, .tecka { font-size: 200%; color: green; font-weight: bold; }
.tecka { vertical-align: 15%; } /* zarovnání tečky, aby tvořila s dvojtečkou trojúhelník */
.tecka:after { content: " "; } /* mezera, aby se nelepila na text */

HTML:
<ul>
  <li><span class="dvojtecka">:</span><span class="tecka">.</span>Nabídka1</li>
  <li><span class="dvojtecka">:</span><span class="tecka">.</span>Nabídka2</li>
  <li><span class="dvojtecka">:</span><span class="tecka">.</span>Nabídka3</li>
</ul>
mimochodec
Profil
Používám v tom případě obrázek. Máš naprostou volnost a ušetříš spoustu času.
Tvoje řešení je složitější, v html to představuje nadbytečný nesémantický kód.

Ještě mě napadá, že kdybys místo posunuté tečky použil &middot;, dalo by se to tvoje zjednodušit, ale ani v tom případě by nebyla jistota, že middot bude přesně uprostřed dvojtečky.. prostě obrázek řeší všechno.
Trejpa
Profil
radekt:
Je to nesémantické. S obrázkem na pozadí se dá pracovat lépe.

• Vlastnost font-size: 200% ti zvětšuje výšku položek.
• Pseuoelement :after a vlastnost content nefunguje v IE 7 a nižších vůbec, v IE 8 a vyšších jen ve standardním režimu.
• Když už jsi do HTML kódu nesémanticky vložil dva typograficky nevhodné znaky, proč tam stejně nepřidáš i tu mezeru? Nebo zkoušíš vyhledávače, zda si poradí s tečkami ve slově „:.Nabídka1“?

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: