Andrew in Week 3

Week 3 - Relative Positioning

Relative Positioning Intro 01

Unzip and use relative-positioning.html

In this code, there is a container div named #box. Inside it is an img and a p.

  • Give the img a class of photo
  • Give the p a class of text
  • In the styles, give each the declaration of position:relative
  • Set the photo rule so that it is 150px wide
  • Set the text rule so that it is 350px wide
  • How can you set the positioning of these two pieces so that they appear side-by-side, but without using float? (Hint: Investigate display: inline on the Interwebz. There are other options as well...)

Work on this until you get the two lined up in a row and the minimal styling complete, and then we will proceed...


Absolute Positioning

Unzip and use wk3-02_positioning1.html

In this code, you will see that there are six .placement classes defined in the head. One at a time, review the declarations inside a single .placement rule, and then add its class to one of the divs in the body. View what happens with different properties and values in the browser. When you are finished, each div should have a unique .placement class.

When you are done, next turn your attention to wk3-02_positioning2.html.

Now all the six content divs are indide one big container div. Do the same steps as before. How do the content blocks act differently?


reLEAF Slices

Download this zip file to proceed

Unzip the file you just downloaded, and note that you will have three new files: a PPT presentation, a Photoshop file, and an image file.

Following the instructions in the PPT file, slice the Photoshop document into individual images as directed. Zip up the sliced images. Make sure they are all properly named and saved in the proper format, at the correct dimensions. This new zip file will be submitted as part of your daily grade.


Production Using CSS2

Download this zip file to proceed

Unzip the file you just downloaded, and note that you will have two new files: a PPT presentation, and another zip file. The zip file contains the starting material you need to follow along with the instructions in the PPT file. Once you've finished, zip up the files for the reLEAF site. This new zip file will be submitted as part of your daily grade.

Code Snippets for reLEAF Page (CSS2)

            /************* Filler Content for Sidebar ****************/
<h3>Title for Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales aliquam sapien, 
ut placerat purus molestie nec. Nam luctus turpis massa, a tempor justo. Proin egestas 
nisl sed orci tristique nec pellentesque diam cursus. Maecenas sapien massa, consequat 
non cursus quis, ultricies ut mauris.</p>

/*********** Filler Content for Main Section **************/

<h2>A Title For Main Content</h2>
<p>We can get lots of content for this section and put it in paragraphs or whatever 
markup makes sense for the content found in the main section.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales aliquam sapien, 
ut placerat purus molestie nec. Nam luctus turpis massa, a tempor justo. Proin egestas 
nisl sed orci tristique nec pellentesque diam cursus. Maecenas sapien massa, consequat 
non cursus quis, ultricies ut mauris.</p>
<p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Vivamus vestibulum rutrum pulvinar. Sed pretium placerat imperdiet. Maecenas eleifend, 
risus sit amet accumsan bibendum, quam lorem mattis ipsum, quis pretium justo sapien 
sit amet arcu. Maecenas commodo quam eu odio congue ac ultrices arcu facilisis. Quisque 
eu viverra leo.</p>

/**************** Filler Content for Footer *******************/

<p>The footer can contain all sorts of related content. Perhaps it just includes 
copyright information and links to privacy policy information.</p>
		

Production Using CSS3

Download this zip file before proceeding

Once you've unzipped this file, you will note that you have a PPT presentation and another zip file. The PPT contains instructions, and the zip file contains everything you need to get started. Once you've finished, zip up the files for the reLEAF site. This new zip file will be submitted as part of your daily grade.

Code Snippets for reLEAF Page (CSS3)

Styling

        

/**************** Header Gradient ****************/

background: -moz-linear-gradient(top, rgba(169,207,104,0.4) 0%, rgba(228,244,210,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,207,104,0.4)), color-stop(100%,rgba(228,244,210,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(169,207,104,0.4) 0%,rgba(228,244,210,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(169,207,104,0.4) 0%,rgba(228,244,210,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(169,207,104,0.4) 0%,rgba(228,244,210,0.4) 100%); /* IE10+ */
background: linear-gradient(top, rgba(169,207,104,0.4) 0%,rgba(228,244,210,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66a9cf68', endColorstr='#66e4f4d2',GradientType=0 ); /* IE6-9 */

/************** Box Shadow for Content ***************/

-webkit-box-shadow: inset 0px 0px 5px 5px #ccc;
-moz-box-shadow: inset 0px 0px 5px 5px #ccc;
box-shadow: inset 0px 0px 5px 5px #ccc;

/***************** Basic Content Area Rules *****************/

#sidebar {
    width:305px;
    float:left;
    padding-left: 20px;
    padding-top: 20px;
}

#main {
    width:490px;
    float:right;
    padding: 46px 20px 20px 10px;
}

footer {
    clear:both;
    padding:20px;
}

/******** Basic Typography **********/

h1, h2, h3 {
    font-weight:bold;
}

h1 {
    font-size: 150%;
    margin-bottom: .5em;
}

h2 {
    font-size: 120%;
    margin-bottom: .5em;
}
    
h3 {
    font-size: 110%;
    margin-bottom: .5em;
    color: #666;
}

p {
    font-size: 80%;
    margin-bottom: 1em;
    line-height: 1.5em;
}

/******** #mainnav anchor tag gradient *******/

background: rgb(228,244,210); /* Old browsers */
background: -moz-linear-gradient(top, rgba(228,244,210,1) 0%, rgba(169,207,104,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,244,210,1)), color-stop(100%,rgba(169,207,104,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(228,244,210,1) 0%,rgba(169,207,104,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(228,244,210,1) 0%,rgba(169,207,104,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(228,244,210,1) 0%,rgba(169,207,104,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(228,244,210,1) 0%,rgba(169,207,104,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f4d2', endColorstr='#a9cf68',GradientType=0 ); /* IE6-9 */

/******* Anchor tag hover rule gradient ********/

background: rgb(235,225,145); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,225,145,1) 0%, rgba(206,191,69,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,225,145,1)), color-stop(100%,rgba(206,191,69,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(235,225,145,1) 0%,rgba(206,191,69,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(235,225,145,1) 0%,rgba(206,191,69,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(235,225,145,1) 0%,rgba(206,191,69,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(235,225,145,1) 0%,rgba(206,191,69,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe191', endColorstr='#cebf45',GradientType=0 );

/****** Box shadow for #mainnav rule ******/

-webkit-box-shadow: 0px -3px 5px 0px #d6d6d6;
-moz-box-shadow: 0px -5px 5px 0px #ccc;
box-shadow: 0px -3px 5px 0px #d6d6d6;

/******* Header H1 declarations *********/

color:#983620;
font-size:550%;
margin:0;
font-weight:bold;
padding-left:175px;

/******** Header H2 declarations ********/

color:#5e1404;
font-weight:bold;
margin:0;
padding-left:285px;
position:relative;
top: -15px;

*********** Updated top of #mainnav a rule **********/

display:block;
width:169px;
height:35px;
line-height:36px;
text-shadow: 1px 1px 1px #e5e5e5;
letter-spacing:2px;
border-bottom: 1px solid #97b369;
border-right: 1px solid #bfbfbf;

/********* border on the bottom of anchor hover rule ********/

border-bottom: 1px solid #ad9d1a;

/************ Slide 18 ************/

.news-item {
    background:#fff;
    padding:4px;
    overflow:hidden;
    margin-bottom:6px;
}

.news-item img {
    float:left;
    margin-right:7px;
}

.news-item p {
    line-height:normal;
    padding-top:5px;
}

#youtube {
    margin-top:55px;
}

            

Sacramento Writers Group Production

Download this png file before proceeding. (Right click - save as...)

Convert the Sacramento Writers design into HTML and CSS using the techniques we have been working on in class.

See how far you can get, and how close to the original design you can get.

Write a paragraph about what was easy and what was hard, or how far did you get and what you got stuck on.


Design goCloud Header

Download this ai file before proceeding. (Right click - save as...)

Imagine goCloud is a company that provides cloud-based services for small- to medium-sized businesses. Who would be looking at their site? What is their audience like? What would inspire confidence in their potential customers? Design and code a front page using the logo you just downloaded.

Be sure to include the following elements in your design:

  • The logo (feel free to change its colors, if you like)
  • An appropriate tagline
  • Primary navigation
  • A clear call to action

Technical requirements:

  • If you use Photoshop, be sure all your layers are properly named and grouped.
  • You can use Illustrator if you prefer, or even InDesign or Fireworks, but be sure if you use on of these other programs you set the color space correctly (RGB and not CMYK).
  • Be sure you are using your rulers set to pixels and not inches.
  • The header should be no wider than 1200px.

Writing component: write a paragraph explaining your design choices.

  • What do you like about your design and why?
  • What was hard about the assignment?
  • How do you feel you did with it?