| Index | Code Tester |
<div style = "position: absolute; border: double 5 red; top: 100; left: 20; z-index: -1" >Hi</div>
<div style = "background-color: yellow; border: double 5 blue; width: 200; height: 200; z-index: 1" >Hi</div>
List Properties
<ol style = "list-style-type: lower-roman; list-style-position: inside"><li>Position can also be "outside"</li><li>Can use image instead of marker</li></ol>
In all of the following exercises, use style properties.
In exercises 1 and 2 you will list the style properties and possible values for each. You might want to add this information to the .css file that you created in lesson 3.3.
1. List the Positioning properties listed above and possible values for each.
2. List the List Properties listed above and possible values for each.
3. How is the z-index property used?
4. If you specify the top and left location of an element, what other property must you set and what should you set it to?
5. Create a new page. Add a <div> with some text to the page and set its background color to your favorite color. Make sure that:
- The width of the <div> is 100.
- The height of the <div> is 100.
- The text is centered horizontally.
- The <div> is located at 100, 100.
- Its id is "mydiv".
6. How do you make an element hidden? Experiment with the <div> in #5 to make it hidden.
7. Now we will add code to move the <div> in #5 when the user clicks on it.
a. Add the following <script> block to the <head> section:
<script>
var x = 100;
function changeDiv()
{
x = x + 20;
window.mydiv.style.top = x;
window.mydiv.style.left = x;
window.mydiv.style.width = x;
window.mydiv.style.height = x;
}
</script>
b. Add the following to your <div> tag:
onclick = "changeDiv()"c. Display your page and experiment. What happens?
8. Now modify your <div> in #5 so that it has an unordered list with an image as the marker.
9. Create a page to demonstrate the use of the z-index property.