Team:Tokyo Tech/test css

From 2009.igem.org

(Difference between revisions)

Ibuki (Talk | contribs)
(New page: /* ------------------------------------------------------------- [1] レイアウトに関する指定 [2] ヘッダーブロック内に関する指定 [3] コンテンツブロック内...)
Newer edit →

Revision as of 04:15, 16 October 2009

/* -------------------------------------------------------------

[1] レイアウトに関する指定 [2] ヘッダーブロック内に関する指定 [3] コンテンツブロック内に関する指定 [4] フッターブロック内に関する指定 [5] CSSデザインサンプルリンク指定

CSSデザインサンプ [ URL ] http://www.css-designsample.com

*/

/* 一括で全ての要素の余白をゼロに指定 */

{

 margin: 0;
 padding: 0;

}

/* 全体的なリンク */

a:link, a:visited, a:hover, a:active { text-decoration: underline; }

a:link { color: #00f; }

a:visited { color: #90f; }

a:hover { color: #f00; }

a:active { color: #f00; }

/* -------------------------------------------------------------

  [1] レイアウトに関する指定 */

body {

 font-size: 85%;
 text-align: center;
 padding: 0;
 margin: 0;

}

/*-- 全体を囲んでいます --*/

wrapper {

 text-align: left;
 width: 800px;
 margin: 0 auto;
 border-left: 1px solid #666;
 border-right: 1px solid #666;

}

/*-- ヘッダー部分 --*/

header {

 width: 100%;
 height: 245px;
 position: relative;
 background: url(Tokyotech.jpg) no-repeat 0 0;
 background-position:top right;

}

/*-- コンテンツ部分 740px --*/

contents { padding: 40px 30px; }

/*-- フッター部分 --*/

footer {

 width: 802px;
 margin: 0 auto;
 padding: 2em 0 0.5em;
 background-color: #333;

}

/* -------------------------------------------------------------

  [2] ヘッダーブロック内に関する指定 */

/* 見出し */

h1 {

 font-size: 100%;
 font-weight: normal;
 text-align: right;
 position: absolute;
 top: 10px;
 left: 30px;
 color: #666;

}

/* サイトタイトル */ .logo {

 font-size: 160%;
 position: absolute;
 top: 30px;
 left: 30px;

}

.logo a {

 font-weight: bold;
 color: #000;
 text-decoration: none;

}

.logo a:hover {

 color: #f00;
 text-decoration: none;

}

/* 概要 */ .description {

 line-height: 1.5em;
 position: absolute;
 bottom: 45px;
 left: 30px;
 color: #000;

}

/*---------------------------------------グローバルナビ部分*/

globalnavi {

 font-size: 95%;
 list-style-type: none;
 width: 800px;
 height: 40px;
 position: absolute;
 bottom: 0;
 left: 0;

}

globalnavi li {

 width: 200px;
 float: left;

}

globalnavi li a {

 text-align: center;
 text-decoration: none;
 width: 200px;
 height: 28px;
 display: block;
 padding-top: 12px;
 background-image: url(img/bg-globalnavi.jpg);
 background-repeat: no-repeat;
 color: #9f0

}

category01 a { background-position: 0 0; }

category02 a { background-position: -200px 0; }

category03 a { background-position: -400px 0; }

category04 a { background-position: -600px 0; }

globalnavi li a:hover {

 text-decoration: none;
 background-image: url(img/bg-globalnavi.jpg);
 background-repeat: no-repeat;
 color: #fff;

}

category01 a:hover { background-position: 0 -40px; }

category02 a:hover { background-position: -200px -40px; }

category03 a:hover { background-position: -400px -40px; }

category04 a:hover { background-position: -600px -40px; }

/*--サブメニュー部分--*/

globalnavi ul {

 list-style-type: none;
 width: 200px;
 height: auto;
 position: static;

}

globalnavi ul li {

 width: 200px;
 float: none;

}

globalnavi ul li a {

 text-align: left;
 text-decoration: none;
 width: 190px;
 height: auto;
 display: block;
 padding: 4px;
 border: 1px outset #690;
 background-image: none;
 background-color: #690;
 color: #000;

}

globalnavi ul li a:hover {

 text-decoration: none;
 border: 1px outset #666;
 background-image: none;
 background-color: #666;
 color: #fff;

}

globalnavi .menu ul { display: none; }

globalnavi .menuOn ul { display: block; }

/* -------------------------------------------------------------

  [3] コンテンツブロック内に関する指定 */

/* 見出し */ h2, h3, h4, h5, h6 {

 font-size: 140%;
 font-weight: normal;
 margin-bottom: 0.5em;
 padding: 3px 0 2px;
 color: #030;
 border-top: 2px solid #9c0;
 border-bottom: 1px solid #ccc;

}

h3, h4, h5, h6 { margin-top: 2em; }

/* 文字 */

contents p {

 line-height: 1.5em;
 margin-bottom: 1em;

}

/* -------------------------------------------------------------

  [5] フッターブロック内に関する指定 */

footer p {

 text-align: center;
 color: #fff;

}

/* -------------------------------------------------------------

  [6] CSSデザインサンプルリンク指定 */

cds {

 font-size: 80%;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 text-align: right;
 margin: 0;
 padding-right: 20px;
 clear: both;

}

cds,
cds a,
cds a:hover {

 text-decoration: none;
 color: #ccc;

}