CSS: posun spodního okraje výš

[noef]

nejsem si vubec jisty, ze to lze udelat.

mam styl u odkazu jako border-bottom, po zmene fontu je ale "podtrzeni" prilis dole. lze jen upravou stylu posunout spodni okraj o par pixelu vys?

http://jsfiddle.net/ebVMt/ <- zde jako cervene podtrzeni

dival jsem se i na alternativu pres text-decoration-style - v ff jsem to rozjel pres vendor prefix, v chromu se me to ale nepodarilo. ie jsem ani nezkousel, pac potrebuju reseni, ktere bude fungovat ve vsech hlavnich prohlizecich.

[Reklama]

[KapitánRUM]

Nerozumím, co bys rád.
Nestačilo by trochu roztáhnout řádek?

Zkus si pohrát třeba s:
font: bold 100%/1.5 Verdana;
nebo
line-height: 1.5em;
a třeba zkus i vertical-align:
vertical-align: text-top;
nebo
vertical-align: -20%;
nebo
vertical-align: middle;

[noef]

asi jsem to nenapsal prilis srozumitelne, jde mi to, ze po zmene fontu je "podtrzeni" (border-bottom) mnohem niz nez u predchoziho fontu, takze to vypada celkem spatne (vznikla velka mezera mezi textem a "podtrzenim"). potreboval bych dostat dolni okraj textu - odkazu (border-bottom) na uroven radku (tj. na spodni okraj napr. pismene "o").

drive:

Kód: [Vybrat]

odkaz
-----   <-border-bottom ~ simulace podtrzeni
nyni:

Kód: [Vybrat]

odkaz
(tady je ta mezera, ktere se chci zbavit)
-----
vyzkousel jsem vsechny moznosti z prispevku od KapitánRUM, bohuzel budto nemely zadny vliv, nebo jen zvetsily rozestup mezi radky, ale nemely zadny vliv na mezeru mezi simulaci podtrzeni a textem (zkouseno v ff11)

[DarkKnight]

udelat background jako obrazek (tak jak chces podtrzeni), repeat-x + bottom left a stelovat marginem?

[KapitánRUM]

Obrázek bude fungovat, pokud dokáže správně spočítat výšku fontu, což si nejsem jistý, protože se v zásadě nedá zaručit, že na daném zařízení takový font je. Nebylo by možné poslat odkaz na tu finální stránku? Tam, kde to dělá problémy?

[Reklama]

[noef]

jde o maly blog ve wordpressu - http://366.hopto.org/blog

snazil jsem se trosku zmenit vzhled, at to neni porad stejne. v html/css nejsem zadny mistr, je tedy mozne, ze chyba nastala az mym rytim do stylu.

nejvice je to videt u odkazu v novinkach/clancich, napr. zdroj a stitky.

reseni s pozadim je zajimave, ale nechal bych ho az jako zalozni, kdyby opravdu nic jineho nebylo.

text-decoration-style jsem zkusil jeste v opere a ie9, ani jeden to nepodporuje (ze by to byl jen draft?).

[KapitánRUM]

1. Proč tam máš 2x style.css ? Nemělo by být jedno style.css a druhé třeba custom.css?
Nenadávám, jen vrtím hlavou, třeba nemám proč, WP neznám...a když to funguje.

2. Nevím přesně, co je problém, asi to, že to podtržení zasahuje do spodního řádku.

Ale zkoušel jsem nahradit
.entry p {margin:5px 0 8px;}

za:
.entry p {font: 100%/1.5 Verdana;}
nebo třeba:
.entry p {line-height: 150%;}
                         
A funguje to docela dobře, samozřejmě si to poladíš podle sebe.
Hele, rád ti poradím, ale fakt mi nějak nedocvakává, co je přesně problém.
Jestli je to tvoje a tohle nepomůže, udělej testovací stránku a pošli odkaz, problémové řádky označ červeně.

[KapitánRUM]

Možná už to vidím, tobě jde o podtržení v kategorii:

Můžeš zkusit:
         .post-title {
            border-bottom:1px solid #333;
            font: 20px ptsansregular;
            text-shadow:0 -1px 0 #080808;
                                line-height:0;
                                padding-bottom:10px;
         }

nebo:
        .post-title {
             border-bottom:1px solid #333;
            font: 20px ptsansregular;
            text-shadow:0 -1px 0 #080808;
                                padding-bottom:10px;
         }

         #content .post-title a {
            display:inline-block;
            background:none;
            border-bottom:1px solid #666;
         }

Jestli to pořád není ono, prostě nakresli to, co bys rád a obrázek hoď třeba na imageshack.

[noef]

sablona neni moje, tu jsem pouze prevzal, jedine do ceho jsem drbal byly styly (a pluginy).

http://img689.imageshack.us/img689/7909/aunderline.png
^teckovana seda - aktualni
cervena linka - jak bych chtel, aby to vypadalo

ted jsem si uvedomil, ze asi ne ve vsech prohlizecich pojede spravne ten volitelny font, takze mozna vidite neco jineho

kazdopadne dekuji za Vas cas

[Lol Phirae]

Není mi jasné, co tam vyvádíš. Pokud chceš, aby to "podtržení" bylo umístěno jakoby pomocí "text-decoration:underline", ale chceš to podtržení stylovat, tak leda CSS3.

http://www.w3.org/TR/css3-text/#decoration

[DarkKnight]

nebo to udelat pres ten obrazek, kdyz to udelas sikovne, nemusis resit velikost pisma

[noef]

...Pokud chceš, aby to "podtržení" bylo umístěno jakoby pomocí "text-decoration:underline", ale chceš to podtržení stylovat, tak leda CSS3. ...

nejsem si vubec jisty, ze to lze udelat. ...

vzhledem k tomu, ze text-decoration z css3 podporuje (v aktualnich verzich) z nejrozsirenejsich prohlizecu jen ff, tak to asi nema cenu pouzivat.

puvodne jsem chtel takove reseni, aby simulace podtrzeni zustala pres border-bottom. jak ale ctu, to asi nebude mozne, zkusim to reseni s pozadim.

[noef]

nebo to udelat pres ten obrazek, kdyz to udelas sikovne, nemusis resit velikost pisma

zkousel jsem ruzne veci, ale nepodarilo se mi najit to "sikovne" reseni, ktere by univerzalne sedlo na libovolnou velikost fontu. zkousel jsem to na "tag cloud"u (se stejnym fontem jako maji ted clanky) s 4 nebo 5px pruhlednym spodkem pozadi (=podtrzenim), ale u vetsich velikosti pisma se to zase moc rozbiha - obrovska mezera mezi radkem (spodek znaku "o") a simulaci podtrzeni. zkusil jsem natvrdo dat background-position, stejny problem (rypanim do marginu/paddingu se mi rozsype clanek/tagcloud).

opravdu netusim, jak jinak to resit . zacinam premyslet o vypusteni podrzeni a odkazy zvyraznit jen zmenou barvy..

[riff]

Nevím, co řešíš. Pro prohlížeče podporující CSS3 ho nastyluj na červeno a pro těch pár vykopávek prostě bude stejnou barvou. Rozhodně mnohem lepší, než to řešit pomocí border-bottom nebo dokonce  obrázkem, to je hnus.

[noef]

...Pro prohlížeče podporující CSS3 ho nastyluj na červeno a pro těch pár vykopávek prostě bude stejnou barvou....

asi neco delam spatne, protoze nejpouzivanejsi prohlizece mi vychazeji jako vykopavky . zkousel jsem to v aktualnich verzich opery, chrome, ie a ff - jediny ff (s vendor prefixem) to zvladl zobrazit.

(na tomhle jsem to zkousel http://jsfiddle.net/em8bc/)