Post on 27-Jan-2015
description
transcript
CSS Layout – Steps
http://flic.kr/p/9P5DTb
CSS Layout – Steps1. Consider each element!
Which box belongs where? Create a declaration for each element.
News Static Login
#news #info #login
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?
goldenratiocalculator.com
The Golden Ratio
Grid Based Designshttp://grid-based.com/
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…
28% + 2% + 50% + 2% + 18% = 100%
220px + 20px + 480px + 20px + 220px = 960px
It needs to add upor your layout will break!
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!
#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;
}
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?
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
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
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!
#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%;
}
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!
#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%;
}
#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%;
}
#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%;
}
#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;
}
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!