cascading style sheets css sample css style sheets css code tutorial css tutorial example css padding code css font code inline css code css positioni
Sample Code for Positioning with CSS
By Jennifer Kyrnin, About.com
See More About:
blogging, blogger,blogspot,make money from blog
* css positioning
* advanced css
* html and web design examples
blogging, blogger,blogspot,make money from blog
Relative Positioning
Example 1 shows how text and images flow in HTML and then have the position set by a style.
First, create the image or item that you want relatively positioned in the flow on the page. It's a good idea where the item is in the flow without any positioning to see the display, so you know, as you need to position it.
blogging, blogger,blogspot,make money from blog
This is the text that you would like the image to follow. Then you place the image...
<img src="cecb2.gif" width=32 height=32 alt="CECB">
See the image in the flow (no positioning).
Then add your position to change styles in the document to the position of the element. Note that the relative positioning is relative positioned element, it is in the normal position in the flow.
<p> This is the text that you would like the image after. Then you place the image and position it underneath the text...
<img src="cecb2.gif" width="32" height="32" alt="CECB" style="position:relative; left:15px; top:-15px;" /></p>
See the image with positioning.
Absolute Positioning
Example 2 shows how absolute positioning places objects in relation to the upper left corner of the page.
As an example of relative position, the flow at any time, in the normal flow of page elements you need to put their land to see.
<p>If you put an image between text blocks on a page
<img src="/library/graphics/cecb2.gif" width=32 height=32 alt="CECB">
It will affect the position of any text or other elements after it.</p>
See the image in the flow (no positioning).
In contrast to its relative position when the position of a point at all, is located entirely outside the flow of the document. The positions of the browser element in comparison with 0,0 x, y position in the upper left corner of your browser window.
<p>If you put an absolutely positioned image on a page
<img src="cecb2.gif" width="32" height="32" alt="CECB" style="position:absolute; left:200px; top:500px;" />
It will not affect the position of any text or other elements after it.</p>
See the image with positioning.
You can also place your information on rates. 100% will be left on the right-most margin of the screen, no matter how big was the screen. And 100% from the start will be at the bottom of the screen.
This image, the browser will first be placed at the bottom of the screen, a full half way between the center of the document.
<img src="cecb2.gif" width="32" height="32" alt="CECB" style="position:absolute;left:50%; top:100%;" />
See the image with percentage positioning.
See the Examples
* CSS Positioning - Example 1
* CSS Positioning - Example 2
More CSS Positioning Help
* CSS Positioning
* Advanced CSS
Related Articles
* CSS Positioning, Example 2
Posted in: html tutorial| Tags: Blog Code sample style html money tutorial blogspot blogger positioning