Inline houden met margin
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
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
#midleft {
width:75%;
background-color:white;
border:2px solid black;
display:inline;
margin:2px;
}
#midright {
width:25%;
background-color:white;
border:2px solid black;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
</style>
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
#midleft {
width:75%;
background-color:white;
border:2px solid black;
display:inline;
margin:2px;
}
#midright {
width:25%;
background-color:white;
border:2px solid black;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
</style>
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Nu komt alleen midright onder midleft te staan. Hoe kan ik midright naast midleft laten staan maar toch die inline houden?
Groetjes
Groetjes
Test even in FF dan staat hij er mooi naast :-)
Groetjes
PHP jasper op 18/10/2010 20:33:47:
neem gewoon de ie9 beta ;p
kan je dat niet oplossen met een "ie-sheet" ?
kan je dat niet oplossen met een "ie-sheet" ?
XP :|
IE-sheet?
Groetjes
<!--[if IE]>
<style>
</style>
<![endif]-->
Je moet echt met float gaan werken, dan komt alles goed!
PHP jasper op 18/10/2010 20:36:41:
iets in deze aard.. daar pas je gewoon in aan tot het in ie ook goed komt.
<!--[if IE]>
<style>
</style>
<![endif]-->
<!--[if IE]>
<style>
</style>
<![endif]-->
Ok, maar hoe kan ik het dan in IE goed doen?
Er is met float gezegd, maar ...?
Groetjes
google even float
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
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
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
</style>
<!--[if IE]>
<style>
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float:left;
margin:2px;
}
#midright {
width:25%;
background-color:white;
border:2px solid black;
float:right;
margin:2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
}
</style>
<!--[if IE]>
<style>
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float:left;
margin:2px;
}
#midright {
width:25%;
background-color:white;
border:2px solid black;
float:right;
margin:2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Nu komt in IE komt rechts naast de footer, en in FF en Chrome komen links en rechts onder elkaar zonder 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
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
<html>
<head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
float: none;
margin-left: auto;
margin-right: auto;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left
}
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
float: none;
margin-left: auto;
margin-right: auto;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left
}
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
en in Firefox en Chrome staat ie zoals ie in het begin stond met IE... :|
Groetjes
@ Dalando mag k vragen waar je mee bezig bent? dus wat voor site, heb je het online staan? Je bent zo druk bezig deze afgelopen 3 dagen =D.
Kumkwat Trender op 18/10/2010 20:52:05:
@ Dalando mag k vragen waar je mee bezig bent? dus wat voor site, heb je het online staan? Je bent zo druk bezig deze afgelopen 3 dagen =D.
Ik start op mijn locale host overal hier een daar scriptjes en projectes om te leren en mijzelf te trainen ;)
Groetjes
Toevoeging op 18/10/2010 20:56:00:
Met dit verandert er nog niks :|
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
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
<html>
<head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
float: none;
margin-left: auto;
margin-right: auto;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left
}
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left;
}
</style>
<!--[if !IE]>
<style type="text/css">
#midleft {
width:74%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: right;
display:inline;
margin:2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
float: none;
margin-left: auto;
margin-right: auto;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left
}
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left;
}
</style>
<!--[if !IE]>
<style type="text/css">
#midleft {
width:74%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: right;
display:inline;
margin:2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="upper">
Upper inner
</div>
<div id="midleft">
Midleft
</div>
<div id="midright">
Midright
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Groetjes
<!--[if IE]>
<style>
ZET HIER DE CODE VOOR IE
</style>
<![endif]-->
gebruik je een doctype!!?
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
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
float: none;
margin-left: auto;
margin-right: auto;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left
}
#midleft {
width:74%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: right;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left;
}
</style>
<!--[if IE]>
<style type="text/css">
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
</style>
<![endif]-->
* {
padding: 0px;
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
font-size:12px;
}
#main {
width:90%;
float: none;
margin-left: auto;
margin-right: auto;
}
#upper {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left
}
#midleft {
width:74%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: right;
display:inline;
margin:2px;
}
#footer {
width:100%;
background-color:white;
border:2px solid black;
margin:2px;
float: left;
}
</style>
<!--[if IE]>
<style type="text/css">
#midleft {
width:75%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
#midright {
width:24%;
background-color:white;
border:2px solid black;
float: left;
display:inline;
margin:2px;
}
</style>
<![endif]-->
in FF & Chrome staat is midright nu net iets te kort...
En in IE staat ie weer net zoals in het begin...
En Doctype xhtml trans 1.0 toegevoegd...
Gewijzigd op 18/10/2010 21:08:05 door Jasper DS