JQuery Banner vs Dreamweaver Template

@Gwatsima — Next time, make sure you highlight your code and click the </> button so that code appears correctly. :slight_smile:

1 Like

Thanks i 'll do that

We need to see the CSS also.

It would be ideal if you would create a “working page” (one that starts with <doctype html> and closes with </html>) that demonstrates the problem in your favorite browser (be sure to tell us in which browser the code has been tested).

You may even need to include an annotated screen shot that points out the difference between what you see and what you expect to see. Depends on how “obvious” the problem is and how well you have described it.

Be sure to use full URL links to jQuery and any other resources that you use.

You might consider replicating the issue in CodePen.

If the code that you are posting doesn’t replicate the problem for you, it will not allow us to replicate it, either.

We cannot simply guess based on insufficient information.

Sorry I’m new to this things and i have realised i with my account i cannot upload images but let me post the HTML code and CSS

Please create a “working page”. A page that demonstrates the problem so we can see it, too. You can probably use http://placehold.it/ to create substitute images .

Some tips here:-

1 Like

I’m using google chrome

This is the CSS code

.camera_wrap a, .camera_wrap img, 
.camera_wrap ol, .camera_wrap ul, .camera_wrap li,
.camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td
.camera_thumbs_wrap a, .camera_thumbs_wrap img, 
.camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li,
.camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td {
	background: none;
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	list-style: none
}
.camera_wrap {
	direction: ltr;
	display: none;
	float: left;
	position: relative;
	z-index: 0;
}
.camera_wrap img {
	max-width: none!important;
}
.camera_fakehover {
	height: 100%;
	min-height: 60px;
	position: relative;
	width: 100%;
	z-index: 1;
}
.camera_wrap {
	width: 100%;
}
.camera_src {
	display: none;
}
.cameraCont, .cameraContents {
	height: 100%;
	position: relative;
	width: 100%;
	z-index: 1;
}
.cameraSlide {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
.cameraContent {
	bottom: 0;
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
.camera_target {
	bottom: 0;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	text-align: left;
	top: 0;
	width: 100%;
	z-index: 0;
}
.camera_overlayer {
	bottom: 0;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}
.camera_target_content {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}
.camera_target_content .camera_link {
    background: url(../images/blank.gif);
	display: block;
	height: 100%;
	text-decoration: none;
}
.camera_loader {
    background: #fff url(../images/camera-loader.gif) no-repeat center;
	background: rgba(255, 255, 255, 0.9) url(../images/camera-loader.gif) no-repeat center;
	border: 1px solid #ffffff;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	height: 36px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	margin: -18px 0 0 -18px;
	top: 50%;
	width: 36px;
	z-index: 3;
}
.camera_bar {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}
.camera_thumbs_wrap.camera_left .camera_bar, .camera_thumbs_wrap.camera_right .camera_bar {
	height: 100%;
	position: absolute;
	width: auto;
}
.camera_thumbs_wrap.camera_bottom .camera_bar, .camera_thumbs_wrap.camera_top .camera_bar {
	height: auto;
	position: absolute;
	width: 100%;
}
.camera_nav_cont {
	height: 65px;
	overflow: hidden;
	position: absolute;
	right: 9px;
	top: 15px;
	width: 120px;
	z-index: 4;
}
.camera_caption {
	bottom: 0;
	display: block;
	position: absolute;
	width: 100%;
}
.camera_caption > div {
	padding: 10px 20px;
}
.camerarelative {
	overflow: hidden;
	position: relative;
}
.imgFake {
	cursor: pointer;
}
.camera_prevThumbs {
	bottom: 4px;
	cursor: pointer;
	left: 0;
	position: absolute;
	top: 4px;
	visibility: hidden;
	width: 30px;
	z-index: 10;
}
.camera_prevThumbs div {
	background: url(../images/camera_skins.png) no-repeat -160px 0;
	display: block;
	height: 40px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	width: 30px;
}
.camera_nextThumbs {
	bottom: 4px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 4px;
	visibility: hidden;
	width: 30px;
	z-index: 10;
}
.camera_nextThumbs div {
	background: url(../images/camera_skins.png) no-repeat -190px 0;
	display: block;
	height: 40px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	width: 30px;
}
.camera_command_wrap .hideNav {
	display: none;
}
.camera_command_wrap {
	left: 0;
	position: relative;
	right:0;
	z-index: 4;
}
.camera_wrap .camera_pag .camera_pag_ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
.camera_wrap .camera_pag .camera_pag_ul li {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	height: 16px;
	margin: 20px 5px;
	position: relative;
	text-align: left;
	text-indent: 9999px;
	width: 16px;
}
.camera_commands_emboss .camera_pag .camera_pag_ul li {
	-moz-box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
	box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
}
.camera_wrap .camera_pag .camera_pag_ul li > span {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	height: 8px;
	left: 4px;
	overflow: hidden;
	position: absolute;
	top: 4px;
	width: 8px;
}
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span {
	-moz-box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
	box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
	-moz-box-shadow: 0;
	-webkit-box-shadow: 0;
	box-shadow: 0;
}
.camera_pag_ul li img {
	display: none;
	position: absolute;
}
.camera_pag_ul .thumb_arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid;
	top: 0;
	left: 50%;
	margin-left: -4px;
	position: absolute;
}
.camera_prev, .camera_next, .camera_commands {
	cursor: pointer;
	height: 40px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	width: 40px;
	z-index: 2;
}
.camera_prev {
	left: 0;
}
.camera_prev > span {
	background: url(../images/camera_skins.png) no-repeat 0 0;
	display: block;
	height: 40px;
	width: 40px;
}
.camera_next {
	right: 0;
}
.camera_next > span {
	background: url(../images/camera_skins.png) no-repeat -40px 0;
	display: block;
	height: 40px;
	width: 40px;
}
.camera_commands {
	right: 41px;
}
.camera_commands > .camera_play {
	background: url(../images/camera_skins.png) no-repeat -80px 0;
	height: 40px;
	width: 40px;
}
.camera_commands > .camera_stop {
	background: url(../images/camera_skins.png) no-repeat -120px 0;
	display: block;
	height: 40px;
	width: 40px;
}
.camera_wrap .camera_pag .camera_pag_ul li {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	height: 16px;
	margin: 20px 5px;
	position: relative;
	text-indent: 9999px;
	width: 16px;
}
.camera_thumbs_cont {
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.camera_commands_emboss .camera_thumbs_cont {
	-moz-box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
	box-shadow:
		0px 1px 0px rgba(255,255,255,1),
		inset 0px 1px 1px rgba(0,0,0,0.2);
}
.camera_thumbs_cont > div {
	float: left;
	width: 100%;
}
.camera_thumbs_cont ul {
	overflow: hidden;
	padding: 3px 4px 8px;
	position: relative;
	text-align: center;
}
.camera_thumbs_cont ul li {
	display: inline;
	padding: 0 4px;
}
.camera_thumbs_cont ul li > img {
	border: 1px solid;
	cursor: pointer;
	margin-top: 5px;
	vertical-align:bottom;
}
.camera_clear {
	display: block;
	clear: both;
}
.showIt {
	display: none;
}
.camera_clear {
	clear: both;
	display: block;
	height: 1px;
	margin: -1px 0 25px;
	position: relative;
}
/**************************
*
*	COLORS & SKINS
*
**************************/
.pattern_1 .camera_overlayer {
	background: url(../images/patterns/overlay1.png) repeat;
}
.pattern_2 .camera_overlayer {
	background: url(../images/patterns/overlay2.png) repeat;
}
.pattern_3 .camera_overlayer {
	background: url(../images/patterns/overlay3.png) repeat;
}
.pattern_4 .camera_overlayer {
	background: url(../images/patterns/overlay4.png) repeat;
}
.pattern_5 .camera_overlayer {
	background: url(../images/patterns/overlay5.png) repeat;
}
.pattern_6 .camera_overlayer {
	background: url(../images/patterns/overlay6.png) repeat;
}
.pattern_7 .camera_overlayer {
	background: url(../images/patterns/overlay7.png) repeat;
}
.pattern_8 .camera_overlayer {
	background: url(../images/patterns/overlay8.png) repeat;
}
.pattern_9 .camera_overlayer {
	background: url(../images/patterns/overlay9.png) repeat;
}
.pattern_10 .camera_overlayer {
	background: url(../images/patterns/overlay10.png) repeat;
}
.camera_caption {
	color: #fff;
}
.camera_caption > div {
	background: #000;
	background: rgba(0, 0, 0, 0.8);
}
.camera_wrap .camera_pag .camera_pag_ul li {
	background: #b7b7b7;
}
.camera_wrap .camera_pag .camera_pag_ul li:hover > span {
	background: #b7b7b7;
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
	background: #434648;
}
.camera_pag_ul li img {
	border: 4px solid #e6e6e6;
	-moz-box-shadow: 0px 3px 6px rgba(0,0,0,.5);
	-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.5);
	box-shadow: 0px 3px 6px rgba(0,0,0,.5);
}
.camera_pag_ul .thumb_arrow {
    border-top-color: #e6e6e6;
}
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands, .camera_thumbs_cont {
	background: #d8d8d8;
	background: rgba(216, 216, 216, 0.85);
}
.camera_wrap .camera_pag .camera_pag_ul li {
	background: #b7b7b7;
}
.camera_thumbs_cont ul li > img {
	border-color: 1px solid #000;
}
/*AMBER SKIN*/
.camera_amber_skin .camera_prevThumbs div {
	background-position: -160px -160px;
}
.camera_amber_skin .camera_nextThumbs div {
	background-position: -190px -160px;
}
.camera_amber_skin .camera_prev > span {
	background-position: 0 -160px;
}
.camera_amber_skin .camera_next > span {
	background-position: -40px -160px;
}
.camera_amber_skin .camera_commands > .camera_play {
	background-position: -80px -160px;
}
.camera_amber_skin .camera_commands > .camera_stop {
	background-position: -120px -160px;
}
/*ASH SKIN*/
.camera_ash_skin .camera_prevThumbs div {
	background-position: -160px -200px;
}
.camera_ash_skin .camera_nextThumbs div {
	background-position: -190px -200px;
}
.camera_ash_skin .camera_prev > span {
	background-position: 0 -200px;
}
.camera_ash_skin .camera_next > span {
	background-position: -40px -200px;
}
.camera_ash_skin .camera_commands > .camera_play {
	background-position: -80px -200px;
}
.camera_ash_skin .camera_commands > .camera_stop {
	background-position: -120px -200px;
}
/*AZURE SKIN*/
.camera_azure_skin .camera_prevThumbs div {
	background-position: -160px -240px;
}
.camera_azure_skin .camera_nextThumbs div {
	background-position: -190px -240px;
}
.camera_azure_skin .camera_prev > span {
	background-position: 0 -240px;
}
.camera_azure_skin .camera_next > span {
	background-position: -40px -240px;
}
.camera_azure_skin .camera_commands > .camera_play {
	background-position: -80px -240px;
}
.camera_azure_skin .camera_commands > .camera_stop {
	background-position: -120px -240px;
}
/*BEIGE SKIN*/
.camera_beige_skin .camera_prevThumbs div {
	background-position: -160px -120px;
}
.camera_beige_skin .camera_nextThumbs div {
	background-position: -190px -120px;
}
.camera_beige_skin .camera_prev > span {
	background-position: 0 -120px;
}
.camera_beige_skin .camera_next > span {
	background-position: -40px -120px;
}
.camera_beige_skin .camera_commands > .camera_play {
	background-position: -80px -120px;
}
.camera_beige_skin .camera_commands > .camera_stop {
	background-position: -120px -120px;
}
/*BLACK SKIN*/
.camera_black_skin .camera_prevThumbs div {
	background-position: -160px -40px;
}
.camera_black_skin .camera_nextThumbs div {
	background-position: -190px -40px;
}
.camera_black_skin .camera_prev > span {
	background-position: 0 -40px;
}
.camera_black_skin .camera_next > span {
	background-position: -40px -40px;
}
.camera_black_skin .camera_commands > .camera_play {
	background-position: -80px -40px;
}
.camera_black_skin .camera_commands > .camera_stop {
	background-position: -120px -40px;
}
/*BLUE SKIN*/
.camera_blue_skin .camera_prevThumbs div {
	background-position: -160px -280px;
}
.camera_blue_skin .camera_nextThumbs div {
	background-position: -190px -280px;
}
.camera_blue_skin .camera_prev > span {
	background-position: 0 -280px;
}
.camera_blue_skin .camera_next > span {
	background-position: -40px -280px;
}
.camera_blue_skin .camera_commands > .camera_play {
	background-position: -80px -280px;
}
.camera_blue_skin .camera_commands > .camera_stop {
	background-position: -120px -280px;
}
/*BROWN SKIN*/
.camera_brown_skin .camera_prevThumbs div {
	background-position: -160px -320px;
}
.camera_brown_skin .camera_nextThumbs div {
	background-position: -190px -320px;
}
.camera_brown_skin .camera_prev > span {
	background-position: 0 -320px;
}
.camera_brown_skin .camera_next > span {
	background-position: -40px -320px;
}
.camera_brown_skin .camera_commands > .camera_play {
	background-position: -80px -320px;
}
.camera_brown_skin .camera_commands > .camera_stop {
	background-position: -120px -320px;
}
/*BURGUNDY SKIN*/
.camera_burgundy_skin .camera_prevThumbs div {
	background-position: -160px -360px;
}
.camera_burgundy_skin .camera_nextThumbs div {
	background-position: -190px -360px;
}
.camera_burgundy_skin .camera_prev > span {
	background-position: 0 -360px;
}
.camera_burgundy_skin .camera_next > span {
	background-position: -40px -360px;
}
.camera_burgundy_skin .camera_commands > .camera_play {
	background-position: -80px -360px;
}
.camera_burgundy_skin .camera_commands > .camera_stop {
	background-position: -120px -360px;
}
/*CHARCOAL SKIN*/
.camera_charcoal_skin .camera_prevThumbs div {
	background-position: -160px -400px;
}
.camera_charcoal_skin .camera_nextThumbs div {
	background-position: -190px -400px;
}
.camera_charcoal_skin .camera_prev > span {
	background-position: 0 -400px;
}
.camera_charcoal_skin .camera_next > span {
	background-position: -40px -400px;
}
.camera_charcoal_skin .camera_commands > .camera_play {
	background-position: -80px -400px;
}
.camera_charcoal_skin .camera_commands > .camera_stop {
	background-position: -120px -400px;
}
/*CHOCOLATE SKIN*/
.camera_chocolate_skin .camera_prevThumbs div {
	background-position: -160px -440px;
}
.camera_chocolate_skin .camera_nextThumbs div {
	background-position: -190px -440px;
}
.camera_chocolate_skin .camera_prev > span {
	background-position: 0 -440px;
}
.camera_chocolate_skin .camera_next > span {
	background-position: -40px -440px;
}
.camera_chocolate_skin .camera_commands > .camera_play {
	background-position: -80px -440px;
}
.camera_chocolate_skin .camera_commands > .camera_stop {
	background-position: -120px -440px	;
}
/*COFFEE SKIN*/
.camera_coffee_skin .camera_prevThumbs div {
	background-position: -160px -480px;
}
.camera_coffee_skin .camera_nextThumbs div {
	background-position: -190px -480px;
}
.camera_coffee_skin .camera_prev > span {
	background-position: 0 -480px;
}
.camera_coffee_skin .camera_next > span {
	background-position: -40px -480px;
}
.camera_coffee_skin .camera_commands > .camera_play {
	background-position: -80px -480px;
}
.camera_coffee_skin .camera_commands > .camera_stop {
	background-position: -120px -480px	;
}
/*CYAN SKIN*/
.camera_cyan_skin .camera_prevThumbs div {
	background-position: -160px -520px;
}
.camera_cyan_skin .camera_nextThumbs div {
	background-position: -190px -520px;
}
.camera_cyan_skin .camera_prev > span {
	background-position: 0 -520px;
}
.camera_cyan_skin .camera_next > span {
	background-position: -40px -520px;
}
.camera_cyan_skin .camera_commands > .camera_play {
	background-position: -80px -520px;
}
.camera_cyan_skin .camera_commands > .camera_stop {
	background-position: -120px -520px	;
}
/*FUCHSIA SKIN*/
.camera_fuchsia_skin .camera_prevThumbs div {
	background-position: -160px -560px;
}
.camera_fuchsia_skin .camera_nextThumbs div {
	background-position: -190px -560px;
}
.camera_fuchsia_skin .camera_prev > span {
	background-position: 0 -560px;
}
.camera_fuchsia_skin .camera_next > span {
	background-position: -40px -560px;
}
.camera_fuchsia_skin .camera_commands > .camera_play {
	background-position: -80px -560px;
}
.camera_fuchsia_skin .camera_commands > .camera_stop {
	background-position: -120px -560px	;
}
/*GOLD SKIN*/
.camera_gold_skin .camera_prevThumbs div {
	background-position: -160px -600px;
}
.camera_gold_skin .camera_nextThumbs div {
	background-position: -190px -600px;
}
.camera_gold_skin .camera_prev > span {
	background-position: 0 -600px;
}
.camera_gold_skin .camera_next > span {
	background-position: -40px -600px;
}
.camera_gold_skin .camera_commands > .camera_play {
	background-position: -80px -600px;
}
.camera_gold_skin .camera_commands > .camera_stop {
	background-position: -120px -600px	;
}
/*GREEN SKIN*/
.camera_green_skin .camera_prevThumbs div {
	background-position: -160px -640px;
}
.camera_green_skin .camera_nextThumbs div {
	background-position: -190px -640px;
}
.camera_green_skin .camera_prev > span {
	background-position: 0 -640px;
}
.camera_green_skin .camera_next > span {
	background-position: -40px -640px;
}
.camera_green_skin .camera_commands > .camera_play {
	background-position: -80px -640px;
}
.camera_green_skin .camera_commands > .camera_stop {
	background-position: -120px -640px	;
}
/*GREY SKIN*/
.camera_grey_skin .camera_prevThumbs div {
	background-position: -160px -680px;
}
.camera_grey_skin .camera_nextThumbs div {
	background-position: -190px -680px;
}
.camera_grey_skin .camera_prev > span {
	background-position: 0 -680px;
}
.camera_grey_skin .camera_next > span {
	background-position: -40px -680px;
}
.camera_grey_skin .camera_commands > .camera_play {
	background-position: -80px -680px;
}
.camera_grey_skin .camera_commands > .camera_stop {
	background-position: -120px -680px	;
}
/*INDIGO SKIN*/
.camera_indigo_skin .camera_prevThumbs div {
	background-position: -160px -720px;
}
.camera_indigo_skin .camera_nextThumbs div {
	background-position: -190px -720px;
}
.camera_indigo_skin .camera_prev > span {
	background-position: 0 -720px;
}
.camera_indigo_skin .camera_next > span {
	background-position: -40px -720px;
}
.camera_indigo_skin .camera_commands > .camera_play {
	background-position: -80px -720px;
}
.camera_indigo_skin .camera_commands > .camera_stop {
	background-position: -120px -720px	;
}
/*KHAKI SKIN*/
.camera_khaki_skin .camera_prevThumbs div {
	background-position: -160px -760px;
}
.camera_khaki_skin .camera_nextThumbs div {
	background-position: -190px -760px;
}
.camera_khaki_skin .camera_prev > span {
	background-position: 0 -760px;
}
.camera_khaki_skin .camera_next > span {
	background-position: -40px -760px;
}
.camera_khaki_skin .camera_commands > .camera_play {
	background-position: -80px -760px;
}
.camera_khaki_skin .camera_commands > .camera_stop {
	background-position: -120px -760px	;
}
/*LIME SKIN*/
.camera_lime_skin .camera_prevThumbs div {
	background-position: -160px -800px;
}
.camera_lime_skin .camera_nextThumbs div {
	background-position: -190px -800px;
}
.camera_lime_skin .camera_prev > span {
	background-position: 0 -800px;
}
.camera_lime_skin .camera_next > span {
	background-position: -40px -800px;
}
.camera_lime_skin .camera_commands > .camera_play {
	background-position: -80px -800px;
}
.camera_lime_skin .camera_commands > .camera_stop {
	background-position: -120px -800px	;
}
/*MAGENTA SKIN*/
.camera_magenta_skin .camera_prevThumbs div {
	background-position: -160px -840px;
}
.camera_magenta_skin .camera_nextThumbs div {
	background-position: -190px -840px;
}
.camera_magenta_skin .camera_prev > span {
	background-position: 0 -840px;
}
.camera_magenta_skin .camera_next > span {
	background-position: -40px -840px;
}
.camera_magenta_skin .camera_commands > .camera_play {
	background-position: -80px -840px;
}
.camera_magenta_skin .camera_commands > .camera_stop {
	background-position: -120px -840px	;
}
/*MAROON SKIN*/
.camera_maroon_skin .camera_prevThumbs div {
	background-position: -160px -880px;
}
.camera_maroon_skin .camera_nextThumbs div {
	background-position: -190px -880px;
}
.camera_maroon_skin .camera_prev > span {
	background-position: 0 -880px;
}
.camera_maroon_skin .camera_next > span {
	background-position: -40px -880px;
}
.camera_maroon_skin .camera_commands > .camera_play {
	background-position: -80px -880px;
}
.camera_maroon_skin .camera_commands > .camera_stop {
	background-position: -120px -880px	;
}
/*ORANGE SKIN*/
.camera_orange_skin .camera_prevThumbs div {
	background-position: -160px -920px;
}
.camera_orange_skin .camera_nextThumbs div {
	background-position: -190px -920px;
}
.camera_orange_skin .camera_prev > span {
	background-position: 0 -920px;
}
.camera_orange_skin .camera_next > span {
	background-position: -40px -920px;
}
.camera_orange_skin .camera_commands > .camera_play {
	background-position: -80px -920px;
}
.camera_orange_skin .camera_commands > .camera_stop {
	background-position: -120px -920px	;
}
/*OLIVE SKIN*/
.camera_olive_skin .camera_prevThumbs div {
	background-position: -160px -1080px;
}
.camera_olive_skin .camera_nextThumbs div {
	background-position: -190px -1080px;
}
.camera_olive_skin .camera_prev > span {
	background-position: 0 -1080px;
}
.camera_olive_skin .camera_next > span {
	background-position: -40px -1080px;
}
.camera_olive_skin .camera_commands > .camera_play {
	background-position: -80px -1080px;
}
.camera_olive_skin .camera_commands > .camera_stop {
	background-position: -120px -1080px	;
}
/*PINK SKIN*/
.camera_pink_skin .camera_prevThumbs div {
	background-position: -160px -960px;
}
.camera_pink_skin .camera_nextThumbs div {
	background-position: -190px -960px;
}
.camera_pink_skin .camera_prev > span {
	background-position: 0 -960px;
}
.camera_pink_skin .camera_next > span {
	background-position: -40px -960px;
}
.camera_pink_skin .camera_commands > .camera_play {
	background-position: -80px -960px;
}
.camera_pink_skin .camera_commands > .camera_stop {
	background-position: -120px -960px	;
}
/*PISTACHIO SKIN*/
.camera_pistachio_skin .camera_prevThumbs div {
	background-position: -160px -1040px;
}
.camera_pistachio_skin .camera_nextThumbs div {
	background-position: -190px -1040px;
}
.camera_pistachio_skin .camera_prev > span {
	background-position: 0 -1040px;
}
.camera_pistachio_skin .camera_next > span {
	background-position: -40px -1040px;
}
.camera_pistachio_skin .camera_commands > .camera_play {
	background-position: -80px -1040px;
}
.camera_pistachio_skin .camera_commands > .camera_stop {
	background-position: -120px -1040px	;
}
/*PINK SKIN*/
.camera_pink_skin .camera_prevThumbs div {
	background-position: -160px -80px;
}
.camera_pink_skin .camera_nextThumbs div {
	background-position: -190px -80px;
}
.camera_pink_skin .camera_prev > span {
	background-position: 0 -80px;
}
.camera_pink_skin .camera_next > span {
	background-position: -40px -80px;
}
.camera_pink_skin .camera_commands > .camera_play {
	background-position: -80px -80px;
}
.camera_pink_skin .camera_commands > .camera_stop {
	background-position: -120px -80px;
}
/*RED SKIN*/
.camera_red_skin .camera_prevThumbs div {
	background-position: -160px -1000px;
}
.camera_red_skin .camera_nextThumbs div {
	background-position: -190px -1000px;
}
.camera_red_skin .camera_prev > span {
	background-position: 0 -1000px;
}
.camera_red_skin .camera_next > span {
	background-position: -40px -1000px;
}
.camera_red_skin .camera_commands > .camera_play {
	background-position: -80px -1000px;
}
.camera_red_skin .camera_commands > .camera_stop {
	background-position: -120px -1000px	;
}
/*TANGERINE SKIN*/
.camera_tangerine_skin .camera_prevThumbs div {
	background-position: -160px -1120px;
}
.camera_tangerine_skin .camera_nextThumbs div {
	background-position: -190px -1120px;
}
.camera_tangerine_skin .camera_prev > span {
	background-position: 0 -1120px;
}
.camera_tangerine_skin .camera_next > span {
	background-position: -40px -1120px;
}
.camera_tangerine_skin .camera_commands > .camera_play {
	background-position: -80px -1120px;
}
.camera_tangerine_skin .camera_commands > .camera_stop {
	background-position: -120px -1120px	;
}
/*TURQUOISE SKIN*/
.camera_turquoise_skin .camera_prevThumbs div {
	background-position: -160px -1160px;
}
.camera_turquoise_skin .camera_nextThumbs div {
	background-position: -190px -1160px;
}
.camera_turquoise_skin .camera_prev > span {
	background-position: 0 -1160px;
}
.camera_turquoise_skin .camera_next > span {
	background-position: -40px -1160px;
}
.camera_turquoise_skin .camera_commands > .camera_play {
	background-position: -80px -1160px;
}
.camera_turquoise_skin .camera_commands > .camera_stop {
	background-position: -120px -1160px	;
}
/*VIOLET SKIN*/
.camera_violet_skin .camera_prevThumbs div {
	background-position: -160px -1200px;
}
.camera_violet_skin .camera_nextThumbs div {
	background-position: -190px -1200px;
}
.camera_violet_skin .camera_prev > span {
	background-position: 0 -1200px;
}
.camera_violet_skin .camera_next > span {
	background-position: -40px -1200px;
}
.camera_violet_skin .camera_commands > .camera_play {
	background-position: -80px -1200px;
}
.camera_violet_skin .camera_commands > .camera_stop {
	background-position: -120px -1200px	;
}
/*WHITE SKIN*/
.camera_white_skin .camera_prevThumbs div {
	background-position: -160px -80px;
}
.camera_white_skin .camera_nextThumbs div {
	background-position: -190px -80px;
}
.camera_white_skin .camera_prev > span {
	background-position: 0 -80px;
}
.camera_white_skin .camera_next > span {
	background-position: -40px -80px;
}
.camera_white_skin .camera_commands > .camera_play {
	background-position: -80px -80px;
}
.camera_white_skin .camera_commands > .camera_stop {
	background-position: -120px -80px;
}
/*YELLOW SKIN*/
.camera_yellow_skin .camera_prevThumbs div {
	background-position: -160px -1240px;
}
.camera_yellow_skin .camera_nextThumbs div {
	background-position: -190px -1240px;
}
.camera_yellow_skin .camera_prev > span {
	background-position: 0 -1240px;
}
.camera_yellow_skin .camera_next > span {
	background-position: -40px -1240px;
}
.camera_yellow_skin .camera_commands > .camera_play {
	background-position: -80px -1240px;
}
.camera_yellow_skin .camera_commands > .camera_stop {
	background-position: -120px -1240px	;
}

This is the HTML code - this is the template .dwt code, which is working properly.

<!DOCTYPE html>

<html>
<head>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Home of events</title>
<!-- TemplateEndEditable -->
<link href="../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link rel='stylesheet' id='camera-css'  href='../css/camera.css' type='text/css' media='all'>
<script src="../js/fixedheader.js"></script>
<link href="../css/fixedheader.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/elastic.css" rel="stylesheet" type="text/css" media="screen>
<script src="js/jquery.eislideshow.js">
</script>
<link href="../css/menu.css" rel="stylesheet" type="text/css" media="all">
<script src="../js/menu.js"></script>
<script src="../js/camera.min.js"></script>
<script src="../js/jquery.easing.1.3.js"></script>
<script src="../js/jquery.mobile.customized.min.js"></script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script>
       
        jQuery(function(){
			
			jQuery('#camera_wrap_1').camera({
				thumbnails: true
			});

			jQuery('#camera_wrap_2').camera({
				height: '400px',
				loader: 'bar',
				pagination: false,
				thumbnails: true
			});
		});
	</script>
</head>

<body>
<div id="topnav">
<ul id="menu">
  <li><a href="../index.html" class="drop">Home</a><!-- Begin Home Item -->
    
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->
      
      <div class="col_2">
        <h2>Welcome !</h2>
      </div>
      <div class="col_2">
        <p>Hi and welcome to our site. Events and Planning is our passion and we love to put a smile on your face.</p>
        <p>We have gone that extra mile so that you can be at peace on that special occassion and enjoy the moment with the knowledge that we got you.</p>
      </div>
      <div class="col_2">
        <h2>Feel Free To Browse And Contact Us At Any Time</h2>
      </div>
      <div class="col_1"><img src="../images/conference.jpg" width="125" height="48" alt="" /> </div>
      <div class="col_1">
        <p>For more information call 0711111111</p>
      </div>
    </div>
    <!-- End 2 columns container --> 
    
  </li>
  <!-- End Home Item -->
  
  <li><a href="#" class="drop">Products & Services</a><!-- Begin 4 columns Item -->
    
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
      
      <div class="col_4">
        <h2>Our Services And Much More..... </h2>
      </div>
      <div class="col_1">
        <h3>Wedding-Package</h3>
        <ul>
          <li><a href="../weddingpackages.html">Choose from a Variety</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Corporate Events</h3>
        <ul>
          <li><a href="../Corporate Events.html">Corporate Events</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Conferences</h3>
        <ul>
          <li><a href="../conferences.html">Conferences</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Celebrations</h3>
        <ul>
          <li><a href="../celebrations.html">Celebrations</a></li>
        </ul>
      </div>
    </div>
    <!-- End 4 columns container --> 
    
  </li>
  <!-- End 4 columns Item -->
  
  <li><a href="../about.html" class="drop">Who We Are</a><!-- Begin 4 columns Item -->
    
    <div class="dropdown_4columns">
    <!-- Begin 4 columns container -->
    
    <div class="col_4"> <strong>
      <p3>
      We are a company with only one priority, to put a smile on your face.
      </p>
      </strong><br>
      Click the About Us link for more........ </div>
  <li class="menu_right"> <a href="#" class="drop">Our Partners</a>
    <div class="dropdown_1column align_right">
      <div class="col_1">
        <ul class="simple">
          <li><a href="#">Partner 1</a></li>
          <li><a href="#">Partner 2</a></li>
          <li><a href="#">Partner 3</a></li>
          <li><a href="#">More...</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li><a href="#" class="drop">Events</a><!-- Begin 4 columns Item -->
    
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
      
      <div class="col_4">
        <h2>Current & Past Events</h2>
      </div>
      <div class="col_1">
        <h3>Current Events</h3>
        <ul>
          <li><a href="../currentevents.html">Present</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Past Events</h3>
        <ul>
          <li><a href="../pastevents.html">Past</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Up-Coming Events</h3>
        <ul>
          <li><a href="../future.html">Future</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Event Tips</h3>
        <ul>
          <li><a href="../eventtips.html">Tips</a></li>
        </ul>
      </div>
    </div>
    <!-- End 4 columns container --> 
    
  </li>
  <!-- End 4 columns Item -->
  
  </div>
</ul>
</div>
<div id="wrapper">
<div id="header-fixed"><img src="../images/headers/images/images/headertranfinal_03_02.png" class="img"> </div>

    
	<div class="fluid_container">
        <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
            <div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/banner/image-1.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald. <em>Very best of Decoswald</em>
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/banner/image-2.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald, <em>Very best of Decoswald</em>
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/banner/image-3.png">
                <div class="camera_caption fadeFromBottom">
                    <em>Very best of Decoswald</em> (even if a donation is appreciated)
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/banner/image-4.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald <em>Very best of Decoswald</em> Very best of Decoswald
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/shelter.jpg" data-src="../images/banner/image-5.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald <em>Very best of Decoswald</em> (<a href="" target="_blank">have a look</a>)
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/tree.jpg" data-src="../images/banner/image-2.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald</em>
                </div>
            </div>
        </div><!-- #camera_wrap_1 -->

    
    <div style="clear:both; display:block; height:100px"></div>

<div id="social-media">
  <ul>
    <li><a href="http://www.facebook.com"</a><img src="../images/illustrations/socialmedia/clean-icon-set/facebook1.png"></a></li>
    <li><a href="http://www.twitter.com"</a><img src="../images/illustrations/socialmedia/clean-icon-set/twitter1.png"></a></li>
    <li><a href="http://www.youtube.com"</a><img src="../images/illustrations/socialmedia/clean-icon-set/youtube1.png"></a></li>
    <li><a href="http://www.vimeo.com"</a><img src="../images/illustrations/socialmedia/clean-icon-set/vimeo1.png"></a></li>
    <li><a href="#"</a><img src="../images/illustrations/socialmedia/clean-icon-set/rss1.png"></a></li>
  </ul>
</div> 

<!-- TemplateBeginEditable name="EditRegion3" -->
<div id="content">
  <h1>Introduction to Events and Planning</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod<br>
    tempor invidunt ut labore et dolore magna									 						aliquyam erat, sed diam voluptua. <br>
    At vero eos et accusam et justo duo dolores et ea rebum ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsa. </p>
</div>
<!-- TemplateEndEditable -->
<div class="rightside">
<h2>Tip Of The Day.</h2>
<ul>
<h4>Look on the internet and in magazines for design ideas.</h4>
It will take many person-hours of looking at your computer. Truth be told, you might not find the perfect cake design in a single place. It is easy, however, to look here and then there until you find the cake designs which when combined come-up with that unique design.<a href="../eventtips.html">
<p class="submit">
  <input type="submit" value="More.....">
  </a> <img src="../images/gogothere.png" alt="Event"; class="imagecontent1"> </p>
</div>
<div class="footer">
  <P>Copyright &COPY DECOSWALD ENTERPRISES 2015<br>
    ALL RIGHTS RESERVED</P>
</div>
</div>
</body>
<script type="text/javascript" defer src="https://mylivechat.com/chatinline.aspx?hccid=74106426"></script>
</html>

This is one of the child page not rendering the banner slide

<!DOCTYPE html>

<html><!-- InstanceBegin template="/Templates/indextemp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Wedding Packages</title>
<!-- InstanceEndEditable -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'>
<script src="js/fixedheader.js"></script>
<link href="css/fixedheader.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/elastic.css" rel="stylesheet" type="text/css" media="screen>
<script src="js/jquery.eislideshow.js">
</script>
<link href="css/menu.css" rel="stylesheet" type="text/css" media="all">
<script src="js/menu.js"></script>
<script src="js/camera.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobile.customized.min.js"></script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script>
       
        jQuery(function(){
			
			jQuery('#camera_wrap_1').camera({
				thumbnails: true
			});

			jQuery('#camera_wrap_2').camera({
				height: '400px',
				loader: 'bar',
				pagination: false,
				thumbnails: true
			});
		});
	</script>
</head>

<body>
<div id="topnav">
<ul id="menu">
  <li><a href="index.html" class="drop">Home</a><!-- Begin Home Item -->
    
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->
      
      <div class="col_2">
        <h2>Welcome !</h2>
      </div>
      <div class="col_2">
        <p>Hi and welcome to our site. Events and Planning is our passion and we love to put a smile on your face.</p>
        <p>We have gone that extra mile so that you can be at peace on that special occassion and enjoy the moment with the knowledge that we got you.</p>
      </div>
      <div class="col_2">
        <h2>Feel Free To Browse And Contact Us At Any Time</h2>
      </div>
      <div class="col_1"><img src="images/conference.jpg" width="125" height="48" alt="" /> </div>
      <div class="col_1">
        <p>For more information call 0711111111</p>
      </div>
    </div>
    <!-- End 2 columns container --> 
    
  </li>
  <!-- End Home Item -->
  
  <li><a href="#" class="drop">Products & Services</a><!-- Begin 4 columns Item -->
    
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
      
      <div class="col_4">
        <h2>Our Services And Much More..... </h2>
      </div>
      <div class="col_1">
        <h3>Wedding-Package</h3>
        <ul>
          <li><a href="weddingpackages.html">Choose from a Variety</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Corporate Events</h3>
        <ul>
          <li><a href="Corporate%20Events.html">Corporate Events</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Conferences</h3>
        <ul>
          <li><a href="conferences.html">Conferences</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Celebrations</h3>
        <ul>
          <li><a href="celebrations.html">Celebrations</a></li>
        </ul>
      </div>
    </div>
    <!-- End 4 columns container --> 
    
  </li>
  <!-- End 4 columns Item -->
  
  <li><a href="about.html" class="drop">Who We Are</a><!-- Begin 4 columns Item -->
    
    <div class="dropdown_4columns">
    <!-- Begin 4 columns container -->
    
    <div class="col_4"> <strong>
      <p3>
      We are a company with only one priority, to put a smile on your face.
      </p>
      </strong><br>
      Click the About Us link for more........ </div>
  <li class="menu_right"> <a href="#" class="drop">Our Partners</a>
    <div class="dropdown_1column align_right">
      <div class="col_1">
        <ul class="simple">
          <li><a href="#">Partner 1</a></li>
          <li><a href="#">Partner 2</a></li>
          <li><a href="#">Partner 3</a></li>
          <li><a href="#">More...</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li><a href="#" class="drop">Events</a><!-- Begin 4 columns Item -->
    
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
      
      <div class="col_4">
        <h2>Current & Past Events</h2>
      </div>
      <div class="col_1">
        <h3>Current Events</h3>
        <ul>
          <li><a href="currentevents.html">Present</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Past Events</h3>
        <ul>
          <li><a href="pastevents.html">Past</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Up-Coming Events</h3>
        <ul>
          <li><a href="future.html">Future</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Event Tips</h3>
        <ul>
          <li><a href="eventtips.html">Tips</a></li>
        </ul>
      </div>
    </div>
    <!-- End 4 columns container --> 
    
  </li>
  <!-- End 4 columns Item -->
  
  </div>
</ul>
</div>
<div id="wrapper">
<div id="header-fixed"><img src="images/headers/images/images/headertranfinal_03_02.png" class="img"> </div>

    
	<div class="fluid_container">
        <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
            <div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/banner/image-1.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald. <em>Very best of Decoswald</em>
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/banner/image-2.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald, <em>Very best of Decoswald</em>
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/banner/image-3.png">
                <div class="camera_caption fadeFromBottom">
                    <em>Very best of Decoswald</em> (even if a donation is appreciated)
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/banner/image-4.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald <em>Very best of Decoswald</em> Very best of Decoswald
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/shelter.jpg" data-src="../images/banner/image-5.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald <em>Very best of Decoswald</em> (<a href="" target="_blank">have a look</a>)
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/tree.jpg" data-src="../images/banner/image-2.png">
                <div class="camera_caption fadeFromBottom">
                    Very best of Decoswald</em>
                </div>
            </div>
        </div><!-- #camera_wrap_1 -->

    
    <div style="clear:both; display:block; height:100px"></div>

<div id="social-media">
  <ul>
    <li><a href="http://www.facebook.com"</a><img src="images/illustrations/socialmedia/clean-icon-set/facebook1.png"></a></li>
    <li><a href="http://www.twitter.com"</a><img src="images/illustrations/socialmedia/clean-icon-set/twitter1.png"></a></li>
    <li><a href="http://www.youtube.com"</a><img src="images/illustrations/socialmedia/clean-icon-set/youtube1.png"></a></li>
    <li><a href="http://www.vimeo.com"</a><img src="images/illustrations/socialmedia/clean-icon-set/vimeo1.png"></a></li>
    <li><a href="#"</a><img src="images/illustrations/socialmedia/clean-icon-set/rss1.png"></a></li>
  </ul>
</div> 

<!-- InstanceBeginEditable name="EditRegion3" -->
<div id="content">
  <h1>Introduction to Events and Planning</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod<br>
    tempor invidunt ut labore et dolore magna									 						aliquyam erat, sed diam voluptua. <br>
    At vero eos et accusam et justo duo dolores et ea rebum ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsa. </p>
</div>
<!-- InstanceEndEditable -->
<div class="rightside">
<h2>Tip Of The Day.</h2>
<ul>
<h4>Look on the internet and in magazines for design ideas.</h4>
It will take many person-hours of looking at your computer. Truth be told, you might not find the perfect cake design in a single place. It is easy, however, to look here and then there until you find the cake designs which when combined come-up with that unique design.<a href="eventtips.html">
<p class="submit">
  <input type="submit" value="More.....">
  </a> <img src="images/gogothere.png" alt="Event"; class="imagecontent1"> </p>
</div>
<div class="footer">
  <P>Copyright &COPY DECOSWALD ENTERPRISES 2015<br>
    ALL RIGHTS RESERVED</P>
</div>
</div>
</body>
<script type="text/javascript" defer src="https://mylivechat.com/chatinline.aspx?hccid=74106426"></script>
<!-- InstanceEnd --></html>

The CSS is for the “camera” but there is no CSS for the rest of the page.

It appears that the first page and the “child” page are in different directories/folders on your computer. I say that because the path to the CSS files and other resources is different. You might verify that the path to the CSS files and the slide show resources on the child page is correct.

I’d recommend you avoid Dreamweaver templates. It’s easier to use things like PHP includes, and then you’re not tied to proprietary code. If you want to switch to another code editor, those Dw templates will be the bane of your existence. I’ve seen this before!

I’m not using the DW template that come with the software no - I hope that’s what you mean - quite on the contrary. I designed a layout and then used it as my template. :smile:

Sorry about that can i upload the entire site somewhere for you to have a look at it?

the url address is: http//:www.decoswald.co.ke
you will notice that there is no sliding banner rendering on the pages it only renders on the .dwt page.

/ CSS Document / for the rest of the page

body, div, h1, h2, h3, h4, h5, ul, ol, li, p	{margin:0; padding:0px; border:0px;}

body				{
					font-family: Arial, Helvetica, sans-serif;
					font-size: 12px;
					background: url(../images/background/backgrd1.png)no-repeat fixed 100%; background-size:cover;
					color: #000;
					text-align: justify; 
					}
#wrapper			{
					width: 1098;
					background-image:url(../images/background/whitebackground.png); background-size:cover;
					margin-top: 40px;
					margin-right: 243px;
					margin-bottom: 10px;
					margin-left: 235px;
					padding: 0;
					border-left: double; 3px; border-left-color:#999; 
					border-right: double; 3px; border-right-color:#999;
					box-shadow:0px 0px 10px;
						-moz-box-shadow: 0px 0px 10px;
						-webkit-box-shadow: 0px 0px 10px;
					}
					
#header-fixed		{width:100%; margin:0px 0px;
						background-color:#000; z-index:26000;  
						}
						
#topnav				{ border-bottom: solid; 3px ; border-bottom-color:#FFF}

#content			{padding:10px 20px; margin:15px; 
						border-bottom:#000 solid 2px;
						border-top-left-radius:10px;
						border-top-right-radius:10px;
						border-bottom-left-radius:10px;
						border-bottom-right-radius:10px;
						box-shadow: -1px -4px 0px -1px;
						font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
						text-align:justify; color:#000; text-shadow: -1px 5px 5px white; font-size:14px;
						float:left; width:700px;
						background-image:url(../images/background/white-backg.png);
						}
							
.footer				{ padding:10px 10px; margin:10px 10px;
                     background-image: url(../images/background/backfooter.jpg);
					 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFF;
					 border-top:#630 solid 3px;
					 border-top-left-radius:10px;
					 border-top-right-radius:10px;
					 clear:both;
					 }
					

.img				{border-bottom:#630 solid 2px;
						border-bottom-left-radius:10px;
						border-bottom-right-radius:10px;
						}
						
.imagecontent		{  border-bottom:#FFF solid 3px;
						border-top:#FFF solid 3px;
						border-bottom-left-radius:100px;
						border-bottom-right-radius:100px;
						border-top-right-radius:10px;
						border-top-left-radius:10px;
						float:right; margin:10px; padding:2px;
						box-shadow:0px 0px 10px;
						-moz-box-shadow: 0px 0px 10px;
						-webkit-box-shadow: 0px 0px 10px;
						
					}
					
.imagecontent1		{  
                        border-bottom:#ccc solid 3px;
						border-top:#ccc solid 3px;
						border-bottom-left-radius:50px;
						border-bottom-right-radius:50px;
						border-top-right-radius:10px;
						border-top-left-radius:10px;
						float:right; margin:10px; padding:2px;
						box-shadow:0px 0px 10px;
						-moz-box-shadow: 0px 0px 10px;
						-webkit-box-shadow: 0px 0px 10px;
					}					
					
.rightside			{   float:right; width:250px;
						padding:10px 15px; margin:10px;
						font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
						text-align:justify; color:#000; font-size:10px;
						background:url(../images/background/backfooter.png)repeat-x; background-size:cover;
						border-top:#000 solid 3px;
						border-bottom:#000 solid 3px;
						border-top-left-radius:8px;
						border-top-right-radius:8px;
						border-bottom-left-radius:8px;
						border-bottom-right-radius:8px;
						box-shadow: 0px 0px 1px 0px ;
						-moz-box-shadow: 0px 0px 1px 0px;
						-webkit-box-shadow: 0px 0px 1px;
						list-style-type:none;
						}
						
#social-media		{ margin:2px 0px 2px 10px; padding:2px;
					 }
					 
#social-media ul li   { display:inline;}

No, I’m saying that .dwt files are proprietary to DW, meaning that they are useless if you move to another code editor. That’s why I wouldn’t touch them, as they mess up your code with Dw-specific junk. Or that’s what they used to do, anyhow. Server-side includes (SSI) or PHP includes (etc.) are much cleaner ways to do this sort of thing.

I hear you thanks for the tip as of now I’m still very green with PHP, I guess one way or the other i’ll just have to learn it. Do you by any chance offer lessons that could get me on my way?

@ronpat I’m very sorry for giving you a hard time I know it can be very annoying to go round in circles, but at least, I have learnt several things that I didn’t know.

You don’t really need to know any PHP to use simple things like includes. I use them a lot, but don’t know much PHP. Off the top of my head, the only thing I can point you to easily is a little tutorial I wrote a while back on using PHP includes.

1 Like

Ok I didn’t know that THANKS A LOT let me dig into it right away.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.