Now what?

[OliviasMama12]

Hi Michael- Again thank you for the help during open lab, and hopefully you're feeling better??!!

Ok so I've created a "navigation div" and i think I've styled it so at least it seems to be functioning properly when I preview it and it doesn't float in any random place. THEN I put images with rollovers (as my buttons) in the navigation div and so far it seems like there are no problems. MY buttons are staying where I want them, and all the rollovers seem to function... so far YAY: ) (knock on wood I don't goof it up)

My next question is: I want to keep everything (meaning the buttons) EXACTLY how it is and just "swap out" the background picture for each new page,
for example, the fish image for the fish page, the reptile image for the reptile page and so on... You (and Justin) started explaining to me how to do this on monday night but I'm afraid I didn't understand exactly what you meant. Can you review what I would do???

Would I just delete the original image and replace with a new image, then save it as something different? And I think you guys were telling me to name a container different- is that correct? If so why? If I do just delete the original image, I have no idea where it is in the HTML, so I'm including an image of the HTML... maybe you can point out what part I should delete???

Ok well I think this is plenty of questions, thank yo u so much in advance for any help!!!

Nikki

[Instructor]

Glad to hear the lab helped, Nikki. I'm feeling a bit better, though nothing close to "well", yet.

I've got some good news, the solution to your problem is pretty simple. When you want to make a new page here's what you want to do:

• 1. Click Save As and save your current file as whatever you want to call your next page. Say "fish.html" or something.
  
  2. In the HTML code of "fish.html" find the top tag of your container div (around line 34 of your code) and rename it "fish_container". Note: If your container div does not contain your background image find the div that does and rename it, instead.
  
  3. Next, go over to your CSS Styles palette and single-click select ".container".
  
  4. Once that is selected, click the CSS Styles palette options menu (the little button in the upper right corner of your CSS Styles palette that has four lines and a downward facing arrow). On the popup menu that flies out select Duplicate.
  
  5. A new CSS Rule window should pop up. In this window, name your rule ".fish_container" instead of ".containerCopy" or whatever the default is. Once you've done that, click Save.
  
  6. Now that you have a new style created, double click it in your CSS Styles palette to bring up the CSS Rule definition window. Go to the background category and change your background image to whatever new one you desire.

Repeat this process for each page you want to make. Don't use "container" as the name of your container div on any page that's not "index.html". If you do, when you change the background image on your ".container" style, it will change the background image on both your homepage and whatever other page uses "container".

Don't worry about finding your image in the HTML, it's actually being fed in via your "container" style.

Hope this helps!