slideshows next to each other [Archive]

View Full Version : slideshows next to each other

Rosalie

07-05-2010, 04:06 PM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Hello Everyone,

I am new here and I need some help. I just recently started to build my own website. In the last two weeks I managed to learn more about html and javasript.
I found this great script for a fade slideshow and I managed to implement it on my site. It looks great but my ultimate goal is to have 5 slideshows next to each other. However when I make a new slideshow it goes undernead the other slideshow.

Please is there someone who can help me with this,

many thanks in advance and kind regards

azoomer

07-05-2010, 04:27 PM

Take look at this html and css. It will give you an idea as to how it can be done.

<!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=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.slideshow {
height: 100px;
width: 100px;
margin-right:20px;
background-color:#CCC;
float:left;
}
</style>
</head>

<body>
<div id="fadeshow1" class="slideshow"></div>
<div id="fadeshow2" class="slideshow"></div>
<div id="fadeshow3" class="slideshow"></div>
<div id="fadeshow4" class="slideshow"></div>
<div id="fadeshow5" class="slideshow"></div>
</body>
</html>

Rosalie

07-05-2010, 04:40 PM

Thanks for your reply! I will take a look at it. In an hour I have access to my computer again and then I will try to fix it.

Take look at this html and css. It will give you an idea as to how it can be done.

<!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=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.slideshow {
height: 100px;
width: 100px;
margin-right:20px;
background-color:#CCC;
float:left;
}
</style>
</head>

<body>
<div id="fadeshow1" class="slideshow"></div>
<div id="fadeshow2" class="slideshow"></div>
<div id="fadeshow3" class="slideshow"></div>
<div id="fadeshow4" class="slideshow"></div>
<div id="fadeshow5" class="slideshow"></div>
</body>
</html>

Rosalie

07-05-2010, 06:09 PM

It worked!! I am so happy, Thanks