HTML/CSS - links not working - html

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

Current page state for html image button

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.

Images not showing as a hyperlink

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?

Footer not showing image

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).

HTML/CSS background color

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.

Can't get my image to show

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.