Ostylowanie formularza css / wysuwana podstrona js

Witam, mam pytanie odnośnie styli dla formularza. U mnie wygląda to tak:

 .opis{
  background-color: black;
  border:1px solid #6b6b6b;
  width:100%;
  border-radius:15px;
  padding: 60px;
  color:#6b6b6b;
}

Czyli stworzyłem ramkę z zaokrąglonymi rogami. Wszystko byłoby ok, gdyby nie to, że tekst, który ma wpisac osoba wypełniająca formularz rozpoczyna sie z lewej strony, od połowy wysokości. Jak zrobić żeby tekst rozpoczynał się w lewym, górnym rogu ?

Mam jeszcze jedno pytanie, chciałbym aby formularz po kliknięciu przycisku wysuwał się z prawej strony. Udało mi się to zrobić w sposób jak w linku poniżej:
http://jsfiddle.net/ZQTFq/
Jednak zależałoby mi, że formularz nie znajdował się w osobnym divie, tylko w osobnym pliku. Może ktoś ma namiary na jakiś skrypt? Lub wie jak wyedytować ten?

Ale napisz dokładniej co chcesz uzyskać. Bo nie wiadomo czy chcesz, żeby można było pisać tylko jedną linijkę danych czy chcesz, żeby można było pisać wiele linijek (textarea).

Typuje, że chodzi Ci o wielolinijkowe pole. Wtedy korzystasz z textarea, np. w taki sposób:

<textarea rows="15" cols="60" name="content"></textarea>

, gdzie rows to ilość rzędów, a cols ilość kolumn. Wtedy nie robisz za pomocą paddingów, heightów, line-heightów czy innych tego typu rzeczy tej wysokości pola tylko określa Ci to ten atrybut rows. Oczywiście dalej możesz manipulować CSSem.

No ale nie wiem czy o to Ci chodziło.

Co do drugiego pytania to najłatwiej to uzyskać za pomocą AJAXu w JSie. Ale tu byś musiał trochę poczytać więcej na ten temat. Pobierasz zawartość jakiegoś zewnętrznego pliku i wpisujesz ją w zawartość tego diva, w którym ma być wyświetlany formularz. Ale serio, najlepiej by było jakbyś poczytał o AJAXie po prostu.

textarea działa ok, jesli chodzi o miejsce w którym tekst się zaczyna. Jednak irytuje mnie możliwość jego rozciagania przez uzytkowników. Można to jakoś wyłaczyć ?
Odnośnie drugiej kwestii to już czytałem, że niezbędny może być ajax. Dlatego liczyłem raczej na to, że ktos pod ręka ma gotowy skrypt :)

Tak tak, wystarczy ustawić dla textarea w CSSie:

textarea {
   resize: none; 
}

Najłatwiej Ci będzie oprzeć to na takim schemacie. A wysuwanie tego DIVa dalej możesz robić tak jak robiłeś.

$('link').click( function(){
   $('content').load(this.href);

   //to jest konieczne, żeby nie przekierowywać do tej strony tak jak normalnie <a> przekierowuje
   return false;
});

Tak, zgadza się - strona ładnie wczytuje się do diva. Teraz męczę się z efektem wysuwania - to znaczy div z wczytaną stroną ma wysunąć się z prawej strony monitora po naciśnięciu odpowiedniego buttona.

To jak chcesz robić to tak samo jak w tym fiddlu którego wysłałeś to robisz po prostu symetrycznie.

Lekko zedytowałem to co wysłałeś: http://jsfiddle.net/ZQTFq/963/

Zmieniłem float na right dla hidden, zmieniłem, że position: absolute jest -1000px nie dla lefta, tylko dla righta. No i animacje w jQuery też dla righta są.

A jak Ci się bedzie nudzić to możesz spróbować to wysuwanie (albo bardzo podobne) zrobić za pomocą CSSa.

Właśnie i tu pojawia się chyba ostatni problem. Mając right na -1000px podstrona nie chowa się z boku ekranu, tylko go rozciąga.
Mam body na max-width:100% i overflow:hidden.
Z lewej strony ten problem nie występuje.

W kodzie na fiddlu, który wysłałeś, równiez to widać :)

No tak racja, nie zauważyłem wcześniej. Ale z overflow powinno działać. Nie wiem, sprawdzę to za parę godzin bo wychodzę, chyba, że sam znajdziesz rozwiązanie.

Pewnie dlatego, że strona główna jak i podstrony mam zbudowane w oparciu o bootstrapa..

Nie jestem w stanie Ci powiedzieć, czemu u Ciebie to nie działa, ale tutaj wystarczyło dodanie overlow na hidden. Sprawdź czy na pewno go masz tam gdzie powinien być.

http://jsfiddle.net/ZQTFq/965/

Nie znam się na bootstrapie w ogóle, ale tu może coś wyciągniesz z tego: http://stackoverflow.com/questions/10320608/bootstrap-how-to-enable-scroll-bars

Myślę, że mam ostatnie pytanie i wszystko będzie jasne. Czy do skryptu poniżej można dodać kilka właściwości ? żeby zmienić zarówno pozycje jak i np fixed na absolute ?

$(document).ready(function(){
    $('.buttonwin2').click(function(){
    var hidden = $('#ar');
    if (hidden.hasClass('visible')){
        hidden.animate({"right":"-4000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"right":"0px"}, "slow").addClass('visible');
    }
    });
});

Jasne, że można. Tylko, że nie wiem dokładnie co chcesz zmienić i w którym miejscu, ale wygląda to w ten sposób:

//w ten sposób w jQuery
hidden.css("position", "fixed");
hidden.css("position", "absolute");

Przy position:fixed ładnie mi sie chowało z prawej strony tak jak chciałem :) jednak był problem z przewijaniem, gdy sie pojawiło. Dlatego zależało mi żeby wraz z pojawieniem sie dynamicznego okienka dostawało ono wartość absolute :)
Dzięki wielkie !

Nie ma za co ;)

Co do jQuery i np. css() to nie zawsze powinno się 100% polegać na jQuery (i to jest również do mnie skierowane, bo mam tak zakorzenione w mózgu funkcje jQuery, że automatycznie z nich korzystam). Przykład: http://jsperf.com/jquery-vs-javascript-performance-text . Ta sama funkcjonalność, a jaka różnica szybkości.

Mossar napisał(a):

//w ten sposób w jQuery
hidden.css("position", "fixed");
hidden.css("position", "absolute");

Ja nigdy nie stosuję dwóch parametrów w $.css, bo muszę zmieniać jak trzeba dopisać drugi parametr ;) a więc zawsze:

hidden.css({position: 'fixed'});

// i mogę łatwo dopisać:
hidden.css({position: 'fixed', display: 'block', width: 300}); // bez jednostek zostanie potraktowane jako px w jQuery

// zamiast robić:
hidden.css('position', 'fixed');
hidden.css('display', 'block');
hidden.css('width', 300);

// lub
hidden.css('position', 'fixed').css('display', 'block').css('width', 300);

To teraz pytanie w ramach dopieszczenia projektu - da radę poprawic skrypt w ten sposób, że position z fixed na absolute zmienia się dopiero po osiągnięciu wyznaczonej w pikselach pozycji ? Aktualnie mam tak:

$(document).ready(function(){
    $('.buttonwin').click(function(){
    var hidden = $('#ar');
    if (hidden.hasClass('visible')){
        hidden.animate({"right":"-4000px"}, "slow").removeClass('visible');
        hidden.css("position", "fixed");
    } else {
        hidden.animate({"right":"0px"}, "slow").addClass('visible');
        hidden.css("position", "absolute");
    }
    });
});

I niestety mozna zauważyć jak 'w locie' zmienia się z fixed na absolute. (pojawia się pasek przewijania na dole przeglądarki). Nie znam się kompletnie na jquery, ale jak się domyślam wystarczy dodać jakiegoś if'a ?

<script>
$(document).ready(function(){
    $('.buttonwin').click(function(){
    var hidden = $('#ar');
    if (hidden.hasClass('visible')){
        hidden.animate({"right":"-4000px"}, "slow").removeClass('visible');
        hidden.css("position", "fixed");
    } else {
        hidden.animate({"right":"0px"}, "slow").addClass('visible');

    }
    });
});
</script>
<script>
$(document).ready(function(){

    var hidden = $('#ar');
    if (hidden.hasClass('visible')){

        hidden.animate({"right":"0px"}, "slow").addClass('visible');
        hidden.css("position", "absolute");
    }
    else {

        hidden.css("position", "fixed");
    }
    });

</script>

Prostsze niż myślałem, może kiedyś komus się przyda..