Layout problemen
http://codepen.io/anon/pen/DiCwA
Nu zijn er 2 dingen die ik niet zo goed begrijp.
1) Waarom moet ik bij de linkse en rechtse kolom (div links en div rechts) een margin van -10px geven om ze op dezelfde hoogte te krijgen als mijn middelste div? (Als ik een border gebruik doen ze het wel gewoon goed....)
2) Bij de div helemaal links onder krijg ik de zwarte div niet in beeld. Hoe kan dit?
http://getbootstrap.com/
voordelen:
responsive
minder css werk
bovenstaande problemen opgelost
nadelen:
Geen
Hopelijk komen er nog wat reacties,maar ik ga ook zeker dit programmatje bekijken.
De layout die jij op aan het zetten bent kan met Bootstrap binnen 5 min werken **
Is er iemand die mij uit kan leggen waarom dit zo niet werkt, en waarom ik hier met margin -10 moet werken?
Alvast bedankt voor het meedenken!
zie dat ik de -10px heb weggehaald. Heb de bovenste header een bot margin gegeven van 10 px en elke content tabje ook een bottom margin van 10px. Alleen op een of andere manier heeft BBBB geen header maar dat zou die in de browser wel moeten hebben.
Toevoeging op 17/10/2014 17:43:37:
Na nog wat CSS stoeien is het me uiteindelijk gelukt!
Bedankt voor het meedenken!
Bij mijn linkercontent_div had ik een float: left; meegegeven deze zat nog in de weg.
Dit is een werkend voorbeeld:
http://codepen.io/anon/pen/poFgz
dit is jou code maar dan geoptimaliseerd en responsive
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
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
<div id="totaal">
<div id="header">
<div id="headerleft">
</div>
</div>
<div id="under">
<div id="links">
<div class="header_div">
</div>
<div class="linkscontent_div">
AAAAA
</div>
<div class="header_div">
</div>
<div class="linkscontent_div">
BBBBBB
</div>
</div>
<div id="rechts">
<div class="header_div">
</div>
<div class="rechtscontent_div">
CCCCCCC
</div>
<div class="header_div">
</div>
<div class="rechtscontent_div" id="kalender">
DDDDDDD
</div>
</div>
<div id="content">
<div class="header_div">
</div>
<div class="middencontent_div">
EEEEEEEE
</div>
<div class="header_div">
</div>
<div class="middencontent_div">
FFFFFFF
</div>
<div class="header_div">
</div>
<div class="middencontent_div">
GGGGGG
</div>
</div>
</div>
</div>
<div id="header">
<div id="headerleft">
</div>
</div>
<div id="under">
<div id="links">
<div class="header_div">
</div>
<div class="linkscontent_div">
AAAAA
</div>
<div class="header_div">
</div>
<div class="linkscontent_div">
BBBBBB
</div>
</div>
<div id="rechts">
<div class="header_div">
</div>
<div class="rechtscontent_div">
CCCCCCC
</div>
<div class="header_div">
</div>
<div class="rechtscontent_div" id="kalender">
DDDDDDD
</div>
</div>
<div id="content">
<div class="header_div">
</div>
<div class="middencontent_div">
EEEEEEEE
</div>
<div class="header_div">
</div>
<div class="middencontent_div">
FFFFFFF
</div>
<div class="header_div">
</div>
<div class="middencontent_div">
GGGGGG
</div>
</div>
</div>
</div>
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
95
96
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
95
96
body {
overflow:auto;
text-align:center;
margin:0;
padding:0;
background-color:#222222;
font-family:verdana;
font-size:12px;
}
#totaal {
border:0 solid red;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:0;
width:80%;
vertical-align:top;
}
#header {
margin-top:0;
margin-bottom:10px;
padding:0;
width: 100%;
height:121px;
vertical-align:top;
background-color:#FFFFFF;
background-image:url('../images/zscheader.jpg');
top:0;
border:0 solid red;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
div.header_div {
border: 0 solid green;
background-color:#000000;
border-top-left-radius:10px;
border-top-right-radius:10px;
height:18px;
z-index:3;
}
#under {
border: 0 solid red;
width: 100%;
position: relative;
}
#links {
border: 0 solid green;
text-align: left;
vertical-align:top;
float:left;
width:20%;
margin-right: 5%;
}
#content {
border: 0 solid red;
vertical-align:top;
margin-top: 0;
width:50%;
float: left;
}
#rechts {
border: 0 solid green;
text-align: left;
vertical-align:top;
float:right;
width:20%;
}
.rechtscontent_div {
border:0 solid green;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color: #E5E5E5;
padding:3px 0 18px 0;
width:100%;
margin-bottom:10px;
}
.linkscontent_div {
border: 0 solid green;
background-color: #E5E5E5;
width:100%;
padding:3px 0 18px 0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-bottom:10px;
}
div.middencontent_div {
background-color: #E5E5E5;
padding:3px 0 18px 0;
text-align:left;
width:100%;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-bottom:10px;
}
overflow:auto;
text-align:center;
margin:0;
padding:0;
background-color:#222222;
font-family:verdana;
font-size:12px;
}
#totaal {
border:0 solid red;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:0;
width:80%;
vertical-align:top;
}
#header {
margin-top:0;
margin-bottom:10px;
padding:0;
width: 100%;
height:121px;
vertical-align:top;
background-color:#FFFFFF;
background-image:url('../images/zscheader.jpg');
top:0;
border:0 solid red;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
div.header_div {
border: 0 solid green;
background-color:#000000;
border-top-left-radius:10px;
border-top-right-radius:10px;
height:18px;
z-index:3;
}
#under {
border: 0 solid red;
width: 100%;
position: relative;
}
#links {
border: 0 solid green;
text-align: left;
vertical-align:top;
float:left;
width:20%;
margin-right: 5%;
}
#content {
border: 0 solid red;
vertical-align:top;
margin-top: 0;
width:50%;
float: left;
}
#rechts {
border: 0 solid green;
text-align: left;
vertical-align:top;
float:right;
width:20%;
}
.rechtscontent_div {
border:0 solid green;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color: #E5E5E5;
padding:3px 0 18px 0;
width:100%;
margin-bottom:10px;
}
.linkscontent_div {
border: 0 solid green;
background-color: #E5E5E5;
width:100%;
padding:3px 0 18px 0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-bottom:10px;
}
div.middencontent_div {
background-color: #E5E5E5;
padding:3px 0 18px 0;
text-align:left;
width:100%;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-bottom:10px;
}
Gewijzigd op 23/10/2014 08:55:49 door Stefan Fransen
Bedankt voor deze aanvulling. Wat me zo opvalt is dat je de width gewijzigd hebt naar %.
Heb je verder nog iets gedaan?
Ik heb nog een ander topic lopen waar ik een probleempje in mijn lay-out heb, misschien dat je hier ook een oplossing voor weet?
Toevoeging op 23/10/2014 10:14:03:
http://www.phphulp.nl/php/forum/topic/nieuwssysteem-layout-probleem-chrome/96201/
Toevoeging op 23/10/2014 10:16:20:
Ook zie ik dat mijn padding bij het middenstuk weg kan.
Bij rechts heb je geen margin van 5%, is dit omdat het totaal toch op 100% uitkomt, of is het beter om die ook toe te voegen?
Toevoeging op 23/10/2014 10:19:04:
http://www.phphulp.nl/php/forum/topic/nieuwssysteem-layout-probleem-chrome/96201/