Biomod/2012/TeamJapan/Sendai/Header: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
(New page: <div style="padding: 10px; border: 5px solid #333333;"> <html> <style rel="stylesheet" type="text/css"> .clear {clear:both;} #verticalmenu { /*this .CSS is inspired by http://w...)
 
No edit summary
Line 1: Line 1:
<div style="padding: 10px; border: 5px solid #333333;">
<html>
<html>


<style rel="stylesheet" type="text/css">
      .clear {clear:both;}
  #verticalmenu {
/*this .CSS is inspired by http://www.javascriptkit.com/ */
font-family: "Comic Sans MS" , "Brush Script MT",serif, sans-serif, monospace, cursive, fantasy;
list-style:none;}


#verticalmenu a:hover {
<style type="text/css">
color: #aa1d1d; /* color when the click is over the main menu
{
text-transform: uppercase;
margin:0;
font-size: 10px; */
padding:0;
}


}


a:visited {
color:#00a5ea;
text-decoration: none
}


.glossymenu, .glossymenu li ul{
body {
list-style-type: none;
margin: 0;
margin: 0;
color: #333;
padding: 0;
text-align: center;
width: 250px; /*WIDTH OF MAIN MENU ITEMS*/
background-color: #FDFDFD;
border: 1px solid black;
background-image: url(img/back01.jpg);
list-style:none;
background-position: top;
background-repeat: repeat-x;
}
}


.glossymenu li{
 
position: relative;
 
/* 文字サイズ */
#main{}
#menuR,#menuL{
font-size: 92%;
}
}


.glossymenu li a{
 
background: white url(http://openwetware.org/images/a/a7/Glossyback2.jpg) repeat-x bottom left;
 
font: bold 17px Verdana, Helvetica, sans-serif;
p, /* 文章の行間を指定 */
color: white;
#contents li,
display: block;
dl,
width: auto;
dd
padding: 10px 0;
{
padding-left: 10px;
line-height: 160%;
text-decoration: none;
}
}


.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 200px; /*WIDTH OF SUB MENU ITEMS*/


left: 0;
 
top: 0;
p{
display: none;
margin: 0px 0em 1.5em 3px;
}
}


.glossymenu li ul li{
 
float: left;
ul,ol,dl{
margin: 0em 1em 1em 2em;
}
}


.glossymenu li ul a{
 
width: 190px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
 
/* ========================================  .contentswrap 間隔・余白調整用 */
.contentswrap{
margin: 0px;
}
}


.glossymenu .arrowdiv{
 
position: absolute;
 
right: 2px;
/* ========================================  #page ページ外枠 */
background: transparent url(http://openwetware.org/images/6/69/Arrow.gif) no-repeat center right;
#page {
width: 950px;
margin: 0px auto;
text-align: left;
}
}


.glossymenu li a:visited, .glossymenu li a:active{
 
color: white;
 
 
/* ========================================  #header 画面上部 */
#header {
height: 75px;
margin: 0px;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
}
}


.glossymenu li a:hover{
 
background-image: url(http://openwetware.org/images/5/50/Glossyback.jpg);
#sitename {
margin: 30px 0px 0px;
font-size: 24px;
font-weight: bold;
color: #666666;
}
}


/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */


</style>


<script type="text/javascript">
/* ======================================== #menu 上部メニュー */
#menu {
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}


/***********************************************


* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more


***********************************************/
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.


function createcssmenu(){
ul.menu_f02{
for (var i=0; i<menuids.length; i++){
height: 30px;
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
margin: 0px;
    for (var t=0; t<ultags.length; t++){
border-bottom: 5px solid #333333;
    var spanref=document.createElement("span")
background-color: #0B7A8E;
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)
</script>
<table border="0" align="center" vertical-align: middle;>
<tr>
  <td>
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai">Home</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Strategy">Strategy</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Design">Design</a></li>
<li><a href="#">Experiments</a>
    <ul>
    <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Electrophoresis">Electrophoresis</a>
    <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Atomic_Force_Microscope">AFM</a>
    </ul>
</li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Computational_design/Simulation" >Simulation</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Notes">Notes</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Team">Team</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Resources">Resources</a></li> 
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Sitemap">Sitemap</a></li> 




</ul>
</td>
  <td>
<img src="http://openwetware.org/images/0/07/3D_sendai.png" width="650">
</td>
</tr>
</table>
</html>
<html>
<head>
<style type="text/css">
#content {padding-left: 10px;width: 970px;}}
h3 {font-decoration: none;}
h1.firstHeading {display: none; }
</style>
</head>
</html>
<big>


<html>
<style rel="stylesheet" type="text/css">
/*このスタイルシートの著作権はテンプレート工房TAKEにあります*/
/*ページのレイアウト用css*/


body{
ul.menu_f02 li{
  background:#F5F5DC; /*壁色と壁紙設定*/
float: left;
  background-repeat:repeat;/*繰り返さない場合はno-repeatに変更*/
border-right: 1px solid #9AA7B6;
  font:"メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
display: block;
  color: #333333;
  margin:0px;
  padding:0px;
}
}


#contents{     
      width:900px;
  margin:0 auto;
  background-color: #FFFFFF ;/*コンテンツ内の背景(サイズをぴったりにすること）*/
  background-repeat:repeat-y;  /*縦に繰り返し*/
  border:solid 1px #666666;/*サイトに枠を付ける設定,色の変更可*/
      position:relative;
      font-size:80%;
}




/*ヘッダー部分の設定*/
#header{
  background-image:url(http://openwetware.org/images/c/c4/TeamSendai-logo3.png) ;/*ヘーダー*/
  background-repeat:repeat-x;  /*縦に繰り返し*/
  background-position:top right;
  height:140px; /*ヘーダーの高さ*/
}


#header p {
ul.menu_f02 li a{
font-size: 26px;
height: 20px;
        color:#333333;
width: 130px;
padding-top: 15px;
padding: 10px 0px 0px;
padding-left: 20px;
border-bottom: 5px solid #333333;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
background-color: #0B7A8E;
}
}




/*上部メニューボタンの設定*/
#navbar{
      background-color:#FFFFFF;
      width: 100%;
      height:40px;
      position:margine;
      top:100px;
      left:0px;
      border-top:solid 1px #FFFFFF;
      border-bottom:solid 1px #FFFFFF;
      }




#navbar ul{
ul.menu_f02 li a.nowthis{
          margin:0;
border-bottom: 5px solid #FF6699!important;
  padding:0;
  list-style-type:none;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height:40px;
  letter-spacing:2px;
}
}


#navbar li{
 
      background-color:#000099;  /*上部メニューのボタンの背景*/
 
  float:left;
 
  width:146px;  /*メニューボタンの幅*/
ul.menu_f02 li a:hover , ul.menu_f01 li a.nowthis{
  text-align:center;
padding: 10px 0px 0px;
  padding:0;
border-bottom: 5px solid #D3FBFE;
  border-right:solid 1px #ffffff;
color: #FFFFFF;
  }
background-color: #1DAFD3;
#navbar ul a:hover{
  background-color:#0033cc; /*メニューボタンにカーソルが来た時に背景*/
  width:146px; /*メニューボタンの幅*/
}
}
     
#navbar a{
      color:#ffffFF;/*メニューボタンの文字の色*/
  display:block;
  }


#navbar a:hover{
  color:#999999; /*メニューの文字がカーソルが来た時、この色に変わる*/
  }








/*サイドメニューの設定*/
/* ======================================== #contents 画面中央部 #mainとサイドメニューの外枠 */
#side{
#contents{
background-color:#ddffff;
padding: 30px 0px 20px;
      width:220px;/*サイドの幅（変更するときはコンテンツ背景も変更すること）*/
margin: 0px;
  position:margin;
  top:600px;/*上からの位置*/
  left:12px;
}
}


#side h3 {
 
font-size: 90%;
 
border: double 3px #FFFFFF;
/* ========================================  #main ページの本文 */
color:#ffffff;
#main {
text-align: center;
float: left;
background-color:#999999;
width: 500px;
      width:190px;
margin: 0px 0px 20px;
line-height: 30px;
margin-top: 10px;
margin-left: 5px;
margin-bottom: 5px;
}
}


#side h3 a {
 
      color:#ffffff;
 
  font-weight:normal;
#main h1 {
padding: 0px;
margin: 0px;
color: #0B7A8E;
}
}


#side ul{
 
      font-size:100%;
 
  line-height:220%; /*サイドの文字と文字の行間設定*/
#main h2 {
  background-color: #ddffff;
clear: both;
  margin:0px;
padding: 3px 0px 3px 5px;
  padding-left:10px;
margin: 2em 0px 1em;
border-left: 10px solid #F4CC0B;
font-size: 120%;
background-color: #F6F6F6;
}
}


#side ul a:hover {
 
      width:180px;
 
background-color: #99ffff; /*サイドのカーソルオーバー時の背景色*/
 
color: #999999; /*サイドのカーソルオーバー時の文字色*/
 
#main h3 {
margin: 0px 0px 0.5em 3px;
font-size: 100%;
color: #336699;
}
}


#side ul{
 
    list-style-type:none;
/* ========================================  menuL 左サイドメニュー */
padding-left:2px;
#menuL {
float: left;
width: 200px;
margin: 0px 20px 20px 0px;
background-color: #F6F6F6;
}
}


#side li{
#menuL p{
padding-left:15px;　/*文字の左端からの位置*/
margin-right: 1em;
margin-left: 1em;
}
}


#side li a{
 
    color:#333333;/*サイドの文字色*/
/* ========================================  menuL 右サイドメニュー */
    width:180px;
#menuR {
    display:block;
float: right;
width: 200px;
margin: 0px 0px 20px;
background-color: #F6F6F6;
}
}


#side .ad_list li{
 
    background-image:none;
#menuR p{
padding-left:0;
margin-right: 1em;
margin-left: 1em;
}
}




/* ========================================  #underNavi 画面下部サブナビゲーション */
#underNavi{
clear: both;
margin: 0px;
border-top: 1px solid #999999;
text-align: center;
}




/*右側メイン部分の設定*/
 
#main{
/* ========================================  #footer 画面下部 */
      width:630px;
#footer {
      padding-top:15px;
padding: 10px 0px;
      margin-left:240px;
border-top: 5px solid #CCCCCC;
color: #FFFFFF;
text-align: center;
background-color: #0B7A8E;
}
}


Line 323: Line 245:




/*下部のフッター部分の設定*/
/* ========================================  #templatelink 画面下部:著作リンク */
address{
#templatelink {
  font-size:80%;
padding: 3px 0px;
  font-style:normal;
margin: 0px 0px 5px;
  text-align:center;
font-size: 14px;
  padding-top:5px;
text-align: right;
}
}


address{
      background-color:#000066;
      color:#ffffff;
          width:882px;
  padding-bottom:10px;
  border:none;
  }
address a{
      color:#ff9999;
  }


#templatelink a{
color: #336699;
text-decoration: none;
}




/*文字の設定*/
h1{
  font-size:60%;
  letter-spacing: 2px;
  padding-left:10px;
  margin: 0px;
}


h1 a{
/* ========================================  そのほか個別設定 */
      color:#FFFFFF;
.title{
  font-weight:normal;
padding: 0px 0px 0px 10px;
margin: 0px 0px 20px;
border-left: 30px solid #F4CC0B;
}
}




h2{
.label{
      font-size:140%;
padding: 7px 5px 5px 10px;
  border-left: 10px solid #000066;
margin: 0px 0px 10px;
          border-bottom:solid 1px #000099;/*文字の下に線を入れる設定*/
border-left: 10px solid #F4CC0B;
          width:900px;
font-weight: bold;
  padding-left: 5px;
color: #FFFFFF;
  color:#333333;  
background-color: #0B7A8E;
  margin-top: 15px;
  margin-bottom: 5px;
}
}


h3{
      font-size:120%;
border: solid 1px #111111;
        color:#ffffff;
background-color:#4682B4 ;
line-height: 30px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}


p{
      font-size:90%;/*全体の文字サイズ*/
  line-height:150%;/*全体で使う、文字と文字の行間*/
          margin-left:5px;
}


p img{
.subh {
      float:left;
padding: 5px 0px 0px 3px;
          margin-top:5px; /*写真の左にスペースを空ける*/
margin: 0px;
          margin-left:5px; /*写真の左にスペースを空ける*/
border-top: 1px dashed #999999;
  margin-right:10px; /:写真と文字の間隔*/
font-weight: bold;
color: #4A8854;
}
}




/*リンク文字の設定*/
.photo {
a{
margin: 0px 0px 20px;
    color:#000099;
      text-decoration:none;
}
a:hover {
color: #FF0000;/*リンクの文字の上にマウスが来た時この色に変わる*/
text-decoration: none;
}
}


#purple{
 
      font-size:120%;
.toInfo {
border: solid 1px #111111;
margin: 0px 0px 1em;
        color:#ffffff;
text-align: right;
background-color:#9370DB;
list-style-type: none;
line-height: 40px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}
}


h5{
      font-size:120%;
border: solid 1px #111111;
        color:#ffffff;
background-color:#FFA500;
line-height: 30px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}


h6{
.boxL {
      font-size:120%;
float: left;
border: solid 1px #111111;
height: 160px;
        color:#ffffff;
width: 245px;
background-color:#006400;
margin: 0px 0px 15px;
line-height: 30px;
font-size: 92%;
  padding-left:10px;
background-color: #EBF0F3;
  margin-top: 10px;
  margin-bottom: 1px;
}
}
 
.boxR {
#red{
float: right;
      font-size:120%;
height: 160px;
border: solid 1px #111111;
width: 245px;
        color:#ffffff;
margin: 0px 0px 15px;
background-color:#DC143C;
font-size: 92%;
line-height: 40px;
background-color: #EBF0F3;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}
}


#blue{
.boxL p, .boxR p{
      font-size:120%;
margin: 10px !important;
border: solid 1px #111111;
        color:#ffffff;
background-color:#191970;
line-height: 40px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}
}
</style>
</style>
</html>
</html>

Revision as of 00:35, 7 August 2012

<html> 


<style type="text/css">

{ margin:0; padding:0; }


body { margin: 0; color: #333; text-align: center; background-color: #FDFDFD; background-image: url(img/back01.jpg); background-position: top; background-repeat: repeat-x; }


/* 文字サイズ */

  1. main{}
  2. menuR,#menuL{

font-size: 92%; }


p, /* 文章の行間を指定 */

  1. contents li,

dl, dd { line-height: 160%; }


p{ margin: 0px 0em 1.5em 3px; }


ul,ol,dl{ margin: 0em 1em 1em 2em; }


/* ======================================== .contentswrap 間隔・余白調整用 */ .contentswrap{ margin: 0px; }


/* ======================================== #page ページ外枠 */

  1. page {

width: 950px; margin: 0px auto; text-align: left; }



/* ======================================== #header 画面上部 */

  1. header {

height: 75px; margin: 0px; border-top: 1px solid #FFFFFF; color: #FFFFFF; }


  1. sitename {

margin: 30px 0px 0px; font-size: 24px; font-weight: bold; color: #666666; }


/* ======================================== #menu 上部メニュー */

  1. menu {

border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; }



ul.menu_f02{ height: 30px; margin: 0px; border-bottom: 5px solid #333333; background-color: #0B7A8E; }



ul.menu_f02 li{ float: left; border-right: 1px solid #9AA7B6; display: block; }



ul.menu_f02 li a{ height: 20px; width: 130px; padding: 10px 0px 0px; border-bottom: 5px solid #333333; font-size: 14px; font-weight: bold; color: #FFFFFF; text-decoration: none; display: block; text-align: center; background-color: #0B7A8E; }



ul.menu_f02 li a.nowthis{ border-bottom: 5px solid #FF6699!important; }



ul.menu_f02 li a:hover , ul.menu_f01 li a.nowthis{ padding: 10px 0px 0px; border-bottom: 5px solid #D3FBFE; color: #FFFFFF; background-color: #1DAFD3; }



/* ======================================== #contents 画面中央部 #mainとサイドメニューの外枠 */

  1. contents{

padding: 30px 0px 20px; margin: 0px; }


/* ======================================== #main ページの本文 */

  1. main {

float: left; width: 500px; margin: 0px 0px 20px; }


  1. main h1 {

padding: 0px; margin: 0px; color: #0B7A8E; }


  1. main h2 {

clear: both; padding: 3px 0px 3px 5px; margin: 2em 0px 1em; border-left: 10px solid #F4CC0B; font-size: 120%; background-color: #F6F6F6; }



  1. main h3 {

margin: 0px 0px 0.5em 3px; font-size: 100%; color: #336699; }


/* ======================================== menuL 左サイドメニュー */

  1. menuL {

float: left; width: 200px; margin: 0px 20px 20px 0px; background-color: #F6F6F6; }

  1. menuL p{

margin-right: 1em; margin-left: 1em; }


/* ======================================== menuL 右サイドメニュー */

  1. menuR {

float: right; width: 200px; margin: 0px 0px 20px; background-color: #F6F6F6; }


  1. menuR p{

margin-right: 1em; margin-left: 1em; }


/* ======================================== #underNavi 画面下部サブナビゲーション */

  1. underNavi{

clear: both; margin: 0px; border-top: 1px solid #999999; text-align: center; }


/* ======================================== #footer 画面下部 */

  1. footer {

padding: 10px 0px; border-top: 5px solid #CCCCCC; color: #FFFFFF; text-align: center; background-color: #0B7A8E; }



/* ======================================== #templatelink 画面下部:著作リンク */

  1. templatelink {

padding: 3px 0px; margin: 0px 0px 5px; font-size: 14px; text-align: right; }


  1. templatelink a{

color: #336699; text-decoration: none; }


/* ======================================== そのほか個別設定 */ .title{ padding: 0px 0px 0px 10px; margin: 0px 0px 20px; border-left: 30px solid #F4CC0B; }


.label{ padding: 7px 5px 5px 10px; margin: 0px 0px 10px; border-left: 10px solid #F4CC0B; font-weight: bold; color: #FFFFFF; background-color: #0B7A8E; }


.subh { padding: 5px 0px 0px 3px; margin: 0px; border-top: 1px dashed #999999; font-weight: bold; color: #4A8854; }


.photo { margin: 0px 0px 20px; }


.toInfo { margin: 0px 0px 1em; text-align: right; list-style-type: none; }


.boxL { float: left; height: 160px; width: 245px; margin: 0px 0px 15px; font-size: 92%; background-color: #EBF0F3; } .boxR { float: right; height: 160px; width: 245px; margin: 0px 0px 15px; font-size: 92%; background-color: #EBF0F3; }

.boxL p, .boxR p{ margin: 10px !important; } </style> </html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2012/TeamJapan/Sendai/Header&oldid=617370"