MyCh6&7

MyCh6&7 - Layout Related Lecture Notes by Ahmed:...

Info iconThis preview shows pages 1–9. Sign up to view the full content.

View Full Document Right Arrow Icon
Layout Related Lecture Notes by Ahmed: Using <div> and <table> for Layouts: Do not get scared at the massive size of this power point file. We have already discussed many of the topics illustrated in this file. Some of these materials are available in our textbook in Chapter 6 and Chapter 7 of the textbook. The folder named AhmedsCh6_7LayoutToStudents in unzipped contents of AhmedsSamples.zip contains all of the sample codes illustrated in this handout. 1
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
2 Topic Section “L” stands for Layout Introduction to the <div> element L 1.0 Positioning an Element on the screen L 2.0 Developing Newsletter type Fixed Layout L.3.0 Centering Fixed Layout (IE & FF) L.3.1 Centering Fixed Layout with background color (IE & FF) L.3.2 More Layouts Using styled <div> L.4.0 Layout with three divisions L.4.1 Centering the Layout L.4.2 Major Problems with Fixed Layouts L.4.3 Flexible or Liquid Layout L.4.4
Background image of page 2
3 Read Textbook Chapter 6, and 7: Section 6.1: CSS Page Layout Overview: Page 214-215. Section 6.2: The Box Model: Already discussed in our class. Page 217. Section 6.3: CSS Positioning Properties: This will also be discussed later in this power point slides. Page 220. The float property: Page 224 The z-Index property: Page 229 Section 6.4: Exploring CSS Page Layout: Page 236. Section 6.5: Two-Column Page Layout: Page 240. Section 7.1: Another Look at XHTML Hyperlinks: Page 272 Section 7.2: CSS Pseudo-Classes and Links: Page 276 Section 7.3: CSS Navigation Layout Using Lists: Page 281 Section 7.4: Three-Column CSS Page Layout: Page 263
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
4 Ahmed: L. 1.0: Introduction to the <div> tag The <div> stands for “ division ” or divider ”. The <div> is a container tag, and it may contain may other tags inside it, and it can also contain text. In this lecture note “L1” stands for Layout Issue 1
Background image of page 4
A <div> is nothing but a rectangular container. You can also treat it as a rectangular area on the browser screen. It is somewhat similar to a <p> tag except that it can contain many other tags, including other <div> tags. 5
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
A <div> may contain another <div>, which in turn, may contain another <div>. That means the <div> tag can be nested . On the contrary, a <p> cannot contain another <p> . 6
Background image of page 6
Valid Parents: blockquote, body, div , form, li, td, th (and some other tags) Valid Children: a, blockquote, div, form, h1, h2, h3, h4, h5, h6, hr, img, input, p, span, table, ul, and some other tags http://ore.to/htmllint/tagslist.cgi?HTMLVersion=XHTML11#DIV or http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/text/div.cfm . 7
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
L.1.1: Example 1: div1.htm: A simple <div> with two paragraphs Observe that the <div> has been styled with yellow background color. 8
Background image of page 8
Image of page 9
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 12/03/2011 for the course INFS 3380 taught by Professor Ahmed during the Fall '11 term at Toledo.

Page1 / 84

MyCh6&amp;7 - Layout Related Lecture Notes by Ahmed:...

This preview shows document pages 1 - 9. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online