My problem is live at:
http://www.geekygents.com/problem/Basically the youtube video won't hide and re-appear if I'm using the display:none and then display:inline, it just stays there always, changing opacity doesn't help as it un-hides itself.
My code is really a mess but anyone that would look through it and fix it for me I'd muchly appreciate it.
The correct way this would work is, click the video camera, click the green/red gradient, and then the youtube video will replace the green/red gradient.
Thanks!
Off-site source:
html
Code
<!doctype html>
<head>
<title>Alex Edwards</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<a href="index.html#home"><img src="images/awp.png" id="headimg" alt="Alex's Webpage"/></a>
<a href="#home"><div id="home">
<img src="images/spt.png" id="sptimg" alt="Select a Project Type"/>
<div id="list">
<a href="#home"><img src="images/home.png" alt="Home"></a>
<a href="#1"><img src="images/video.png" width="145" alt="Videos"></a>
<a href="#2"><img src="images/picture.png" width="145" alt="Pictures"></a>
<a href="#3"><img src="images/flash.png" width="145" alt="Flash"></a>
<br/>
<div id="sublist">
<p id="1"><a href="#example" id="links"><a id="example" href="#youtube"><img src="images/links/example.png"/></a></a>
<iframe id="youtube" width="460" height="315" src="http://www.youtube.com/embed/rYXdsOEWBj0" frameborder="0" allowfullscreen></iframe>
</p>
<p id="2">Pictures</p>
<p id="3">Flash</p>
</div>
</div>
</div>
</div></a>
</body>
</html>
css
Code
body{
width:100%;
height:100%;
margin-top:80px;
background:url('images/bg.jpg');
}
#headimg{
padding-left:14em;
}
a{
border:0;
}
#home{
width:70%;
border:1px solid #000;
-moz-border-radius:7px 7px;
border-radius:7px 7px;
padding:25px;
margin:0 auto;
margin-top:20px;
background:url('images/bg2.jpg');
height:375px;
transition:all 1s ease;
-webkit-transition:all 1s ease;
}
#home:target{
height:240px;
}
#list{
margin-top:20px;
}
#list a{
margin:20px;
}
#list a img{
-moz-border-radius:7px 7px;
border-radius:7px 7px;
display:inline;
}
#sublist{
margin-left:170px;
}
p{
color:rgba(0,0,0,0.0);
transition:color 1s ease;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
position:absolute;
height:20px;
opacity:0;
}
p:target{
display:inline;
position:absolute;
color:rgba(0,0,0,0.9);
height:60px;
opacity:100;
}
#links{
color:#000;
text-decoration:none;
border:0;
z-index:0;
color:rgba(0,0,0,0.0);
position:absolute;
}
#links:target{
color:rgba(0,0,0,0.9);
position:absolute;
}