[HTML] Graficzny input Opcje

[DonJeday]

Siema,

Mam zaprojektowany design z takimi inputami:






Powiedzcie mi jak mam to zrobić, ja zrobiłęm po swojemu, ale jednak pod każdą przeglądarką inaczej input wewnętrzny się układa. Czy da się zrobić żeby na każdej przeglądarce wyglądał tak samo? Nie wiem Java czy coś?



I jak zrobić że jeśli input jest aktywny ma inny wygląd np ten zielony a jeśli nie ten czarny.

Z góry thx

Ten post edytował DonJeday 16.11.2008, 16:21:50

[piotrooo89]

ustawiasz backgrounda i później za pomocą hovera lub focusa w css lub js zmieniasz backgrounda na inny.

[DonJeday]

Bo ja to zrobiłem tak:

Kod

<div class="input_background"><input type="text" name="T1" size="34" class="input_index" /></div>

CSS:

Kod

div.input_background { padding: 8px 0px 0px 20px; width: 175px; height: 30px; background: url(images/input.jpg) no-repeat center center; }
.input_index { font-family: tahoma; font-size: 10px; color: #000000; }

Jednak to jeszcze bez zmiany backgrounda. Jednak input leży tak jak ma tylko na operze (bo ja korzystam z opery i po prostu tak ustawiłem) chodzi o to czy jest jakaś metoda, żeby te inputy na każdej przeglądarce leżały tak jak mają leżeć?

[piotrooo89]

co rozumiesz przez słowo - leży? zmienia sie jego pozycja? tło się przesuwa?

[DonJeday]

Zmienia się pozycja inputa, na ff jest inaczej na ie 7 inaczej, a na ie 6 to już w ogóle ;p

[bim2]

Pozycja inputa, czyli marginy inaczje przeglądarka odbiera. To nie wina ustawienia tła.

[hiszpanespaniol]

chcesz ustawić obrazek dla pola input, ok. ale czy jest potrzeba tworzyć dodatkowy cały znacznik (div) żeby to osiągnąć? to nie ma sensu, przerost formy nad treścią. div to div, a input to input. daj tło dla inputa, usuń mu border a pozycję wpisywanego tekstu względem tła będziesz ustawiać za pomocą paddingu. ot cała filozofia. różnice w interpretacji różnych przeglądarek niestety są i będziesz musiał je rozwiązać za pomocą rzeczy typu * html (ie6) *+html (ie7) itd. w gruncie rzeczy każda przeglądarka robi to po swojemu a na dodatek nie znam trick'a typu jak te wyżej, ale tylko dla Opery. 

zmiana obrazka po najechaniu zadziała za pomocą :hover, ale nie dla ie tam tylko linki moga mieć :hover, na dodatek te linki muszą mieć href . tutaj chyba javascript potrzebny.

[piotrooo89]

zgadza sie. musisz js zeby to ładnie wyszystko hulało. ale to chyb nie powinno być problemem.

[erix]

zmiana obrazka po najechaniu zadziała za pomocą :hover, ale nie dla ie

Google: whatever:hover.

[hiszpanespaniol]

Cytat
zmiana obrazka po najechaniu zadziała za pomocą :hover, ale nie dla ie

Google: whatever:hover.

przecież kilka linijek niżej napisałem "tutaj chyba javascript potrzebny" więc nie rozumiem czemu mnie cytujesz, a sam podajesz frazę do google gdzie znaleźć można rozwiązania typu .htc, .hta które nie są niczym innym jak specyficznym js wywołanym na podstawie css'a.

oczywiście, że się da, ale z js. proszę pokaż mi link gdzie za pomocą czystego html i css jest sposób na :hover dla whatever, jeśli nie znajdziesz, to po co cytujesz bez zastanowienia? a jeśli ktoś z moderatorów zarzuci mi post nie wnoszący nic do tematu, to to samo niech zarzuci "przedpiszcy".



do autora tematu:

background dla input załatwisz tak jak pisałem, żeby obsłużyć zmianę tła po najechaniu niestety musisz użyć javascript (ie behavior)

[erix]

przecież kilka linijek niżej napisałem "tutaj chyba javascript potrzebny"

Behaviory działają na innej płaszczyźnie niż JS i są inaczej wykonywane. Nie ma ani kawałka <script /> w kodzie, reszta przeglądarek tego nie wczytuje.

oczywiście, że się da, ale z js. proszę pokaż mi link gdzie za pomocą czystego html i css jest sposób na :hover dla whatever, jeśli nie znajdziesz, to po co cytujesz bez zastanowienia?

No przepraszam, to jak chcesz osiągnąć inaczej np. :before w IE? Kodując dla IE nie ma mowy o czystym CSS dla niego, bo sam renderuje do bani...

Trzeba jakoś obchodzić te niedoróbki, a jeśli chodzi o behaviory/expressions, to zachowujesz oddzielenie warstwy prezentacyjnej od treści.