Today’s Goals:

• Finish up CSS floats and learn how to prevent content from breaking out of its container
• Use cool CSS3 features to make a nice-looking photo gallery (also review positioning, floating, and learn about z-index)

 Today’s Featured Site:

• http://ismycomputeronfire.com/ and http://ismycomputeron.com/– Very important questions

 Finishing up CSS Floats

• First, let’s watch this video
• Open yesterday’s page in Notepad++
• Let’s try adding this image to our #left section. How can we get the image to the left or right of the paragraph? How can we give it some breathing room so it’s not right up against the text?
• Let’s see what happens if our content took up more space than our left container allows. Give your #left section a height of 150px. What happens to the image and the text? Add overflow: hidden and then overflow: auto in your #left section to see what happens.
• There is a way to fix this issue. Let’s use this code as a model.

 CSS3 photo gallery

• This is what you will make! Roll your mouse over the photos to see what happens.
• Tutorial link (start where it says body and #container; skip link sourcing)
• You will follow the tutorial. But first, set up a new page in Notepad++ and download the images (links below). Create a new folder on your computer just for this project. Save all of your images there:
  • Remember, you need opening and closing tags for html, head, title, style, and body.
  • Images: click on the link below, then right click on the image and save it to your own computer in the folder you just created. You could also just use the image links as your image source and you don’t have to download anything; your choice.
    • Background image
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
• If you’re stuck: check out this starter code or look at the demo and view the code
• Make sure to change the img src to your actual image name (don’t need images/ unless you put your images in a separate folder called images). Also, please be sure to change the alt tag to the correct description of your image.
• Finally, here is the link for photos 1, 2, 3, 4, 5: http://www.flickr.com/photos/claudio_ar/. Replace the # in your link code with that link.
• Here is the link for photo 6: https://www.flickr.com/photos/galego/3131005845/
• YOU MUST CLOSE THE LINKS AROUND YOUR IMAGES YOURSELF! Don’t forget to add the closing link tag (an a with a slash in front of it in pointy brackets) after the image name.