Practice Part 2 - adding a container/Content/Footer Divs and background image

creating a container/content/footer divs and adding background image/color

Go through the examples and be sure to complete the assignment that is listed at the bottom of this lesson
- this will be the same link so you don't need to share it again with me - I can already view your code


Our first page helped to get familiar again the basic tags and styles. Now we want to control the layout a bit more. For these we will use Divisions - these break your page up into blocks that can then have their own style settings.

A division breaks up your webpage into sections
An ID allows you to set specific css styles

In this case think of container as a "box" that holds your page on the screen


In your CSS style sheet add the following code
- we will make the container 1000px for now

    #container
    - padding: 0px; tells the browser not to add any spaces within the border
    - margin: auto; tells the browser to attempt to center the page on the screen
    - color can be in hex codes or individual rgb values (color picker can be very helpful)

    #content
    - padding: 30px; moves the text in a bit from the left margin

    #footer
    - line-height: 51px; line height of 1px more than the height aligns your text in the vertical center
    #footer p
    - let's you set styles just for the paragraph tag in the footer (rather than the default for the page)


    Add the DIV tags to the web page code

    The div styles are set up but now you need to call them in your code
    Add comments for each closing statement (it helps to keep them all straight)
    Look at the below images
    - each section has an opening and closing tag
    - where they do depends on what content is included in them



    Seamless Tile
    In your CSS style sheet you already have a background color as a default

We are going to add a seamless tile as a background

    Caution: just putting a gigantic image in here is not a good idea
    - too large a file size to load (takes long time, poor use of bandwidth resources)
    - too hard to control on different windows of devices (the image will tile repeatedly)

    seamless tile: a small image that is designed to repeat as needed without showing any seams

    Here is one for you to practice with:
    - right click on download it

    Change your body background style to call for the picture

    Once this works use the sites listed below to find a different image and use that instead

    Here is my page so far:

Assignment for Practice 2
-
update your first test page(pages) to include the following
- this will be the same link so you don't need to share it again with me - I can already view your code