New Posts  All Forums:Forum Nav:

CSS help

post #1 of 5
Thread Starter 
I am trying to create a website that has a fading background slideshow. I found a code that works, but when i try to put any other pictures in the web page they all change their dimensions to the 1280x600px that was defined for the background...
is there any way to keep the backgrounds that size and also have images of different sizes?
here is the code:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Webpage</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
.slideshow
{
position: center;
width: 1280px;
height: 600px;
}
.slideshow img
{
position: absolute;
width: 1280px;
height: 600px;
z-index:-1;
}
body {
background-color: #000000;
margin-top: 0px;
}
.title {color: #FFFFFF;
font-family: Calibri;
font-size: 24px;
font-weight; bold; }

.subtitle {color:#CCCCCC;
font-family: Calibri;
font-size: 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var images=new Array('images/backgrounds/banner1.png','images/backgrounds/def.jpg','images/backgrounds/def2.jpg');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slides howFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setT imeout(doSlideshow,7000);}));
if(nextimage>=images.length)
nextimage=0;
}
});
//]]>
</script>

</head>
<body class="slideshow">

<table width="1080" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>


</body>


</html>

Help!
post #2 of 5
The reason why other images which you have tried to add are displaying with dimensions of 1280x600px, is because that in your CSS you have .slideshow img, which means that any image within .slideshow will have the properties you define.

The body has a class of 'slideshow', therefore, any image within the body will have the defined properties, unless stated otherwise.

Solution:

Within your jQuery you're using 'slideshowimage' for the class of the image, but you're not actually defining any properties for this class within your CSS.

So you can change your CSS for the .slideshow img to this:
.slideshow img.slideshowimage
{
position: absolute;
width: 1280px;
height: 600px;
z-index:-1;
}

This means that any image within the body (slideshow) with a class of slideshowimage will have these properties.

Hope this helps!
post #3 of 5
Thread Starter 
...this gives the whole a white background that I cant change and also aligns it to the left :S Sorry i'm kinda new to this
post #4 of 5
Quote:
Originally Posted by samf90 View Post
...this gives the whole a white background that I cant change and also aligns it to the left :S Sorry i'm kinda new to this
Dont worry bout it, when i get some time at work ill try and find a solution.
post #5 of 5
Hi there again,

I have tested all the code out myself and have come up with another solution.

First of all there were a few errors within the jQuery, I have now corrected these.

Also the solution that I gave you first of all is also used within this solution.

Here is the complete code below (highlighted with modifications):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Webpage</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
.slideshow
{
position: center;
width: 1280px;
height: 600px;
}
.slideshow img.slideshowimage
{
position: absolute;
width: 1280px;
height: 600px;
z-index:-1;
}
body {
background-color: #000000;
margin-top: 0px;
}
.title {color: #FFFFFF;
font-family: Calibri;
font-size: 24px;
font-weight; bold; }

.subtitle {color:#CCCCCC;
font-family: Calibri;
font-size: 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var images=new Array('YOUR IMAGE HERE','YOUR IMAGE HERE','YOUR IMAGE HERE');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slides howFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend('<img class="slideshowimage" src="'+images[nextimage++]+'" style="">').fadeIn(500,function(){setTimeout(doSli deshow,7000)});
if(nextimage>=images.length)
nextimage=0;
}
});
//]]>
</script>

</head>
<body class="slideshow">

<table width="1080" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
<img src="ANOTHER IMAGE HERE">
</body>

</html>

I have also uploaded this to my website, feel free to take a look at the source: http://psm2.co.uk/csshelp.html
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding