Inline houden met margin
dit is mijn layout:
Nu komt alleen midright onder midleft te staan. Hoe kan ik midright naast midleft laten staan maar toch die inline houden?
Groetjes
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
Groetjes
Test even in FF dan staat hij er mooi naast :-)
Niet in IE :|
Groetjes
Groetjes
neem gewoon de ie9 beta ;p
kan je dat niet oplossen met een "ie-sheet" ?
kan je dat niet oplossen met een "ie-sheet" ?
Gewijzigd op 18/10/2010 20:34:02 door Jasper DS
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
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]-->
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
maak tussen wat ik daarnet gezegd heb een #IE { hierin zet je de float }
google even float
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 :|
Ik kan me niet voorstellen dat je dit wil, maar dit is het begin
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>
Marc met jou code staat ie in IE helemaal linksboven, wat ik niet wil...
en in Firefox en Chrome staat ie zoals ie in het begin stond met IE... :|
Groetjes
en in Firefox en Chrome staat ie zoals ie in het begin stond met IE... :|
Groetjes
verander dit even voor chrome en FF
@ 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
dit werkt toch in chrome in FF.. voor ie doe het zoals ik het daarnet zei:
<!--[if IE]>
<style>
ZET HIER DE CODE VOOR IE
</style>
<![endif]-->
<!--[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...
ik heb toch gezegd dat je het voor ie zelf nog moet aanpassen!
Gewijzigd op 18/10/2010 21:08:05 door Jasper DS




