Input Felder gestalten !

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Input Felder gestalten ! »

zerobencool

unregistriert

Samstag, 7. Juni 2003, 11:46

Grüße

Letztens als ich mal durchs Netz surfte entdeckte ich dies hier http://mastko.hits4.net, die Input Felder sowieso Submit und so sehen super aus.Nun stellt sich für mich die Frage wie man sowas macht,am besten wäre sogar der selbe Style wie da.Die Lösung muss in CSS liegen, aber davon hab ich keine Anhung.Wer es weiß wie sowas geht bitte den Code posten, wie schon gesagt sollte es genau so aussehen wie da (http://mastko.hits4.net) !

gez. zerobencool

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »zerobencool« (7. Juni 2003, 11:48)

Max

Tripel-As

Dabei seit: 02.12.2002

Beiträge: 191

Samstag, 7. Juni 2003, 14:21

http://www.selfhtml.teamone.de/css/eigenschaften/rahmen.htm
http://www.selfhtml.teamone.de/css/eigen…hintergrund.htm
http://www.selfhtml.teamone.de/css/eigenschaften/schrift.htm

da steht das genau erkärt.....

zerobencool

unregistriert

Samstag, 7. Juni 2003, 21:43

Grüße

Eigentlich sind die Links doch Müll,die zeigen weder ein Beispiel dazu noch eine konkrete Erklärung ! Ich kann damit nix anfangen.

gez. zerobencool

P.S.: Weiß du überhaupt was Input Felder sind ? Die Links beziehen sich alle auf Tabellen und den Body Tag !!!

LordDaywalker

Routinier

Dabei seit: 27.12.2002

Beiträge: 253

Sonntag, 8. Juni 2003, 01:14

hiho
also das style sieht so aus: (steht doch alles in dem quelltext dort...

)
style:

Quellcode

<style type="text/css">
<!--
input {
 font-family: ;
 font-size: 12px;
 color: #;
 }

.small {
 font-size: 11px;}

input{ background-color:#DEE3E7;background:url('input.gif'); border-color: #DEE3E7; border-style: groove; border-width: thin;
          font-family:Arial, Helvetica, sans-serif;  color: #000066; scrollbar-track-color: #13619F; }
-->
</style>

und das inputding:

Quellcode

<table>
 <tr>
  <td><input class="small" type="text" name="user" style="width: 100%" size="8" maxlength="50" value="Benutzername" onBlur="if (value =='') {value = 'Benutzername'}" onFocus="if (value == 'Benutzername') {value =''}" /></td>
 </tr>
 <tr>
  <td><input class="small" type="password" name="userpw" style="width: 100%" size="8" maxlength="50" value="passwort" onFocus="if (value == 'passwort') {value =''}"/></td>
 </tr>
 <tr>
  <td><input class="small" type="submit" value="Login" /></td>
 </tr>
</table>

brauchst dann eben noch das input.gif, das eben als hintergrund genutz wird. gibts HIER
hoffe es klappt...
cu lord

zerobencool

unregistriert

Sonntag, 8. Juni 2003, 11:27

Grüße

Ok, danke.Also soweit so gut,es fehlt bloß noch das auch Text Area's diesen Style haben sollen.Was kann ich da machen ?

gez. zerobencool

LordDaywalker

Routinier

Dabei seit: 27.12.2002

Beiträge: 253

Sonntag, 8. Juni 2003, 13:19

einfach vor das "input" im css "textarea," schreiben
sieht dann so aus:

Quellcode

<style type="text/css">
<!--
textarea,input {
 font-family: ;
 font-size: 12px;
 color: #;
 }

.small {
 font-size: 11px;}

textarea,input{ background-color:#DEE3E7;background:url('input.gif'); border-color: #DEE3E7; border-style: groove; border-width: thin;
          font-family:Arial, Helvetica, sans-serif;  color: #000066; scrollbar-track-color: #13619F; }
-->
</style>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »LordDaywalker« (8. Juni 2003, 13:20)