CIS195 Web Authoring 1: HTML

More Page Layout Using CSS

Weeks 1-5	Weeks 6-10
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. HTML Tables
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS, Midterm	9. Multimedia, Final
5. Project Propposal, Midtern	10. Project Completion, Final

[Topics by Week for the Ten-Week Term]

Contents

[TOC]

Q and A

• Review due dates on Canvas.
• Answer questions about this week’s lab assignment.

Positioning

The position property specifies the positioning method used for an element:

• static—not positioned in any special way. This is the default.

• relative—sets position relative to it’s normal position.

• fixed—sets position relative to the viewport (browser window). The position does not change as the page is scrolled.

• absolute—sets position relative to the nearest positioned ancestor—which will be the body if no others have their position set.

• sticky—sets position based on the browser window’s scroll position. As long as an element’s position is inside the window (viewport), its position setting is relative. But, when the pate is scrolled until the element is at the edge of the window, it sticks there.

After setting a position property, a distance can be set. Elements are positioned using the one of the following properties:

• top—a positive number moves the top of the element down.

• bottom—a positive number moves the bottom of the element up.

• left—a positive number moves the left side of the element to the right.

• right—a positive number moves the right side of the element to the left.

This example moves the image 100 pixels to the right and 50 pixels down:

img {
  position: relative;
  left: 100px;
  top: 50px;
}

Overflow Content

The overflow property specifies what should happen if content overflows an element’s content area. The values are:

• visible—The overflow is not clipped. It renders outside the element’s box. This is default.
• hidden—The overflow is clipped, and the rest of the content will be invisible.
• scroll—The overflow is clipped, but a scroll-bar is added to see the rest of the content.
• auto—If overflow is clipped, a scroll-bar should be added to see the rest of the content.

Example:

div {
  overflow: scroll;
}

Stacking Objects in a Page

The z-index property specifies the stack order of an element. The greater the stack order, the closer an is element is to the front.

This property only works for elements that have their position set.

There are two possible values:

• auto—sets the stack order equal to its parents. This is default and will normally result in a value of 0.
• a number—sets the stack order of the element. The highest number will be on top. Negative numbers are allowed

Example:

img {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: -1;
}

Example

• South India Web Site

• Code for South India Web Site

References

• W3Schools: Box Model
• W3Schools: Rounded Corners
• W3Schools: The CSS Position Property
• W3Schools: The Overflow Property
• W3Schools: Z-Index Property

---

Web Authoring Lecture Notes, written by Brian Bird in 2018 and revised by Brian Bird in 2020, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

---

This site is open source. Improve this page.