Virusscanner tips?
wegvallen cq overlap section en menu
Hoe kan ik nou ervoor zorgen dat mijn menu en section gecentreerd en netjes boven elkaar staan en nog steeds zichtbaar/clickable zijn bij resizen?
dit is mn html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html><body>
<label for="show-menu" class="show-menu">Toon Menu </label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
<a href="#">Zoek </a>
<ul class="hidden">
<li><a href="#">Eenvoudig</a></li>
<li><a href="#">Meervoudig</a></li>
</ul>
</li>
<li><a href="#">Help</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
<section>
<h3>Eenvoudig zoeken</h3>
<table>
<tr>
<td><form action="recent.php" method="post" title="laatst binnengekomen katten" />
</td>
<td><input type="submit" value="Recent binnengekomen" /></td>
</form>
</tr>
<tr><td>Of vul 1! veld in.</td></tr>
<tr><form action="nummer.php" method="post" /><td>Nummer:</td>
<td><input type="text" name="Nummer_id" maxlength="5"/> </td>
<td><input type="submit" value="Zoek" /></td>
<td> <input type="reset" value="Reset" /></td></form>
</tr>
<tr>
<form action="naam.php" method="post" /><td>Naam:</td>
<td><input type="text" name="Naam" maxlength="15"/></td>
<td><input type="submit" value="Zoek" />
<td> <input type="reset" value="Reset" /></td>
</td>
</form></tr>
<tr>
<form action="datum.php" method="get" /><td>Vanaf: </td>
<td><input type="text" name="dag" size="2" maxlength="2" title="dag">-<input type="text" name="maand" size="2" maxlength="2" title="maand">-<input type="text" name="jaar" size=4 maxlength="4" title="jaar">
<td><input type="submit" value="Zoek" /></td>
<td> <input type="reset" value="Reset" /></td>
</form></tr>
<tr>
<form action="kleurcodes.php" method="get" /><td>Kleur(en): </td>
<td><input type="checkbox" name="Code[]" value="2"/>wit
<input type="checkbox" name="Code[]" value="4"/>beige <br>
<input type="checkbox" name="Code[]" value="8"/>rood
<input type="checkbox" name="Code[]" value="16"/>bruin <br>
<input type="checkbox" name="Code[]" value="32"/>cypers
<input type="checkbox" name="Code[]" value="1"/>grijs <br>
<input type="checkbox" name="Code[]" value="64"/>zwart<br>
</td>
<td><input type="submit" value="Zoek" /></td>
</form></tr>
<tr>
<form action="vacht.php" method="get" /><td>Vacht:</td>
<td><select name="Vacht">
<option value="cypers">cypers</option>
<option value="lapje">lapje</option>
<option value="schildpad">schildpad</option>
</select></td>
<td><input type="submit" value="Zoek" /></td>
</form>
</tr>
<tr>
<form action="ras.php" method="post" /><td>Ras: </td>
<td><select name="Ras">
<option value="balinees">Balinees</option>
<option value="Brits korthaar">Brits korthaar</option>
<option value="halflangharig">halflangharig</option>
<option value="langharig">langharig</option>
<option value="ras">ras overig</option>
<option value="siamees">siamees</option>
<option value="Turks korthaar">Turks korthaar</option>
</select>
</td>
<td>
<input type="submit" value="Zoek" /></td>
</form></tr>
<tr>
<form action="bijzonderheden.php" method="post" /><td>Bijz.heden: </td>
<td><select name="Bijzonderheden">
<option value="blauwe ogen">blauwe ogen</option>
<option value="een oog blind">blind</option>
<option value="hazelip">hazelip</option>
<option value="mist oog"> mist oog</option>
<option value="mist staart">mist staart</option>
<option value="mist voorpoot">mist poot</option>
<option value="mist stuk oor">mist stuk oor</option>
<option value="oddeye">odd-eye</option>
<option value="vaal">vaal</option>
</select>
</td>
<td><input type="submit" value="Zoek" /></td>
</form></tr>
</table>
<br><br>
</section>
</body>
</html>
<label for="show-menu" class="show-menu">Toon Menu </label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
<a href="#">Zoek </a>
<ul class="hidden">
<li><a href="#">Eenvoudig</a></li>
<li><a href="#">Meervoudig</a></li>
</ul>
</li>
<li><a href="#">Help</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
<section>
<h3>Eenvoudig zoeken</h3>
<table>
<tr>
<td><form action="recent.php" method="post" title="laatst binnengekomen katten" />
</td>
<td><input type="submit" value="Recent binnengekomen" /></td>
</form>
</tr>
<tr><td>Of vul 1! veld in.</td></tr>
<tr><form action="nummer.php" method="post" /><td>Nummer:</td>
<td><input type="text" name="Nummer_id" maxlength="5"/> </td>
<td><input type="submit" value="Zoek" /></td>
<td> <input type="reset" value="Reset" /></td></form>
</tr>
<tr>
<form action="naam.php" method="post" /><td>Naam:</td>
<td><input type="text" name="Naam" maxlength="15"/></td>
<td><input type="submit" value="Zoek" />
<td> <input type="reset" value="Reset" /></td>
</td>
</form></tr>
<tr>
<form action="datum.php" method="get" /><td>Vanaf: </td>
<td><input type="text" name="dag" size="2" maxlength="2" title="dag">-<input type="text" name="maand" size="2" maxlength="2" title="maand">-<input type="text" name="jaar" size=4 maxlength="4" title="jaar">
<td><input type="submit" value="Zoek" /></td>
<td> <input type="reset" value="Reset" /></td>
</form></tr>
<tr>
<form action="kleurcodes.php" method="get" /><td>Kleur(en): </td>
<td><input type="checkbox" name="Code[]" value="2"/>wit
<input type="checkbox" name="Code[]" value="4"/>beige <br>
<input type="checkbox" name="Code[]" value="8"/>rood
<input type="checkbox" name="Code[]" value="16"/>bruin <br>
<input type="checkbox" name="Code[]" value="32"/>cypers
<input type="checkbox" name="Code[]" value="1"/>grijs <br>
<input type="checkbox" name="Code[]" value="64"/>zwart<br>
</td>
<td><input type="submit" value="Zoek" /></td>
</form></tr>
<tr>
<form action="vacht.php" method="get" /><td>Vacht:</td>
<td><select name="Vacht">
<option value="cypers">cypers</option>
<option value="lapje">lapje</option>
<option value="schildpad">schildpad</option>
</select></td>
<td><input type="submit" value="Zoek" /></td>
</form>
</tr>
<tr>
<form action="ras.php" method="post" /><td>Ras: </td>
<td><select name="Ras">
<option value="balinees">Balinees</option>
<option value="Brits korthaar">Brits korthaar</option>
<option value="halflangharig">halflangharig</option>
<option value="langharig">langharig</option>
<option value="ras">ras overig</option>
<option value="siamees">siamees</option>
<option value="Turks korthaar">Turks korthaar</option>
</select>
</td>
<td>
<input type="submit" value="Zoek" /></td>
</form></tr>
<tr>
<form action="bijzonderheden.php" method="post" /><td>Bijz.heden: </td>
<td><select name="Bijzonderheden">
<option value="blauwe ogen">blauwe ogen</option>
<option value="een oog blind">blind</option>
<option value="hazelip">hazelip</option>
<option value="mist oog"> mist oog</option>
<option value="mist staart">mist staart</option>
<option value="mist voorpoot">mist poot</option>
<option value="mist stuk oor">mist stuk oor</option>
<option value="oddeye">odd-eye</option>
<option value="vaal">vaal</option>
</select>
</td>
<td><input type="submit" value="Zoek" /></td>
</form></tr>
</table>
<br><br>
</section>
</body>
</html>
en dit mn 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
body {
background: #E8E8E8;
font-family: Verdana, Arial, helvetica, sans-serif;
font-size: 90%;
color: black;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin-top: -25%;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #828282;
text-decoration: none;
border-radius: 1em;
}
/*Hover state for top level links*/
li:hover a {
background: #be8b0b;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #828282;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #dec685;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #828282;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox
input[type=checkbox]{
display: none;
}
*/
#show-menu {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked + #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
section {
background: #F0F0F0;
color: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
table {
border-collapse: collapse;
font-size: 90%;
}
background: #E8E8E8;
font-family: Verdana, Arial, helvetica, sans-serif;
font-size: 90%;
color: black;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin-top: -25%;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #828282;
text-decoration: none;
border-radius: 1em;
}
/*Hover state for top level links*/
li:hover a {
background: #be8b0b;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #828282;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #dec685;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #828282;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox
input[type=checkbox]{
display: none;
}
*/
#show-menu {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked + #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
section {
background: #F0F0F0;
color: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
table {
border-collapse: collapse;
font-size: 90%;
}
Gewijzigd op 09/06/2016 00:30:25 door Marina janssen
Alvast bedankt!
Dit is het probleem: bij verkleinen kan je er niet meer op klikken en als ik de marge van regel 12 ipv van -25 op nul zet dan staat het menu in het midden, zie
ik word er knettergek van
Gewijzigd op 09/06/2016 00:44:34 door marina janssen
Op het moment dat je position: absolute toepast op een (HTML) element haal je deze uit de normale "flow" van het document: deze gaat een eigen leven leiden en trekt zich niets meer aan van andere elementen, zo ook hier.
Op mijn laptop (1366x768) zie ik initieel het menu niet eens - deze valt van mijn scherm af. Ik denk dat je als algemene rule of thumb wel zou kunnen stellen (correct me if I'm wrong) dat het niet verstandig is om met negatieve waarden te werken tenzij je echt niet anders kan.
Dan de section. Ik denk dat het stukken makkelijker is om deze enkel horizontaal te centreren. Dit kan eenvoudig met margin: 0 auto;. Dit vereist wel dat je de section een vaste breedte geeft, maar gezien de formulier(en) zelf niet echt responsive zijn en je op een gegeven moment toch aannames moet gaan doen over de afmetingen van zaken is een breedte van 400px een redelijke keuze. Wel zul je na moeten denken hoe je zaken gaat tacklen als het (de) formulier(en) op mobiele telefoons wilt tonen.
Dan het menu, wat je zou kunnen doen is een div met clear: both; tussen het menu en je section zetten zodat deze initieel niet overlapt.
Ik denk dat je alles bij elkaar je iets teveel hebt beroept op kunstgrepen waardoor je uiteindelijk in de modder vast bent komen te staan. Wanneer je met design bezig bent is het misschien verstandig om dingen zo simpel mogelijk aan te pakken. Wanneer je allerlei moeilijke truuks uit moet gaan halen om het design in het gewenste formaat te wurmen is dat een indicatie dat je iets zou moeten aanpassen in de layout of de opmaak, zo ook hier.