-3

I have two links <a href="#">(...)</a>, and each link content a little logo created with div and pure css.

I want to make them clickable, but I can't.

Here is the HTML:

<div id="content">
    <div id="wrappAll">
        <div id="settings">
    <input type="checkbox" group="type" id="type" name="type">
    <label for="type">

            <div class="logoButton block">
                    <a href="#" ></a>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span> 
</div>  
    <div class="logoButton bar" id="bar">
            <a href="#" ></a>
    <span class="minibar"></span>
    <span class="minibar"></span>
    <span class="minibar"></span>
</div>  
    <div id="photos">
         <span class="photo"></span>
      <span class="photo"></span> 
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>

      <span class="photo"></span>
        </div>  
        <div id="photos_long">
         <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
        </div>  
            </label> 
        </div>


    </div>
</div>

and here is the CSS:

/**/
input{opacity:0;width:120px;background:#fff;height:70px;
position:absolute;
margin:-10px 10px;}
/**/
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
background:#eee;}

#content{
width:600px;
height:650px;
margin:20px auto;
    background:whitesmoke;
    border-radius:10px;
    box-shadow:inset 0 0 1px #000;  
}
#wrappAll{}
#settings{
width:600px;
height:50px;
padding:10px;
margin-top:40px;
display:block;
background:linear-gradient(top, rgba(242,242,242,1) 0%,rgba(217,217,217,1) 100%);
border-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
box-shadow:inset 0 0 1px #000;  
}
#photos{
width:600px;
height:auto;
position:absolute;
margin-top:70px;}
#photos_long{
width:600px;
height:auto;
position:absolute;
margin-top:70px;
display:none;}

#photos_long .photo{
width:400px;
height:380px;

margin:5px auto;}
a{
    display:block;
    position:absolute;
    margin:;
    width:42px;
    height:42px;

}
/* logo button */

.block{
margin:-10px 10px;
padding:10px;
transition:all 1s ease;} 
.bar {
margin:-10px -10px;
padding:10px;
transition:all 1s ease;}
.logoButton{
width:42px;
height:50px;
float:left;
border-left:1px solid #999;
box-shadow:-1px 0 0 #fff;
transition:all 1s ease;}
.miniblock{
display:block;
width:10px;
height:10px;
    background:#ccc;
float:left;
margin:2px;
border-radius:1px;
box-shadow:inset 0 0 5px #000;
transition:all .2s ease-out;}
.logoButton:hover > .miniblock{
background:#98c6Ea;
}

.minibar{
content:'';
display:block;
width:40px;
height:8px;
background:#ccc;
margin:5px auto;
border-radius:2px;
box-shadow:inset 0 0 5px #000;
transition:all .2s ease-out;}
.logoButton:hover > .minibar{
    background:#98c6Ea;
}
/**/
.photo{
display:block;
float:left;
width:180px;
height:182px;
margin:5px;
border-radius:2px;
border:1px solid #333;
background:url(https://twimg0-a.akamaihd.net/profile_images/2563882128/5tzcaa48i6oga47d7o3s_reasonably_small.png) no-repeat;
    background-size:100% 100%;
    border:5px solid #f9faf1;
    box-shadow:0 0 1px #333, inset 0 0 1px #666;
}

/**/


.logoButton:active{
box-shadow:inset -1px 0 10px #333;}
#type:checked ~ label[for=type] #photos {display:none;}
#type:checked ~ label[for=type] #photos_long {display:block;}

This link shows this in action: http://cssdeck.com/labs/collab/jmjpxul4/1

How can I fix this?

Brad Larson
  • 170,088
  • 45
  • 397
  • 571
LukyVj
  • 1,495
  • 2
  • 11
  • 18
  • You should update your title to be more specific about the question. – Pavlo Sep 18 '12 at 17:04
  • 1
    I can't understand the question. In link you gave these images are clicable. – bksi Sep 18 '12 at 17:06
  • 2
    I really do not like going to another site to view code if at all possible. It takes away from what SO is. Ask a question here; get an answer here - not run all over the interwebs looking... – Buggabill Sep 18 '12 at 17:31
  • 3
    I moved the code into your question, because your external link is of no use to future visitors who might encounter a similar problem. The point of the site is not to ask people to help you elsewhere, but to answer your questions here. Still, that's an awful lot of code, so you might want to refine this to just the sections giving you problems. – Brad Larson Sep 18 '12 at 17:47

1 Answers1

0

May be event onclick and javascript?

<div onclick="someFunction()">(....)</div>
<script type="text/javascript">
function someFunction()
{
.....
}
</script>
Игорь Скуратовский
  • 31
  • 6