Difference between revisions of "Team:Carnegie Mellon/CSS"

Line 4: Line 4:
 
<head>
 
<head>
  
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
−
<script>
 
−
$(document).ready(function(){
 
−
    $(".flip1").click(function(){
 
−
        $(".panel1").slideToggle("slow");
 
−
    });
 
−
});
 
  
−
$(document).ready(function(){
+
<style src = "" type = "text/css">
−
     $(".flip2").click(function(){
+
body {
−
        $(".panel2").slideToggle("slow");
+
     padding: 50px;
−
     });
+
}
−
});
+
ul {
 +
    border: 1px solid #444;
 +
     display: inline-block;
 +
    height: 301px;
 +
    position: relative;
 +
    width: 600px;
 +
}
 +
li {
 +
    font: bold 16px/100px sans-serif;
 +
    height: 100px;
 +
}
 +
a {
 +
    border-right: 1px solid #444;
 +
    border-top: 1px solid #444;
 +
    color: red;
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    width: 99px;
 +
}
 +
li:first-child a {
 +
    border-top: none;
 +
}
 +
li:nth-child(2) a {
 +
    color: blue;
 +
}
 +
li:nth-child(3) a {
 +
    color: green;
 +
}
  
−
$(document).ready(function(){
 
−
    $(".flip3").click(function(){
 
−
        $(".panel3").slideToggle("slow");
 
−
    });
 
−
});
 
  
−
</script>
+
a:hover + .about1 {
 +
    display: inline-block;
 +
    background: red;
 +
    color: #fff;
 +
    margin-left: 100px;
 +
    margin-top: -100px;
 +
    position: absolute;
 +
}
  
−
<style src = "" type = "text/css">
+
.about1 {
−
.row {
+
    display: none;
−
  height: 0px;
+
    height: 301px;
 +
    width: 500px;
 
}
 
}
 +
 +
li:nth-child(2) a:hover {
 +
    background: blue;
 +
    color: #fff;
 +
}
 +
 +
a:hover + .about2 {
 +
    display: inline-block;
 +
    background: blue;
 +
    color: #fff;
 +
    margin-left: 100px;
 +
    margin-top: -200px;
 +
    position: absolute;
 +
}
 +
 +
.about2 {
 +
    display: none;
 +
    height: 301px;
 +
    width: 500px;
 +
}
 +
 +
 +
li:nth-child(3) a:hover {
 +
    background: green;
 +
    color: #fff;
 +
}
 +
 +
a:hover + .about3 {
 +
    display: inline-block;
 +
    background: green;
 +
    color: #fff;
 +
    margin-left: 100px;
 +
    margin-top: -300px;
 +
    position: absolute;
 +
}
 +
 +
.about3 {
 +
    display: none;
 +
    height: 301px;
 +
    width: 500px;
 +
}
 +
  
  
Line 37: Line 103:
  
 
<body>
 
<body>
−
<div id = "content">
+
<ul>
−
<table style="width:100%">
+
    <li>
−
  <tr>
+
        <a href="#">Item 1</a>
−
    <td class = "flip1">Niteesh</a></td>
+
        <div class = "about1">djfdlkjfdlkjd</div>
−
     <td class = "flip2">Dominique</td>  
+
    </li>
−
    <td class = "flip3">Michelle</td>
+
     <li>
−
  </tr>
+
        <a href="#">Item 2</a>
−
  <tr>
+
        <div class = "about2">djfdlkjfdlkjd</div>
−
  <div class = "row">
+
    </li>
−
     <td class = "panel1" style = "position: absolute">bio1</td>
+
     <li>
−
    <td class = "panel2" style = "position: relative">bio2</td>  
+
        <a href="#">Item 3</a>
−
    <td class = "panel3" style = "position: relative">bio3</td>
+
        <div class = "about3">;dlkjfd;aljkf;aljdf;alsd</div>
−
     </div>
+
     </li>
−
  </tr>
+
</ul>
−
</table>
+
−
</div>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 13:55, 29 July 2015