Page Flow Properties | Purpose |
---|---|
static | The static value renders the element in normal flow. |
relative | The relative value renders the element positioned from the position of the normal flow |
absolute | The absolute value renders the element precisely in its container element. |
fixed | The fixed value renders the element according to the browser's viewpoint. When the page scrolls, the element remains in the same place. |
Offset property | Purpose |
---|---|
left | The element is positioned to the left of the container element. |
right | The element is positioned to the right of the container element. |
top | The element is positioned at the top of the container element. |
bottom | The element is positioned at the bottom of the container element. |
Float Offset Property | Purpose |
---|---|
right | Use right to float the element on the right of the container |
left | Use left to float the element on the left of the container |
width | Specify a width unless the element has an implicit width |
flow | Other elements will flow around the floated element |
restrictions | Only block level elements can be floated. |
Clear Property | Purpose |
---|---|
line break | A line break can be used with the clear property. This extends the size of the container and any background will extend to the larger container size. |
block element | A block element can be used with the clear property. This will cause that block element following the floated element to start on a new line. The container with the float element will not change size. |
Overflow Property | Purpose |
---|---|
visible | Visible is the default value for the overflow property. The element will overflow outside the space allocated. |
hidden | The content is clipped to fit the space allocated for the element. |
auto | The content will display and if it is too large for the space allocated, scroll bars appear to access the overflow portion of the element. |
scroll | The space allocated always shows scroll bars even if the element fits in that space. |
Div | Purpose |
---|---|
wrapper | For a sharper look, use an outer div as a wrapper for the columns. Center the wrapper using margin-left auto and margin-right auto. The wrapper is not required. |
left column | Assign a fixed width and float the left column to the left. |
right column | Assign a margin on the left that is greater than or equal to the width of the left column. |
header | The header (if used) can be nested inside the wrapper div to go across both columns. The header can also be nested into the column div where it is to appear. |
Advantage | Usage |
---|---|
Accessibility | Configuring navigation with a list helps to provide for accessibility. Screen reader applications offer easy keyboard access and verbal cues for information organized in lists. |
Visual Aesthetic | Use CSS to eliminate the list marker. You should use a descendant selector so that other lists are not affected. |
Advantage | Usage |
---|---|
Visual Aesthetic | Use the display property to configure an unordered list for horizontal navigation. |
Pseudo-Class | Application |
---|---|
link | The state for an unvisited hyperlink. |
visited | The state of a visited hyperlink. |
focus | The state of a hyperlink that has keyboard focus. |
hover | The state of a hyperlink that has a mouse over the hyperlink. |
active | The state of a hyperlink when the hyperlink is clicked. |
Value | Purpose |
---|---|
static | Default value; the element is rendered in normal flow. |
fixed | Configures the location of an element within the browser viewport; the element does not move when the page is scrolled. |
relative | Configures the location of an element relative to where it would otherwise render in normal flow. |
absolute | Precisely configures the location of an element outside of normal flow. |
Design Consideration | |
---|---|
sprite | A sprite is an image file that contains multiple small graphics. Uses the background-image, background-repeat, and background-position properties to manipulate the placement of the background image. |
Download time | Combining images into a single file saves download time. |