Een stel divs centreren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robby Alexander

Robby Alexander

20/08/2011 13:15:57
Quote Anchor link
Stel je hebt een aantal divs en die overlappen elkaar en die moeten ook op dezelfde afstand blijven.
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.
 
PHP hulp

PHP hulp

02/12/2020 17:20:54
 
Bas Kreleger
Beheerder

Bas Kreleger

20/08/2011 13:42:25
Quote Anchor link
Heb je ook ergens een online voorbeeld van je overlappende divjes?
 
Write Down

Write Down

20/08/2011 14:55:35
Quote Anchor link
Misschien is dit wat?


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 :'-)
 
Robby Alexander

Robby Alexander

21/08/2011 00:47:23
Quote Anchor link
write down hele goede goede :):):):) hahaha

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
Robby Alexander

Robby Alexander

22/08/2011 11:36:31
Quote Anchor link
of kan ik het beste dit als php bestand opvragen en hem in een tabel zetten?
want het probleem is dat mijn table wel scrollt en de divs niet die blijven staan
 
- Ariën -
Beheerder

- Ariën -

22/08/2011 11:37:40
Quote Anchor link
huh? tabellen moet je echt niet meer gebruiken, alleen voor tubulaire data is het nog handig.

Laat eens een voorbeeld zien?
 
Robby Alexander

Robby Alexander

22/08/2011 11:52:10
Quote Anchor link
ik heb online geen voorbeeld maar als ik wil scrollen dan blijven deze divs op de voorgrond plakken in het venster... hoe kan ik ervoor zorgen of een tutorial lezen over hoe divs mee scrollen en gewoon een positie hebben gekregen in een pagina netzoals een tabel... ik heb er echt moeite mee, want ze moeten overelkaar vallen en dat is me aardig gelukt alleen nu blijft het boeltje plakken. ik hoop dat je begrijpt wat ik bedoel
 
- Ariën -
Beheerder

- Ariën -

22/08/2011 12:09:41
Quote Anchor link
Een voorbeeld werkt dan toch wat makkelijker.
 
Robby Alexander

Robby Alexander

22/08/2011 12:54:47
Quote Anchor link
het enige verschil is dat de divs in een table staan maar ze springen eruit
 
- Ariën -
Beheerder

- Ariën -

22/08/2011 13:04:48
Quote Anchor link
Geef je code dan eens
 
Robby Alexander

Robby Alexander

22/08/2011 13:09:05
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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
 
Mike van den Berg

Mike van den Berg

22/08/2011 14:13:32
Quote Anchor link
Overlappende divs in een tabel?
BAH!
Probeer daar z-index voor te gebruiken.

Mocht je nogsteeds problemen hebben met positionering,
probeer eens in je CSS document:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
margin: 0 auto;
width: 960px;


Dat gaat veel oplossen voor alle browsers.
 
Robby Alexander

Robby Alexander

22/08/2011 14:41:39
Quote Anchor link
bah in de zin van het werkt niet. of bah in de zin van ik vind het niet mooi?

ik ben namelijk een module aan het maken voor een collage en dat je dan verschillende fotos desgewenst kunt veranderen
 
Mike van den Berg

Mike van den Berg

22/08/2011 14:50:47
Quote Anchor link
Bah in divs horen niet in een tabel :)
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Waarbij je de volgende CSS gebruikt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


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
 
Robby Alexander

Robby Alexander

22/08/2011 15:06:56
Quote Anchor link
maar dan komen ze onderelkaar het is zo dat er 5 fotos overelkaar moeten vallen en dat ze vervangbaar zijn door een script door de beheerder maar de eindgebruiker moet altijd hetzelfde resultaat zien.
 
John Acid

John Acid

22/08/2011 18:39:34
Quote Anchor link
Als je position fixed gebruikt heeft float(inherit) weinig nut, volgens mij.
Gewijzigd op 22/08/2011 18:39:54 door John Acid
 
Robby Alexander

Robby Alexander

22/08/2011 20:18:26
Quote Anchor link
hoe zou jij het gedaan hebben?
 
John Acid

John Acid

22/08/2011 21:41:18
Quote Anchor link
Bijv zoiets, is maar een opzet;
css;
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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;}



html;
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div id="maindiv">maindiv
<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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.