Notes: December 6th, 2007

Layout

The one element that was not really covered was <div>. There is a hierarchy to the elements that HTML uses. A div is a placeholder for other elements. The styles are inherited through these hierarchies. A div is normally assigned an id or class. A div is a block element so that you can nest things inside of it. The similar inline element is a <span>. These are normally used for styling purposes for the most part.

CSS Styling

The different values can be pixel, point, and percentage. Normally pixel and percentage are used. A special property is z-index which tells the browser where to position things in front of or behind another element. The percentage and pixels can differ in variable or fixed. The percentage is variable, and fixed is pixel values. You can also specify the position relative (bad) or static (normal). The final type is absolute, which gives the ability to specify it’s location in relation to the screen by use of top, left, right, and bottom properties.

Box Elements

Every element is normally bounded by a box, be it a div or p tag. This forms the margin and padding around an element. You can also specify borders and the position is based off of a box.

Rendering Elements

Box elements are flowed onto the page from top to bottom. Inline elements are flowed onto the page from top-left to bottom-right. This allows for a normal flow onto the screen. You can over-ride this by using a different positioning as outlined in CSS styling. The absolute position causes elements to stay positioned to the screen, so do not move with the scroll bar.

Float is used in order to have elements flow a different direction. Float can specify left or right. The element will float in the direction until text gets in the way. This causes it to appear next to or slightly on top of another element. This gives the website a more personalized feel. Used often in order to create a sidebars like on my website for this class.