S3slider Css Help Please!

[reflex84]

Hi,I got some problems with a website I'm busy on and I can't seem to figure or beable to saught out the problem.Go to www.testing123.co.za and please see my problem with the main big photo I have, that flashes from photo to photo (it just flashes to the same photo at the moment):- Notice that the image doesn't fill up flush to the left-hand margin / page ... whereas it does on the right-hand side.- Notice how the image isn't flush against the top - theres a small gap (THE PALM TREE FRON IS SUPPOSE TO LINE UP)- But notice how the text that slides up from the bottom or from the top is the correct width (flushes to the right and left) BUT when it slides from the bottom up, theres no padding between "content text ..." and the beginning of the pageRight click and click VIEW SOURCE and see the css styles... can anyone help me fix this problem as I am creating this website for a client??? Any extra css codes I need to add to get everything lined up and saughted above?Heres the css style below:

<!-- CSS --><style type="text/css" media="screen">#slider {	width: 1050px; /* important to be same as image width */	height: 508px; /* important to be same as image height */	position: relative; /* important */	overflow: hidden; /* important */}#sliderContent {	width: 1050px; /* important to be same as image width or wider */	position: absolute;	top: 0;	margin-left: 0;}.sliderImage {	float: left;	display: none;}.sliderImage span {	position: absolute;	font: 10px/15px Arial, Helvetica, sans-serif;	padding: 10px 13px;	width: 1050px;	background-color: #000;	filter: alpha(opacity=70);	-moz-opacity: 0.7;	-khtml-opacity: 0.7;	opacity: 0.7;	color: #fff;	display: none;}.clear {	clear: both;}.sliderImage span strong {	font-size: 14px;}.top {	top: 0;	left: 0;}.bottom {	bottom: 0;	left: 0;}a img {border:none;}ul { list-style-type: none;}</style><!-- JavaScripts--><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="s3Slider.js"></script><script type="text/javascript">	$(document).ready(function() {		$('#slider').s3Slider({			timeOut: 3000		});	});</script>

IF you need the javascript files (jquery.js and s3slider.js) .. then please let me knowDee.

[thescientist]

it's probably because you are putting your image in a list. There is natural padding with list items. Why not just use a div?

[reflex84]

it's probably because you are putting your image in a list. There is natural padding with list items. Why not just use a div?

Well what I am doing is creating a cell 1050px wide by 508px height ... then placing the cursor in the cell (as if I am about to write text) .. then click on CODE and pasting this code in:

<div id="slider">		<ul id="sliderContent">			<li class="sliderImage">				<a href=""><img src="mainpic.jpg" alt="1" /></a>				<span class="bottom"><strong>Title text 1</strong><br />Content text...</span>			</li>			<li class="sliderImage">				<a href=""><img src="mainpic.jpg" alt="2" /></a>				<span class="top"><strong>Title text 2</strong><br />Content text...</span>			</li>			<li class="sliderImage">				<img src="mainpic.jpg" alt="3" />			  <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>			</li>			<div class="clear sliderImage"></div>		</ul>	</div>

Is this code correct?I'm actually more of a graphic designer than a web designer, so div tags and coding can get very complicated to me...

[thescientist]

I'm pretty sure it's because you're using lists... (which aren't necessarily a bad thing! and for your example you may to have live with their natural padding)maybe try a negative left margin on the list items in their CSS declaration?

[reflex84]

Yes you are right... Gees I am thick ... didn't relize I copied the <li etc:As you know, this is the code:

<div id="slider">		<ul id="sliderContent">			class="sliderImage"				<a href=""><img src="mainpic.jpg" alt="1" /></a>				<span class="bottom"><strong>Title text 1</strong><br />Content text...</span>			</li>			<li class="sliderImage">				<a href=""><img src="mainpic.jpg" alt="2" /></a>				<span class="top"><strong>Title text 2</strong><br />Content text...</span>			</li>			<li class="sliderImage">				<img src="mainpic.jpg" alt="3" />			  <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>			</li>			<div class="clear sliderImage"></div>		</ul>	</div>

How do i get rid of the LISTS?What must I remove ffom the code above?Please let me know - thanks for opening my eyes ... like I said I'm not sharp with css and HTML coding

[reflex84]

I also notice this in its css style script:

ul { list-style-type: none;}

I must remove this?

[thescientist]

First of all, the javascript you're using probably bases its use off that particular structure, so you may be stuck, but there are infinitely more different ways to do a slideshow with just CSS. Like I said, did you try using a negative margin?check out the demos section on that link for a bunch of CSS based photo galleries

[reflex84]

Hi thescientist and others ... I've made some progress but still have a problem ...If you go to the site now (refresh to see change) ... you will notice its lined up the image but I ever since I removed the LIST tags, the image doesn't fade or change to the next image:See my code:

<div id="slider">		<span id="sliderContent">			<span class="sliderImage">				<a href=""><img src="mainpic.jpg" alt="1" /></a>				<span class="bottom"><strong>Title text 1</strong><br />Content text...</span>			<span class="sliderImage">				<a href=""><img src="mainpic2.jpg" alt="2" /></a>				<span class="top"><strong>Title text 2</strong><br />Content text...</span>			<span class="sliderImage">				<img src="mainpic.jpg" alt="3" />			  <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>			<div class="clear sliderImage"></div>	</div>

Can you see anything wrong with the code above which isn't making the slideshow go to the next image?Thanks

[thescientist]

First of all, the javascript you're using probably bases its use off that particular structure, so you may be stuck, but there are infinitely more different ways to do a slideshow with just CSS. Like I said, did you try using a negative margin?check out the demos section on that link for a bunch of CSS based photo galleries

[reflex84]

First of all, the javascript you're using probably bases its use off that particular structure, so you may be stuck

Thanks ... no offence - that does mean greek to me, as I mentioned in my post above

I'm actually more of a graphic designer than a web designer, so div tags and coding can get very complicated to me...

IE: I am useless as css and coding at the moment ... and I battle to understand the terminology you guys use, which is something I'm trying to learn.

but there are infinitely more different ways to do a slideshow with just CSS

... I understand this ... but since I do not write code, this is something I can't do until I've learn't how to do it (in many years times) ... This code is something I have copied and pasted from a free gallery that someone published to the public. I like it because it is simple ... but not as simple as I thought it would be. I would like to stick with this gallery in the meantime ... just would like to get it saughted out since I feel I am so close to been.

Like I said, did you try using a negative margin?

Negative margin ... ok ... how would I make a negative margin? I have saughted out the alignment and gotten rid of the LIST that was involved, so would I still need to use a "negative margin"?If you read my last post before this ... I can't seem to understand why my slideshow isn't showing the 2nd and 3rd image of the slideshow (there are 3 images in the slideshow) ... the slideshow does rotate, just seems to hide the 2nd and 3rd photo. So is there any ">" I am missing or a "<span>" or a "...." ???If you could please let me know exactly my problem, I would appreciate it, thanks!

[thescientist]

I did post a link with other examples of CSS slideshows, did any of those do anything you were interested in or provide a similar effect? Anyway, I'm not sure how to further explain what I said. You are using javascript for your sliding effect. The code of the script itself seems to be coupled to list items. Hence no list items, no sliding. You could maybe use div if you could alter the javascript code. It should be noted that using javascript for effects can be a double-edged sword because users can turn it off in their browser.As far as negative margins, you can find them on the W3schools tutorials page under CSS. It would probably look something like margin-left: -5px;

[reflex84]

Hmmmm that such a pity ... you sure there is nothing I or we can do to make the sideshow work, by adding / deleting script?Altering the Javascript code sounds very complicated!Ye but how many people these days turn off javascript? (good point you made me relize though!)If we can't work this gallery then is there any like the one I got thats VERY similar?Dee(I'm off to bed as its 2:30am) ... but guys, I would appreciate the imput!Thanks in advance

[thescientist]

I've posted a link for CSS alternatives, suggested using negative margins, or altering the JS script; I'm not sure I have much left to offer unless you actually start trying stuff to find out whether they work or not. I wouldn't get too attached to that script, I'm sure there are tons of JS scripts like that if you Google them that will do the same thing, but CSS would be my vote. Done right it will validate, be just as functional as javascript (in some cases) and you don't have to worry about people turning it off. We all started off not knowing what we where doing at one point, but you have to get your hands dirty some time if you're going to be more competent and confident in your skills.For the sake of offering all solutions, (even if its above your head, not a dig at you by any means) you could also use Flash.