Positioning Content with CSS
You can position content with style sheets in just a few simple steps. Today we will have Christopher Walken helping us learn.
|
With CSS you can position your content absolutely anywhere on your page, right down the to the exact pixel. That gives you much more creative license than plain HTML does. HTML gave you the ability to place things in order, from top to bottom and from right to left. You could use line breaks and you could use alignment, but you couldn't put anything anywhere. With CSS you can.
There is two basic ways to position content with CSS. You can specify an absolute position or a relative position. h method requires you assigning a position to an HTML element. That element (a table or an image, for example) will then appear in the absolute or relative spot you want it to.
As you can see in this picture there are units that run from left to right and from top to bottom. This is the same for both images nd for webpages. Each single dot you can see when you look really close at the screen is a pixel. Each pixel is one of a set number of pixels and they are all the same size. The pixel in the verytop left corner of your screen is at position 0,0. It is zero (o) pixel units from the top and zero (o) units from the left.
In addition to using pixels to specify a location of an HTML element you can also use a percentage (%). Often it is better to use a percentage because many people view the Internet with many different size screens and those screens allow people to see more or less pixels depending on size. If I specify an image to be 50% from the left it might be 400 pixels from the side on a screen which only shows 800 pixels, but it will be 800 pixels from the side on a screen that shows 1600 pixels. This discrepancy makes perentage positioning much more attractive to some webmasters. By specifying 50% I can guarantee that the object will appear in the middle.
OK, let's look at some code which would specify the position of a table.
<table style="position: absolute; top: 50px; left: 100px;">That table is 50 pixels from the top and 100 pixels from the left. It is absolutely positioned. Absolutel positioning determines the absolute spot an object will be placed. The item will always appear 50 pixels from the top and 100 pixels from the left edge of the screen.
Let's now look at that same code except this time I will position it relatively and we will have different outcome.
<table style="position: relative; top: 50px; left: 100px;">That table is not necessarily 50 pixels from the top or 100 pixels from the left side. Instead, it is positioned in relation to the spot it would normally appear in without any positioning applied to it. In most cases an element will simply appear to the right of or directly below the element before it. For example if I placed two images on a web page in order with no objects or text or code between them then they would appear side-by-side (if they fit on the screen that way) or one on top of the other.
So, the code above specifies that the table would appear 50 pixels from the left of and 100 pixels below the prior element.
__________________________________________________________________________________________________________________________________ _ ______________________________ ______________________________ _ ________
copyright - contact email - slackerguides.com network