[CSS][HTML]Graficzny formularz, jak zrobic poprawny CSS dla formularza z elementami graficznymi Opcje

[elmozaur]

Witajcie.

Czy ktos moze podpowiedziec jak uzyskac taki efekt:
formularz HTML taki aby:
- pole input mialo tlo obrazkowe;
- klawisz submit graficzny;
- taki sam wyglad w IE i FF;

Na stronce http://www.giorgiow.studiogif.com/test.html
staram sie uzyskac cos takiego ale mam klopoty bo albo cos mi ucieka albo sie rozchodzi;
No i jak wyglada ok w FF to sypie sie w IE lub odwrotnie.

chce uzyskac efekt jak na stronie: http://www.cityoflondon.gov.uk/Corporation.../london_map.htm

czy ktos moze podpowiedziec gdzie robie blad ?

Oczywiscie moge wszystko zapakowac w <table> i bedzie wygladalo tak jak chce ale wiadomo ze to nie jest rozwiazanie

pozdrawiam
Grzesiek

Ten post edytował elmozaur 25.05.2010, 10:46:37

[tehaha]

Oczywiscie moge wszystko zapakowac w <table> i bedzie wygladalo tak jak chce ale wiadomo ze to nie jest rozwiazanie

dlaczego? jeżeli będzie to jedna prosta tabelka i poprawnie działająca na wszystkich przeglądarkach to napisz mi sensowny argument czemu nie jest to rozwiązanie, oprócz jakiegoś tekstu typu: tabelki są archaicznym przeżytkiem XX wieku

poza tym jak chcesz taki sam efekt to w czym problem wejść na stronę i podejrzeć kod źródłowy?

Ten post edytował tehaha 25.05.2010, 11:28:14

[elmozaur]

no wlasnie przegladalem i cos mi nie wychodzi - dlatego pytam.
jedynie co (chyba) mi sie nie zgadza to wysokosc i szerokosc plikow graficznych a tak poza tym mam to samo

Co do tabelek to masz racje czasem to jedyne sluszne rozwiazanie.

[krzysztof_kf]

Proszę

[CSS] pobierz, plaintext 
<style type="text/css">
 
.text {
background: #00ff00;
}
 
.submit {
background: #3399ff;
}
 
</style>
 
[CSS] pobierz, plaintext 

i html

[HTML] pobierz, plaintext 
 
<form action="" method="GET">
<input type="text" class="text"/>
<input type="submit" class="submit"/>
</form>
[HTML] pobierz, plaintext 

[pedro84]

no wlasnie przegladalem i cos mi nie wychodzi - dlatego pytam.
jedynie co (chyba) mi sie nie zgadza to wysokosc i szerokosc plikow graficznych a tak poza tym mam to samo

Co do tabelek to masz racje czasem to jedyne sluszne rozwiazanie.

Raczysz kpić, prawda?

@autor: Co konkretnie chcesz osiągnąć? (pod FF Twój przykład też się sypie...)

[elmozaur]

Raczysz kpić, prawda?

@autor: Co konkretnie chcesz osiągnąć? (pod FF Twój przykład też się sypie...)

dlaczego kpić ?
Zadalem konkretne pytanie. Chcialem aby input mial tlo w formacie jpg lub png a klawisz submit byl jpgiem.
Problem niby prosty ale w realizacji trudniejszy. Bo okazuje sie ze po wczytaniu background-image dla inputa i submita lekko rozsowaja sie w pionie.
Jak dobrze ustawie w pionie tla to text w inpucie text ucieka do gory.

Na chwile obecna udalo mi sie zrobic tak, ze w FF mam ok ale IE rozsypuje wyglad.
Nie dosc ze klawisz zeskakuje do nowej lini to jak w inpucie wpisuje duzo znakow to tlo zsowa sie w lewo.
http://www.giorgiow.studiogif.com/test.html

moze ktos podpowie jak zmusic IE dowspolpracy?

Ten post edytował elmozaur 25.05.2010, 20:18:02

[pedro84]

dlaczego kpić ?
Zadalem konkretne pytanie. Chcialem aby input mial tlo w formacie jpg lub png a klawisz submit byl jpgiem.
Problem niby prosty ale w realizacji trudniejszy. Bo okazuje sie ze po wczytaniu background-image dla inputa i submita lekko rozsowaja sie w pionie.
Jak dobrze ustawie w pionie tla to text w inpucie text ucieka do gory.

Na chwile obecna udalo mi sie zrobic tak, ze w FF mam ok ale IE rozsypuje wyglad.
Nie dosc ze klawisz zeskakuje do nowej lini to jak w inpucie wpisuje duzo znakow to tlo zsowa sie w lewo.
http://www.giorgiow.studiogif.com/test.html

moze ktos podpowie jak zmusic IE dowspolpracy?

Przepraszam, źle Cię zacytowałem. No offence. Chodziło mi konkretnie o fragment dotyczący tabel. Nigdy nie są lepszym rozwiązaniem, służą tylko i wyłącznie do danych tabelarycznych.

Co do problemu... Sam sobie go stworzyłeś...

Nadaj form wymiary oraz position:relativel;. Ustal szerokość inputa na 100% szerokości formularza a przycisk pozycjonuj...absolutnie względem formularza. Będzie działać na milion procent.

[elmozaur]

Co do problemu... Sam sobie go stworzyłeś...
Nadaj form wymiary oraz position:relativel;. Ustal szerokość inputa na 100% szerokości formularza a przycisk pozycjonuj...absolutnie względem formularza. Będzie działać na milion procent.

GENIALNIE !
spozycjonowane super pozostal tylko 1 problem z IE: jak wpisze wiecej znakow niz szerokosc inputa to tlo ucieka w lewo. Czy jest na to jakis fix? (repeat-x dla graficznego tla odpada)

zrobilem tak ze pod inputa dalem diva. Nastepnie dla diva background-image a dla inputa color:transparent i dziala bardzo ok!!!
Raz jeszcze dzieki za pomoc

[favik]

GENIALNIE !
spozycjonowane super pozostal tylko 1 problem z IE: jak wpisze wiecej znakow niz szerokosc inputa to tlo ucieka w lewo. Czy jest na to jakis fix? (repeat-x dla graficznego tla odpada)

zrobilem tak ze pod inputa dalem diva. Nastepnie dla diva background-image a dla inputa color:transparent i dziala bardzo ok!!!
Raz jeszcze dzieki za pomoc

Mógłbyś podać przykładowy kod jak to wszystko u Ciebie już w końcowym efekcie wygląda?
Gdyż mam podobny problem z paskiem wyszukiwarki i już brak sił na użeranie się z tym.