Link als submitbutton
De button is een link omdat ik anders de :hover manier niet kan gebruiken. (Internet Explorer ondersteunt alleen de CSS :hover bij links)
De button is als volgt:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="blue-button">
<a href="#" class="blue-button-link">
<span class="blue-button-left"></span>
<span class="blue-button-center">Verzenden</span>
<span class="blue-button-right"></span>
<input type="submit" name="test" class="blue-button-submit" value="" onClick="alert('test')">
</a>
</div>
<a href="#" class="blue-button-link">
<span class="blue-button-left"></span>
<span class="blue-button-center">Verzenden</span>
<span class="blue-button-right"></span>
<input type="submit" name="test" class="blue-button-submit" value="" onClick="alert('test')">
</a>
</div>
En hier de CSS:
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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
81
82
83
84
85
86
.blue-button {
height: 29px;
display: inline;
}
a .blue-button-left {
width: 3px;
height: 28px;
padding-top: 4px;
padding-left: 1px;
padding-right: 2px;
padding-bottom: 6px;
display: inline;
background: url('/img/blue-button.gif') no-repeat 0px -28px;
}
a:hover .blue-button-left {
width: 3px;
height: 28px;
background: url('/img/blue-button-mouseover.gif') no-repeat 0px -28px;
}
a .blue-button-center {
height: 28px;
background: url('/img/blue-button.gif') repeat-x;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 6px;
margin-right: -10px;
}
a:hover .blue-button-center {
height: 28px;
background: url('/img/blue-button-mouseover.gif') repeat-x;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 6px;
margin-right: -10px;
}
a .blue-button-right {
width: 32px;
height: 28px;
padding-top: 4px;
padding-left: 10px;
padding-right: 22px;
padding-bottom: 6px;
background: url('/img/blue-button.gif') no-repeat -3px -56px;
}
a:hover .blue-button-right {
width: 32px;
height: 28px;
padding-top: 4px;
padding-left: 10px;
padding-right: 22px;
padding-bottom: 6px;
background: url('/img/blue-button-mouseover.gif') no-repeat -3px -56px;
}
.blue-button-link {
height: 30px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: white;
text-decoration: none;
}
.blue-button-link:hover {
height: 30px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #fafafa;
text-decoration: none;
}
.blue-button-submit {
height: 29px;
display: block;
position: absolute;
background-color: transparent;
border: 1px solid black; /* Dit doe ik tijdelijk zodat ik de button kan zien */
margin: 0px;
padding-left: 10px;
padding-right: 10px;
color: white;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
float: left;
}
height: 29px;
display: inline;
}
a .blue-button-left {
width: 3px;
height: 28px;
padding-top: 4px;
padding-left: 1px;
padding-right: 2px;
padding-bottom: 6px;
display: inline;
background: url('/img/blue-button.gif') no-repeat 0px -28px;
}
a:hover .blue-button-left {
width: 3px;
height: 28px;
background: url('/img/blue-button-mouseover.gif') no-repeat 0px -28px;
}
a .blue-button-center {
height: 28px;
background: url('/img/blue-button.gif') repeat-x;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 6px;
margin-right: -10px;
}
a:hover .blue-button-center {
height: 28px;
background: url('/img/blue-button-mouseover.gif') repeat-x;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 6px;
margin-right: -10px;
}
a .blue-button-right {
width: 32px;
height: 28px;
padding-top: 4px;
padding-left: 10px;
padding-right: 22px;
padding-bottom: 6px;
background: url('/img/blue-button.gif') no-repeat -3px -56px;
}
a:hover .blue-button-right {
width: 32px;
height: 28px;
padding-top: 4px;
padding-left: 10px;
padding-right: 22px;
padding-bottom: 6px;
background: url('/img/blue-button-mouseover.gif') no-repeat -3px -56px;
}
.blue-button-link {
height: 30px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: white;
text-decoration: none;
}
.blue-button-link:hover {
height: 30px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #fafafa;
text-decoration: none;
}
.blue-button-submit {
height: 29px;
display: block;
position: absolute;
background-color: transparent;
border: 1px solid black; /* Dit doe ik tijdelijk zodat ik de button kan zien */
margin: 0px;
padding-left: 10px;
padding-right: 10px;
color: white;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
float: left;
}
De button werkt bij mij perfect (en ook het mouse over effect)
maar nu moet ik met javascript maken dat de link een formulier moet submitten, dat wil ik niet.
Ik wil het formulier submitten met een gewone submit button, zodat er geen javascript oplossing nodig is Ook als er een bezoeker javascript uit heeft staan kan dan het formulier verzonden worden.
Dus ik heb bedacht dat de submitbutton onzichtbaar in de link komt te staan. Als je met de muis over de link gaat kun je toch nog het :hover effect gebruiken.
En de button bedekt (onzichtbaar) de hele link.
Dus als je op de link klikt klik je eigenlijk op de submit button omdat die er bovenop staat.
(de link is dus alleen maar voor de CSS :hover en is verder niet meer belangrijk)
Mijn probleem:
Ik krijg de button niet op z'n plek. Ik heb al vanalles gebrobeerd, met position:absolute, float, etc...
De button moet een compact stukje html blijven dat ik overal neer kan zetten waar ik wil. En dat ik niks hoef aan te passen zoals de breedte, hoogte, position, de stijl staat vast in de CSS.
Weet iemand hoe ik de submitbutton eroverheen kan plaatsen op de goede manier?
Het schijnt er ook nog eens mee te maken te hebben welk soort doctype ik gebruik, ik gebruik nu deze:
Code (php)
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Voorbeeld: Klik
Gewijzigd op 02/11/2012 13:00:06 door Mark Hogeveen
in je href komt dan iets van
href="<php $_SERVER['PHP_SELF'] ?>?page=pagina"
en dan
het is niet het veiligst maar het is het eerste wat in me opkwam.
Gewijzigd op 02/11/2012 13:12:02 door Reshad F
Ik heb alleen IE9 dus ik kan het niet testen..
Ook als ik met een link een GET request doe, dan wordt er geen data van een formulier meegezonden.
@ Bo Ter Ham
Hoe bedoel je dat je het niet kunt testen met IE9?
En een <button></button> kan, maar dit soort buttons kun je geen type="submit" geven, omdat het geen echte inputs zijn, maar gewone klikbuttons. Het moet dus met <input type="submit" name="naam" class="classnaam">
Gewijzigd op 02/11/2012 13:55:47 door Mark Hogeveen