positioning in css - sci-fi science camps in css.pdfpositioning in css: so you know now how to...
TRANSCRIPT
Positioning in CSS:
So you know now how to change the color and style of the elements on your webpage but how do we
get them exactly where we want them to be placed?
There are 5 different ways we can set our position:
Static: This is the positioning the items on your page will take by default, It will follow the natural flow
of the page and is not effected by the top, bottom, left right properties.
All of the elements will go one after another and will try to fit themselves together the best they can.
The elements will all the stay in the same positions in terms of one another unless you add margins to
them.
So every item on you page is set up with the following properties.
The blue box is your image or block of text
Padding is how far the object will appear from its borders
Margin is how much space will be on either side of the borders (this is useful in positioning objects in
relation to one another.
So while our images used to be right beside each other if we set them with padding, margins and
borders we can change how far they are from each other
This will create a page like this:
Each of the variables can be individually set to change the widths for example:
SYNTAX:
Note the following system can be used with the margin, padding, and border settings.
1 number) Padding: #px;
This will define all the edges all at once---so every side will have the same number of pixels to be the
padding.
2 numbers) Padding: 25px 15px;
In this case the first number is your top and bottom settings while the second is the right and left. So the
top and bottom in this example would have 25px for padding and the left and right would have 15px.
3 numbers) Padding: 25px 15px 10px;
If there are 3 numbers defined then the first number is your settings for the top, the 2nd is for your right
and left sides, and the 3rd is the bottom settings.
So in this example the top padding would be 25px, the left and right would be 15px, and the bottom
would be 10px.
4 numbers) Padding: 25px 10px 5px 11px;
Here we are defining each side.
The first number is the top
2nd is the right side
3rd is the bottom
4th is the left
So in this example the top would have 25px, the right 10px, the bottom 5 px, and the left 11px.
If you want to define just one side we can use the top, left, right, bottom add ons to padding, margin, or
border like so:
Ex:
Padding-left:
Margin:-right:
Border-bottom:
These next set of position types can all be moved with the following properties
Top: #px;
Bottom: #px
Left:#px
Right:#px
FIXED: the object is positioned relative to the browser window and will not move even when the
window is scrolled.
See the following example
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
Relative: These objects are placed relative to their normal position, they can overlap with other
objects
See the following example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative2
here I’ve changed the code to read position: relative; :
Note that when two
commands that contradict
one another are written
the one farther down is
listened to.
So the command had the button move down from the top 200px from its normal location and the man
was moved -100px to the left (which it means it moves towards the left instead of away)
Absolute: this type will be placed in relation to the first declared object that has a positioning other
than static. This type of positioning is typically used to place things within one another. If there are no
items declared then the absolute positioned object will take the <html> block to be its container
Example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
Now if I keep my code the same and just change the position to absolute this is my result
Now the images are taking their coordinates from the html block (or webpage). Now moving the man
100px takes him 100px off screen. Note that with absolute they are taken out of the normal flow of the
page The words have moved off to the top of the page because now the images are on a different layer
and since they are still statically positioned they will go to the normal flow of the page .
Now what if we have several overlapping images but we want to be able to control in what order they
go?
The answer is the z index!
z-index:#;
The lower the z index is the farther back in the page it will appear. If you want an images to appear
behind the rest of objects on the page for example you would set it to -1.
So let’s say I wanted the man picture to appear behind the button, I would just add a z-index of -1!
Tips for placing words:
If you set the text inside of a <div> tag that will give you some freedom in placing it for example lets see
what happens if I set my text to absolute positioning.
Okay so now our words can also be positioned at will…but I think we can agree here this is a mess!
The next thing we should learn how to do is size our objects!
SIZING:
To change the size of our objects all we have to do is define the width and height that we would like
Ex:
Width: #px;
Height:#px;
If we only define one the other side will be scaled accordingly.
We can use this to change the size of our <div> to make the text fit into different sized boxes.
Much better!
There are other ways we can size objects with css as well, You can also use the following commands
Min-height
Min-width
Max-height
Max-width
Every time you are defining size you can do it either by saying how many pixels you would like or what
percentage (%) you would like of the image. So putting width:25%; will make you image ¼ as small.
Okay so lefts summarize what you just learned:
How to position using relative, absolute, and fixed positioning.
How to change the size of an object.