...
Wiki Markup |
---|
{html} <UL id="ul"> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+Main+Page" id="a" mce_href="#home">Home</A></LI> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR1" id="a" mce_href="#news">GR1</A></LI> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR2" id="a" mce_href="#contact">GR2</A></LI> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR3" id="a" mce_href="#contact">GR3</A></LI> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR4" id="a" mce_href="#contact">GR4</A></LI> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR5" id="a" mce_href="#contact">GR5</A></LI> <LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR6" id="a" mce_href="#contact">GR6</A></LI> </UL> {html} |
CSS Stylesheet |
---|
#ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#li
{
display:inline;
}
#a:link,#a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:8px 24px 8px 24px;
text-decoration:none;
text-transform:uppercase;
}
#a:hover,#a:active
{
background-color:#2E2E2E;
}
.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:1010px;
height:670px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #000000;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
display: none;
text-decoration: none;
float:left;
}
.slideshow > ul > li > div > p {
font-size:11px;
text-align:center;
padding:0px 5px 0px 5px;
margin:0px;
color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #707070;
width:1005px;
}
.slideshow > ul > li > img {
border:2px solid #707070;
margin:0px;
padding:0px;
width:80px;
height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}
|
Design
Please hover over each thumbnail to display the screenshot with a description underneath. We recommend browsing the thumbnails from left to right.
...