podtržený text, ale tečkovaný :: CSS :: HTML, CSS, JavaScript :: Fórum :: SyX.cz - Tvorba www a webových aplikací

Zdravím, neví někdo jak podtrhnout text tečkovaně?

Já vim, můžu použít třeba "border-bottom: 1px dashed black;", ale v tom mi nastává menší problém s výškou řádku. Když mám třeba "line-height: 30px" tak je border až uplně dole, takže je asi 10px pod textem... :(

tak si dej menší vejšku řádku, tou si můžeš poladit jak bude tečkovaný podtržení daleko od textu a přidej si vrchní margin, kterym zas uděláš mezeru mezi řádkama

Johan: zbytečný nastavování... :o)

PsYcHo: Můžeš to udělat:

1) Jak říkáš ty, nastavením spodního rámečku...
1a) Border moc dole? To je divný... výšku řádku by měl mít
nastavený rodičovský element, odkazy by neměli mít
žádnou výšku ani šířku, jedině, pokud bys měl u odkazů
nastaveno třeba display: inline-block;. Tak se mrkni.
1b) jinak píšeš dashed, což je čárkovaný... tečkovaný je dotted
2) Někdo to dělá obrázkem v pozadí, s obrázkem vysokým třeba
13px (výška textu + mezera) a širokým 2px, kde celý obrázek je
průhledný, a jeden jediný pixel dole je obarvený barvou
požadovaného podtržení. Ale tohle mi přijde jako zbytečná blbost.

3) A nakonec pomocí CSS3, který zatim třeba IE neumí... a ve FF mi to
dokonce funguje pouze s prefixem -moz-.
Ale neviděl bych v tom problém, koukni, nahodil jsem tečkovaný odkazy
na tomhle webu.

CSS3 vlastnosti

1
2
3
4
5
6
7
8
9

a {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #37749F;
/* Ale jelikož není jistota že všude pujde, přidej k tomu ještě -moz- vlastnosti */
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: dotted;
    -moz-text-decoration-color: #37749F;
}