Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Gallery not displaying all images

    Guys,

    I'm getting there and through trial and error learning a bit..

    Can someone tell me why the scrolling gallery images on the homepage isn't displaying the final image, marked "HO"?

    It gets to "TV" and then goeds back to "PC"

    Here is the CSS if that helps?

    Thanks so much

    Code:
    /* Getting the new tags to behave */
    article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
    mark, rp, rt, ruby, summary, time {display:inline}
    
    /* Global properties ======================================================== */
    html {width:100%}
    body {font-family:Arial, Helvetica, sans-serif;font-size:100%;color:#808080;min-width:980px;background:#080808}
    .ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
    .main {width:980px;padding:0;margin:0 auto;font-size:0.875em;line-height:1.428em}
    a {color:#080808;outline:none}
    a:hover {text-decoration:none}
    .col-1, .col-2, .col-3, .col-4 {float:left}
    .fcol-1, .fcol-2, .fcol-3 {float:left}
    .fcol-1 {width:240px;margin-right:50px}
    .fcol-2 {width:319px;margin-right:50px}
    .fcol-3 {width:310px}
    .wrapper {width:100%;overflow:hidden}
    .extra-wrap {overflow:hidden}
    .clear {
    	clear: both;
    	display: block;
    	overflow: hidden;
    	visibility: hidden;
    	width: 0;
    	height: 0;
    }
     
    p {margin-bottom:18px}
    .p1 {margin-bottom:8px}
    .p2 {margin-bottom:15px}
    .p3 {margin-bottom:30px}
    .p4 {margin-bottom:40px}
    .p5 {margin-bottom:50px}
    
    .reg {text-transform:uppercase}
    
    .fleft {float:left}
    .fright {float:right}
    
    .alignright {text-align:right}
    .aligncenter {text-align:center}
    
    .it {font-style:italic}
    
    .color-1 {color:#fff}
    .color-2 {color:#000}
    .color-3 {color:#666}
    
    /*********************************boxes**********************************/
    .indent-top {padding-top:10px}
    .indent-left {padding-left:20px}
    .indent-left2 {padding-left:30px}
    .indent-right {padding-right:50px}
    
    .indent-bot {margin-bottom:20px}
    .indent-bot2 {margin-bottom:30px}
    .indent-bot3 {margin-bottom:45px}
    
    .prev-indent-bot {margin-bottom:10px}
    .img-indent-bot {margin-bottom:25px}
    .margin-bot {margin-bottom:35px}
    
    .img-indent {float:left;margin:0 20px 0px 0}	
    .img-indent2 {float:left;margin:0 13px 0px 0}	
    .img-indent-r {float:right;margin:0 0px 0px 40px}	
    
    .img-border {
    	float:left;
    	padding:5px;
    	background:#fff;
    	box-shadow: 0px 0px 2px #ebecee;
    	border-radius:8px;
    	margin-top:2px;
    	margin-bottom:2px;
    }
    
    .buttons a:hover {cursor:pointer}
    
    .menu li a,
    .list-1 li a,
    .list-2 li a.item,
    .list-services li  a,
    .link,
    .button,
    .button2,
    h1 a {text-decoration:none}	
    
    /*********************************header*************************************/
    header {
    	width:100%;
    	min-height:116px;
    }
    	#page1 header {min-height:196px}
    
    h1 {
    	padding:34px 0 0 30px;
    	position:relative;
    	float:left;
    }
    	h1 a {
    		display:block;
    		width:266px;
    		height:47px;
    		text-indent:-9999px;
    		background:url(../images/logo.png) 0 0 no-repeat;
    	}
    	h1 strong {
    		display:inline-block;
    		font-size:13px;
    		line-height:2em;
    		color:#848484;
    		margin-top:-13px;
    		padding-left:137px;
    	}
    	
    /***** menu *****/
    .menu {
    	padding:25px 0 0 0;
    	float:right;
    }
    .menu li {
    	float:left;
    	position:relative;
    	background:url(../images/menu-spacer.gif) left top no-repeat;
    }
    	.menu li:first-child {background:none}
    .menu li a {
    	display:inline-block;
    	font-size:17px;
    	font-weight:bold;
    	line-height:2em;
    	padding:8px 28px 9px 27px;
    	color:#fff;
    }
    .menu li a.active,
    .menu > li > a:hover {color:#60b001}
    
    /***** slider *****/
    .slider-wrapper {
    	width:850px;
    	height:470px;
    	padding:20px 0 0 130px;
    	margin-top:-120px;
    	position:relative;
    	overflow:hidden;
    	background:url(../images/slider-bg.png) 0 0 no-repeat;
    }
    .slider {
    	position:relative;
    	width:830px;
    	height:431px;
    }
    .items {display:none}
    
    .pagination {
    	position:absolute;
    	left:30px;
    	top:20px;
    	z-index:99;
    }
    	.pagination li {padding-bottom:1px}
    		.pagination li a {
    			display:block;
    			width:101px;
    			height:70px;
    			text-decoration:none;
    			text-align:center;
    			color:#fff;
    			background:url(../images/pagination-a.png) left bottom no-repeat;
    			position:relative;
    			cursor:pointer;
    		}
    		.pagination li a:hover,
    		.pagination li.current a {background-position:left top}
    			.pagination li a strong {
    				display:block;
    				width:50px;
    				height:50px;
    				font-size:30px;
    				line-height:50px;
    				letter-spacing:-2px;
    				position:absolute;
    				left:10px;
    				top:10px;
    			}
    			.pagination .item-1 strong {background:url(../images/pagin-1.png) 0 0 no-repeat}
    			.pagination .item-2 strong {background:url(../images/pagin-2.png) 0 0 no-repeat}
    			.pagination .item-3 strong {background:url(../images/pagin-3.png) 0 0 no-repeat}
    			.pagination .item-4 strong {background:url(../images/pagin-4.png) 0 0 no-repeat}
    			.pagination .item-5 strong {background:url(../images/pagin-1.png) 0 0 no-repeat}
    			.pagination .item-6 strong {background:url(../images/pagin-2.png) 0 0 no-repeat}
    			
    .banner {
    	width:280px;
    	height:346px;
    	padding:65px 10px 20px;
    	color:#fff;
    	font-size:14px;
    	line-height:25px;
    	font-weight:normal;
    	text-align:center;
    	background:url(../images/banner-bg.png) 0 0 no-repeat;
    	border-radius:0 22px 22px 0;
    	position:absolute;
    	right:0;
    	top:0;
    	z-index:99;
    }
    	.banner .close {
    		display:block;
    		width:13px;
    		height:13px;
    		text-indent:-9999px;
    		background:url(../images/close.gif) 0 0 no-repeat;
    		cursor:pointer;
    		position:absolute;
    		right:20px;
    		top:20px;
    		z-index:99;
    	}
    	.banner strong {
    		display:block;
    		font-size:50px;
    		line-height:1.2em;
    		letter-spacing:-2px;
    	}
    	.banner span {
    		display:block;
    		font-weight:bold;
    		text-transform:uppercase;
    		margin-bottom:25px;
    	}
    	.banner b {
    		display:block;
    		font-weight:normal;
    	}
    	
    .button2 {
    	display:inline-block;
    	font-size:14px;
    	line-height:40px;
    	padding:0 25px;
    	color:#000;
    	background:#fff;
    }
    	.button2:hover {color:#fff;background:#000}
    	footer .button2:hover {background:#666}
    
    /*********************************content*************************************/
    #content {
    	width:100%;
    	padding:25px 0 42px;
    	background:url(../images/content-bg.jpg) center -196px repeat-y #f4f5f7;
    }
    
    h2 {
    	font-size:42px;
    	line-height:2em;
    	font-weight:300;
    	color:#151515;
    	text-align:center;
    	letter-spacing:-2px;
    	margin-top:-13px;
    }
    	h2 strong {display:block;margin-top:-43px}
    h3 {
    	font-size:23px;
    	line-height:2em;
    	font-weight:normal;
    	color:#080808;
    }
    h6 {color:#000;margin-bottom:5px}
    
    .border-bot1 {
    	width:100%;
    	padding-bottom:3px;
    	background:url(../images/pic-3.gif) 0 bottom repeat-x;
    }
    .border-bot2 {
    	width:100%;
    	padding-bottom:35px;
    	background:url(../images/pic-2.gif) 0 bottom repeat-x;
    }
    
    .button {
    	display:inline-block;
    	padding:0 24px;
    	margin-left:2px;
    	margin-bottom:2px;
    	font-size:14px;
    	line-height:38px;
    	color:#000;
    	border:1px solid #fff;
    	background:url(../images/button-tail.gif) 0 0 repeat-x #f2f2f2;
    	box-shadow:0 0 2px #bbb;
    	cursor:pointer;
    }
    .button:hover {background:#60b001;color:#fff}
    
    .list-1 li {
    	line-height:10px;
    	padding:9px 0;
    	background:url(../images/pic-1.gif) 0 bottom repeat-x;
    }
    .list-1 li.last-item {background:none}
    	.list-1 li a {color:#808080}
    	.list-1 li a:hover {color:#60b001}
    
    .list-2 li {
    	padding:0 0 15px 30px;
    	background:url(../images/new.png) 0 5px no-repeat;
    }
    	.list-2 li a.item {
    		display:inline-block;
    		font-size:23px;
    		line-height:1.217em;
    		color:#080808;
    		margin-bottom:4px;
    	}
    	.list-2 li a.item:hover {color:#60b001}
    	.list-2 li span {
    		display:block;
    		padding-bottom:16px;
    		background:url(../images/pic-1.gif) 0 bottom repeat-x;
    	}
    	.list-2 .last-item span {background:none;padding-bottom:25px}
    	
    .list-3 {margin-top:-7px}
    .list-3 li {
    	line-height:20px;
    	padding:10px 0;
    	background:url(../images/pic-2.gif) 0 bottom repeat-x;
    }
    	.list-3 li a {
    		display:inline-block;
    		padding-left:30px;
    		color:#fff;
    		background:url(../images/marker-1.png) 0 3px no-repeat;
    	}
    	.list-3 li span {color:#808080;display:inline-block}
    	.list-3 .last-item {background:none}
    
    .link:hover {text-decoration:underline} 
    
    dl dt {font-weight:bold;color:#000;margin-bottom:3px}
    dl span {float:left;width:80px}
    
    #map_canvas {
    	width:260px;
    	height:223px;
    	overflow:hidden;
    }
    
    /***** contact form *****/
    #contact-form {
    	position:relative;
    	vertical-align:top;
    	width:100%;
    	z-index:1;
    	}
    	#contact-form fieldset {
    		border:none;
    		padding:0;
    		}			
    			#contact-form label {
    				display:block;
    				height:50px;
    			}
    			
    			#contact-form input {
    				width:323px;
    				padding:12px 20px;
    				margin:0;
    				font-family:Arial, Helvetica, sans-serif;
    				font-size:14px;
    				line-height:1.214em;
    				color:#808080;
    				border:1px solid #e6e6e6;
    				background:#fff;
    				outline:none;
    			}
    			#contact-form textarea {
    				overflow:auto;
    				height:130px;
    				width:563px;
    				padding:12px 20px;
    				margin:0;
    				font-family:Arial, Helvetica, sans-serif;
    				font-size:14px;
    				line-height:1.214em;
    				color:#808080;
    				border:1px solid #e6e6e6;
    				background:#fff;
    				outline:none;
    			}
    		.buttons-wrapper {padding:18px 0 0 0;text-align:right}
    		.buttons-wrapper a {margin-left:15px}
    		
    /****************************footer************************/
    footer {
    	width:100%;
    	padding:25px 0 46px;
    }
    
    .list-services {
    	margin-top:-5px;
    }
    	.list-services li {
    		line-height:20px;
    		padding:10px 0;
    		background:url(../images/pic-2.gif) 0 bottom repeat-x;
    	}
    	.list-services li.last-item {background:none}
    		.list-services li a {
    			display:inline-block;
    			padding-left:31px;
    			color:#808080;
    			background:url(../images/social-icons.png) 0 0 no-repeat;
    		}
    		.list-services li a.it-2 {background-position:0 -40px}
    		.list-services li a.it-3 {background-position:0 -80px}
    		.list-services li a.it-4 {background-position:0 -120px}
    		.list-services li a:hover {color:#fff}

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Giving only the CSS provides no information to solve your problem

    As I found your site in an other message, I've found an error in your html structure that could be the cause of your problem:
    Code:
    <b class="margin-bot">Whether for Home, Business, Vehicle or Mobile System we will help.<p><b><span style="color:#ff0000">
     See our new Horse Stable System.</p></b></span>
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    isee (06-09-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    8
    Thanked 0 Times in 0 Posts
    That's excellent, thanks... Is making it run through the images faster very tricky? Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •