div in het midden van venster
Dus ik heb al gebrobeerd om de breedte van het hele scherm door 2 te delen en de breedte van de div door 2 te delen en zo de positie te bepalen.
Hetzelfde heb ik gedaan met de hoogte.
Maar het lukt me naar heel veel dingen proberen nog steeds niet.
Ik weet dat je ook een element in het midden kunt zetten met css.
dus margin: 0 auto;
maar ik wil ook een javascriptje hiervoor, voor de mobiele telefoons, die soms iets niet in het midden zetten. Ik denk dat dat o.a door het verschillende beeld komt.
Een andere reden is dat ik de div niet in het midden krijg met margin: 0 auto;
De div heeft verder geen stijl, staat niet in een ander element ingesloten, en heeft ook geen float of clear.
Dus kan iemand me uitleggen hoe ik zo'n javascriptje maak? Of heeft iemand een voorbeeld op JSfiddle, of zet het in dit topic.
(de div is een soort dialoogje, hij staat overal overheen en er zit een overlay achter)
Gewijzigd op 18/12/2012 22:04:02 door Jan terhuijzen
Voor margin: 0 auto; moet je een width instellen, dan werkt het.
Ik zal een deel van de code geven.
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body {
font-family: verdana;
background-color: black;
color: white;
margin-left: 300px;
margin-right: 300px;
}
label {
font-size: 10pt;
}
#login-div {
}
#login-col-left {
width: 250px;
display: inline;
}
#login-col-right {
width: 250px;
display: inline;
}
#login-email {
width: 240px;
}
#forgot-password {
font-size: 8pt;
color: white;
}
#forgot-password:hover {
font-size: 8pt;
color: lightgrey;
}
.bottom-bar {
}
#password-forgot-div {
display: none;
width: 400px;
height: 300px;
margin: 0 auto;
border: 1px solid grey;
text-align: center;
background-color: #151515;
}
#pwd-forgot-text {
font-size: 10pt;
}
#pwd-forgot-email {
text-align: center;
margin-top: 30px;
}
</style>
<script>
function passwordForgot(showOrHide) {
var changePwdDiv = document.getElementById("password-forgot-div");
var overlay = document.getElementById("overlay");
if(showOrHide == 'show') {
changePwdDiv.style.display="inline";
overlay.style.display="inline";
} else {
changePwdDiv.style.display="none";
overlay.style.display="none";
}
}
</script>
</head>
<body>
<div id="login-div">
<form method="post" action="login.php">
<div id="login-col-left">
<div class="label-bar">
<label for="login-email">Gebruikersnaam of email:</label>
</div>
<input type="text" id="login-email" name="email">
<div class="bottom-bar">
<input type="checkbox" id="login-remember" name="remember" value="true">
<label for="login-remember">Onthoud account</label>
</div>
</div>
<div id="login-col-right">
<div class="label-bar">
<label for="login-password">Wachtwoord:</label>
</div>
<input type="password" id="login-password" name="password">
<div class="bottom-bar">
<a href="#" onClick="passwordForgot('show')" id="forgot-password">Wachtwoord vergeten?</a>
</div>
</div>
<input type="submit" id="login-submit" name="submit" value="Log in">
</form>
</div>
<div id="overlay"></div>
<div id="password-forgot-div">
<h3>Wachtwoord vergeten?</h3>
<span id="pwd-forgot-text">
Tekst van de div in het midden
</span>
<input type="text" id="pwd-forgot-email">
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body {
font-family: verdana;
background-color: black;
color: white;
margin-left: 300px;
margin-right: 300px;
}
label {
font-size: 10pt;
}
#login-div {
}
#login-col-left {
width: 250px;
display: inline;
}
#login-col-right {
width: 250px;
display: inline;
}
#login-email {
width: 240px;
}
#forgot-password {
font-size: 8pt;
color: white;
}
#forgot-password:hover {
font-size: 8pt;
color: lightgrey;
}
.bottom-bar {
}
#password-forgot-div {
display: none;
width: 400px;
height: 300px;
margin: 0 auto;
border: 1px solid grey;
text-align: center;
background-color: #151515;
}
#pwd-forgot-text {
font-size: 10pt;
}
#pwd-forgot-email {
text-align: center;
margin-top: 30px;
}
</style>
<script>
function passwordForgot(showOrHide) {
var changePwdDiv = document.getElementById("password-forgot-div");
var overlay = document.getElementById("overlay");
if(showOrHide == 'show') {
changePwdDiv.style.display="inline";
overlay.style.display="inline";
} else {
changePwdDiv.style.display="none";
overlay.style.display="none";
}
}
</script>
</head>
<body>
<div id="login-div">
<form method="post" action="login.php">
<div id="login-col-left">
<div class="label-bar">
<label for="login-email">Gebruikersnaam of email:</label>
</div>
<input type="text" id="login-email" name="email">
<div class="bottom-bar">
<input type="checkbox" id="login-remember" name="remember" value="true">
<label for="login-remember">Onthoud account</label>
</div>
</div>
<div id="login-col-right">
<div class="label-bar">
<label for="login-password">Wachtwoord:</label>
</div>
<input type="password" id="login-password" name="password">
<div class="bottom-bar">
<a href="#" onClick="passwordForgot('show')" id="forgot-password">Wachtwoord vergeten?</a>
</div>
</div>
<input type="submit" id="login-submit" name="submit" value="Log in">
</form>
</div>
<div id="overlay"></div>
<div id="password-forgot-div">
<h3>Wachtwoord vergeten?</h3>
<span id="pwd-forgot-text">
Tekst van de div in het midden
</span>
<input type="text" id="pwd-forgot-email">
</div>
</body>
</html>
Ik heb de style even inline hierin gezet.
De div met het id password-forgot-div moet in het midden komen
Gewijzigd op 19/12/2012 09:16:52 door jan terhuijzen
Probeer dit eens.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
width: 100%;
height: 100%;
}
#password-forgot-div {
display:block;
/* Absolute positie van block */
position:absolute;
top:50%;
left:50%;
/*Hoogte en breedte van block */
width:400px;
height: 300px;
/*Margin minus de helft van de lengte*/
margin-left: -200px;
/*Margin minus de helft van de hoogte*/
margin-top: -250px;
}
width: 100%;
height: 100%;
}
#password-forgot-div {
display:block;
/* Absolute positie van block */
position:absolute;
top:50%;
left:50%;
/*Hoogte en breedte van block */
width:400px;
height: 300px;
/*Margin minus de helft van de lengte*/
margin-left: -200px;
/*Margin minus de helft van de hoogte*/
margin-top: -250px;
}
Let wel op, de positie van je block veranderd naar de maten van het scherm (dus ook als je je venster kleiner maakt dan fullscreen)
Gewijzigd op 19/12/2012 12:05:48 door Dennis WhoCares
Dat maakt blijkbaar een heel groot verschil.