eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwWyświetlanie kodu na stronie - niechciane paski przewijania - jak je ukryć?Re: Wyświetlanie kodu na stronie - niechciane paski przewijania - jak je ukryć?
  • Data: 2015-08-09 05:43:39
    Temat: Re: Wyświetlanie kodu na stronie - niechciane paski przewijania - jak je ukryć?
    Od: Pit <n...@s...lonestar.org> szukaj wiadomości tego autora
    [ pokaż wszystkie nagłówki ]

    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").

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: