Boxes

s Boxes

Boxes

basic boxes, inline, blocks, resizing, span and side by side codes, extension of div and span..

boxParms -

A box that wraps around every html element.
Add a border around elements, and to define space between elements.
- Content - where text and images appear
- Padding - transparent area around the content.
- Border - A border around the padding
- Margin - transparent areound the border
Width and Height of an Element
Total element width = width + padding(left+right) +border(left+right) + margin (left+right)

boxesOnly -

style : #myBox { width, height;}
Simple basic fixed size box managed by style.
Makes use of # in the style.

Style : .myBox { width: 300px; height: 100px; border: 2px solid red; }
This is a smaller box. It make use of (dot).

boxesResizing -

box auto resize when entering text. Can't find the difference in the usage between the two.

uses box-sizing: content-box, but must exclude height so the the height will be adjusted automatically. This box use the # in the style.

uses box-sizing: border-box, but must exclude height so the the height will be adjusted automatically. This box use the (dot) in the style

float - default is same as left

right

left Uses inline code myBox_1

Tags - involving div extension

Let the user resize only the width of this div element.

To resize: Click and drag the bottom right corner of this div element. The contents will be readjusted and height will change accordingly to accomodate all the text

Tags with float - the three boxes float side by side

Using div with boxL

to define the box and

and inline codes to change the colours

tags without the float

can be used to float images side by side.
can be used for navigation menu
each box can be assigned separate values

Tags without float - boxes are stacked one above the other

Using the boxS class

the blocks are arranged one about the other

the blocks are arranged inline

Display - involving span extension

This is the default normal text for a paragraph.

This an Inline-block display using the textBY class. The values have been chosen so that it would display properly. Because of the padding 10x, the line-height is increased to 1.8. It allows width and height to be defined and does not add a line-break after the element.

This is an inline_block display using the tag textBox. Text is restricted to the box size with a border. It does not display correctly in Dreamweaver. The browser shows it as a single overall border.

The class textBlock is used here. The display is block. Notice that textBY, textBox, and textBlock are listed in the style dropmenu. Added inline code float: right

Here are two span class textBox, placed side by side. This is the first span This is the second span with class textBlock. Although they are placed side by side, the yappear as two boxes where on is stacked above the other. Notice that textBY, textBox and textBlock are listed in the style dropmenu. Used the inline code to increase the width for more text.

Display : inline with two span_a placced side by side

Here again there are two class textBY placed side by side, like the above. The result is they are combined into a single block. Because of the padding 10x, the line-height is increased to 1.8. It allows width and height to be defined and does not add a line-break after the element. This is the second span with class textBY. Because of the padding 10x, the line-height is increased to 1.8. It allows width and height to be defined and does not add a line-break after the element.

Display2 -

display: inline

Distinguish between the inline and block display. The codes are encoded in a div id=myBox tag. In addition the span class="textBox is a defined style. This is an inline display. The big blue box and small blue box are coded differently.

display: inline-block

This is an inline-block. The code is div class="textBox". Distinguish between the inline and block display. The codes are encoded in a <span> tag. In addition the <div> tag defined as a style for the first column has been defined in as an style for this block."

display: block

Distinguish between the inline and block display. The codes are encoded in a <span> tag. In addition the <div> tag defined as a style for the first column has been defined in as an style for this block. I've modified from div to div.a so that the other div tags would not be affected. This is an example of an inline display.