• 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

VPS Starter Arubacloud
0 głosów
225 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,490 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,490 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,490 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,490 p.)
You're welcome :)

Podobne pytania

0 głosów
2 odpowiedzi 793 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ź 288 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,950 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.)

93,022 zapytań

141,986 odpowiedzi

321,288 komentarzy

62,367 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...