ugrás a tartalomhoz

CSS formázás / pozicionálás

CactuS · 2013. Már. 7. (Cs), 16.06
Sziasztok!

Az alábbi problémával fordulnék hozzátok: ismerkedési fázisban vagyok a CSS-vel, Jqueryvel. A tervem az volt, hogy létrehozzak egy formulát, ami beúszik a képernyőre, kitöltik, elküldik stb. Találtam néhány segédanyagot/tutorialt, s ezek alapján elkezdtem a sajátomat kialakítani. (természetesen a szerző engedélyezte a módosítást)

Már szinte tökéletes lett a dolog 2 dolgot leszámítva:

1. A "lenyitó" kép folyton lecsúszik a beúszás közben
2. beúszás közben a szöveg széttörik.

A 2. probléma a kisebbik, akár még látványosnak is nevezhetném és kevésbé zavaró. Az elsővel viszont nem tudok mit kezdeni.

Mivel nem tudom, hogy a HTML részen van "rossz helyen" valamelyik div, vagy csak simán a CSSben bénázok, így az átláthatóság kedvéért betettem az egészet a jsfiddle-re. (mail.php nincs, de az nem is számít jelenleg) http://jsfiddle.net/cactuska/sMnYP/

Tudnátok abban segíteni, hogy mit kéne változtatnom, hogy a kép is becsússzon a formulával együtt, ne pedig letolódjon az aljára?

Előre is nagyon köszönöm a segítséget.
 
1

A lenyitó kép HTML kódja az

Hidvégi Gábor · 2013. Már. 7. (Cs), 17.16
A lenyitó kép HTML kódja az űrlapodé alatt van, és mindkettő blokk elem, emiatt csúszik mindig le. A szöveg beúszás közben azért törik, mert a szülőelem szélességét az animáció 0-ról az általad megadottra növeli.

Ha azt szeretnéd, hogy a kép a jobb széléhez ragadjon az űrlapnak, akkor hozzá képest abszolút kell pozícionálni.

A "Kérjük" után általában mindig vesszőt kell rakni.

Mivel mint írod is, és a kódból is látszik, hogy nem sok tapasztalatod van a témában, azt javasolnám, dobd ki a javascriptet, tanuld meg a CSS-t, és utána kezdj csak el animálni, mert együtt a kettő nehéz lesz.

Az ilyen jellegű problémákhoz pedig ajánlom a figyelmedbe az Egyszerű hibakeresés című cikket.
2

általában mindig?

Poetro · 2013. Már. 7. (Cs), 17.55
általában mindig?
3

Pontosan

Hidvégi Gábor · 2013. Már. 7. (Cs), 18.53
Körülbelül igen : )