Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08

Slide 2 CMPS 211 Internet Programming Spring 2008 Display and Hide Elements Showing the whole tower p {margin:0 0 2px 0;padding:0}

Slide 3 CMPS 211 Internet Programming Spring 2008 Hiding Showing the whole tower p {margin:0 0 2px 0;padding:0}.hide {display:none}

Slide 4 CMPS 211 Internet Programming Spring 2008 Hidden Showing the whole tower p {margin:0 0 2px 0;padding:0}.hide {visibility:hidden}

Slide 5 CMPS 211 Internet Programming Spring 2008 Rollover Buttons Rollover Buttons 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 */ home about examples extras opinions help

Slide 6 CMPS 211 Internet Programming Spring 2008 Buttons

Slide 7 CMPS 211 Internet Programming Spring 2008 Expanding Photos 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 */

Slide 8 CMPS 211 Internet Programming Spring 2008 Click over the photos to enlarge them into this box. … Carcassone … Lemurs …

Slide 9 CMPS 211 Internet Programming Spring 2008

Slide 10 CMPS 211 Internet Programming Spring 2008 Drop-down Menus

Slide 11 CMPS 211 Internet Programming Spring 2008 Setting All List-Style Properties at Once remove the comments to add the formatting back in --> Products PageWhacker13.1 InstaWeb 4.0 BookWriter 1.0 (beta) Support Online Forum Contact Us … There is another drop-down for ‘downloads’ followed by the actual web page content.

Slide 12 CMPS 211 Internet Programming Spring 2008 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%;}