Een stel divs centreren
Hoe kan ik ervoor zorgen dat deze divs samen worden gecentreerd dus ik heb problemen met het positioneren van een aantal divs bijelkaar... weet iemand een goede tutorial over het positioneren van overlappende divs voor INTERRRNET explorer de meest ranzige shit browser ooit.
Doet me aan iets denken i.v.m. IE. Ik heb voor mijn ouders een nieuwe PC geassembleerd, en hun wijsgemaakt dat Chrome de nieuwe IE is. Op die manier doe ik mee aan het ontmoedigen van IE :'-)
Bas natuurlijk heb ik wel een voorbeeldje
Maar het blijft op dezelfde positie in de browser... :) ( ik bak er nu nog niets van waarschijnlijk :P )
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
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
<html>
<head><title>Divs</title>
<style type="text/css">
#div1 {
position:fixed;
width:666px;
height:320px;
z-index:4;
overflow: visible;
visibility: visible;
border: 0;
left: 111px;
top: 108px;
border: 0px;
}
#div2 {
position:fixed;
width:286px;
height:245px;
z-index:2;
overflow: visible;
float: inherit;
visibility: visible;
left: 776px;
top: 108px;
visibility: visible;
border: 0px;
}
#div3 {
position:fixed;
width:434px;
height:198px;
z-index:3;
overflow: visible;
float: inherit;
visibility: visible;
margin-left: 0%;
margin-right: auto;
top: 409px;
left: 111px;
visibility: visible;
border: 0px;
}
</style>
</head>
<body>
<div id="div1"><img src="1.jpg"></div>
<div id="div2"><img src="2.jpg"></div>
<div id="div3"><img src="3.jpg"></div>
</body>
</html>
<head><title>Divs</title>
<style type="text/css">
#div1 {
position:fixed;
width:666px;
height:320px;
z-index:4;
overflow: visible;
visibility: visible;
border: 0;
left: 111px;
top: 108px;
border: 0px;
}
#div2 {
position:fixed;
width:286px;
height:245px;
z-index:2;
overflow: visible;
float: inherit;
visibility: visible;
left: 776px;
top: 108px;
visibility: visible;
border: 0px;
}
#div3 {
position:fixed;
width:434px;
height:198px;
z-index:3;
overflow: visible;
float: inherit;
visibility: visible;
margin-left: 0%;
margin-right: auto;
top: 409px;
left: 111px;
visibility: visible;
border: 0px;
}
</style>
</head>
<body>
<div id="div1"><img src="1.jpg"></div>
<div id="div2"><img src="2.jpg"></div>
<div id="div3"><img src="3.jpg"></div>
</body>
</html>
want het probleem is dat mijn table wel scrollt en de divs niet die blijven staan
Laat eens een voorbeeld zien?
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
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
<html>
<head><title>Divs</title>
<style type="text/css">
#div1 {
position:fixed;
width:666px;
height:320px;
z-index:4;
overflow: visible;
visibility: visible;
border: 0;
left: 111px;
top: 108px;
border: 0px;
}
#div2 {
position:fixed;
width:286px;
height:245px;
z-index:2;
overflow: visible;
float: inherit;
visibility: visible;
left: 776px;
top: 108px;
visibility: visible;
border: 0px;
}
#div3 {
position:fixed;
width:434px;
height:198px;
z-index:3;
overflow: visible;
float: inherit;
visibility: visible;
margin-left: 0%;
margin-right: auto;
top: 409px;
left: 111px;
visibility: visible;
border: 0px;
}
</style>
</head>
<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr><td width="900">
<div id="div1"><img src="1.jpg"></div>
<div id="div2"><img src="2.jpg"></div>
<div id="div3"><img src="3.jpg"></div>
</td></tr>
</body>
</html>
<head><title>Divs</title>
<style type="text/css">
#div1 {
position:fixed;
width:666px;
height:320px;
z-index:4;
overflow: visible;
visibility: visible;
border: 0;
left: 111px;
top: 108px;
border: 0px;
}
#div2 {
position:fixed;
width:286px;
height:245px;
z-index:2;
overflow: visible;
float: inherit;
visibility: visible;
left: 776px;
top: 108px;
visibility: visible;
border: 0px;
}
#div3 {
position:fixed;
width:434px;
height:198px;
z-index:3;
overflow: visible;
float: inherit;
visibility: visible;
margin-left: 0%;
margin-right: auto;
top: 409px;
left: 111px;
visibility: visible;
border: 0px;
}
</style>
</head>
<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr><td width="900">
<div id="div1"><img src="1.jpg"></div>
<div id="div2"><img src="2.jpg"></div>
<div id="div3"><img src="3.jpg"></div>
</td></tr>
</body>
</html>
Heeft iemand een voorbeeld van hoe je overlappende divs moet gebruiken? in een tabel
Gewijzigd op 22/08/2011 13:34:27 door Robby Alexander
BAH!
Probeer daar z-index voor te gebruiken.
Mocht je nogsteeds problemen hebben met positionering,
probeer eens in je CSS document:
Code (php)
1
2
2
margin: 0 auto;
width: 960px;
width: 960px;
Dat gaat veel oplossen voor alle browsers.
ik ben namelijk een module aan het maken voor een collage en dat je dan verschillende fotos desgewenst kunt veranderen
Een leuke zou zijn html 5 drag-n-drop waarbij je met Z-index de div's over elkaar heen legt en men deze zelf kan slepen.
'k zou het als volgt opbouwen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="wrapper">
<div class="foto1">
</div>
<div class="foto2">
</div>
<div class="foto3">
</div>
<div class="foto4">
</div>
</div>
<div class="foto1">
</div>
<div class="foto2">
</div>
<div class="foto3">
</div>
<div class="foto4">
</div>
</div>
Waarbij je de volgende CSS gebruikt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#wrapper{
margin: 0 auto;
width: 960px;
}
.foto1{
z-index: 1;
}
.foto2{
z-index: 2;
}
.foto1{
z-index: 3;
}
.foto2{
z-index: 4;
}
margin: 0 auto;
width: 960px;
}
.foto1{
z-index: 1;
}
.foto2{
z-index: 2;
}
.foto1{
z-index: 3;
}
.foto2{
z-index: 4;
}
Als je een beetje speelt met de z-index, dan kun je dus de fototjes, in dit geval moeten die dus nog in de div's worden geplaatst, op verschillende niveau's over elkaar heen zetten.
Gewijzigd op 22/08/2011 14:51:25 door Mike van den Berg
Gewijzigd op 22/08/2011 18:39:54 door John Acid
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
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
body{
margin:0;
padding:0;
text-align:center;
}
#maindiv{
width:900px;
height:800px;
margin:0 auto;
border:1px solid black;
padding:25px 0 0 0;
}
#layer0{
width:300px;
height:300px;
border:1px solid black;
margin: 100px auto;
z-index:0;
background:green;
}
#layer1{
width:400px;
height:300px;
margin:-300px auto;
z-index:1;
border:1px solid black;
background:orange;
}
#layer2{
width:300px;
height:300px;
margin:100px auto;
z-index:2;
border:1px solid black;
background:pink;}
margin:0;
padding:0;
text-align:center;
}
#maindiv{
width:900px;
height:800px;
margin:0 auto;
border:1px solid black;
padding:25px 0 0 0;
}
#layer0{
width:300px;
height:300px;
border:1px solid black;
margin: 100px auto;
z-index:0;
background:green;
}
#layer1{
width:400px;
height:300px;
margin:-300px auto;
z-index:1;
border:1px solid black;
background:orange;
}
#layer2{
width:300px;
height:300px;
margin:100px auto;
z-index:2;
border:1px solid black;
background:pink;}
html;
Code (php)
1
2
3
4
5
2
3
4
5
<div id="maindiv">maindiv
<div id="layer0">layer0</div>
<div id="layer1">layer1</div>
<div id="layer2">layer2</div>
</div>
<div id="layer0">layer0</div>
<div id="layer1">layer1</div>
<div id="layer2">layer2</div>
</div>
backgroundcolors en borders zijn alleen maar voor de duidelijkheid, verder moet je de img tags in de divs plaatsen, als ze tenminste niet als decoratie bedoeld zijn, dan kun je dat via css doen.
Toevoeging op 22/08/2011 21:46:19:
In ie8 werkt het, verder niet getest.
Gewijzigd op 22/08/2011 21:44:10 door John Acid