De PHPhulp kroeg
Gridpak
Ik heb een vraag betreft het grid systeem gridpak.
http://gridpak.com/
Gridpak is een erg handig systeem om een grid voor een website te ontwikkelen, alleen begrijp ik 1 gedeelte niet.
Voor het maken van het grid moet je 3 verschillende inputs invullen.
Voor de duidelijkheid:
- No. of columns
- column padding
- gutter width
Het aantal kolommen stel je in met ("no. of colomns"), gutter width is voor de ruimte per kolom.
De overige "colomn padding" begrijp ik alleen niet. Weet iemand waarvoor deze bedoeld is.
Het is inderdaad te gebruiken voor de padding, maar waarvoor is de padding? Voor de binnenkant van een kolom of?
Ik hoor graag van jullie.
Mocht er nog een vraag zijn hoor ik het uiteraard ook graag.
Gr. Casper B
Zoek even het box-model op. Dit is dat.
Oke, dat is inderdaad dan de padding, die aan de binnenkant van de kolom komt. Maar moet je al voor een kolom gebruiken?
Wat ik wil is een container van 940px breed, met 3 kolommen. De kolom breedte past hij automatisch aan, en ik regel met de gutter width, de ruimte tussen elke kolom.
Ik wil mijn portfolio items net zo breed als de kolom hebben, zonder de padding dan, allen ik wil wel de padding hebben voor mijn tekst. Dan hoef ik dus geen padding bij mijn grid te gebruiken? Waarvoor wordt de padding dan wel meestal voor gebruikt, bij een grid?
Tevens als ik via de website http://gridpak.com mijn grid ontwikkel zet ik de slide op 940 (mijn container breedte). Als ik vervolgens de zip download en de afbeelding in mijn ontwerp in photoshop plaats, is het grid opeens 960 breed?
Nu vraag ik me eigenlijk tijdens het typen van dit bericht af. Zijn grids niet allemaal alleen gericht op een container breedte van 960px?
Thnkx alvast!
Als ik vervolgens
Quote:
Zijn grids niet allemaal alleen gericht op een container breedte van 960px?
Nee, het populairste grid systeem is het 960gs, maar er zijn er nog veel meer.
Ik maak zelf altijd gebruik van het 978gs, dat is een pakket van 6(?) grid systemen voor elke resoltutie. Erg handig!
Quote:
Als ik vervolgens de zip download en de afbeelding in mijn ontwerp in photoshop plaats, is het grid opeens 960 breed?
Dan ben je vergeten om op 'Add breakpoint' te klikken, anders gaat hij oneindig door (wat ze hebben ingesteld op 960px).
Quote:
Dan hoef ik dus geen padding bij mijn grid te gebruiken?
Nee, je zou dan een extra class kunnen maken die de padding toevoegt:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<style>
/*
zorg dat het met het juiste box model werkt,
zodat we geen problemen krijgen als we padding toevoegen
*/
.col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.text { padding: 10px; } /* vul hier jou gewenste padding in */
/*
zorg dat het met het juiste box model werkt,
zodat we geen problemen krijgen als we padding toevoegen
*/
.col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.text { padding: 10px; } /* vul hier jou gewenste padding in */
Oke thnkx. Zeker een goede site om vaker te gebruiken.
Even terugkomend op Gridpak.com.
Over dit stuk wat ik vroeg:
Quote:
Als ik vervolgens de zip download en de afbeelding in mijn ontwerp in photoshop plaats, is het grid opeens 960 breed?
Waar zou ik dan een 'Add breakpoint' moeten plaatsen? Wanneer ik toch een grid van 940 wil hebben. Is het niet aan te passen in de code op 960 te veranderen in 940?
als ik dat heb gedaan krijg ik een afbeelding van 'grid-940_to_infinity'. Alleen die is dan weer 960 breed...
Momenteel heb ik een breakpoint op 940 gezet, en het aantal kolommen, gutter en padding aangegeven. Nu geeft hij ook aan van 940 - oneindig.. en toch is het grid 960 breed haha.
Gewijzigd op 17/06/2012 13:19:36 door Casper B
Css:
Dan zie je de comments staan. Dus 940 tot oneindig hebben die percentages voor de kolommen. En waarschijnlijk is span 3, de kolom breedte die dus 100% is en zich uiteindelijk altijd aanpast aan de breedte van de container?
Want span 1 en 2 zijn voor de padding en gutter...
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
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
/* Reusable column setup */
.col {
border:0px solid rgba(0,0,0,0);
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box !important;
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
}
/* 1. 3 Column Grid 0px - 939px
-----------------------------------------------------------------------------
Span 1: 33.3333333333%
Span 2: 66.6666666667%
Span 3: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 939px) {
.row {
margin-left:-30px;
}
.col {
border-left-width:30px;
padding:0 0px;
}
/*
Add your semantic classnames in alongside their corresponding spans here. e.g.
.span_3,
.my_semantic_class_name {
...
}
*/
.span_1 {
width:33.3333333333%;
}
.span_2 {
width:66.6666666667%;
}
.span_3 {
margin-left:0;
width:100%;
}
}
/* 2. 3 Column Grid 940px - Infinity
-----------------------------------------------------------------------------
Span 1: 33.3333333333%
Span 2: 66.6666666667%
Span 3: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 940px) {
.row {
margin-left:-30px;
}
.col {
border-left-width:30px;
padding:0 0px;
}
.span_1 {
width:33.3333333333%;
}
.span_2 {
width:66.6666666667%;
}
.span_3 {
margin-left:0;
width:100%;
}
}
.col {
border:0px solid rgba(0,0,0,0);
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box !important;
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
}
/* 1. 3 Column Grid 0px - 939px
-----------------------------------------------------------------------------
Span 1: 33.3333333333%
Span 2: 66.6666666667%
Span 3: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 939px) {
.row {
margin-left:-30px;
}
.col {
border-left-width:30px;
padding:0 0px;
}
/*
Add your semantic classnames in alongside their corresponding spans here. e.g.
.span_3,
.my_semantic_class_name {
...
}
*/
.span_1 {
width:33.3333333333%;
}
.span_2 {
width:66.6666666667%;
}
.span_3 {
margin-left:0;
width:100%;
}
}
/* 2. 3 Column Grid 940px - Infinity
-----------------------------------------------------------------------------
Span 1: 33.3333333333%
Span 2: 66.6666666667%
Span 3: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 940px) {
.row {
margin-left:-30px;
}
.col {
border-left-width:30px;
padding:0 0px;
}
.span_1 {
width:33.3333333333%;
}
.span_2 {
width:66.6666666667%;
}
.span_3 {
margin-left:0;
width:100%;
}
}
PS. Heb nu alleen 1 breakpoint geplaatst.
Wanneer ik op http://gridpak.com/about/ en naar onder scroll en het pop-upje bij css aanklik, opent zich een scherm met de techniek achter gridpak. Ik heb de linker "tutorial" gebruikt om het op te zetten, wanneer ik vervolgens de css van mijn gridpak aan de html link, staat alles ongeveer op zijn plaats.
Wat er nu niet helemaal werkt is de class "row"...
Deze heeft als style:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
.row {
margin-left:-30px;
}
[/code[
De row div komt heel raar te staan. Niet alleen steekt deze div ivm de negative waarde uit de container, maar de positionering van het object is ook erg raar, deze komt boven de slider en navigatie uit...
Waar kan dit aan liggen. De slider en navigatie hebben wel als style float: left; ...
Wanneer ik een bezoekje aan de gridpak site neem en de about pagiana onderzoek met firebug, dan zie ik dat de div row wel goed staat en tevens een float: left en marges heeft...
Hopelijk kan iemand mij helpen.
Casper
margin-left:-30px;
}
[/code[
De row div komt heel raar te staan. Niet alleen steekt deze div ivm de negative waarde uit de container, maar de positionering van het object is ook erg raar, deze komt boven de slider en navigatie uit...
Waar kan dit aan liggen. De slider en navigatie hebben wel als style float: left; ...
Wanneer ik een bezoekje aan de gridpak site neem en de about pagiana onderzoek met firebug, dan zie ik dat de div row wel goed staat en tevens een float: left en marges heeft...
Hopelijk kan iemand mij helpen.
Casper