Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .w3c { min-height: 250px; position: relative; width: 554px;}
    
      
      
        .w3c > div { display: inline; }
        .w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: #fff; background: #666666; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
        .w3c > div:not(:target) > a { border-bottom: 0; background: #b0b0b0; /*-moz-linear-gradient(top, white, #eee); */}  
        .w3c > div:target > a { background: white; color: #b0b0b0; }
            
        .w3c > div > div { background: white; z-index: 0; left: 0; top: 30px; bottom: 0; right: 0; padding: 10px; border: 1px solid #ccc; width: 596px; height: 133px;} 
  .w3c  div  div > div {  border: 1px solid red; float: left; width: 180px; height:110px; margin-left: 10px; position:relative; }
  .w3c  div div > div:hover:after{ display: block; content: '';  position: absolute; top: 0;border: 1px solid black; width:178px; height: 108px;}
        
        /*.w3c > div > div > a  > img:after{border: 2px solid black; width:178; height: 108px; }*/
      .w3c > div:not(:target) > div { position: absolute; }
        .w3c > div:target > div { position: absolute; z-index: 1; }
</style>
</head>
<body>
  <h1>Example Six</h1>
            
            <p>Grade: A</p>
            
            <p>thisis the thing</p>
            
            <div class="w3c">
                <div id="tab16">
                    <a href="#tab16">Personbiler</a>
                
                   
                            <div class="test">
                                 <div><img alt="" src="http://placehold.it/176x106/" /></div>
                          </div>                    
                </div> <!-- ends tab16 -->
                
                <div id="tab17">
                    <a href="#tab17">Varebiler</a>
                    <div>
                     <div><img alt="" src="http://placehold.it/180x110/" /></div>
                     <div><img alt="" src="http://placehold.it/180x110/" /></div>
        
                    </div>
                </div> <!-- ends # tabs17 -->
            
            </div> <!-- ends .w3c -->
                
​
​
</body>
</html>
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers