Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: noef 09. 04. 2012, 13:55:16

Název: CSS: posun spodního okraje výš
Přispěvatel: noef 09. 04. 2012, 13:55:16
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.
Název: Re:[CSS] posun spodniho okraje vys
Přispěvatel: KapitánRUM 09. 04. 2012, 15:25:31
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;
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 10. 04. 2012, 00:03:11
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)
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: DarkKnight 10. 04. 2012, 00:31:03
udelat background jako obrazek (tak jak chces podtrzeni), repeat-x + bottom left a stelovat marginem?
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: KapitánRUM 10. 04. 2012, 07:03:34
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?
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 10. 04. 2012, 09:59:18
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?).
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: KapitánRUM 10. 04. 2012, 17:35:23
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ě.


Název: Re:CSS: posun spodního okraje výš
Přispěvatel: KapitánRUM 10. 04. 2012, 17:44:25
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.
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 10. 04. 2012, 19:54:28
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 :)
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: Lol Phirae 10. 04. 2012, 20:26:49
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
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: DarkKnight 10. 04. 2012, 20:36:31
nebo to udelat pres ten obrazek, kdyz to udelas sikovne, nemusis resit velikost pisma
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 11. 04. 2012, 09:28:04
...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.
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 11. 04. 2012, 12:01:24
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..
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: riff 12. 04. 2012, 06:08:05
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.
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 12. 04. 2012, 09:56:05
...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 :o. 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/)
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: riff 12. 04. 2012, 10:29:57
Aha, to jsem netušil. Za těch několik let, co kóduju, jsem neviděl jediný požadavek, aby bylo něco podtrženo jinou barvou, než text. Zřejmě je to obecně tak málo používaná vlastnost, že má pro výrobce prohlížečů nízkou prioritu. Je nutné, aby to bylo podtrženo červeně? Má to nějaký význam?
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: riff 12. 04. 2012, 10:52:57
Dal jsem dokupy řešení, které by mělo fungovat všude. Je to taky prasárna, ale oproti border-bottom nejsou problémy s pozicí podtržení a oproti obrázku zase můžeš měnit barvy přímo ve stylech: http://jsfiddle.net/h6nyf/ (http://jsfiddle.net/h6nyf/).
Název: Re:CSS: posun spodního okraje výš
Přispěvatel: noef 13. 04. 2012, 17:35:26
dekuji za zajimave reseni.

tou cervenou carou v ilustracnim obrazku jsem ale myslel jen pozici, ne konkretni vzhled - omlouvam se, je to moje chyba, mel jsem to lepe formulovat. od zacatku mi slo pouze o posunuti simulovaneho podtrzeni blize k textu samotnemu, tj. mit prerusovanou caru (puvodne border-bottom) tesne pod napr. pismenem "o".

zatim jsem to "vyresil" prechodem na puvodni font, kde to problemy nedelalo. az bude vetsina velkych prohlizecu podporovat podtrhavani z css3, tak to zacnu znovu resit.

je to zatim jen draft - http://dev.w3.org/csswg/css3-text/#text-decoration-style
zive ukazky napr. tu - http://www.css-wiki.com/css-eigenschaft/text-decoration-style

dekuji vsem za prispevky :)