I have a rotating carousel done using webkit animation and CSS. There are 3 items under the carousel and each item has a photo and a blurb of text. I'm trying to link the text to 3 different links.
Right now all 3 text boxes are linked to the same link ( the last one ). I have a feeling it might have something to do with z-index, but I'm not sure. I've put all my code into a jsfiddle.
http://jsfiddle.net/LGbbf/1/
Any help is appreciated!
HTML code involved
<div class="gallery-area">
<ul>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/IYF-Family-Treasures.jpg" /> </div>
<div class="txt-box">
<p>Send in a photo of your family, friends and neighbours enjoying the Chinese New Year festivities and stand to WIN a $400 IKEA Gift Card ANG BAO! <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/cny.png" /> </div>
<div class="txt-box">
<p>Chinese New Year is a time when families get together to celebrate. Check out the events where you and your family can celebrate during this festive period. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/AboutIYF_carousel_ver4.png" /> </div>
<div class="txt-box">
<p>2014 is the International Year of the Family. We invite all to join us in the spirit of love and respect, commitment and big-heartedness. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
</ul>
</div>
CSS code involved
.info-img-box {
box-shadow:0 9px 6px -6px #929292;
-webkit-box-shadow:0 9px 6px -6px #929292;
overflow:hidden;
position:relative;
margin:0 0 32px;
}
.info-img-box img {
vertical-align:top;
}
.info-img-box .txt-box {
position:absolute;
bottom:0;
left:0;
width:100%;
background:url(http://app.msf.gov.sg/Portals/0/Files/IYF/bg-txt-box-img.png);
padding:8px 0 10px;
}
.info-img-box .txt-box img{
vertical-align:middle;
}
.info-img-box .txt-box p {
margin:0 13px;
font:13px/16px "Lato", Arial, Helvetica, sans-serif;
}
.info-img-box .txt-box a {
color:#fff;
text-decoration:none;
}
.info-img-box .txt-box a:hover {
text-decoration:underline;
}
.quote-area:after {
content:"";
clear:both;
display:block;
}
just Try this It's working
Change Keyframe css
css:
#-webkit-keyframes round{
0%{opacity:1; z-index:1111}
27%{opacity:1; z-index:1111;}
33%{opacity:0; z-index:0;}
94%{opacity:0; z-index:0;}
100%{opacity:1; z-index:1111;}
}
#keyframes round{
0%{opacity:1; z-index:1111}
27%{opacity:1; z-index:1111;}
33%{opacity:0; z-index:0;}
94%{opacity:0; z-index:0;}
100%{opacity:1; z-index:1111;}
}
Here is updated fiddle http://jsfiddle.net/LGbbf/3/
Hope It Helps you :)
Related
I have a site where I want the header buttons (which are images) to have a normal state, rollover state, and a current page state, where when that page is viewed, the header button displays a different image than normal. I should note this website draws from a database with php.
html:
<body>
<div class="header" id="header1">
<a href='index.php?Program=BIT' class="header_bit" id="header_bit" style="text-decoration:none; color:#FFF">
<img alt="Photonics & Laser Technology"
src="+images/_header_all/bit_normal_v2.png"
onmouseover="this.src='+images/_header_all/bit_hover_v2.png'"
onmouseout="this.src='+images/_header_all/bit_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=IMD' class="header_imd" id="header_imd" style="text-decoration:none; color:#FFF">
<img alt="Interactive Multimedia & Design"
src="+images/_header_all/imd_normal_v2.png"
onmouseover="this.src='+images/_header_all/imd_hover_v2.png'"
onmouseout="this.src='+images/_header_all/imd_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=NET' class="header_net" id="header_net" style="text-decoration:none; color:#FFF">
<img alt="Networking Technology"
src="+images/_header_all/net_normal_v2.png"
onmouseover="this.src='+images/_header_all/net_hover_v2.png'"
onmouseout="this.src='+images/_header_all/net_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=PLT' class="header_plt" id="header_plt" style="text-decoration:none; color:#FFF">
<img alt="Photonics & Laser Technology"
src="+images/_header_all/plt_normal_v2.png"
onmouseover="this.src='+images/_header_all/plt_hover_v2.png'"
onmouseout="this.src='+images/_header_all/plt_normal_v2.png'"
width="180px" height="250px"/>
</a>
<a href='index.php?Program=IRM' class="header_irm" id="header_irm" style="text-decoration:none; color:#FFF">
<img alt="Information Research Technology"
src="+images/_header_all/irm_normal_v2.png"
onmouseover="this.src='+images/_header_all/irm_hover_v2.png'"
onmouseout="this.src='+images/_header_all/irm_normal_v2.png'"
width="180px" height="250px"/>
</a>
</div>
</body>
css:
/*Program header items*/
#header_bit{
position:relative;
top:10px;
left:20px;
}
/*#header_bit:active img{
background-image:url(+images/_header_all/imd_hover_v2.png);
background-repeat:no-repeat;
}*/
#header_imd{
position:relative;
top:10px;
left:20px;
}
#header_net{
position:relative;
top:10px;
left:20px;
}
#header_plt{
position:relative;
top:10px;
left:20px;
}
#header_irm{
position:relative;
top:10px;
left:20px;
}
I'm at a loss, all methods I've found no not apply or don't work. Any help is welcome, thanks.
I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.
Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...
<td>
<div class="sg-read-more">
Find out more
</div>
<div class="sg-book-ticket">
Book Ticket
</div>
</td>
The CSS is this....
div.sg-book-ticket {
display:block;
position:absolute;
background:url(images/buy-ticket.png) no-repeat 0 0;
right:15px;
bottom:2px;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket:hover {
background-position:0 -40px;
}
The images display correctly and the rollover works, but they aren't links.
What have I missed?
I personally would style the link as opposed to the div
div.sg-book-ticket{
position:absolute;
right:15px;
bottom:2px;
}
div.sg-book-ticket > a{
display:block;
background:url(images/buy-ticket.png) no-repeat 0 0;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket a:hover{
background-position:0 -40px;
}
if you want the whole div to be clickable, use this :
<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>
Can you try the following?:
<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>
instead of putting the image in the css?
While I was trying to style my footer, and checking it in Firefox, i encountered an error that the facebook, etc icons were not showing up. This is the sample footer html code.
<div id="footer">
<div id="footer_content">
<div id="footer_left">
<!-- JP Morgan && Force For Good Signature -->
<div id="jp_right_content_main">
<div id="jp_right_content_inner1">
<font color="#FFFFFF" size="4" font-family="Times New Roman">In Assocaition with:</font> <br /> <img
class="header-photo" width="280" height="70" alt="JPM Logo"
src="images/Logo_JPM.jpg"></img>
<h1 class="header11">
<font color="#ED872D">Force</font> <font color="white">For</font> <font
color="green">Good</font>
</h1>
</div>
<div id="right_content_inner2">
<img src="images/partner_pic.png" width="130" height="130" />
</div>
</div>
</div>
<div id="footer_right">
<a href="http://www.facebook.com/Unitedwaymumbai" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/facebook.gif"
height="27" width="16"></a><a
href="http://www.youtube.com/unitedwaymumbai" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/youtube.gif"
height="27" width="34"></a><a
href="http://www.linkedin.com/company/united-way-of-mumbai"
target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/linkdin.gif"
height="27" width="26"></a><a
href="http://twitter.com/mumbaihelpline" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/tweeter.gif"
height="27" width="32"></a><br>
<p class="text7">
Copyright United Way Mumbai & J.P.MORGAN SERVICS INDIA PVT LTD. All
Rights Reserved. <a href="sitemap.htm"><span class="text8">Sitemap</span>
</a>Page Designing By <a href="http://www.force4g.com"
target="_blank" class="text8">FORCE FOR GOOD | TEAM : T.U.R.C.S</a>.
</p>
<div id="contact_text" class="header5">Contact: 022-24937676 / 79
or Email: contact#unitedwaymumbai.org</div>
</div>
</div>
</div>
And its corresponding css:
#footer{width:100%; height:auto; border:0px solid black; float:left; background:url('../images/footer_bg.gif') repeat-x;}
#footer_content {width:959px; height:auto; margin-left:auto; margin-right:auto; margin-bottom:30px }
#footer_left {width:491px; float:left; margin-top:16px; margin-bottom:25px; }
#footer_right {width:468px; float:left; margin-top:16px; }
#jp_right_content_main { height:159px; width:468px; float:left; margin:0; padding:0; background-image:url(../images/partner_bg.png); background-repeat:no-repeat}
#jp_right_content_inner1 {width:311px; height:127px; margin-left:27px; float:left; margin-top:5px;}
The facebook, twitter etc png images are not showing up.
Any help would be appericiated.
Regards,
Vivek
And the moral of the story is: Make sure your images are linked correctly.
And for future reference, setting things up on sites like JS fiddle not only helps other people troubleshoot your problem, but gives you a chance to redo what you've already done and catch small errors (like this one).
I've been playing around with websites to figure out how they work. By downloading them and opening the in dream weaver cs6. But when I open the downloaded html file in my browser everything displays fine except the green background which is replaced with a default white one. Have a look.
http://www.bintrasher.com/index.html
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0036)http://www.bintrasher.com/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="./Bintrasher1_files/style.css">
<title>Bintrasher</title>
<style type="text/css"></style></head>
<body>
<div id="container">
<div id="top_banner"><img src="./Bintrasher1_files/dragons_den.gif" alt="dragons den"></div>
<div id="nav">
<ul>
<li>home</li>
<li>|</li>
<li>domestic</li>
<li>|</li>
<li>commercial</li>
<li>|</li>
<li>videos</li>
<li>|</li>
<li>shop</li>
<li>|</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="left_column">
<h1 class="header_home">Gain 40% more space in your wheelie bin!</h1>
<p>
Now with the Bin Trasher you can compact up to 40% of your waste to reduce overfilling and littering.
</p><p>
The sheer amount of waste produced by each household every week is increasing and the dangerous task of standing in your bin to squash your rubbish may be over!
</p><p>
We might just have the answer to your problem. The Bin Trasher is a simple gadget that compacts the waste and gives you 40% more space in your wheelie bin.
</p>
</div>
<div id="right_column"><p>Watch our demonstration video now…</p>
<object width="360" height="290"><param name="movie" value="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="290"></object>
</div>
</div>
<div id="footer">
<div id="col1">
<p>
<strong>Trade Enquiries Welcome</strong><br>
<strong>Tel:</strong> 059 91 57629<br>
<strong>Mobile:</strong> 087 206 9546<br>
<strong>Email:</strong> info#bintrasher.com</p>
</div>
<div id="col2">
<p>
<strong class="firstline">Great Value at only </strong><br>
<strong>€49.95</strong><br>
<strong class="lastline">Including VAT</strong>
</p>
</div>
<div id="col3"><img src="./Bintrasher1_files/buynow.gif"></div>
</div>
<p class="lower_left">Bin Trasher. 2010. All rights reserved </p>
<p class="lower_right">Terms & Conditions | Privacy Policy | Site Map<br>
<img src="./Bintrasher1_files/headers_26.gif"></p>
</div>
</body></html>
css:
#charset "UTF-8";
/* CSS Document */
img{border:0;}
body {text-align:center; margin:23px 0; background:url(../images/bgr.gif); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.4em;}
p a{color:#CC0000;}
p a:hover{color:#3c671e;}
#container {width:931px; margin-left:auto; margin-right:auto; text-align:left;}
#top_banner {height:149px; background:url(../images/top_banner.gif) bottom no-repeat; text-align:right;}
#nav {height:35px; background:url(../images/top_ban_bit.gif) no-repeat right #4a4a30; color:#FFFFFF;}
#nav ul{list-style-type:none; margin:0; padding:0 0 0 10px;}
#nav li{float:left; padding:6px 0.9em 0 0.9em; font-size:1.2em;}
#content{background:#FFFFFF; overflow:hidden; border-bottom:dotted 2px #006633;}
#left_column{ float:left; width:460px; padding:30px 30px;}
#right_column{margin-left:520px; padding:30px 20px;}
#footer{clear:both; background:#FFFFFF; overflow:hidden; padding:10px 20px 10px 30px; }
#footer div{float:left; width:33%;}
#col1 strong {color:#3c671e; text-transform:uppercase; font-weight:normal;}
#col2 strong {color:#5c8424; font-size:4em; line-height:1.2em;}
#col2 .firstline{color:#333333; font-size:1.6em;}
#col2 .lastline{font-size:1em; color:#333333;}
#col3 {text-align:right; padding-top:30px;}
.main_link {color:#FFFFFF; text-decoration:none;}
.main_link:hover, .selected{color:#669b41; text-decoration:none;}
p.lower_left{float:left; font-size:0.8em; color:#FFFFFF;}
p.lower_right{float:right; font-size:0.8em; color:#FFFFFF; text-align:right;}
.header_home{background:url(../images/heading_home.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
.header_industrial{background:url(../images/heading_industrial.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
There is probably a very easy answer because I'm very new to web development.
Thanks in advance.
instead of
background:url(../images/bgr.gif);
you need to write
background:url(http://www.bintrasher.com/images/bgr.gif);
A reference (the css file) is missing, I guess. Do you have the same file structure like on the server? I bet it will work then.
I am having an issue with a page I'm building. I have a Js cycle with some outside-div-contained controls and the arrow_back class will show the hover state, but it won't show the normal state. The exact same code works for the arrow_forward button (including native & hover states.) Here is the css for it:
.arrow_back{
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
.arrow_forward{
background:url(../images/arrow_forward.png) no-repeat;
width:42px;
height:42px;
position:relative;
top:-84px;
right:-637px;
z-index:9999;
}
.arrow_forward:hover{
background:url(../images/arrow_forward_hover.png) no-repeat;
}
and the html:
<div class="image">
<div class="slideshow">
<img src="images/inside/cycle1.jpg" />
<img src="images/inside/cycle2.jpg" />
<img src="images/inside/cycle3.jpg" />
</div>
</div>
<div class="controls">
<img src="images/arrow_back.png" width="42" height="42" class="arrow_back" />
<img src="images/arrow_blank.png" class="arrow_forward" />
</div>
If anybody could offer some advice. I've been staring at code all week so far, and my brain is a bit toasted. It's probably something very obvious I just need fresh eyes on.
You're missing the background image for the arrow_back class.
.arrow_back{
background:url(../image/arrow_back.png) no-repeat;
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
Also, I removed the javascript tag since this doesn't really have anything to do with javascript.