dynamic effects with styles

CMPS 211 Internet Programming

Spring 2008 Slide 1

Dynamic Effects with Styles

Chapter 12

2/6/08


Spring 2008 Slide 2

Display and Hide Elements<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Showing the whole tower</title><style type="text/css">p {margin:0 0 2px 0;padding:0}</style>

</head><body><p><img src="top.jpg" width="300"

height="125" alt="At the top" /></p><p class="hide"><img src="middle.jpg" width="300" height="100"

alt="In the middle" /></p><p><img src="bottom.jpg" width="300"

height="125" alt="At the bottom" /></p></body></html>


Spring 2008 Slide 3

Hiding<!DOCTYPE html PUBLIC "-//W3C//DTD


<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Showing the whole tower</title><style type="text/css">p {margin:0 0 2px 0;padding:0}.hide {display:none} </style>

</head><body><p><img src="top.jpg" width="300"

height="125" alt="At the top" /></p><p class="hide"><img src="middle.jpg" width="300"

height="100" alt="In the middle" /></p><p><img src="bottom.jpg" width="300"



Spring 2008 Slide 4

Hidden<!DOCTYPE html PUBLIC "-//W3C//DTD


<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Showing the whole tower</title><style type="text/css">p {margin:0 0 2px 0;padding:0}.hide {visibility:hidden} </style>

</head><body><p><img src="top.jpg" width="300" height="125"

alt="At the top" /></p><p class="hide"><img src="middle.jpg" width="300" height="100"

alt="In the middle" /></p><p><img src="bottom.jpg" width="300"



Spring 2008 Slide 5

Rollover Buttons<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rollover Buttons</title> <style type="text/css"> a {display:block;padding:2px;text-decoration:none;width:5em;margin:2px; color:#8D4F10;font-family:"Trebuchet MS", Verdana, sans-serif} /*remove the underlining, set the color to darkish brown, and display as block elements to make them go down the left side of the page */ a:link, a:visited {background:#FFCFA0;border:2px outset #FFCFA0; } /* give unvisited and visited links a light orange background and an outset border of the same color to make it look like a button */ a:focus, a:hover {background: #CD8E51;border:2px outset #CD8E51; color:black} /* give buttons that are hovered over or that have focus a darker background and border, as well as black text; bold formattingmakesthe textjump around to much */ a:active {background:#AF6A27;border:2px outset #AF6A27}/*give buttons when they are clicked ("active"), an even darker background */ </style> </head> <body> <a href="home.html">home</a> <a href="about.html">about</a> <a href="examples.html">examples</a> <a href="extras.html">extras</a> <a href="opinions.html">opinions</a> <a href="help.html">help</a> </body> </html>


Spring 2008 Slide 6

Buttons


Spring 2008 Slide 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Expanding Photos</title> <style type="text/css"> img.mini {border:none} /* no border around left column images */ div#minis a:hover {background:white} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */ div#minis a img.big {height: 0; width: 0; border-width: 0} /* hide the big image by making its height and width 0 */ div#minis a:hover img.big {position:absolute; top:18px; left:120px; height:375px; width:500px; border:none} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */ #frame {position:absolute; top:16px; left:118px; height:355px; width:480px; border:2px solid red;font: 1em "Trebuchet MS", Verdana, sans-serif;color:red;padding:10px} /* create an empty frame so that visitors expect something to go there */ p {margin-bottom:26px} /*add bottom margin to p elements so that they are (roughly) aligned with the big image frame */ </style>

Spring 2008 Slide 8

</head> <body> <div id="frame"> <p>Click over the photos to enlarge them into this box.</p> </div> <div id="minis">  <p><a class="photo" title="Boat on the rocks" href="http://www.flickr.com/photos/cookwood/187664726/"><img class="mini" src="http://static.flickr.com/68/187664726_5b9fb78a8e.jpg" width="100" height="75" alt="Boat on the rocks" /><img class="big" src="http://static.flickr.com/68/187664726_5b9fb78a8e.jpg" width="100" height="75" alt="Boat on the rocks" /></p> …Carcassone…Lemurs…<p><a href="http://www.flickr.com/photos/cookwood/142906227/" title="El Fossar de les Moreres"><img class="mini" src="http://static.flickr.com/45/142906227_6618fe9aec.jpg" width="100" height="75" alt="Al fossar no s'hi enterra cap traidor" /><img class="big" src="http://static.flickr.com/45/142906227_6618fe9aec.jpg" width="100" height="75" alt="Al fossar no s'hi enterra cap traidor" /></a></p> </div>


Spring 2008 Slide 9


Spring 2008 Slide 10

Drop-down Menus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Setting All List-Style Properties at Once</title> <link rel="stylesheet" type="text/css"media="screen"href="dropdownonly.css" />  </head><body> <div id="navbar"> <ul> <li><a href="page.html">Products</a> <ul> <li><a href="page.html" title="PageWhacker Data Sheet">PageWhacker13.1</a></li> <li><a href="page.html" title="InstaWeb Data Sheet">InstaWeb 4.0</a></li> <li><a href="page.html" title="BookWriter Data Sheet">BookWriter 1.0 (beta)</a></li></ul></li> <li><a href="page.html">Support</a> <ul> <li><a href="help.html">Online Forum</a></li> <li><a href="help.html">Contact Us</a></li> </ul> </li> …There is another drop-down for ‘downloads’ followed by the actual web page content.



CSS for drop-down#navbar, #navbar ul { display:block; margin:0; padding:0; list-style:none;}

#navbar a { display:block; width:10em;}

#navbar li { float:left; width:10em; }

#navbar li ul { display:none}

#navbar li:hover ul{position:absolute;display:block; width:10.1em;}

#navbar li ul li { float:none; width: auto; }

div.content {clear:left; padding-top:5%;}

dynamic effects with styles

Documents