steps for css layout
DESCRIPTION
If you are the copyright holder of one of the photos used in this presentation and you would not like it to be used in an academic context, please contact me and I will remove the image from the presentation. I have made sure that only images are use that are available under the Creative Commons licence.TRANSCRIPT
![Page 1: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/1.jpg)
CSS Layout – Steps
http://flic.kr/p/9P5DTb
![Page 2: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/2.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
![Page 3: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/3.jpg)
News Static Login
#news #info #login
![Page 4: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/4.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
![Page 5: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/5.jpg)
goldenratiocalculator.com
The Golden Ratio
![Page 6: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/6.jpg)
Grid Based Designshttp://grid-based.com/
![Page 7: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/7.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!Sorry, you need to do some maths here…
![Page 8: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/8.jpg)
28% + 2% + 50% + 2% + 18% = 100%
220px + 20px + 480px + 20px + 220px = 960px
It needs to add upor your layout will break!
![Page 9: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/9.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!Sorry, you need to do some maths here…
4. Apply the values in the CSS!Try to be as concise as possible!
![Page 10: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/10.jpg)
#red {background-color: red;width: 18%;height: 400px;margin: 0 2% 0 0;
}#green {
background-color: green;width: 50%;height: 400px;margin: 0 2% 0 0;
}#blue {
background-color: blue;width: 28%;height: 400px;margin: 0;
}
![Page 11: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/11.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!Sorry, you need to do some maths here…
4. Apply the values in the CSS!Try to be as concise as possible!
5. Choose the method of layout!Is it going to be float or position?
![Page 12: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/12.jpg)
VS
• text related images
• varying heights in column layout( less hassle)
• listing things (document flow matters)
• elements in a concreted position
•need to overwrite document flow
•flexible
•need to overlap
http://flic.kr/p/56L7gN http://flic.kr/p/aeLWkc
![Page 13: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/13.jpg)
VS
RuleIf elements should not interact, use absolute positioning, if they should, use floats.
—says Kilian Valkhofkilianvalkhof.com
http://flic.kr/p/56L7gN http://flic.kr/p/aeLWkc
![Page 14: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/14.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!Sorry, you need to do some maths here…
4. Apply the values in the CSS!Try to be a concise as possible!
5. Choose the method of layout!Is it going to be float or position?
6. Apply the method in the CSS!Know where to put things!
![Page 15: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/15.jpg)
#red {background-color: red;width: 18%;height: 400px;margin: 0 2% 0 0;float: left;
}#green {
background-color: green;width: 50%;height: 400px;margin: 0 2% 0 0;float: left;
}#blue {
background-color: blue;width: 28%;height: 400px;margin: 0;float: left;
}
#red {background-color: red;width: 18%;height: 400px;position: absolute;top: 0;left: 0;
}#green {
background-color: green;width: 50%;height: 400px;position: absolute;top: 0;left: 20%;
}#blue {
background-color: blue;width: 28%;height: 400px;position: absolute;top: 0;left: 72%;
}
![Page 16: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/16.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!Sorry, you need to do some maths here…
4. Apply the values in the CSS!Try to be as concise as possible!
5. Choose the method of layout!Is it going to be float or position?
6. Apply the method in the CSS!Know where to put things!
7. Rewrite the CSS with combined selectorsand shorthand notation!
![Page 17: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/17.jpg)
#red {
height: 400px;margin: 0 2% 0 0;float: left;
}#green {
height: 400px;margin: 0 2% 0 0;float: left;
}#blue {
height: 400px;margin: 0;float: left;
}
#red {background-color: red;width: 18%;
}#green {
background-color: green;width: 50%;
}#blue {
background-color: blue;width: 28%;
}
![Page 18: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/18.jpg)
#red {
height: 400px;margin: 0 2% 0 0;float: left;
}#green {
height: 400px;margin: 0 2% 0 0;float: left;
}#blue {
height: 400px;margin: 0;float: left;
}
#red {background-color: red;width: 18%;
}#green {
background-color: green;width: 50%;
}#blue {
background-color: blue;width: 28%;
}
![Page 19: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/19.jpg)
#red, #green, #blue {height: 400px;float: left;
}#red, #green {
margin: 0 2% 0 0;}#blue {
margin: 0;}
#red {background-color: red;width: 18%;
}#green {
background-color: green;width: 50%;
}#blue {
background-color: blue;width: 28%;
}
![Page 20: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/20.jpg)
#red, #green, #blue {height: 400px;float: left;
}#red, #green {
margin: 0 2% 0 0;}#red {
background-color: red;width: 18%;
}#green {
background-color: green;width: 50%;
}#blue {
background-color: blue;width: 28%;margin: 0;
}
![Page 21: Steps for CSS Layout](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7bc454a795931208b4603/html5/thumbnails/21.jpg)
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
2. Think of the widths!Do design rules like the golden ratio or a grid play a role?
3. Calculate the values!Sorry, you need to do some maths here…
4. Apply the values in the CSS!Try to be as concise as possible!
5. Choose the method of layout!Is it going to be float or position?
6. Apply the method in the CSS!Know where to put things!
7. Rewrite the CSS with combined selectorsand shorthand notation!