• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Rozpływający się tekst

Object Storage Arubacloud
0 głosów
161 wizyt
pytanie zadane 24 kwietnia 2018 w HTML i CSS przez Vinchit Obywatel (1,040 p.)

Cześć, mam problem z wyświetlaniem tekstu (jak i pisaniem) mianowicie jak zaczynam pisać w "textarea" jakąś informacje to przy odczycie tekst się rozpływa (nie przylega do lewej krawędzi jak bym chciał).

CSS (textarea)

textarea{
    text-align: left;
}

Macie jakieś rady? :)

1 odpowiedź

+1 głos
odpowiedź 24 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 24 kwietnia 2018 przez Vinchit
 
Najlepsza
A nie nadałeś gdzieś jakiegoś paddingu dla textarea?
 komentarz 24 kwietnia 2018 przez Vinchit Obywatel (1,040 p.)

Hmmm... nie wiem do końca który za co odpowiada (ogólnie to CSS u mnie leży :( )

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
 komentarz 24 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wydaje się, że left, ale spróbuj dla textarea dać po prostu padding: 0 i zobaczysz co się zmieni.

Pytanie jeszcze jak stylujesz, bo może masz coś przypisane inline albo po jakimś id itp. Jeśli padding nie pomoże to daj kod najlepiej na coden żeby prześledzić jakie css są generowane dla tego elementu.
 komentarz 24 kwietnia 2018 przez Vinchit Obywatel (1,040 p.)

Podeślę kod tutaj:

Oczywiście wyżej (<!DOCTYPE>) jest PHP ale nie wrzucam gdyż nie chcę się chwalić jaki plik odpowiada za łączenie z bazą :)

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dodawanie obywatela</title>
        <link rel="stylesheet" type="text/css" href="grafika/view_poszukiwany.css">
        <meta name="author" content="Vinchit">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    </head>
    <body>
        <img class="logopolice" src="img/police.png">
        <div class="login">
            <form style="width: 700px; height: 800px; overflow: auto;" method="post">
                <input type="hidden" name="id" value="<?php echo $id; ?>" />
                <div>
                    <label class="kat">Numer sprawy:</label>
                    <input disabled="disabled" class="wkat" type="text" name="numer" value="<?php echo $numer; ?>" />
                </div>
                <div>
                    <label class="kat">Imeie i Nazwisko:</label>
                    <input disabled="disabled" class="wkat" type="text" name="name" value="<?php echo $name; ?>" />
                </div> 
                <div>
                    <label class="kat">Wiek:</label>
                    <input disabled="disabled" class="wkat" type="text" name="wiek" value="<?php echo $wiek; ?>" />
                </div> 
                <div>
                    <label class="kat">Płeć:</label>
                    <input disabled="disabled" class="wkat" type="text" name="plec" value="<?php echo $plec; ?>" />
                </div>
                <div>
                    <label class="kat">Kolor skóry:</label>
                    <input disabled="disabled" class="wkat" type="text" name="skura" value="<?php echo $skura; ?>" />
                </div>
                <div>
                    <label class="kat">Stopień zagrożenia:</label>
                    <input disabled="disabled" class="wkat" type="text" name="zagrorzenie" value="<?php echo $zagrorzenie; ?>" />
                </div>
                <div>
                    <label class="kat">Ubrany w:</label>
                    <input disabled="disabled" class="wkat" type="text" name="ubrany" value="<?php echo $ubrany; ?>" />
                </div>
                <div>
                    <label class="kat">Ostatnio widziany:</label>
                    <input disabled="disabled" class="wkat" type="text" name="ostatnie" value="<?php echo $ostatnie; ?>" />
                </div>
                <div>
                    <label class="kat">Cechy:</label>
                    <input disabled="disabled" class="wkat" type="text" name="cechy" value="<?php echo $cechy; ?>" />
                </div>
                <div>
                    <label class="kat">Więcej:</label>
                </div>
                <div>   
                    <textarea name="wiecej" type="text" rows="4" cols="50" style="height: 120px; width: 670px; background: #26283ca6; color: white;">
                        <?php echo $wiecej; ?>
                    </textarea>
                </div>
                <div>
                    <label class="kat">Praca:</label>
                    <input disabled="disabled" class="wkat" type="text" name="praca" value="<?php echo $praca; ?>" />
                </div>
                <div>
                    <label class="kat">Adress zamieszkania:</label>
                    <input disabled="disabled" class="wkat" type="text" name="adress" value="<?php echo $adress; ?>" />
                </div>
                <div>
                    <label class="kat">Pojazd osobisty:</label>
                    <input disabled="disabled" class="wkat" type="text" name="pojazd" value="<?php echo $pojazd; ?>" />
                </div>
                <div>
                    <label class="kat">Policjant:</label>
                    <input disabled="disabled" class="wkat" type="text" name="policjant" value="<?php echo $policjant; ?>" />
                </div> 
                <div>
                    <label class="kat">Data:</label>
                    <input disabled="disabled" class="wkat" type="text" name="data" value="<?php echo $data; ?>" />
                </div>  
            </form>
        </div>
    </body>
</html>

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #e6e6e6;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border: 1px solid #e6e6e6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    *margin-left: .3em;
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    background-color: #e6e6e6;
}

.btn-large {
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.btn:hover {
    color: #333333;
    text-decoration: none;
    background-color: #e6e6e6;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn-primary,
.btn-primary:hover {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.btn-primary.active {
    color: rgba(255, 255, 255, 0.75);
}

.btn-primary {
    background-color: #4a77d4;
    background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4);
    background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4));
    background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4);
    background-image: -o-linear-gradient(top, #6eb6de, #4a77d4);
    background-image: linear-gradient(top, #6eb6de, #4a77d4);
    background-repeat: repeat-x;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);
    border: 1px solid #3762bc;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    filter: none;
    background-color: #4a77d4;
}

.btn-block {
    width: 100%;
    display: block;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    background: #262836;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756', GradientType=1);
}

.login {
    position: absolute;
    top: 35%;
    left: 44%;
    margin: -150px 0 0 -150px;
    width: 600px;
    height: 300px;
}

.login h1 {

}

input {
    width: 100%;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
}

input:focus {
    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
}
.kat{
    color: aliceblue;
}
.wkat{
    color: aliceblue;
}
.logopolice{
    position: absolute;
    left: 46%;
    text-align: center;
}
.pkat{
    padding: 3px;
}
textarea{
    text-align: left;
    padding-left: 0px;
}

Nie wiem jak się używa coden :D

 komentarz 24 kwietnia 2018 przez Vinchit Obywatel (1,040 p.)
Co do informacji jakie w tym kodzie są to robię projekt amatorski do gry GTA 5 :P
 komentarz 24 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.) 
<textarea name="wiecej" type="text" rows="4" cols="50" style="height: 120px; width: 670px; background: #26283ca6; color: white;">
                        <?php echo $wiecej; ?>
                    </textarea>

 w tym miejscu jest problem, ponieważ ty po prostu przed zawartością zmienne $wiecej ładujesz do pola textarea spacje :)

Spróbuj tak:

<textarea name="wiecej"><?php echo $wiecej; ?></textarea>

i usuń style inline - od tego są np. klasy.

 komentarz 24 kwietnia 2018 przez Vinchit Obywatel (1,040 p.)
Dzięki za pomoc :)

Wszystko działa, dziękuje :)
1
 komentarz 24 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
You're welcome :)

Podobne pytania

0 głosów
2 odpowiedzi 678 wizyt
Nie pojawia się tekst na stronie
pytanie zadane 11 sierpnia 2016 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)
0 głosów
1 odpowiedź 230 wizyt
Tekst jako przycisk (bez wyglądu przycisku)
pytanie zadane 30 kwietnia 2018 w HTML i CSS przez Vinchit Obywatel (1,040 p.)
0 głosów
1 odpowiedź 1,746 wizyt
Dlaczego tekst wychodzi poza obręb mojego diva skoro ograniczyłem mu width na 1920px HTML CSS
pytanie zadane 22 grudnia 2017 w HTML i CSS przez ildan91 Użytkownik (630 p.)

92,568 zapytań

141,424 odpowiedzi

319,634 komentarzy

61,956 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...