Hi all!
Below is some code that I found online which creates a “Slide Show”.
What is nice about it, is that it works with JavaScript turned off using just CSS as well as adding animation when JavaScript is turned on.
I’ve been studying the CSS, but as usual, seem to be stuck?! :-/
How is it possible to show only one “slide” in the Unordered List at a time??
The author floats the <LI>'s so that the line up side-by-side and flow oout of the viewport, yet when you click on a given tab, that part of the markup miraculously appears in the slide window?!
Things almost behave like the Drop-Down and Drop-Line menus that Rayzur helped me out with in the past, but they clearly aren’t using the fancier techniques that he used with Relative and Absolute Positioning and what not?!
The code is almost too simple for how it works!
slideshow.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
</head>
<body>
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2>Slide one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec pretium arcu non velit. Phasellus adipiscing auctor
lorem. Curabitur in urna ut purus consequat sollicitudin.
Phasellus ut diam. Cras magna libero, tempor id, venenatis
sit amet, venenatis et, dui.
</p>
</li>
<li id="slide-two">
<h2>Slide two</h2>
<p>
Nam ac nibh sit amet augue ultricies sagittis. Donec sit
amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
nisi condimentum urna, sit amet molestie odio dolor non lectus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</p>
</li>
<li id="slide-three">
<h2>Slide three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse adipiscing dui a nibh. Integer tristique lorem
vitae massa. Etiam dapibus, eros sit amet euismod semper,
felis erat congue lacus, sed aliquam metus libero sed elit.
</p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li><a href="#slide-one">Slide one</a></li>
<li><a href="#slide-two">Slide two</a></li>
<li><a href="#slide-three">Slide three</a></li>
</ul>
</div>
</body>
</html>
slideshow.css
*{
/* outline: 1px dotted #FF0000; /**/
margin: 0;
padding: 0;
}
/* ---------------------------------------------------- */
/* GLOBAL
/* ---------------------------------------------------- */
html {
font-size: 76%;
}
body {
font-family: arial, helvetica, sans-serif;
line-height: 1.4em;
font-size: 1.2em;
padding: 5%;
}
/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 960px;
background-color: #eee;
border: 1px solid #ddd;
}
#slideshow ul {
list-style-type: none;
height: 1%; /* IE fix */
}
#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden; /* Comment out to see slides line up side-by-side!! */
width: 960px;
}
#slideshow .slides ul {
width: 2880px; /* Total Width = 960px/slide X 3 slides */
}
#slideshow .slides li {
width: 920px;
float: left;
padding: 20px;
}
#slideshow .slides h2 {
margin-top: 0;
}
/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
background-color: #ddd;
border-top: 2px solid #ccc;
}
#slideshow .slides-nav li {
float: left;
}
#slideshow .slides-nav li a {
display: block;
padding: 15px 20px;
outline: none;
}
I’d love to understand how this code works, because I think it is what I am lokking for to solve my latest issue.
Thanks,
Debbie