Today’s Goal:

• Start learning about CSS positioning

 Today’s Featured Site:

• http://cssstats.com/– This site will give you a CSS summary of any website you want

 Community PSA:

• Seeking snow shovelers! The Medford Senior Center is making a list of names & contact info to share with seniors in need of snow removal help this winter. When someone (a senior or other person in Medford) calls for shoveling assistance, payment (or volunteer hours) will be arranged between the shoveler and home/business owner. Please contact Syrah McGivern at the Board of Health smcgivern@medford-ma.gov or 781-393-2560 if you would like to be added to the snow shoveler list.

 Using CSS to create a layout for your webpage- need to know:

• ID (uniquely applied, usually used just once on a page)- preceded by # on style sheet. Generally used to identify specific sections of a webpage (ex. #menu, #header, #sidebar)
• Elements (the various HTML elements, such as paragraphs, links, etc., that are defined by the style sheet)- not preceded by anything on a style sheet (p, h1, a, img).
• While HTML has tags, CSS has selectors, which are the names given to the styles in your style sheet. For each selector, there are properties with values, like a headline that is bold, Arial, and 20 point font, for example.
• In the body section of your webpage, you use div tags that correspond to the selectors in your style sheet. For example, div id=”wrapper”.
• Divs and containers: Containers are specific areas of a webpage that can contain text, images, etc. They are also used as the big “box (remember the box model) to contain all of the content on your webpage. They are referred to as divs on your style sheet (remember we used div id=”wrapper”). They can be positioned with specific properties and can overlap.
• Positioning divs on a webpage: Divs can overlap and are positioned either from the top left corner of the webpage (absolute) or in relation to their usual positions on the page (relative). Divs can also have a fixed position, which means they don’t move as you scroll along the page and stay in the same place. It is possible to put one div inside another and position them differently. Top, right, left, and bottom values are used to tell the browser where the div should be positioned on the page. The values can either be in pixels or as a percentage, which are relative to the parent element’s dimensions (example, a webpage that’s 900 pixels wide or a table that’s 500 pixels wide).

 Time to Practice

• Objectives: Learn about absolute positioning by adding a sidebar to a webpage. Learn how to set up, add, and nest div tags.
• In pairs of 2 at your table, do the following:
  1. Take your paper box model and draw a sidebar somewhere on your page on the left or right, wherever it will fit. It should be a small box or rectangle. Label it #sidebar. Then, draw arrows leading to the top, bottom, left and right sides of your sidebar and label them top, bottom, left, and right.
  2. Open Notepad++ and create a new webpage. Set up a basic webpage with opening and closing html, head, title, and body tags. Then add opening and closing style tags in your head section. Save this as positioning.html.
  3. You’re going to make a page that looks something like this:
     
  4. Go to yesterday’s page and copy the #wrapper code. Paste that code inside the style tags of your new webpage. Then, go into your html and below your opening body tag add div id=”wrapper” and make sure you close that div tag. You’ve just now set up a large “box” for your webpage that will contain all of your content.
  5. Now you will code the sidebar you just drew on your paper box model. Add #sidebar below your #wrapper code in your style sheet. Make sure to add opening and closing curly brackets { } after it.
  6. Now add div id=”sidebar” in your html below div id=”wrapper”. Make sure the sidebar is inside the wrapper completely; you should have two closing div tags.
  7. Let’s give the #sidebar a border (copy and paste from your #wrapper and change the values if you want). Let’s also give it a background-color (choose something). Give it a width and height. Also make sure to add some padding.
  8. We must now position the #sidebar so it’s actually on the left or right side of your page. Add position: absolute; to your #sidebar inside the curly brackets. Then, add four lines of code below position top:; right:; bottom:; left:;. Give values in pixels to each of these so that your sidebar is some distance from the top and bottom and is actually lined up on one side of your page (left or right). For example, if you want your sidebar on the right, then the left value should be bigger than the right value.
  9. If you got your sidebar to one side of the page, try flipping it to the other side by changing the value of left or right.
  10. Finally, let’s add some content to the sidebar. Go into your html and add a headline inside your sidebar. Try adding a paragraph and also an image. What happens if your content is bigger than the sidebar?