Template:CSS/UT-Tokyo/Counter

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
 
<head>
<head>
 +
<link rel = "stylesheet" src = "./jmenu.css">
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?action=raw&ctype=text/javascript"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:Ut-Tokyo/jMenu.jquery.min.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
// simple jMenu plugin called
 +
$("#jMenu").jMenu();
 +
// more complex jMenu plugin called
 +
$("#jMenu").jMenu({
 +
ulWidth : 'auto',
 +
effects : {
 +
effectSpeedOpen : 300,
 +
effectTypeClose : 'slide'
 +
},
 +
animatedText : false
 +
});
 +
});
 +
</script>
<style type="text/css">
<style type="text/css">
 +
/* jMenu */
 +
.jMenu{
 +
display:table;
 +
margin:0;
 +
padding:0;
 +
list-style:none;
 +
}
 +
.jMenu li ul{
 +
display:none;
 +
position:absolute;
 +
padding:0;
 +
margin:0;
 +
list-style:none;
 +
z-index:0;
 +
}
 +
.jMenu li ul li{
 +
z-index:9999;
 +
background-color:#322f32;
 +
display:block;
 +
border-bottom:2px solid #ff92ff;
 +
border-left:2px solid #ff92ff;
 +
border-right:2px solid #ff92ff;
 +
padding:0;
 +
list-style:none;
 +
position:relative;
 +
width:145px;
 +
height:30px;
 +
font-size:x-large;
 +
}
 +
.jMenu li ul li a{
 +
font-size:x-large;
 +
text-transform:none;
 +
display:block;
 +
height:29px;
 +
border-top:1px solid transparent;
 +
border-bottom:1px solid transparent
 +
}
 +
.jMenu li ul li a.isParent{
 +
background-color:#3a3a3a
 +
}
 +
.jMenu li ul li a:hover{
 +
background-color:#ffc5ff;
 +
}
 +
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{
Line 406: Line 470:
list-style-image:none;
list-style-image:none;
position:absolute;
position:absolute;
-
top:600px;
+
top:800px;
left:50%;
left:50%;
margin-left:-375px;
margin-left:-375px;
Line 415: Line 479:
}
}
img.topListImg{
img.topListImg{
-
width:100px;
+
width:150px;
-
margin-left:25px;
+
}
}
</style>
</style>
</head>
</head>
-
 
</html>
</html>

Revision as of 07:17, 5 October 2014

<head> <link rel = "stylesheet" src = "./jmenu.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?action=raw&ctype=text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> <script type="text/javascript" src="https://2014.igem.org/Team:Ut-Tokyo/jMenu.jquery.min.js?action=raw&ctype=text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ // simple jMenu plugin called $("#jMenu").jMenu(); // more complex jMenu plugin called $("#jMenu").jMenu({ ulWidth : 'auto', effects : { effectSpeedOpen : 300, effectTypeClose : 'slide' }, animatedText : false }); }); </script> <style type="text/css"> /* jMenu */ .jMenu{ display:table; margin:0; padding:0; list-style:none; } .jMenu li ul{ display:none; position:absolute; padding:0; margin:0; list-style:none; z-index:0; } .jMenu li ul li{ z-index:9999; background-color:#322f32; display:block; border-bottom:2px solid #ff92ff; border-left:2px solid #ff92ff; border-right:2px solid #ff92ff; padding:0; list-style:none; position:relative; width:145px; height:30px; font-size:x-large; } .jMenu li ul li a{ font-size:x-large; text-transform:none; display:block; height:29px; border-top:1px solid transparent; border-bottom:1px solid transparent } .jMenu li ul li a.isParent{ background-color:#3a3a3a } .jMenu li ul li a:hover{ background-color:#ffc5ff; }


  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{

display: none; } 

/*-- hides default wiki settings --*/

.firstHeading { width: 975px; margin: 0px auto; padding-top: 100px; margin-bottom: 20px; font-family: Georgia, Times, "Times New Roman", serif; color:#FFF; }

h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif; color:#FFF; }

table{ background-color:#D20505;}

  1. top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/

background-color: #383838; border: 0 none; height: 14px; z-index: 100; position: fixed; width: 975px; left: 50%; margin-left: -487px; top:0; }

  1. top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/

background-color: #383838; height: 14px; display: block; z-index: 10; position: fixed; width: 100%; top: 0; }

  1. menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/

color: #727272; text-decoration: none; background-color: transparent; }


  1. globalWrapper, #content { /*-- changes default wiki settings --*/

width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px auto; padding: 0px; position:relative;

}

html, .wrapper { /*-- changes default wiki settings --*/ width: 100%; height: 100%; /* background-color: #FFF; */ } body { background-color: #000; width: 100%; margin: 0 auto; color:white; }

  1. contentcontainer { /*-- creates container for all content on page --*/

font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #414141; width: 960px; margin-left: auto; margin-right: auto; background-color: #transparent; margin-top: 0px; }

.sidemenu, .sidemenu li { list-style-type: none; list-style-image: none; font-family: verdana; text-decoration: none; color:#000; font-size: 14px; }

.sidemenu li {display: block;}

.sidemenu a { text-decoration:none; color: #000; display: block; width: 180px; height: 100%; padding: 3px 5px; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; }

.sidemenu a.greyout { color: #909090; }

.sidemenu a:hover { color:#666; background-color: #d9f5aa; }

.sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;} .sub-sidemenu a {color: #666;}

div.underconst { padding:10px; border-radius:5px; background-color:pink; text-align:center; }

a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}

.contentpara {margin-bottom: 30px;}

span.email{font-family: monospace; font-weight: normal;}

fieldset {border: 1px solid #337f53;}

.greyout {color: #A0A0A0;} .highlightme {background-color: #FFFF00;}

  1. alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;}
  2. annContainer {margin-left: 8px;}
  3. newsContainer {border: 1px solid #ccc;}

.newsTitle { display: block; color: #414141; font-size: 25px; 

       font-family: Georgia, Times, "Times New Roman", serif;

padding: 10px 15px 5px 10px; border-bottom: 1px solid #ccc; margin-bottom: 0px; }

.newsItem { border-bottom: 1px solid #ccc; display: block; padding: 5px 15px 0px 10px; margin-bottom: 0px; }

.newsItem h3 { width: auto; display: inline; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px; }

.newsItem img { float: right; clear: right; width: 80px; padding-left: 15px; display: inline-block; }

.newsItem .newsDate { font-style: italic; font-size: 14px; display: inline-block; color: #999; float: right; padding: 0px 0px 10px 15px; }

.newsItem p, .newsItem ul, .newsItem li { padding: 0px; margin-left: 20px; font-size: 12px; line-height: 1.2; }

.newsItem p {margin-top: 10px;}

.annItem { border: 2px solid #49b677; display: block; padding: 0px 15px 10px 10px; margin-bottom: 18px; position: relative; height: 160px; vertical-align: middle; }

.annItem .annCentered { display: table-cell; vertical-align: middle; height: 160px; }

.annCentered h3 { padding: 0px; display: block; margin-left: auto; margin-right: auto; text-align: center; }

.annItem ul, .annItem li {padding: 0px; margin: 0px;} .annItem li {list-style: none; margin: 5px}

  1. index_header{

position: relative; width:500px; margin: 0 auto; }

  1. index_header img{

width: 500px; }

  1. team{

width: 400px; margin: 0 auto; }

  1. team img{

width: 400px; }

  1. index_navi{

position: relative; width:600px; margin: 0 auto; }

  1. index_navi ul.index_menu{

list-style-type:none; list-style:none; width:600px; height:140px; }

  1. index_navi ul.index_menu li{

float: left; width: 120px; margin: 0; }

  1. index_navi ul.index_menu li img{

width: 110px; margin: 0; } .contents{ align:left; position: relative; top:10px; width:600px; margin: 0 auto; }

.contents p{ text-align:left; width: 600px; color:#FFF; } .contents h2{ text-align:left; padding-left:0px; color:#FFF; } /* ここからindex用 */ .left-side{ width:50%; height:750px; background-color:#FFF; float:left; position:absolute; top:0; }

  1. bodyContent{

width:100%; }

  1. contentSub{

width:100%; } .top{ width:100%; height:750px; background-color:#000; }

  1. top-img{

display:block; position:absolute; top:50px; left:50%; margin-left:-258px; }

  1. title-img{

display:block; position:absolute; top:350px; left:50%; margin-left:-193px; }

  1. left-img{

width:300px; position:absolute; top:350px; right:50%; padding-right:100px; }

  1. right-img{

width:300px; position:absolute; top:350px; left:50%; padding-left:100px; }

  1. left-bottom{

width:50%; height:100px; position:absolute; top:650px; float:left; background-image:url("Gra_white.png"); background-repeat:repeat no-repeat; }

  1. right-bottom{

width:50%; height:100px; position:absolute; top:650px; margin-left:50%; background-image:url("Gra_black.png"); background-repeat:repeat no-repeat; }

  1. index-body{

width:100%; background-color:#9FA0A0; } .content-box{ width:1000px; background-color:#FFF; margin-left:auto; margin-right:auto; position:relative; top:50px; border-radius:10px; margin-bottom:30px; min-height:150px; } .content-box h2, p{ color:#000; margin-left:30px; width:950px; } .content-box h2{ font-size:x-large; } .content-box p{ font-size: medium; font-family: Georgia; color: #3F3F3F; } img.circle{ visibility:hidden; width:150px; position:absolute; } .content-box #box-left{ width:600px; float:left; } .content-box #box-right{ width:400px; float:right; }

  1. box-right h2, #box-left h2{

width:300px; } img.sns{ width:150px; padding-left:2px; padding-bottom:10px; } img{ border:0; } ul.topList{ list-style-type:none; list-style-image:none; position:absolute; top:450px; left:50%; margin-left:-375px; } ul.topList2{ list-style-type:none; list-style-image:none; position:absolute; top:800px; left:50%; margin-left:-375px; } ul.topList li, ul.topList2 li{ float:left; width:150px; } img.topListImg{ width:150px; } </style>

</head> </html>

Retrieved from "http://2014.igem.org/Template:CSS/UT-Tokyo/Counter"