Webmaster Forum Logo Part 1 Webmaster Forum Logo Part 2
Webmaster Forum Logo Part 3
     
 
  :: Anmeldung

Benutzername:

Registrierung...

Passwort:

Passwort vergessen?

angemeldet bleiben


  
  :: Umfrage
Welche sozialen Netzwerke benutzt du regelmäßig?

 Facebook
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 73%
 keines
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 22%
 Google+
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 19%
 Twitter
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 11%
 Xing
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 6%
 schülerVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 6%
 meinVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 4%
 studiVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 4%
 MySpace
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 2%
 LinkedIn
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 2%

 ges. 393 Stimmen
 
  :: Buttons

Valid XHTML 1.0 Transitional

toxitron

Eroberer

Dabei seit: 04.11.2007

Beiträge: 52

 

1 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 01:22

Formularelemente Designen

Habe da mal eine Frage. Hatte mal eine seite in den Bookmarks wo erklärt worden ist wie ich Formularelemente gestallten kann. Nur ist der Bookmark weg und ich weiss nicht mehr woher ich ihn gefunden habe geschweige nach was ich damals gesucht habe. Suche etwas mit dem ich die kästchen mit dem haken und die zum auswählen gestallten kann. Weiss jemand wo ich da was gutes finde?
Toxitron style laboratories Ltd.
 

zoryfl

Moderator

Dabei seit: 14.01.2003

Beiträge: 2 766

 

2 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 01:24

Hier bitteschön -selfhtml
http://zoryfl.wmw.cc
 

toxitron

Eroberer

Dabei seit: 04.11.2007

Beiträge: 52

 

3 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 01:59

Anscheinend hast du meinen Tread nicht richtig verstanden. Wie ich Checkboxen mache das weiss ich so wie fast alle hier. ich meinte ich möchte die Checkboxen gestallten. Ebenso die drop Down menues.

Sie eines beispieles Hier
http://lipidity.com/fancy-form/#example
Toxitron style laboratories Ltd.
 

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

 

4 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 02:18

Öhm, na da hast du doch das Script ?? versteh das grad nicht. Du suchst was, was du schon gefunden hast :wacko:
 

HDsign

Jungspund

Dabei seit: 02.12.2007

Beiträge: 10

 

5 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 02:36

Machs doch mit CSS!
 

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

 

6 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 02:39

Nein, so einfach ist das nicht. Checkboxen und Ratiobuttons können per CSS nicht angepasst werden. Dafür muss Javascript her.

Wenns so einfach wäre ;)

Mal schauen was mit CSS3 so alles Möglich ist.
 

HDsign

Jungspund

Dabei seit: 02.12.2007

Beiträge: 10

 

7 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 02:40

Ich bin mir ziemlich sicher, dass man Checkboxen mit CSS designen kann - warte kurz ich such das mal...
 

toxitron

Eroberer

Dabei seit: 04.11.2007

Beiträge: 52

 

8 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 02:51

http://www.pen-and-paper.de/fancyform/index.html

Noch ein Beispiel. Jedoch ich suche etwas für die Drop Down Menues! Checkboxen gehen ohne weiteres ala mootools und co nur ich brauche etwas für die dropdown auswahl für ein registrierungsformular.
Toxitron style laboratories Ltd.
 

HDsign

Jungspund

Dabei seit: 02.12.2007

Beiträge: 10

 

9 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 02:53

Guck dir doch das CSS von der Seite an:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
html,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,hr{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100.01%;font-family:inherit;vertical-align:baseline;text-decoration:none}th,td{text-align:left;font-weight:normal}blockquote::before,blockquote::after{content:""}
body{margin:0;padding:0;background-color:#fff;color:#000;font:normal normal 86%/1.5em 'Lucida Grande','Lucida Sans','Lucida Sans Unicode',Verdana,sans-serif;min-width:700px}
.section{overflow:auto}
hr{width:100%;clear:both;height:4px;margin:2.5em 0;background:transparent}
#overview{margin-top:0;margin-bottom:45px;}
#overview+* h2{margin-top:0}
#content .section+hr{background:#33383c}
#topborder{position:fixed;top:0;left:0;right:0;height:1em;background-color:#4b5158;margin:0}
#sidebar{position:fixed;top:38px;left:20px;width:230px}
* html #sidebar{top:38px;left:20px;width:230px;position:absolute}
#sidebar p{margin-top:0;font-size:0.9em}
#content{margin:0 15% 5em 315px}
#content p{margin:1em 0}
p.lead{font-size:1em;color:#fff}
p.lead em{color:#1d7ffc;font-style:normal}
a:link{color:#fff}
.section a:link{text-decoration:underline}
a:visited{color:#e5c5c5;text-decoration:none}
a:hover{color:#fd68fd;border-bottom-style:solid}
a:active{color:#fb1080}
.section a:focus{outline:1px dotted invert}
strong{ font-weight:bold}
q,cite,em{font-style:italic}
q{quotes:'"' '"' "'" "'"}
q:before{content:open-quote}
q:after{content:close-quote}
abbr,dfn,acronym{border-bottom:1px dotted #999;cursor:help}
var,samp,kbd{font-family:Monaco,"Lucida Console",monospace;border-bottom:1px solid #162636;padding:2px;font-size:12px}
ol,ul{margin:0.5em 0 1.2em 2em}
ol{list-style-type:decimal;list-style-position:outside}
li{margin-bottom:0.2em}
li strong{color:#aaa}
dl{margin:0.5em 0 1.2em 0}
dt{padding-top:0.4em;margin-bottom:0.2em}
dd{font-size:0.9em;margin-bottom:1.0em;padding-bottom:0.9em;padding-left:0.5em;border-bottom:1px dashed #3d3d33}
dd:last-child{border:0}
dl.faq dt{font-size:1em;font-weight:500;color:#e2e2e2;background-color:#212121;padding:0.5em;margin:0.5em 0}
h1,h2,h3,h4,h5,h6{font-family:"Century Gothic","Trebuchet MS",sans-serif;line-height:130%;margin:0.8em 0;clear:both}
h1{font-size:2.3em}
h1 em{color:#1ea4fd;font-style:normal}
#sidebar h1{margin-bottom:0}
#sidebar a{color:#fff}
#sidebar h1 a{color:#1d7ffc;font-weight:500;text-shadow:#1d7ffc 2px 2px 2px}
#sidebar h1 a:hover{}
h2{font-size:1.5em;letter-spacing:0.4pt;text-transform:uppercase;color:#000}
h3{font-size:1.1em;letter-spacing:0.2pt;text-transform:uppercase;color:#000}
h4{font-size:1.12em;color:#e0bc70;border-bottom:1px solid #2c2c2c;padding-left:10px}
img{border:none;color:#fb1080}
code{font-size:12px;font-family:Monaco,Verdana,sans-serif;background-color:#191919;color:#fde9bb;padding:0.3em 0.4em}
pre{display:block;margin:1em 0;padding:0.4em 0.7em;border:1px solid #222;background-color:#1b1b1b;overflow:auto}
pre>code{display:block;padding:0;margin:0;background:0;color:silver;padding-left:1.2em}
.wrap{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;_white-space:pre}
#nav{list-style:none;margin:2em 2em 2em 0}
#nav li{margin:0;font-size:0.8em}
#nav a{display:block;height:2.0em;padding:0.3em 0.2em 0.2em 0.8em;padding:0.5em 1em;margin-bottom:1px;color:#eee;background-color:#181818;border:1px solid #1a1a1a}
#nav a:hover{color:#eee;background-color:#222;border:1px solid #2a2a2a}
#content ul{margin-left:1.5em}
#content ul li{padding-left:0.3em;list-style-type:disc;list-style-position:outside}
.download a:link{display:block;background-color:#1a1a1a;border:1px solid #1f1f1f;padding:1em 2em;text-decoration:none}
.download a:hover{background-color:#222;border:1px solid #2a2a2a}
#content ul.download li{padding:0.3em 0;background-image:none;list-style:none}
.download li strong{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:2.25em;color:#fff}
.download li em{font-style:normal;color:#7269ea}
label{margin-bottom:2px;margin-right:3px;padding-left:0.5em}
.contact input,textarea{color:#fff;border:1px solid #333;background-color:#262323;padding:3px;font-size:0.9em}
.contact input:hover,textarea:hover{background-color:#212121}
.contact input:focus,textarea:focus{background-color:#111}
input[type=submit]{padding:5px 15px}

/* ---------------- */
/* fancyform styles */
/* ---------------- */

.demo label{display:block;padding:0.5em;padding-left:32px;background-position:8px center;background-repeat:no-repeat;border:1px solid #252525;clear:both;cursor:pointer}
.checked{background-color:#fff;background-image:url(chk_on.png)}
.unchecked{background-color:#fff;background-image:url(chk_off.png)}
.selected{background-color:#fff;background-image:url(rdo_on.png)}
.unselected{background-color:#fff;background-image:url(rdo_off.png)}
.leftcol{float:left;clear:left;width:50%}
.rightcol{float:left;clear:right;width:50%}
 

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

 

10 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 03:03

ich zieh mir das jetzt und entferne die Javascript dinger. dann werd ich sehen was passiert.


So, ich hab das Pack von der fanccy Website runtergeladen und die javascript dateien gelöscht. Ansonsten alles gelassen wies ist. Und? Es geht nicht :D
»Rene82« hat folgende Datei angehängt:

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Rene82« (2. Dezember 2007, 03:06)

 

toxitron

Eroberer

Dabei seit: 04.11.2007

Beiträge: 52

 

11 Zum Seitenanfang

Sonntag, 2. Dezember 2007, 12:20

So jetzt für alle die es wirklich interessiert wie sich Formulare absolut klasse anpassen lassen. Ich hoffe das Euch auf der dortigenn Seite einiges klar wird und eventuell auch eure Formulare bald stylischer angepasst werden. Also viel erfolg und postet doch mal eure Ergebnisse.

http://www.smashingmagazine.com/2006/11/…dern-solutions/
Toxitron style laboratories Ltd.
 

nocturne

Kaiser

Dabei seit: 06.01.2005

Beiträge: 1 167

 

12 Zum Seitenanfang

Montag, 3. Dezember 2007, 08:24

Die seite die du meinst kenne ich auch, hab ich aber auch verloren. Das sind css hacks, da kannst du beim Dropdown-Menu die "option"s nicht vertikal sondern horizontal auswählen und icons vergeben und so.

Ich poste mal falls ichs wieder gefunden habe.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »nocturne« (3. Dezember 2007, 08:26)