Part2: Positioning in CSS There are two ways to do your positioning with CSS. The first way (and the easiest to actually do, but a bit harder to wrap your head around), is by using floats and clears. The second way (harder to do, easier to understand), is absolute positioning. [NOTE: There’s also a third way, which combines the two mentioned, and makes use of the fixed value for position attribute. I’ll talk about that in Part3: Advanced topics :OTEN] Firstly, I’ll start by discussing the positioning attributes in the block-level elements(div, p, span), float, clear, position, top, and left (for those of you who know CSS who are saying “But what about bottom, and right?!", they’re not really that important, you already can set the height and width of your elements). ‘float’ Value: left | right | none | inherit Initial: none Applies to: All but positioned content and generated content Inherited: no Percentages: N/A Media: visual The float attribute dictates where in relation to other content an item will be placed. A webpage normally sorts it’s objects inline, meaning it will try to fit an item onto the same line as the last one, and if it can’t, it’ll get shunted to the next line. This rule is broken by block-level elements, which go one after another down the page instead of trying to place themselves inline. With the float attribute you can force a block element (or almost any element actually), to a certain position (left | right) in relation to other elements on the page. If you use left, the element will go to the left, and the other items will wrap around it, the opposite for right. In relation to the profile pages, float is used often. In fact, almost all of the elements are floated. Float allows you to take something like http://shadowlack.com/css/persona-noCSS.phpthis</a> and turn it into http://shadowlack.com/persona.php?id=893something beautiful</a>. By simply pushing an element to one side of the page, and making the other elements wrap around it, you can drastically change the appearance of a page. By only using float, we can change something like http://shadowlack.com/persona.php?id=893this</a> to http://shadowlack.com/persona.php?id=878this</a> (of course, there’s some other formatting aswell, but it’s all pretty simple and can be figured out by reading Part1, asides from the image anyway). If you use the clear attribute in conjunction with the float attribute, you can specify how you want other elements to react to your floating element. ‘clear’ Value: none | left | right | both | inherit Initial: none Applies to: block-level elements Inherited: no Percentages: N/A Media: visual As you can see, clear accepts left, right, and both as to how it will react to floats. If left is selected, the element will increase its top margin to push it below the float, the opposite for right. Both, will make sure it is directly below a float no matter what. That’s it for easy to do, hard to understand bit. Now on to Absolute Positioning. With absolute positioning you can specify *exactly* where on the page you want an item to appear. ‘position’ Value: static | relative | absolute | fixed | inherit Initial: static Applies to: all elements, but not generated content Inherited: no Percentages: N/A Media: visual The position attribute allows us to tell the browser how we plan on positioning an element. Static is how a browser displays an item without us having to say anything else. With relative positioning, you tell the item where in accordance to where it was to be. Absolute allows you to specify where the item is to be shown in regards to the upper lefthand quarter of the window. With fixed positioning, an item does not scroll, it will remain wherever you place it (useful for making menus). Choosing whether to use relative or absolute is up to you. With relative, you specify where a item will be place compared to where it starts. With absolute, it’s all based off of the top left corner of the screen, and works like a grid. For this tutorial we’ll talk about absolute.; ‘top’ Value: <length> | <percentage> | auto | inherit Initial: auto Applies to: positioned elements Inherited: no Percentages: refer to the height of containing block Media: visual The top attribute is used to tell an item how far down on a page it should be rendered. You can either use pixels or a percentage, though a percentage is probably a bit easier to think of. If you want an item to be about an inch away from the top of the of the window, use 72 pixels (here about, some screens may render differently, but that’s the way webdevelopment works). ‘left’ Value: <length> | <percentage> | auto | inherit Initial: auto Applies to: positioned elements Inherited: no Percentages: refer to the width of containing block Media: visual Same as top, just from the left side of the screen. :) So, if you say, want the footer (the copyright info) at the top of the page, you’d set it’s position: absolute; top: 10px; left: 10px; And bam! The copyright info is now at the top of the page, :) So, that’s it for Part2. I hope that helps you all out a lot in designing how your page is going to look. I know absolute positioning can be a pain (especially if you don’t have a graphical development studio, like Dreamweaver), but it gives you unlimited flexibility. Stay tuned for Part3, when I get in to some really nifty things, like fixed, pseudo-classes and elements, and other nifty things that are a bit more difficult to work out. :D <hr /> I should of mentioned this in the last tutorial, but if you feel anything is missing, or have any questions, feel free to post them here before I get done the whole tutorial!
