Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
 
(10 intermediate revisions not shown)
Line 35: Line 35:
<style type="text/css">
<style type="text/css">
 +
/* smart image enlarger starts here */
 +
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
 +
 +
.ienlarger {
 +
float: left;
 +
clear: none; /* set to left or right if needed */
 +
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
 +
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
 +
}
 +
 +
.ienlarger a {
 +
display:block;
 +
text-decoration: none;
 +
/* add cursor:default; to this rule to disable the hand cursor */
 +
}
 +
 +
.ienlarger a:hover{ /* don't move this positioning to normal state */
 +
position:relative;
 +
}
 +
 +
.ienlarger span img {
 +
border: 1px solid #FFFFFF; /* adds a border around the image */
 +
margin-bottom: 8px; /* pushes the text down from the image */
 +
}
 +
 +
.ienlarger a span {  /* this is for the large image and the caption */
 +
position: absolute;
 +
display:none;
 +
color: #FFCC00; /* caption text colour */
 +
text-decoration: none;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 13px; /* caption text size */
 +
background-color: #000000;
 +
font-weight: bold;
 +
padding-top: 10px;
 +
padding-right: 10px;
 +
padding-bottom: 13px;
 +
padding-left: 10px;
 +
}
 +
 +
.ienlarger img { /* leave or IE puts a border around links */
 +
border-width: 0;
 +
}
 +
 +
.ienlarger a:hover span {
 +
display:block;
 +
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
 +
left: 50px; /* means the pop-up's left is 90px far from the thumb's left */
 +
z-index: 100;
 +
 +
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add 
 +
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
 +
 +
/* If you want the pop-up open above the thumb, remove the top: 50px; and add 
 +
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */
 +
 +
/* add cursor:default; to this rule to disable the hand cursor only for the large image */
 +
}
 +
 +
.resize_thumb {
 +
width: 150px; /* enter desired thumb width here */
 +
height : auto;
 +
}
 +
 +
/* smart image enlarger ends here */
/* Menu Style Definitions */
/* Menu Style Definitions */
Line 456: Line 521:
#tablecontentbg{
#tablecontentbg{
background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
 +
}
 +
#contentcolumnwhite{
 +
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #ffffff;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
}
 +
#contentcolumnblack{
 +
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #000000;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
}
}
#contentcolumn{
#contentcolumn{
Line 596: Line 693:
/*on hover stuff*/
/*on hover stuff*/
-
.thumbnailWrapper { width:600px; } /* not important */
+
.thumbnailWrapper { width:600px; display:block; padding-right:30px; } /* not important */
.thumbnailWrapper ul {  
.thumbnailWrapper ul {  
Line 611: Line 708:
.thumbnailWrapper ul li a img {  
.thumbnailWrapper ul li a img {  
-
width:200px; /* not important, the pics we use here are too big */
+
height:300px; /* not important, the pics we use here are too big */
position:relative; /* so we can use top and left positioning */
position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
border:none; /* remove the default blue border */
Line 621: Line 718:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:80%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 642: Line 739:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 662: Line 759:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 682: Line 779:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 702: Line 799:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 722: Line 819:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 742: Line 839:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 761: Line 858:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */
Line 780: Line 877:
left:0px; /* start from left of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:90%;
display:none; /* hide by default */
display:none; /* hide by default */
/* styling bellow */
/* styling bellow */

Latest revision as of 20:28, 25 October 2012


UNAM-Genomics_Mexico

Retrieved from "http://2012.igem.org/Template:Team:UNAM_Genomics_Mexico/Templates/menulike"