  |
|
|
|
Look at me up here!
OK, we've talked about the wonderful things you can do with text appearance using cascading stylesheets (see article on CSS, or you'll be confused), but did you know of the even more wonderful things you can do with where that text (or, for that matter, any element of your web page) appears on the page? Such flexibility is unheard of with just simple HTML. Let me show you how it's done. There are two different kinds of CSS positioning: absolute and relative. The line you see so conspicuously at the top of the page uses absolute positioning. In absolute positioning, you specify how far you want the object (text, picture, multimedia, etc.) to appear from the top and left edges of the browser window. The word "move" in this sentence uses relative positioning, in which you specify how far you want that object to appear from where it would normally be. For the most part, when you're performing these acrobatic feats of object placement, you'll use CSS inline (putting the style rules in different HTML tags, like So, first thing you have to do is let the browser know if the positioning is absolute or relative. Do this by declaring the "position" attribute. "Position" can be "absolute", "relative", or "static" (this tells the browser to show the object in its normal position). Then, you tell the browser where you want the object to be positioned. For this, declare the "top" and "left" attributes. Both attributes are defined in all the different length units that we first came across in the text appearance CSS article (refresh your memory), such as centimetres, inches, points, pixels, ems, etc., and in percentage values (in this case, the percentage will refer to the size of the parent element). For example, that line way up at the top of the page ("Look at me up here!") used this code:
And here's the code for moving "move" in the second paragraph of this article:
In addition to controlling where you want a block of text to show up on your page, you can also control the width of it as well, by specifying a "width" attribute. This only works with absolute positioning, though: Go To Page: 1 2
The copyright of the article You Wanna Put that WHERE? in Web Graphic Design is owned by . Permission to republish You Wanna Put that WHERE? in print or online must be granted by the author in writing.
|
|
|
|
