1 / 12

Dynamic Effects with Styles

Dynamic Effects with Styles. Chapter 12 2/6/08. 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>

sylvester-stewart
Download Presentation

Dynamic Effects with Styles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dynamic Effects with Styles Chapter 12 2/6/08 Spring 2008

  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

  3. Hiding <!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} .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" height="125" alt="At the bottom" /></p> </body></html> Spring 2008

  4. Hidden <!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} .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" height="125" alt="At the bottom" /></p> </body></html> Spring 2008

  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

  6. Buttons Spring 2008

  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

  8. </head> <body> <div id="frame"> <p>Click over the photos to enlarge them into this box.</p> </div> <div id="minis"> <!--Notice that in each paragraph there are two copies of the image. The first will be used in the left column, the second will be revealed when the visitor hovers over the left column one --> <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

  9. Spring 2008

  10. Drop-down Menus Spring 2008

  11. <!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" /> <!--<link rel="stylesheet" type="text/css" media="screen“href="dropdownformat.css" /> remove the comments to add the formatting back in --> </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. Spring 2008

  12. 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%;} Spring 2008

More Related