CSW131 Steven Battilana 1 CSW 131 – Chapter 6 Laying Out Pages Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley
CSW131 Steven Battilana 2 Set Up Your Pages for CSS Layouts (pp ) Laying out pages using CSS requires we first mark off different divisions / sections of the page using with varying logically-named IDs. Typically pages have a header, body, footer, additional columns and or sidebars. Laying out pages using CSS requires we first mark off different divisions / sections of the page using with varying logically-named IDs. Typically pages have a header, body, footer, additional columns and or sidebars. First download ch06.zip into downloads subfolder copy & paste ch06zip into class_work subfolder extract (unzip) ch06.zip, which becomes subfolder ch06 into class_work subfolder Right-click index.html and select Edit with Notepad++ On a new line after type: On a new line after type: And on a new line after the 1 st paragraph type And on a new line after the 1 st paragraph type [closes the sidebar div] [closes the sidebar div] More...
CSW131 Steven Battilana 3 Set Up Your Pages for CSS Layouts (pp CONT.) On a new line after type On a new line after type And on a new line before type And on a new line before type [closes the mainContent div] [closes the mainContent div] Save index.html. Save index.html.
CSW131 Steven Battilana 4 Float Elements (pp ) Columns are easily created in CSS using float. Three values for float are left, right, and none. If you use float: left; for an element, that means it will float to the left of following elements, right, it will float to the right of following elements, and none removes the float. Columns are easily created in CSS using float. Three values for float are left, right, and none. If you use float: left; for an element, that means it will float to the left of following elements, right, it will float to the right of following elements, and none removes the float. Open styles.css using Notepad++, and on a new last line type: Open styles.css using Notepad++, and on a new last line type:#sidebar{ width: 150px; [we MUST set a width for float to work!] float: left; } Save styles.css and view index.html in browser, noting two columns, but clearly more coding needs to be added/corrected. Save styles.css and view index.html in browser, noting two columns, but clearly more coding needs to be added/corrected. Note: Since all element default widths are 100%, you must set a width for any element you wish to float. Note: Since all element default widths are 100%, you must set a width for any element you wish to float. Note2: clear: both; & float: none; can be used to set a footnote. Note2: clear: both; & float: none; can be used to set a footnote. More …
CSW131 Steven Battilana 5 Clear Float for Footnotes (NOT IN BOOK) Within index.html on a new line before type: Within index.html on a new line before type: Copyright © 2013 Your Name. Within index.html on a new line before type #footer p { float: none; clear: both; float: none; OR clear: both; font-size: 70%; font-weight: bold; color: #FFFFFF; border-top: #FFFFFF 1px solid; width: 560px; text-align: center; margin-top: 20px; } Save index.html and view in browser. See available symbols. Save index.html and view in browser. See available symbols.See available symbolsSee available symbols
CSW131 Steven Battilana 6 Using Margins and Padding to Fix Float Problems (pp ) and are most commonly. Margins and paddings are most commonly used to fix spacing issues when using floats. Continuing in styles.css using Notepad++, in the sidebar on a new line before the closing } type: Continuing in styles.css using Notepad++, in the sidebar on a new line before the closing } type: padding-right: 20px; and within mainContent before the closing } type: margin-left: 170px; Save style.css and view index.html in browser. Note: If float is right, then use padding-left. Use similar left / right consideration for elements that are not floated (next to the floated elements). Remember the box model! Note: If float is right, then use padding-left. Use similar left / right consideration for elements that are not floated (next to the floated elements). Remember the box model! The element content Padding Border Margin
CSW131 Steven Battilana 7 Work with Overflow (pp ) CSS overflow allows you to handle content that goes beyond the size of a container you define (using both height and weight properties). CSS overflow allows you to handle content that goes beyond the size of a container you define (using both height and weight properties). Continuing in styles.css using Notepad++, in the sidebar on a new line before the closing } type: Continuing in styles.css using Notepad++, in the sidebar on a new line before the closing } type: height: 500px; overflow: auto; [adds scrollbar ONLY if needed] Save style.css and view index.html in browser. Save style.css and view index.html in browser. Note: See “Tip” at bottom of p. 159 for other overflow options. Note: See “Tip” at bottom of p. 159 for other overflow options.
CSW131 Steven Battilana 8 To Do List Start preparing for Quiz 2! Start preparing for Quiz 2! Read Chapter 6 Read Chapter 6 Revisit what we did in class Revisit what we did in class Be careful as we do not follow book Remember, MUCH more detail about anything we cover is: Remember, MUCH more detail about anything we cover is: at w3.org the Appendices of your book DOCUMENT Your Project DOCUMENT Your Project If we have not reviewed your progress today, we will next week. Remember, websites about one of your passions is usually a winner.