Change width of Blog template, sidebar, main-2

continue from previous...

Width:
We use this for giving width of a particular item. If we didn’t given this, by default it will take 100% of available area. It can be given in px or in %.

You can give this value like this:  width: 100px; or width: 25%;

If you give in % it will take count from total available screen area. It is not 25% of particular item in all the situations, so be care full.

While giving this you have to decide how much should be the padding and margin for your item. Padding value includes your width and reduces your original usable area. Margin value will not affect your usable area but increases the total width of your defined item.

Height:
This feature we use to restrict the height of a particular item.
You can give this value like this:   height: 100px; or height: 25%;


Float:
We use this to float or send particular item in one direction. For example if we say float: right; for sidebar means we are saying that sidebar should float towards right side.

You can give value for this:

float: right; or float: $endSide;
float: left; or float: $startSide;

If you say float: right; for main wrapper and sidebar wrappers both will go on right side of screen. To display gap between these two elements we need to use margin attribute.
If you given margin: 5px; to main then you need to give margin for top and left or right and bottom for sidebar on the basis of its location in body structure to display equal gap between main and sidebar.
If you given margin: 5px; to sidebar then you need to give margin for top and left or right and bottom for main on the basis of its location in body structure to display equal gap between main and sidebar.
Otherwise gap between main and sidebar will be more.


Border:
We use this to display boarder to particular element. The value of boarder is exclusive to the element, i.e., it is an extra to the defined value of item.
Ex: if u say width: 500px; for main wrapper and border: 1px; then the total width of main will be 502px. (500px+2px of border (1px on left side and 1px on right side))

We can give values for this as follows:
border: 1px solid $bordercolor; or border: 1px dotted $bordercolor; etc.
for detailed understanding:
border: 1px; (if we use this we get general color to the border to specify a color follow next one)
or
border: 1px solid #999999; (here we are giving the color of border for this particular one only)
or
border: 1px solid $bordercolor; (here we are declaring the color of border in single time and can use in many places, when we use a declared value, we can add it many places and when we change the color of $bordercolor automatically change takes effect all the places where ever you used it)
or we can restrict it to a side like this:
border -left: 1px; or border -$startSide:1px;
border -right: 1px; or border -$endSide:1px;
border -top: 1px;
border -bottom: 1px;

If you say: “border: 5px;” (particular item will get 5px margin on all the sides in single declaration, i.e., top, right, bottom, left )

If you want to restrict it for a particular side or sides then you need to use these:
border -left: 1px; or border -$startSide:1px; (only left side it will get 1px border)
border -right: 1px; or border -$endSide:1px; (only right side it will get 1px border)
border -top: 1px; (only top side it will get 1px border)
border -bottom: 15px; (only bottom side it will get 1px border)

For example if u give border -top: 1px; means only top it will give 1px margin and remaining sides will be 0px.

| Previous | Home | Next |