1. More CSS & HTML, Positioning, Images
BIS1523 – Lecture 3

2. Positioning and the Box Model
When working on layouts for your HTML web pages, it is convenient to think about your content in the terms of being in boxes.
If you took a simple web page with 4 elements, and put a border around each element, this becomes easy to visualize.
CSS Display

3. Area
The area of each of these boxes is controlled by a few different factors.
The inner-most area is controlled by the width and height elements.
The space between your elements is controlled by margin, border, and padding elements.
By default, the size of the box is 100% of the width of the browser, and the height grows to the size of the content

4. Padding and Margin
Padding is on the inside of the border, margin is on the outside. Both can be used to add extra white space between elements.
The unit of measurement is the “pixel”, abbreviated “px” in the style sheet.

5. Height and Width
The height and Width elements are used to control the size of your content-area.
Height and Width can be expressed as absolute values, measured in pixels.
Width can also be expressed as percentages. (Height cannot.)
Both are useful for making multi-column content areas in your HTML, the primary differences is:
Percentage based widths expand and contract as the width of the browser window changes
Absolute doesn’t
For this reason, percentage based values for width are often more desirable for web pages that will be viewed in a variety of widths.

6. Width example
In the above example the width of each element has been set to a percentage of the browser window.
If you shrink something down to less than the full width of the screen, normally it will be left justified.

7. Centering Things
If you want to center things, you can specify the left and right margins.
Using the “auto” tag for the margins will set them to be equal, centering the area.

8. Relative Positioning
Each element has a natural location in a page’s flow.
Relative positioning means moving the element with respect to this original location. The surrounding elements are not affected at all.
CSS:
position: relative;
The top and left tags are used to move the element away from its ‘normal’ position in the direction desired.
You can use pixels or percentages for positioning, and both positive and negative values
Notice that though the “Nav” is moved over, sections 1 and two still fall into place as if the “Nav” hadn’t moved.

9. Absolute Positioning
When using absolute positioning, content is taken completely out of the normal flow, and no space is left for them at all.
So in this case, section 1 and 2 are moved up as if “Nav” didn’t exist at all. This causes some overlap for this example, but it can still be used to get correct results.

10. Example: Positioning
Header
Nav
Sect1
Sect 2
Lets’ take our 4-box example, and try to put it into a common layout for web pages, where we have a navigation area on the left, a header at the top, and 2 columns of content.
First, we’ll set the widths for each column at 30%, and move section 1 over 30%, and section 2 over 60%.
We have no height, width, or positioning set for the header section. And only “width” set for the nav area.

11. Example: Positioning
The resulting web page is close to what we want. Each column is in about the correct space, though there is some overlap. We need to move the content sections up to align with the Nav section next.
We can do this with the “top” attribute, but we need to figure out where to put it. It needs to be right under the Header, so we need to fix the headers “height”, and then move the sections up the same amount.

12. Example: Positioning
Due to the padding, and margins on each piece of content, we will need to space them out a bit more to prevent overlap.

13. Example: Positioning

14. Formatting Text
Several CSS attributes can be used to change the appearance of text:
Font-family: A font name, such as Tahoma
Font-style: normal or italic
Font-weight: normal or bold
Font-size: in pixels
Text-align: left, right, center, or justify

15. Images
Three most widely used formats on the web are GIF, PNG, and JPEG.
JPEG format is good for color photographs.
JPEG is a lossy format, which means some of the image’s original information will be lost when the image is saved.
PNG and GIF formats compress areas of continuous colors or repetitive patterns better than JPEG.
PNG and GIF formats are good for saving files that:
Have large amounts of solid colors and patterns and need transparency.
PNG has a better compression algorithm for smaller file sizes and superior transparency support (alpha transparency).

16. Images: Transparency
Transparency can give an image a non-rectangular outline, blending it in with a background color or texture behind the image.
PNG and GIF allow transparency; JPEG does not.
Index transparency: Pixel can be transparent or not.
Both GIF and PNG support index transparency.
Alpha transparency: Controls the degree of a pixel’s transparency.
Only PNG supports alpha transparency.
Images with complex transparent backgrounds look better as PNGs because edges appear smooth, not jagged.

17. Images: Animation
Animated images can be saved as GIFs, but not as JPEGs or PNGs.
Using images for animation is becoming uncommon, except for GIFs on site’s like Tumblr.
Animation is generally created using CSS Animations, JavaScript, HTML5 Canvas, SVG (the dark horse of the bunch), and Flash.
Flash animations on the web are becoming rare due to iOS’s lacks Flash support and the increased capability and support for other technologies.

18. Images: Aquiring Ways to get images:
Buy or download ready-made images.
Digitize photographs or hand-drawn images with a scanner.
Use a digital camera.
Draw images from scratch in an image editing program like Adobe Photoshop.
Once you’ve got them in your computer, you can adapt them for use on the web.
Use Google to find images on the web.
Even free images on the web have some restrictions.
Stock photography and images can be bought for a reasonable price.
Purchased images can be used for most purposes, except reselling.
Read any disclaimers or licenses carefully

19. Images: html
Use the HTML tag <img> to add an image to your web page.
<img src=“image.url” />
The url can be a relative URL for image that exists on your own web site, or an absolute URL for an image from somewhere else
You can specify the size of your displayed image using the width and height attributes in the <img> tag
<img src=“image.url” width=“200px” height=“200px” />
The above example would tell the user’s browser to scale the image to 200 pixels by 200 pixels.

20. Lists
There are 2 types of list structure for web pages, ordered and unordered.
Ordered lists are typically labeled with ascending numbers or letters. Unordered just use a non-sequential bullet or marker (similar to the bullet points in these PowerPoint slides).
The beginning of a list is marked by <ol> for ordered, and <ul> for unordered. Each type has a matching end tag (</ol> and </ul>
Within the list, each item is marked by the <li> and </li> tags.

21. Ordered vs Unordered

22. List Example
The HTML for ordered and unordered lists is almost identical. Only the starting and ending marker for the entire list is different, the individual list items all use the <li> tag

23. List Markers
You can use CSS to select from various marker types for your list.
The list-style-type: attribute can have any of the following values:
Disc
Circle
Square
Decimal (1, 2, 3)
Upper-alpha (A, B, C)
Lower-alpha (a, b, c)
Upper-roman (I, II, III)
Lower-roman (I, ii, iii)

24. Final Example
We are going to use HTML and CSS to make our example from last class nicer looking.
The final layout will look something like:
Header
Nav
Links
Image
Article
Section

26. CSS for Kells Example Center the heading at the top
Move the “article” group, which contains both sections, to have a left 25% margin, and set it to 70% width of the browser.
Set the “nav” section, which contains the id’s #navlinks and #navheader as well as the image, to 20%
Set a border around the links section
Center the header for the navigation links
Give the image a bit of a margin so it doesn’t push right up against the links box