Steve Kirkish: Homework Index

Lesson 2+3: CSS Basics

1. "Live page" with external style sheet added. I chose Option 2 for the challenge. The original code is here.
   live.css file - include a multiple and contextual selector.
   

   Notes: For the live page, I downloaded the few images needed to complete the page, and placed them into an "images" folder. In the CSS file, I created the following selectors:

   • Multiple: For "p, div > a, ul, ol", I defined a common font and font size. This was tricky, as I wanted to specify the font-size as 0.75em, rathe than 12px. I needed to isolate the a tags only children of DIV and not <p> or <ol> (where font size would be reduced by 0.75em*0.75em). I let children of <p> and <ol> (such as <a> and <li>) inheret their parents font styling.
   • Contextual: The current page title was rendered as an image. To transform this into an <h1> tag took a bit of thought. The hardest part was deciding on how to deal with the calligraphic font currently used. I chose a simpler, more available font and italicized it. Also a bit tricky was figuring out how best to "superscript" the word "with". I used contextual selectors to specify these attributes within the <h1> tag. I call out "h1 em" for the fancy text and "h1 span" for the word "with".
   • Added new selectors for new HTML markup (i.e. h2)
   • Added section <div> tags and comments
2. As I followed the lessons, I found it useful to also work on Live option 1 (Business of Web Design). I include those files here.
   Live Page and CSS file
   In addition to following the class work (including the multiple and contextual selectors,) I also put in some of the background colors in some of the major DIV blocks, to get a feel for the page.
3. Cascade Sampler: cascade-sampler.html file, and cascade.css file
4. Selector Sampler: selector-sampler.html file, and selector.css

Lesson 4: Font and Text Properties

1. The following files demonstrate how to stretch and shrink fonts.
   • Relative File
   • Relative Big
   • Relative Small
   • Fixed File
   • Fixed Small: The font-size declaration in the body tag was changed from 16px to 12px, but there were no changes seen to the text elements, whether they had fixed or relative values.
2. Vertical Alignment, featuring a nifty "staircase" of text I created to compare the various keywords and percentage values.
3. @Font-face using google and local fonts
   HTML verification passes, but CSS verification generates the following error set (typical shown): "Property font-family doesn't exist in CSS level 2.1 but exists in [css1, css2, css3]". Because I see this with the class example page, I assume that CSS verification doesn't know how to deal with @font-face or Google web fonts.
4. Text Shadow Sampler
5. "Business of Web Design" Live site with font and text properties applied.
   "Business of Web Design" CSS file
6. "Creating Web Pages" Live Site with font and text properties applied.
   CSS file.
   
   Font and Text Properties used include the following:
   1. HTML and BODY font-sizes set to 125% and 50% to get page font size at 10 pixels.
   2. Font-family is defined in BODY, with variants declared for H1 and H2
   3. Various font0-size declarations are made to scale headers, paragraphs, anchors, etc.
   4. Letter spacing is used for various headers
   5. For "Creating Web Pages", the word "with" in the H1 Title is raised to the top of the line. vertical-align: text-top; was used to achieve that.
   6. For "Creating Web Pages", the first H3 header (Lesson 1) uses four text modifiers: text-transform: uppercase; letter-spacing: 0.15em; word-spacing: 0.07em; text-decoration: underline;
   7. For "Creating Web Pages", a Google web font is called (Felipa) for the H1 header, if Vivaldi is not available on the user's computer.
   8. For both: a{text-decoration: none;}

Lesson 5/6: Position Properties

1. Box property sampler
2. Position:
   • position-static
   • position-relative
   • position-absolute
   • position-fixed
3. Image Gallery
   I wanted this page to show the large image related to the thumbnail, using only CSS. I pushed the thumbnails to the left and kept a clear space for the big image. Using :hover and absolute positioning, I cobbled up a way to show the big image when rolling over the thumbnail. To do this, I added the big image tag right after the thumb img tag, and used this code to trigger the action:
   
   .thumbnail img+img {  /* Big image HTML tag follows thumbnail, */
    display: none;    /* ... but is hidden */
    position:absolute;
    top: 105px;
    left: 468px;
    }
/*this unhides big image when hovering */
.thumbnail img:hover+img {display:block;}
   
   Woo Hoo, it works! This is a nice effect and cool use for :hover. I tried to figure a way to make the image stick once clicked (using anchors and a:visited, for example), but that turned out to be a trickier problem for Firefox, IE, Safari, et al. However, the big image is sticky on my iOS5 iPhone. I guess the touch-screen browsers do not have a "hover" concept.
4. Live site with <div> tags colorized. Color Key is pinned to the browser window to the right of the web page, using the position: fixed declaration.
5. "Business of Web Design" Live site with box properties applied.
   "Business of Web Design" CSS file
   Margins, paddings and background colors configured for the top header and navs, and the left side nav, as well as the content and some elements within. I configured the top lesson nav bar as an inline unordered list (from CS50.11B class), to make it easier to style it and to more easily place the paragraph element for "CIS 58.55 & CIS 58.54". I also used the • element for the bullets between the lesson numbers, rather than dashes. The bullets placed to low, so I used vertical-align to move them up a bit. For the left side nav, I ditched the <p> tags and changed it to an unordered list. Then, I styled the <li> elements directly, rather than using <div> tags.

Lesson 7: Backgrounds

1. Border radius sampler
2. Box shadow sampler
3. Gradient sampler
4. Multiple background project
   I chose a 2-column layout, and put two background images in behind the header and content, and a gradient behind the left nav, all within the #wrapper background statement. This is fine for an exercise, but not how I would do it - I'd probably break up the background images into the left-nav and content DIV's. This might also make it easier to manage the browser specific code. It would certainly allow me to control the extent of the gradient behind the left-nav.
   This page works well on Firefox, Safari (desktop and iOS5), and Google. I did not try Opera, and IE10 failed, even with the correct IE code. Basically, it does not interpret the background statement with the gradient rule as part of it.
5. "Business of Web Design" Live site with background and gradient properties applied.
   "Business of Web Design" CSS file (only changed this file, not the HTML)
   I added a background to the header, with a repeat-x setting. I also applied a subtle gradient to the BODY. More features from this lesson might be applied as the website comes more together.

Lesson 8: Midterm

Lesson 9/10: Layout part 1 and 2

1. 2 column fixed, 2 column fixed using inner DIV's
2. 2 column fixed right
3. 1 column fluid, compare to 1 column fluid with nested DIV's. The latter method solves the problem of overflowing content when the window is made smaller after the page loads. More details below.
4. 2 column fluid
5. 3 column fixed
6. 3 column fluid, 3 column fluid using inner DIV's (solves inner border problem)
7. 3 column fluid center
8. 3 column fixed, using Aslett Method and Background Image

Alternate Method to Fill Uneven Column Backgrounds: Nested DIV's

This method is clean, simple, and requires no Javascript or faux background images. It is effective for fixed and fluid layouts, and I found practical solutions to the one gotcha I found.

1. 3-Column Fixed Example
2. 3-Column Float Example - Note that content doesn't spill into and under the footer when the window is shrunk.
3. 3-Column Float Example with short center column - this situation can cause the layout to break a bit. I added a min-height rule in the center column CSS code and a min-width rule for the overall wrapper, and this effectively solves this problem.
   3-Column Float with Center Column background = Inner Container Background, a second way to solve the short center column problem.

Lesson 11: Layout part 3

1. 2 column absolute
2. 3 column absolute
3. 3 column with header
4. Order of content

Lesson 12: Layout part 4

1. Live site - 2 column fixed
   Left column color runs to the bottom by placing the background color into the outer #wrapper and not specifying a color for #leftside (same technique as Lesson #10). I added a min-height property to the #content to eliminate layout problems when there is little content.
2. Live site - 2 column fluid
   Left and center columns are fluid, by setting width values for #wrapper to be 80% and #leftside to be 20% - content wrapper width not specified, but margin-left is set to 20%. Note that #wrapper maintains a min-width value to prevent left column from collapsing behind the KCSM image.
3. Live site - 3 column fixed
   Used the "Kirkish Technique" descrbed in notes for Lesson #10 to fill the column colors equally to the bottom. I adjusted the min-height value to be 600px, so that right-image backgound wouldn't wrap under center column if center column was shorter than the right image column.
4. Live site - 3 column fluid

Lesson 13: Tables and Forms

1. Tables Sampler
2. Styled Form

Lesson 14-18: Navigation

1. Simple horizontal navigation
   Two techniques illustrated here, with two layouts each. One technique is the "float left" technique, while the second uses display: inline-block to horizontally array the list elements. For each case, I created CSS for connected buttons and separated buttons.
2. Links that display an image that has 4 states
   Note: In recent browsers, :visited styles are very limited for security reasons, and thus the background-image change doesn't occur for visited links. Text color change is still allowed and is applied for this sample.
3. Horizontal navigation bar with 3 levels of drop down navigation.
   Alternate Code that uses a child selector to simplify the CSS.
   Note: The second sample uses the child selector to greatly simplify the CSS needed to control the pop-down and pop-out menu items. Only one rule pair is needed to cover any and all levels. However, since the child selector is not recognized by IE6, some sort of hack would be needed if it was desired to cover that version.
   Somewhat amusingly, I found a website dedicated to the demise of IE6: IE6 Countdown. They claim that only 0.8% of the US is still using IE6, whereas china is at 23.8%.
4. Vertical navigation, single level and Vertical navigation, multi-level menu samples.
5. Sliding door navigation:
   Sliding Door menu, single level
   Sliding Door menu with transparent corners, single level
   Sliding Door menu, multi-level, featuring pop-down and pop-out menus that use the same tab background, shifted to avoid the rounded corners.
6. Live site with drop down, vertical and sliding door navigation.
   The live site now features the following menu types:
   1. Tabbed top menus using the "sliding-door" technique,
   2. A horizontal drop-down menu that appears below the tabs,
   3. Vertical menus with hover styling.
   
   The tabbed menus used the transparent-corner method.
   
   A different drop-down menu appears for each "currrent" tab. Although not activated by hovering, the coding is very similar. The HTML menus are the same for each page,with nested unordered lists for sub-menus, and the active page uses id=current for the tab <li> tag. Instead of a vertical drop-down, I arrayed the drop-down horizontally, positioning it in the green bar below the tags. The results are nifty, creating a top-menu specific to each page. Also nifty is the positioning. A DIV wraps the tabbed menu, and I placed my position: relative statement there, rather than in the <li> tag. This way, the sub-menus start in the same place for each page, rather than moving to stay under the "current" tab.
   
   I created six pages of the live site, only changing the content text and the image and menu text in the left column. Click through the tabs and watch how the top-level sub-menu changes. Some pages have no sub-menus, and the result is still fine.
   I also went through the tedious exercise of cleaning up the HTML markup I copied over from the original site, mainly to assure clean validation. It also served as a good review of some HTML principles.

Final

1. Link to original design
2. Link to design with div tags colorized, color key of div tags, explanation of how they fit together.
3. CSS explained
4. Images explained
5. Modified design