Hello friends,
I was quite interesting to view those expert sharing their expertise over here.
Please help me to solve my conflict over "rotating image" issue.
I have a webpage and the header image was set in my CSS as 'header-bg.jpg'. I would like to add more than 1 image in my header, meaning that the header image will rotate one to another after few seconds.
Please help me to work on the right coding.
This is my CSS:
Code:
/* CSS Document */
* { margin:0; padding:0; font-size:100%;}
body{ background:#01245c; text-align:center;}
.top-tail{ background:url(images/top-tail.jpg) top repeat-x #fff;}
.top-bg{ background:url(images/body-bg.jpg) top center no-repeat;}
.bot-tail{ background:url(images/bot-tail.gif) bottom repeat-x;}
img {vertical-align:top;}
a img { border:0;}
ul { list-style:none;}
.left { float:left;}
.right {float:right;}
.clear { clear:both;}
html{ font-family:Arial, Helvetica, sans-serif; font-size:0.7275em; line-height:1.364em; color:#0e1a27;}
input, select { vertical-align:middle; font-weight:normal;}
a {color:#ffffff;}
a:hover{text-decoration:none;}
p {padding-top:15px;}
h5{ font-size:1.236em; color:#0b4f88; font-weight:bold; padding-bottom:9px;}
.strong1{ color:#28a5ce; display:block; font-size:1.091em;}
cite{ font-style:normal;}
/* ============================= main layout ====================== */
.imgindent {margin:0 15px 0 0; float:left;}
.phone{ float:right; padding-right:215px;}
.space1{ margin-left:13px;}
.space2{ margin-left:70px;}
.margin1{ margin-top:25px !important;}
.padding1{ padding-top:9px;}
.padding2{ padding-top:20px;}
.padding3{ padding-top:25px;}
.padding4{ padding-bottom:50px !important;}
/* ============================= header ====================== */
.flash{ height:178px;}
#header{ font-size:0.909em; background:url(images/header-bg.jpg) bottom left no-repeat;}
#header .banner{ display:inline-block; margin:5px 0 4px 0;}
#header .slogan{ padding:123px 0 0 335px;}
/* ============================= content ====================== */
#content{ background:url(images/content-corner-left.gif) left top no-repeat #fff; margin-top:2px;}
#content .right-corner{ background:url(images/content-corner-right.gif) right top no-repeat; padding:24px 10px 20px 24px;}
.column-2{ color:#000000; line-height:1.273em;}
.line{ background:url(images/line.gif) repeat-y 630px 0; padding-bottom:30px;}
.line2{ background:url(images/line.gif) repeat-y 630px 0; padding-bottom:60px;}
.title{ padding-bottom:11px;}
.title2{ padding-bottom:20px;}
.text{ font-size:1.071em; line-height:1.3em;}
.text p{ padding-top:18px;}
.text1{ font-size:0.909em; color:#aeaeae; font-style:italic; display:block; }
.indent1{ padding-right:20px;}
.indent2{ padding:0 10px 0 17px;}
.unline{ border-bottom:solid 1px #444546; padding-bottom:22px; margin-bottom:20px;}
.link1{ font-size:1.091em; color:#051047; font-weight:bold; display:inline-block; margin:11px 40px 0 0;}
.link2{ font-size:1.091em; color:#525252; font-weight:bold; display:inline-block; margin-top:11px;}
.link3{ color:#525252;}
.box{ background:url(images/box-tail.gif) repeat-y; margin-top:32px; border-top:solid 1px #000000; font-size:1.091em; line-height:1.333em; color:#fff;}
.box .bot-bg{ background:url(images/box-bg.gif) bottom no-repeat; padding:17px 10px 28px 17px;}
.box .title{ padding-bottom:6px;}
.list li{ font-size:1.091em; line-height:1.5em;}
.list a{ font-weight:bold; color:#525252;}
.list span{ font-size:0.917em; line-height:1.364em; color:#0e1a27;}
/* ============================= footer ====================== */
#footer{ color:#ffffff;}
#footer a{ color:#000000; font-weight:bold;}
#footer .text{ padding:17px 0 0 84px;}