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
Szyk Cech

do góry

Dnia 08.08.2015 s...@o...pl <s...@o...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").

do góry

Wielkie dzięki za pomoc!
Zrobiłem najprościej jak się da i usunąłem line-height ze stylu <pre> (sam nie wiem
po co tam go dałem :P ). Teraz jest ok - paski przewijania pojawiają się kiedy trzeba
i normalnie są nie widoczne.

jeszcze raz dzięki i pozdrawia
Szyk Cech

do góry