[CSS] Pozycjonowanie


(Ryan370z) #1

CSS

#Krzyzyk2:hover { background: url("images/Krzyzyk2.gif"); }

#Krzyzyk2 {background-image: url(images/Krzyzyk1.gif); width: 9px; height: 9px; position: relative; top: 1px; left: 1px; margin-left: 0px;}

#Krzyzyk1 {background-image: url("images/Krzyzyk1.gif"); width: 9px; height: 9px; position: relative; top: 1px; left: 1px; margin-left: 0px;}

#Krzyzyk1:hover {background: url("images/Krzyzyk2.gif"); }

HTML

Wypełnij formularz poniżej. Pola oznaczone gwiazką są obowiązkowe.   Podaj loginPodaj hasłoPodaj adres e-mail \ ***Pola nieobowiązkowe- jeśli nie chce ci się, śmiało klikaj "Rejestruj".**   Numer Gadu-Gadu   Zainteresowania

Zgubiłeś hasło? Nic trudnego!**** Napisz nam swój adres e-mail, wyślemy Twoje hasło. ****Twój adres e-mail
[/code]

Kiedy pokazuje się okno z rejestracją, obrazek pokazuje się z tym samym odstępem co tekst mimo osobnego formatowania. Gdy używam position: relative;, obrazek zmienia położenie względem tekstu, a nie tła div`a. Musi być position: relative;, gdyż potem chciałbym, aby te okienka można było przeciągać.


(mario@) #2

Przytoczę tutaj słowa adpawl (chyba nic przeciwko nie będzie miał :slight_smile: )

W tym przypadku relative. Poczytaj czym różni się absolute od relative i jak je łączyć.

Nie musi być.


(Ryan370z) #3

Ok, sorki, już wcześniej to wykombinowałem.

W absolute element jest ustawiony na sztywno, a w przypadku relative element przesuwa się względem położenia spoczynkowego (czyli takiego bez ustawień położenia). Teraz mam 2 problem. Nie chcę mi się pisać (sorry), na stronie ( fullimpact.c0.pl ) gdy wciśniesz "Przyślij hasło" a potem "Zarejestruj się", to okienko z przysyłaniem hasła się przesuwa. Jak to usunąć?


(mario@) #4

Co tu się dziwić jak na marginesach zewnętrznych to pozycjonujesz (to jest dobry sposób ale jak dla mnie na niewielkie odległości - tutaj należy dodatkowo rozróżnić jaki efekt chce się uzyskać). Po drugie te okienka nie mają nadanego parametru width i są na całą szerokość strony - po co.

Masz tutaj mały przykład, który powinien naprowadzić Cię na rozwiązanie tego problemu przy użyciu position

kwadrat 1

kwadrat 2

kwadrat 3

kwadrat 4
[/code]