Inline houden met margin

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Dalando De Zuil

Dalando De Zuil

18/10/2010 20:23:34
Quote Anchor link
dit is mijn layout:

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


Nu komt alleen midright onder midleft te staan. Hoe kan ik midright naast midleft laten staan maar toch die inline houden?

Groetjes
 
PHP hulp

PHP hulp

27/12/2024 02:17:33
 
Jasper DS

Jasper DS

18/10/2010 20:27:04
Quote Anchor link
float gebruiken

edit bij mij staat het al goed?!
Gewijzigd op 18/10/2010 20:30:26 door Jasper DS
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:29:15
Quote Anchor link
?

Groetjes
 
Marc rc is as

Marc rc is as

18/10/2010 20:31:04
Quote Anchor link
Test even in FF dan staat hij er mooi naast :-)
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:31:42
Quote Anchor link
Niet in IE :|

Groetjes
 
Jasper DS

Jasper DS

18/10/2010 20:33:47
Quote Anchor link
neem gewoon de ie9 beta ;p

kan je dat niet oplossen met een "ie-sheet" ?
Gewijzigd op 18/10/2010 20:34:02 door Jasper DS
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:34:34
Quote Anchor link
PHP jasper op 18/10/2010 20:33:47:
neem gewoon de ie9 beta ;p

kan je dat niet oplossen met een "ie-sheet" ?


XP :|

IE-sheet?

Groetjes
 
Jasper DS

Jasper DS

18/10/2010 20:36:41
Quote Anchor link
iets in deze aard.. daar pas je gewoon in aan tot het in ie ook goed komt.

<!--[if IE]>
<style>

</style>
<![endif]-->
 
Marc rc is as

Marc rc is as

18/10/2010 20:38:01
Quote Anchor link
Je moet echt met float gaan werken, dan komt alles goed!
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:38:22
Quote Anchor link
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]-->


Ok, maar hoe kan ik het dan in IE goed doen?

Er is met float gezegd, maar ...?

Groetjes
 
Jasper DS

Jasper DS

18/10/2010 20:40:14
Quote Anchor link
maak tussen wat ik daarnet gezegd heb een #IE { hierin zet je de float }

google even float
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:44:58
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
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>


Nu komt in IE komt rechts naast de footer, en in FF en Chrome komen links en rechts onder elkaar zonder css :|
 
Marc rc is as

Marc rc is as

18/10/2010 20:45:06
Quote Anchor link
Ik kan me niet voorstellen dat je dit wil, maar dit is het begin

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
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>
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:49:45
Quote Anchor link
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
 
Jasper DS

Jasper DS

18/10/2010 20:50:32
Quote Anchor link
verander dit even voor chrome en FF

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
#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;
}
 
Kumkwat Trender

Kumkwat Trender

18/10/2010 20:52:05
Quote Anchor link
@ 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.
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 20:54:12
Quote Anchor link
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)
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
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>


Groetjes
 
Jasper DS

Jasper DS

18/10/2010 20:58:39
Quote Anchor link
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]-->
 
Kumkwat Trender

Kumkwat Trender

18/10/2010 21:00:23
Quote Anchor link
gebruik je een doctype!!?
 
Dalando De Zuil

Dalando De Zuil

18/10/2010 21:05:19
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
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]-->


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...
 
Jasper DS

Jasper DS

18/10/2010 21:07:49
Quote Anchor link
ik heb toch gezegd dat je het voor ie zelf nog moet aanpassen!
Gewijzigd op 18/10/2010 21:08:05 door Jasper DS
 

Pagina: 1 2 volgende »



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.