6 colomen op beeldscherm
Nu wil ik niet uitgaan van een vast getal voor beeldscherm breedte dus ga ik werken in procenten.
Eerste in CSS de basis op 90% van het beeld gezet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* General Styling */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
body {
font-family: 'Droid Serif', serif;
font-size: 14px;
color: #333;
}
.main {
background-color: #e9e9e9;
width: 90%;
margin: 0 auto;
overflow: auto;
}
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
body {
font-family: 'Droid Serif', serif;
font-size: 14px;
color: #333;
}
.main {
background-color: #e9e9e9;
width: 90%;
margin: 0 auto;
overflow: auto;
}
Waarom width op 90%; Deze is deelbaar door 6 = 15%
Dan de code voor de kolomen
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
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
/* Six Column */
.column-1-left {
width: 15%;
background-color: #d7ede9;
padding: 10px;
border-radius: 25px;
border: 1px solid #5e9d92;
float: left;
margin-right: 0px;
}
.column-2345-middle {
width: 15%;
background-color: #d7ede9;
padding: 10px
border-radius: 25px;
border: 1px solid #5e9d92;
float: left;
margin-left: 0px;
margin-right: 0px;
}
.column-6-right {
width: 15%;
background-color: #d7ede9;
padding: 10px
border-radius: 25px;
border: 1px solid #5e9d92;
float: right;
margin-left: 0px;
}
.column-1-left {
width: 15%;
background-color: #d7ede9;
padding: 10px;
border-radius: 25px;
border: 1px solid #5e9d92;
float: left;
margin-right: 0px;
}
.column-2345-middle {
width: 15%;
background-color: #d7ede9;
padding: 10px
border-radius: 25px;
border: 1px solid #5e9d92;
float: left;
margin-left: 0px;
margin-right: 0px;
}
.column-6-right {
width: 15%;
background-color: #d7ede9;
padding: 10px
border-radius: 25px;
border: 1px solid #5e9d92;
float: right;
margin-left: 0px;
}
Het voorbeeld is hier te vinden.
Nu zie ik wat vreemds, kolom 1-5 staan netjes naast elkaar maar nummer 6 staat helemaal rechts met een ruimte ertussen.
De vraag is hoe krijg ik dit nu netjes aansluitend en gelijk verdeeld ???
.column-left {
width: calc(15% - 4px);
background-color: #d7ede9;
padding: 10px;
border-radius: 25px;
border: 1px solid #5e9d92;
float: left;
margin: 0px;
}
Gewijzigd op 08/08/2017 16:57:45 door - SanThe -
Gewijzigd op 08/08/2017 18:42:31 door Adoptive Solution
border-radius: 25px 0px 0px 25px;