🚀 go-pugleaf

RetroBBS NetNews Server

Inspired by RockSolid Light RIP Retro Guy

Article View: pl.comp.www
Article #408265

Re: Wyświetlanie kodu na stronie - niechciane paski przewijania - jak je ukryć?

#408265
From: Pit
Date: Sun, 09 Aug 2015 03:43
40 lines
3035 bytes
Dnia 08.08.2015 szyk100@o2.pl <szyk100@o2.pl> napisał/a:
> Witam
>
> Mam stronę: http://szyk.jcom.pl/leakckr.html i w niej parę znaczników <div class="Code"><pre><code>...</code></pre></div> . Ten div ma atrybut overflow: auto; po to by pojawiały się paski przewijania wtedy gdy trzeba. I w (FireFoxie) przy w sekcji "Przykład wywołania skryptu" obok kodu pojawia się pasek przewijania nawet gdy wszystko mieści się na stronie. W Chrome jest nawet gorzej bo wcześniejsze przykłady kodu (te powyżej w pojedynczych liniach) też mają pasek przewijania po prawej stronie.
>
> Chcę te paski przewijania ukryć ale nie wiem jak. Bo wygląda to paskudnie.
>
> Proszę o info jak prawidłowo wklejać kod na stronę tak by nie było pasków przewijania gdy się wszystko mieści i by się one pojawiały wtedy gdy trzeba.
>
> z góry dzięki

W stylach dla <pre> masz ustawione "line-height: 14px;" czyli linię tekstu
masz co 14 pikseli, ale... czcionka jest wyższa niż 14 pikseli, dlatego
ostatnia linijka tekstu "wystaje" poza obrys (wiem, wiem, nie ma tam
"zapalonych" piksli, ale to nie jest ważne, nawet spacja zajmuje jakiś
obszar). Generalnie przy takim "twardym" formatowaniu jakie stosujesz
wyjścia są dwa:
1) W CSS dla *.Code po prostu olewasz overflow (czyli pozostawiasz domyślny
"visible").
2) Dla "pre" musisz tak dobrać "line-height" (i ewentualnie font-size),
aby wysokość między liniami tekstu była wystarczająca dla danej czcionki i
rozmiaru (na przykład "line-height: 17px;" albo "font-size: 12px;").

Dla testu ustaw sobie na przykład:

pre
{
   line-height: 14px;
   font-size: 40px;
   margin: 0px;
   padding: 0px;
   background-color: yellow;
}

i sprawdź jak to wygląda (poprzesuwaj scrollem), zwróciwszy uwagę na
ostatnią linijkę - to przerysowany efekt tego co masz u siebie. Obrys
litery "wystaje" poza tło warstwy - u Ciebie dzieje się dokładnie to samo,
tylko że nie widać tego wprost, bo każdy znak oprócz właściwego kształtu ma
jeszcze swój "padding" a czasem i kerning aby wiadomo było jakie odstępy
między znakami/liniami zachować (inaczej byłyby "posklejane").
Technical Details
Message-ID: <slrnmsdj3a.2qm.nospam@nc10.lan>
Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed2.atman.pl!newsfeed.atman.pl!.POSTED!not-for-mail
References: <fea8931e-760e-4fe9-a945-eb3129442e55@googlegroups.com>

Show Full Headers
Complete Article Headers
Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed2.atman.pl!newsfeed.atman.pl!.POSTED!not-for-mail
From: Pit <nospam@sdf.lonestar.org>
Newsgroups: pl.comp.www
Subject: Re: Wyświetlanie kodu na stronie - niechciane paski
 przewijania - jak je ukryć?
Date: Sun, 9 Aug 2015 03:43:39 +0000 (UTC)
Organization: ATMAN - ATM S.A.
Lines: 40
Message-ID: <slrnmsdj3a.2qm.nospam@nc10.lan>
References: <fea8931e-760e-4fe9-a945-eb3129442e55@googlegroups.com>
NNTP-Posting-Host: user-31-174-5-2.play-internet.pl
Mime-Version: 1.0
X-Trace: node2.news.atman.pl 1439091819 13188 31.174.5.2 (9 Aug 2015 03:43:39 GMT)
X-Complaints-To: usenet@atman.pl
NNTP-Posting-Date: Sun, 9 Aug 2015 03:43:39 +0000 (UTC)
User-Agent: slrn/1.0.1 (Linux)
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit