Tijden veranderen
css contact layout
heb een contact formpje gestyled zie url.
http://h1.ripway.com/jensmedia/contact/
Wat vinden julie der van let niet op dat hij niet egt verstuurd.
M.V.G. joey
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
Verder vind ik het wel leuk hoor. De knoppen lijken een beetje op windows vista is het niet? Tenminste zo zag vista er toch uit? Misschien kun je ze trouwens nog een klein subtiel hover effectje meegeven?
ps. je tekst verschuift wanneer je op een knop drukt..
heb nu aangepast ie werkt hij goed aleen firfox niet lijkt wel of hij class niet herkent of zo
Code (php)
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
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
body {
background-color: #EBEBEB;
}
.titel {
font: bold 16px Arial;
color: #444444;
margin-bottom: 10px;
}
.cform {
width: 190px;
margin-top: 15px;
margin-bottom: 15px;
}
.place {
font: 12px Verdana;
color: #444444;
margin-bottom: 10px;
}
.contact {
width: 220px;
border: solid 1px #5F5F5F;
background: #FFFFFF;
}
.field {
width: 190px;
border: 1px solid #B0B0B0;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
.field_focus {
width: 190px;
border: 1px solid #5F5F5F;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
.text {
width: 190px;
height: 130px;
border: 1px solid #B0B0B0;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
.text_focus {
width: 190px;
height: 130px;
border: 1px solid #5F5F5F;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
button {
margin-right: 5px;
width: 75px;
height: 23px;
border: none;
background: url(button.png) no-repeat;
font: 12px Arial;
color: #FFFFFF;
text-align: center;
}
background-color: #EBEBEB;
}
.titel {
font: bold 16px Arial;
color: #444444;
margin-bottom: 10px;
}
.cform {
width: 190px;
margin-top: 15px;
margin-bottom: 15px;
}
.place {
font: 12px Verdana;
color: #444444;
margin-bottom: 10px;
}
.contact {
width: 220px;
border: solid 1px #5F5F5F;
background: #FFFFFF;
}
.field {
width: 190px;
border: 1px solid #B0B0B0;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
.field_focus {
width: 190px;
border: 1px solid #5F5F5F;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
.text {
width: 190px;
height: 130px;
border: 1px solid #B0B0B0;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
.text_focus {
width: 190px;
height: 130px;
border: 1px solid #5F5F5F;
background: url(input-bg.png) repeat-x;
font: 12px Verdana;
color: #444444;
}
button {
margin-right: 5px;
width: 75px;
height: 23px;
border: none;
background: url(button.png) no-repeat;
font: 12px Arial;
color: #FFFFFF;
text-align: center;
}
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
CSS Validation: Sorry! We vonden de volgende fouten (4)
Gewijzigd op 01/01/1970 01:00:00 door - SanThe -
daarnaast zie ik allemaal komma`s die er niet horen in je CSS. textarea is er 1 van. Hierdoor valideert je stylesheet niet EN pakt Firefox hem niet..
IE is zo crappy dat ie er gewoon over heen leest.. Daar zit waarshijnlijk je fout
edit: santhe je was me voor ;)
tevens hoef je je input en textarea geen classe naam mee te geven als ze dezelfde functie dragen als waar het voor bedoeld is, met andere woorden, de
.input mag gewoon input worden.. beide dragen ze dezelfde eigenschappen
Gewijzigd op 01/01/1970 01:00:00 door Pieter Jansen
Leer hier een les uit:
Begin met het ontwikkelen van je html en css altijd in firefox of opera (of een andere webbrowser die zich redelijk aan de standaarden houdt). Daarna ga je rare workarounds voor IE maken.
Overigens vind ik de methoden met .input{css} ipv input{css} zelf fijn werken.
mocht je later nog een formuliertje aan je webpagina toe willen voegen dan heeft hij niet nog allemaal rare eigenschappen van een ander formulier over geërfd.
Dus gebruik alleen input {css} voor zeer algemene eigenschappen.
Dit is overigens maar een mening. Er zijn ook mensen die het anders doen.
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
En over de workarounds, die zijn vaak niet nodig. Als je het logisch opbouwt, en je weet hoe bepaalde browsers zullen reageren met bepaalde code, kun je makkelijk doorwerken zonder speciaal een stylesheet oid aan te maken voor een specifieke browser.
Soms moet het wel, omdat het niet anders kan.. zoals een dropdown menu wat gewoon niet lekker werkt in IE6.. voor zulke eigenschappen van dingen wil ik nog wel eens een javascript functie gebruiken (alhoewel dit ook in css kan... )
Maar goed, ieder zijn mening denk ik dan :)
edit: Omdat je geen # teken ervoor hebt'??
Gewijzigd op 01/01/1970 01:00:00 door Pieter Jansen
Maar veder werkt het nu goet zowel in ie als in firefox.
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
Style.css: http://h1.ripway.com/jensmedia/contact/style.css
Input-bg.png: http://h1.ripway.com/jensmedia/contact/input-bg.png
Button.png: http://h1.ripway.com/jensmedia/contact/button.png
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
Bedankt maar had het al gezien maar had nog niet verandert, id had zelfde moeten zijn als name.
Maar goed opgemerkt ;)