Help! I have a deadline here and any help is appreciated. As an aspiring web designer I have a site worked up Dreamweaver CS6 in which I have a CSS 5 page Carousel in. The carousel is a horizontal scroll with no interaction from the user, its just to show the services available. Its a small site just as a starting point for a client. I can't seem to get the carousel to work when debugging in any browser. Am a Graphic Designer, but a little new to the web world to this so be gentle with me.
if you have nothing of any use then don't bother with a silly answer Sammy12.
I think I've been thanked in the last 6 of my posts, thanks for ruining my streak
You must have this mistaken for pictureforums, where you post pictures. I was hoping you would take my previous post with some humor.
If you can't debug my picture, I cannot debug yours. There is no way anyone can help you without seeing your code, try and post the link to your website.
Sos all humoured out today Sammy12, too many t*ts taking the proverbial on other sites, so just wanted some help. Right I see your debug thing, v droll. You may redeem a ta here yet.
Link: qualitytimeforyou.com
Having a mare. Site now has 2 items that just wont display (links keep breaking in FTP manager?). Hosted by GoDaddy, which was a mare the other day anyway. Plus background wall paper repeat wont show either. Now slider giving me hell, grrrrrrrr. Sos I think like a regular print designer, this stuff gives me brain ache.
Oh, it was a screen grab to look at, wasn't going to post my pants coding for all to rip the pee straight off!
amazeballs, I’m playing the good cop now and because I’m the nice one of the two that replied to your question I’m gonna lay this down very clearly: Your little code snippet doesn’t tell us anything about your problem. HTML isn’t animating all by itself, there is at least some JavaScript involved. So, if you want any useful reply please post your entire code (and that includes CSS), or at best a link to the page in question.
Hi all. Job got put on pause but still having issues.
Have some JS now. But I can only get the slide show to display as a list? I have tried a couple of things bu when it works it is covering up the banner at the top of the page, or reverts to a list that doesn't work?
Any pointers. All code is below:
Code:
<!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>Quality Time For You</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #FF6699;
border-width: 20px;
background-image: url(../Images/flourish.png);
background-repeat: repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
padding-left: 0px;
background-color: #A6E74C;
behavior: scroll;
}
.twoColFixRtHdr #header {
background: #DDDDDD; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #A6E74C;
padding: 0;
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px;
background-color: #A6E74C;
}
.twoColFixRtHdr #mainContent {
margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.twoColFixRtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
background-color: #FFFFFF;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style1 {color: #F4F4F4}
.style3 { font-size: large;
color: #336633;
}
body,td,th {
color: #FFFFFF;
}
.style5 {
font-style: italic;
color: #FF6699;
font-size: 10pt;
font-weight: bold;
}
.style9 {color: #FFFFFF}
.style12 {
font-style: italic;
color: #FFFFFF;
font-size: 12pt;
font-weight: bold;
}
.style13 {font-size: 12pt}
.style15 {font-style: italic; color: #FF6699; font-size: 14pt; font-weight: bold; }
.style16 {color: #FF6699}
.style19 {color: #336633}
.style20 {
color: #ff6699;
font-weight: bold;
}
.style25 {font-size: 12px}
.style26 {color: #FFFFFF; font-size: 12pt; font-style: italic;}
.style27 {font-size: 10pt; font-style: italic; color: #FFFFFF;}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
<h1 align="left"> </h1>
<h1 align="left"><a href="../2nd_proof/index.html"><img src="../Images/Quality_Time_For_You_coloured.png" alt="Quality Time For You - House Care Service" width="780" height="180" /></a></h1>
<p align="center"> </p>
</div>
<body>
<div class=”slideshow”>
<img id="pics" class="slideshowIMGS" src="../Images/Animation/House_Cleaning.jpg"/>
<img id="pics" class="slideshowIMGS" src="../Images/Animation/Laundry.jpg"/>
<img id="pics" class="slideshowIMGS" src="../Images/Animation/House_Sitting.jpg"/>
<img id="pics" class="slideshowIMGS" src="../Images/Animation/Meal_Preparation.jpg"/>
<img id="pics" class="slideshowIMGS" src="../Images/Animation/Green_Credentials.jpg"/>
<script>
var interval = 5 * 20; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort();
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</div class=”slideshow”>
</body>
<div id="sidebar1">
<h3 align="center"><!-- end #sidebar1 -->
<a href="../Images/quality-clean-banner.png"><img src="../Images/quality-clean-banner.png" alt="Quality clean" width="200" height="440" /></a></h3>
</div>
<div id="mainContent">
<h1 align="right" class="style1 style3"> </h1>
<blockquote>
<h1 class="style3 style16">About Us </h1>
<p class="style26">Quality Time for You is a house care service available to Exeter and the surrounding areas. Our aim is to help you enjoy your home and have quality time. </p>
<p class="style26">We provide a completely professional house cleaning service. Fully insured, pleasant, honest, reliable, well-trained and CRB checked staff.</p>
<p class="style27"><span class="style13">Keeping your home clean and green. We aim to use the the greeenest of products available, that are kind to environment, with less allergens and gentle enough to use around pets</span>.</p>
<h1 class="style3 style16"><strong>Services Available Include...</strong></h1>
<ul>
<li class="style12">General house cleaning</li>
<li class="style12">Spring cleaning</li>
<li class="style12">Moving in and moving out cleaning</li>
<li class="style12">Laundry and ironing</li>
<li class="style12">Plant care</li>
<li class="style12">Bed changing</li>
<li class="style12">Window cleaning</li>
<li class="style12">Oven cleaning</li>
<li class="style12">Meal preparation</li>
<li class="style12">House sitting</li>
<li class="style12">New build pre-occupation housing clean</li>
<li class="style12">Letting agent/landlord clean for in between exiting tennants and new arrivals</li>
</ul>
<p class="style26">House care services are available for one-off cleans, fortnightly and weekly. Leave the work to us and enjoy some extra quality time!</p>
<p class="style20">Testimonials...</p>
<p><em>"I feel it is important to have a cleaner that is very trustworthy and reliable - Angela's Cleaning company comes highly recommended and would have no hesitation in recommending them"<br />
<span class="style25">John - Exeter</span></em> </p>
<p><em>"Angela has worked for me nearly a year now and is worth her weight in gold! I'm very fussy… and wanted someone with ultra high standards and pinpoint attention to detail. Angela is*first class and leaves my home spotless every time. Friendly and positive she listens carefully to exceed expectations delivering with a smile from Ironing to bed changing.*<br />
I've recommended her service to several friends who have all agreed she's the best !"</em><br />
<em><span class="style25">Will - Exeter</span></em><em><br />
</em></p>
<p><em> "Angela was great, it was ideal for the moving day house clean and was one less thing to worry about!" <span class="style25">J. Broadhurst - St. Leonards, Exeter</span></em></p>
<p><em>"</em><span xml:lang="EN-GB">Angela </span><span xml:lang="EN-GB">has been cleaning my large flat since December 2011 and I have found her work and general attitude exemplary. She is an agreeable and hard-working woman whom I can highly recommend to anyone who is considering using her very professional services</span><em>"<br />
<span class="style25"><span xml:lang="EN-GB">G. Passmore</span> - Exeter</span></em></p>
<p> </p>
</blockquote>
</div>
<div id="footer">
<blockquote>
<p align="left" class="style9"><span class="style15"><span class="style19">A clean house is a happy house!</span><br />
</span><span class="style5">Contact Angela for all your house care needs<br />
<span class="style13">CALL: </span></span><span class="style5"><span class="style13">07733223841 E-MAIL: </span> gqy888@hotmail.com<br />
</span></p>
</blockquote>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Last edited by VIPStephan; 10-10-2012 at 12:10 AM..
Reason: added code BB tags
Hiya, forget the last code, checkout qualitytimeforyou dot com. Got it up and running fine yesterday and a link in my carousel had dropped today for some reason. On my mobile so not anywhere to mail code at the mo unfortunately.
Before you post, read our: 
CSS Carousel won't work
