Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Graficzny formularz
Forum PHP.pl > Forum > Przedszkole
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
tehaha
Cytat(elmozaur @ 25.05.2010, 11:44:05 ) *
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?
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ę

  1. <style type="text/css">
  2.  
  3. .text {
  4. background: #00ff00;
  5. }
  6.  
  7. .submit {
  8. background: #3399ff;
  9. }
  10.  
  11. </style>
  12.  


i html

  1.  
  2. <form action="" method="GET">
  3. <input type="text" class="text"/>
  4. <input type="submit" class="submit"/>
  5. </form>
pedro84
Cytat(elmozaur @ 25.05.2010, 15:44:52 ) *
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
Cytat(pedro84 @ 25.05.2010, 18:00:56 ) *
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?
pedro84
Cytat(elmozaur @ 25.05.2010, 21:14:03 ) *
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
Cytat(pedro84 @ 25.05.2010, 21:50:15 ) *
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 exclamation.gif!
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
Cytat(elmozaur @ 26.05.2010, 09:25:59 ) *
GENIALNIE exclamation.gif!
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.