css positionering - div
ik kom er niet goed uit hoe ik mijn 2 divs naast elkaar zet.
Klik hier om te zien
her werkt ook alleen maar in IE en niet in FF, chrome daar weet ik ook de oplossing niet voor.
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
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
BODY {
background-color: #808080;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
.header {
padding: 25px 0px 25px 0px;
width: 760px;
height: 200px;
}
#content{
background: url(../afbeeldingen/Site/body.jpg) no-repeat top center;
height: 690px;
width: 760px;
padding: 25px 0px 25px 0px;
}
.menu {
padding: 0px 0px 0px 0px;
height: 50px;
width: 760px;
font-size: 20px;
word-spacing: 2em;
}
.blog {
width: 600px;
padding: 5px 250px 0px 0px;
text-align:left;
color: #FFFAFA;
}
.titel {
padding: 0px 0px 0px 0px;
}
.gastboek {
text-align: center;
font-size: 20px;
}
.nieuws {
width: 300px;
padding: 0px 0px 0px 400px;
text-align:left;
color: #FFFAFA;
}
background-color: #808080;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
.header {
padding: 25px 0px 25px 0px;
width: 760px;
height: 200px;
}
#content{
background: url(../afbeeldingen/Site/body.jpg) no-repeat top center;
height: 690px;
width: 760px;
padding: 25px 0px 25px 0px;
}
.menu {
padding: 0px 0px 0px 0px;
height: 50px;
width: 760px;
font-size: 20px;
word-spacing: 2em;
}
.blog {
width: 600px;
padding: 5px 250px 0px 0px;
text-align:left;
color: #FFFAFA;
}
.titel {
padding: 0px 0px 0px 0px;
}
.gastboek {
text-align: center;
font-size: 20px;
}
.nieuws {
width: 300px;
padding: 0px 0px 0px 400px;
text-align:left;
color: #FFFAFA;
}
Gewijzigd op 31/08/2010 13:20:23 door Jasper DS
Vincent Huisman op 31/08/2010 13:46:02:
met float:left; krijg je ze naast elkaar
ja dat heb ik geprobeerd bij blog en nieuws maar had geen effect?!
misschien dat ik toch nog iets verkeerds doe.
heb jij misschien ook een idee waarom het in IE wel goed (bijna goed) weergeven word en in FF / chrome helemaal niet?
Of
display: inline-block;
Denk eraan dat je het volgende in de wrapper ervan zet:
clear: both;
overflow: hidden;
@ synaps, moet ik die wrapper nog aanmaken of wat is dat?
Wrapper is een div om die andere 2 divjes heen. Hoef je niet te gebruiken. Als je het maar cleared.
met de clear bedoel je dit: clear: both; ?
Ik heb dit in de body gezet dat deed niks, daarna heb ik het in de blog en nieuws gezet, dan was het weer onder elkaar en als ik het alleen in nieuws of blog zet gebeurt er niets.
Ik zal dan eerst beginnen met het in FF proberen goed te maken.
Hoe begin ik? In Ie zie je al een beetje hoe het er moet uitzien in FF is het nog tegen de linker kant gedrukt.
Toevoeging op 31/08/2010 19:34:22:
ik heb nu alle browsers ongeveer gelijk gekregen maar het is nog altijd niet hoe het zou moeten zijn. Klik]
code: 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
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
[/codeBODY {
background-color: #808080;
margin: 0;
padding-bottom: 25px ;
padding-top: 25px ;
text-align: center;
font-family: "arial";
}
#wrapper {
text-align: center;
width: 800px ;
margin-left: auto ;
margin-right: auto ;
clear: both;
}
.header {
width: 760px;
height: 200px;
}
#content{
background: url(../afbeeldingen/Site/body.jpg) no-repeat top center;
height: 690px;
width: 760px;
}
.menu {
padding: 17px 0px 0px 0px;
height: 40px;
width: 760px;
font-size: 20px;
margin: 0;
word-spacing: 2em;
}
.blog {
padding: 0px 50x 0px 0px;
float: left;
width: 400px;
text-align:left;
color: #FFFAFA;
}
.titel {
padding: 0px 0px 0px 0px;
}
.nieuws {
padding: 25px 0px 0px 0px;
width: 140px;
float: right;
text-align:left;
color: #FFFAFA;
}
.gastboek {
text-align: center;
font-size: 20px;
}
.border {
border: none;
}
background-color: #808080;
margin: 0;
padding-bottom: 25px ;
padding-top: 25px ;
text-align: center;
font-family: "arial";
}
#wrapper {
text-align: center;
width: 800px ;
margin-left: auto ;
margin-right: auto ;
clear: both;
}
.header {
width: 760px;
height: 200px;
}
#content{
background: url(../afbeeldingen/Site/body.jpg) no-repeat top center;
height: 690px;
width: 760px;
}
.menu {
padding: 17px 0px 0px 0px;
height: 40px;
width: 760px;
font-size: 20px;
margin: 0;
word-spacing: 2em;
}
.blog {
padding: 0px 50x 0px 0px;
float: left;
width: 400px;
text-align:left;
color: #FFFAFA;
}
.titel {
padding: 0px 0px 0px 0px;
}
.nieuws {
padding: 25px 0px 0px 0px;
width: 140px;
float: right;
text-align:left;
color: #FFFAFA;
}
.gastboek {
text-align: center;
font-size: 20px;
}
.border {
border: none;
}
Gewijzigd op 01/09/2010 19:07:21 door Jasper DS
#content
{
width:800px;
height:100%;
margin:0 auto;
}
#left
{
width:400px;
height:300px;
margin:0px;
}
#right
{
width:400px;
height:300px;
margin-left:400px;
margin-top:-300px;
}
Dit werkt bij mij altijd goed, op elke resolutie blijven de blokken goed staan.
laatste probleem.. in IE wordt het niet goed weergeven.
Bekijk de lay-out
Toevoeging op 02/09/2010 18:11:54:
oke alles staat nu mooi netjes alleen in IE moet het nog een 20-tal pixels naar beneden. Heeft iemand een idee?
Gewijzigd op 01/09/2010 21:41:53 door Jasper DS