border margin (transparent, doesn't work great with IE) div width/height

Transcription

1 > > > > CSS Positioning, Box Model LP TP fdjdkjdakfjadksjfdkjkdsjfdksajfkdjfdkasfdkfxeril ullaore veleniam illaoreetum nulluptat am il eliquamet etummy nummy nosto doluptatisl ex et, commolore do odolestie mincip etuerate BP RP margin (transparent, doesn't work great with IE) border padding div width/height Div Style Selectors Div Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. Width/Height The inner edges of the content box, and does not include the padding or margin. height border border-style padding width border-top border-top-style padding-top max-height border-bottom border-bottom-style padding-bottom max-width border-left border-left-style padding-left min-height border-right border-right-style padding-right border-color border-width margin* border-top-color border-top-width margin-right* border-bottom-color border-bottom-width margin-left* border-left-color border-left-width margin-top* border-right-color border-right-width margin-bottom* *check margins in IE 6 &7

2 Above, div with class and id structure. Below, HTML5 basic structure with new tags! Go here for more HTML5 information:

3 > > > > Div Background Background Color apply a background color background-color: teal; Background Image apply a background image background-image: url(images/image.gif) Background Repeat to not have the image repeat, choose background-repeat: no-repeat to have it repeat in a certain direction, choose repeat-x repeat-y background-repeat: repeat-x > > > > Div Border Style border: none dotted dashed solid double groove ridge inset outset Example div {width: 200px; height: 200px; border-width: 1px; border-style: dotted; > > > > CSS Positioning Options Static position:static This is default. The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the.html document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. position:static; Relative position:relative Content also appears relative to where it is in the.html document, but you can scoot it around, for example: Let's move div-1 down 20 pixels, and to the left 40 pixels: position:relative; top:20px;

4 left:-40px; If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. You can also use negative amounts, as don above. Absolute Uses specific coordinates (nailed down). top or bottom left or right position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: #div-1a { position:absolute; right:0; width:200px; > > > > Using Positions Together position:relative + position:absolute This allows you to center a div, and have the contents positioned absolutely. If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1: position: relative; margin-left: auto; margin-right: auto; #div-1a { position: absolute; right:0; width:200px; two column absolute Now we can make a two-column layout using relative and absolute positioning! position:relative; margin-left: auto; margin-right: auto;

5 #div-1a { position:absolute; right:0; width:100px; #div-1b { position:absolute; left:0; width:200px; One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a. > > > > CSS Overflow Options Visible Allows stuff to continue outside the box Hidden Clips the content if it is too long Scroll Adds a scroll bar, horizontal or vertical Auto Adds a scroll bar if necessary > > > > Floating Float left right Allows a div to sit next to another div Example div {float: right this div will float to the right, other stuff will float around it, instead of jumping to the next line. float columns If we float one column to the left, then also float the second column to the left, they will push up against each other. #div-1a { float:left; width:150px; #div-1b { float:left; width:150px;

6 > > > > Clear clear:left, right, or both Forces the stuff next to it to drop down to the next line, pushes down the rest of the content. #div { clear:both; > > > > Stacking Order Z-index Elements with a higher z-index will be on top of elements with a lower number. Think about it like floors of a building. z-index: 100; > > > > Transparency For IE filter: alpha (opacity=30) Other Browsers opacity: 0.3 These equal the same thing