CHAPTER 12 "Layout and Positioning"
**NOTE: QUIZ ON TUESDAY 10/:) on div's, spans, id's and classes (CH10, 11 & 12)
Tuesday 10/15/13 & WEDNESDAY 10/16/13
- Today we will be looking at "Starbuzz Coffee". We will be creating a css page and adding "style" to our html.
- Take a look at this Starbuzz Coffee page with NO LAYOUT
- Download CH12_NoLayout folder and put it into a CH12 folder on your jump drive.
- STEP #1: Our FIRST goal today is to create a Starbuzz page that look like the NO LAYOUT page, using the handout to guide us. SEE BELOW FOR NOTES!!!
- You will also need to CREATE a CSS page and link it to your index.html
- STEP #2: Our SECOND goal is to take the NO LAYOUT page and make the sidebar area a width of 280px and float to the right.
- WHEN DONE with steps #1 and #2, SAVE AND MOVE TO PART 2 BELOW!
ch12_nolayout.zip | |
File Size: | 351 kb |
File Type: | zip |
Continuation.... PART 2
- NEXT, we are going to change our #main in our CSS. In your CSS file, in #main, make sure the margin is: margin: 0px 330px 10px 10px;
- This will help us to match the size of our sidebar and creating the illusion of a two column layout!
- BUT we have a problem.... when you resize your browser to a wide position, the footer and the sidebar overlap.
- TO solve, we need to use the CLEAR property. you can set this property on an element to request that the element is being flowed and no floating content is being allowed to be on the left right or both sides of the element.
- For this we will go to our CSS and clear the right area in our #footer
clear: right;
NOW let's watch the video of FROZEN layout which let's us set areas of our page in certain areas of our browser and is NOT jello-ie or liquid based on our browser size.
Now that you have changed your files to FROZEN let's add some fixed positions and absolute positions. Make sure you name your new areas:
In the video, you will be linking to google and using images from your images folder...
WATCH video BELOW to find out the assignment. When completed with concepts, compress and submit in Edmodo AS CH12 - POSITIONS
- #mystuff with width 800px, padding-top and bottom 5px, background color: #675c47 and margin-left: auto; and margin-right: auto;
- #myaward
- #mycoupon
In the video, you will be linking to google and using images from your images folder...
WATCH video BELOW to find out the assignment. When completed with concepts, compress and submit in Edmodo AS CH12 - POSITIONS
- #myaward{
position: absolute;
top: 30px;
left: 365px;
}
- #mycoupon {
position: fixed;
top: 300px;
left: -75px;
}
THURSDAY 10/24/13
- Finish Chapter 12 work. Compress and submit in Edmodo AS CH12-POSITIONS
- Download this file and add to it, to create your own reference sheet OR You may make your own up, add or change this to your style/liking:) Save in your google drive OR on your jump drive - OR as notes.
- Work on your final project. Add to your final project making floats, using frozen and/or liquid layouts.
htmlandcssreferencesheet.docx | |
File Size: | 62 kb |
File Type: | docx |
THURSDAY 10/24/13 & FRIDAY 10/25/13 - Layout, Layout
Terms you need to know and understand...
- Floating Layout: uses <div id> in sections and makes you order what you want floated first so that everything else flows around it. You also need to set widths for your float area. And floats only left or right.
- Jello Layout: uses <div id> in sections but uses margin-left:auto; and margin-right: auto; so that the margins expand. Downside however is that the content does not expand with browser.
- Absolute Layout: uses fixed positions in your css. Like postion absolute; top: 128px; right 0px; and give the <div id> a set width.
friends_layout_copy_2.zip | |
File Size: | 296 kb |
File Type: | zip |
practice.zip | |
File Size: | 351 kb |
File Type: | zip |
THURSDAY 10/24/13 & FRIDAY 10/25/13 - 3 Column Layout
Use class notes to help you.
Let's download the practice file above on your chromebooks.
We will practice as a group how to create three columns.
NOTES: We will be using margins and float left and float right.
ASSIGNMENT - DUE MONDAY:
Create your own 3 columns layout design using the principles below. It must have 3 columns, header and footer, and jello margins (using margin-auto) and 1 picture.
HELPFUL HINTS:
SAVE AS CH12_3C
Compress and submit in EDMODO as CH12 - 3 Columns
Let's download the practice file above on your chromebooks.
We will practice as a group how to create three columns.
NOTES: We will be using margins and float left and float right.
ASSIGNMENT - DUE MONDAY:
Create your own 3 columns layout design using the principles below. It must have 3 columns, header and footer, and jello margins (using margin-auto) and 1 picture.
HELPFUL HINTS:
- Start with a basic HTML & CSS -
- Then break it up into sections: header, main, side(s), footer
- Then work on floats, widths and padding/margins
- Then add STYLE in your css to really jazz it up using color, background-color, font color, etc.
SAVE AS CH12_3C
Compress and submit in EDMODO as CH12 - 3 Columns
web_ch12_3columns_notes_2_4_13.pdf | |
File Size: | 3063 kb |
File Type: |