Team:Korea U Seoul/template/banner
From 2013.igem.org
(Difference between revisions)
(Created page with "<html> <style> /* Edited 7/16/11 from Wiki Hacks */ /* Author: Pieter van Boheemen */ /* Team: TU Delft */ #globalWrapper { background-color: #ffffff; - →좌우 여백 컬러: ...") |
|||
(112 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | ||
+ | |||
+ | |||
<style> | <style> | ||
- | /* | + | .content_wrapper{ |
- | /* | + | top: -10px; |
- | /* | + | width: 80%; min-width:1000px; max-width:1000px; margin:0 auto;overflow: auto; background-color:#FFFFFF; padding: 0 20px; min-height: 1000px; |
+ | background-image: url('https://static.igem.org/mediawiki/2013/6/6e/Natural_paper.png'); | ||
+ | } | ||
+ | .title{ | ||
+ | width: 100%; | ||
+ | margin-top : 40px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .title > .title_ {color: #8b0027; font-weight: bold; font-size: 15pt; margin-top: 10px;} | ||
+ | .title > .left_line{float: left; width: 30%; background-color: #8B0029; height: 5px;} | ||
+ | .title > .right_line{float: left; width: 70%; background-color: #eb89a5; height: 2px;} | ||
+ | |||
+ | .content_{ | ||
+ | margin-top: 20px; | ||
+ | font-size: 10pt;padding-bottom:40px; | ||
+ | line-height: 130%; | ||
+ | } | ||
+ | .content_ .float_img{ | ||
+ | float: right; | ||
+ | width: 150px; | ||
+ | margin: 10px; | ||
+ | } | ||
+ | .image_line {margin-top: 20px; text-align: center;} | ||
+ | .image_line img{ | ||
+ | height: 150px; | ||
+ | margin-right: 3%; | ||
+ | } | ||
+ | p:first-child:first-letter{font-weight: bold; font-size: 150%;} | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <style> | ||
+ | /* | ||
+ | ** MediaWiki 'monobook' style sheet for CSS2-capable browsers. | ||
+ | ** Copyright Gabriel Wicke - http://wikidev.net/ | ||
+ | ** License: GPL (http://www.gnu.org/copyleft/gpl.html) | ||
+ | ** | ||
+ | ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John | ||
+ | ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher, | ||
+ | ** Michael Zeltner and Geir Bækholt) | ||
+ | ** All you guys rock :) | ||
+ | */ | ||
+ | |||
+ | |||
+ | /* Font size: | ||
+ | ** We take advantage of keyword scaling- browsers won't go below 9px | ||
+ | ** More at http://www.w3.org/2003/07/30-font-size | ||
+ | ** http://style.cleverchimp.com/font_size_intervals/altintervals.html | ||
+ | */ | ||
+ | |||
+ | body { | ||
+ | font: x-small sans-serif; | ||
+ | color: black; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | /* scale back up to a sane default */ | ||
#globalWrapper { | #globalWrapper { | ||
- | + | position: relative; | |
- | + | font-size: 127%; | |
- | margin: 0; | + | width: 100%; |
- | padding: 0; | + | margin: 0; |
- | + | padding: 0; | |
- | + | padding-bottom: 10px; | |
- | + | } | |
- | + | #catlinks { | |
+ | display: none; | ||
+ | } | ||
+ | .visualClear { | ||
+ | clear: both; | ||
} | } | ||
+ | |||
+ | /* The top section contains the banner, the search box, and the left and right menus */ | ||
#top-section { | #top-section { | ||
- | background- | + | background-color: #8b0029; |
- | height: | + | height:18px ! important; /* 메인 배너 이미지 높이 */ |
- | margin: 0px; | + | margin: 0px; |
- | margin-left: auto; | + | margin-left: auto; |
- | margin-right: auto; | + | margin-right: auto; |
- | margin-bottom: 0 !important; | + | margin-bottom: 0 !important; |
- | padding:0; | + | padding:0; |
- | border: none; | + | border: none; |
+ | position: relative; | ||
+ | width: 100%; | ||
} | } | ||
- | + | #p-logo { | |
- | + | position: absolute; | |
- | #p-logo { | + | z-index: 1; |
- | height: | + | height: 107px; |
- | + | width: 975px; | |
- | display:none; | + | display: none; |
- | }.firstHeading {display:none; } | + | } |
- | #search-controls { | + | .firstHeading {display:none; } |
- | + | #search-controls { | |
- | + | position: absolute; | |
- | + | top: 20px; | |
- | + | right: 15px; | |
- | + | width: 150px; | |
- | + | height: 40px; | |
- | + | background-color: transparent; | |
- | + | text-align: center; | |
- | + | z-index: 3; | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 97: | Line 155: | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
- | |||
+ | #header { | ||
+ | width: 100%; | ||
+ | height:90px; | ||
+ | position:relative; | ||
+ | z-index:999; | ||
+ | background:#d8d3cd; | ||
+ | } | ||
+ | #nav { | ||
+ | margin: 0 auto; | ||
+ | background:#d8d3cd; | ||
+ | width: 1100px | ||
+ | } | ||
+ | #nav ul, #nav li { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #nav ul{ | ||
+ | } | ||
+ | #nav > ul > li > a > img{ | ||
+ | height: 40px; | ||
+ | margin-bottom: 10px; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | #nav li { | ||
+ | position:relative; | ||
+ | list-style:none; | ||
+ | float:left; | ||
+ | margin:0px; /* 0이엇음 */ | ||
+ | padding:0px 0px 0px 0px; | ||
+ | width: 180px; | ||
+ | } | ||
+ | #nav li:hover{ | ||
+ | background-color: #8B0029 | ||
+ | } | ||
+ | |||
+ | #nav a { | ||
+ | display:block; | ||
+ | font-weight:bold; | ||
+ | text-decoration:none; | ||
+ | margin:0px; | ||
+ | padding:5px 15px 5px 15px; /* 어디까지 hover 효과 먹히는지 */ | ||
+ | } | ||
+ | #nav li ul { | ||
+ | position:absolute; | ||
+ | top:92px; /* 서브가 아래로 열리게하는 */ | ||
+ | display:none; | ||
+ | text-align: center; | ||
+ | background-color: #8B0029 | ||
+ | } | ||
+ | #nav li.on ul { | ||
+ | display:block; | ||
+ | } | ||
+ | /* color */ | ||
+ | #header {background:#8b0029;} | ||
+ | #nav a {background:#8b0029; color:#ffffff;} | ||
+ | #nav .on a, | ||
+ | #nav li li a {background:#d8d3cd; color:#8b0029;} | ||
+ | #nav > ul > li > ul > li :hover{ | ||
+ | background-color: #8B0029; | ||
+ | color: #FFFFFF; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | /* contents */ | ||
+ | #content { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | margin: 0 auto; | ||
+ | padding: 5px 0px 5px 0px; | ||
+ | color: black; | ||
+ | border-left: none; | ||
+ | border-right: none; | ||
+ | line-height: 1.5em; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="header"> | ||
+ | <div id="nav"> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul"><img src="https://static.igem.org/mediawiki/2013/3/31/Koreauseoul_logo.png"><br />Home</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Team/Korea_University"><img src="https://static.igem.org/mediawiki/2013/1/13/Introduction.png"><br />Team</a> | ||
+ | <ul> | ||
+ | <!--<li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Team/Korea_University">Korea University</a> | ||
+ | </li>--> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Team/Korea_University">Our members</a> | ||
+ | </li> | ||
+ | <li><a href="https://igem.org/Team.cgi?year=2013&team_name=Korea_U_Seoul">Official Team Profile</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Project/Description"><img src="https://static.igem.org/mediawiki/2013/0/00/Review.png"><br />Project</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Project/Description">Description</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Project/Design">Design & Parts</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Project/Protocols">Protocol</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Project/Result">Result</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Project/Application">Application & Improvement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Notebook"><img src="https://static.igem.org/mediawiki/2013/7/7d/Howto.png"><br />Notebook</a> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Human_Practice/Ownership_Innovation"><img src="https://static.igem.org/mediawiki/2013/d/de/Mypage.png"><br />Human Practice</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Human_Practice/Ownership_Innovation">Ownership & Innovation</a> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Human_Practice/Outreach">Outreach</a> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Human_Practice/Safety">Safety Questions</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://igem.org/"><img src="https://static.igem.org/mediawiki/2013/c/ce/Logos.png"><br />iGEM</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <script> | ||
+ | $('#nav li').bind('mouseenter keyup mouseleave', function() { | ||
+ | $(this) .addClass('on').siblings().removeClass(); | ||
+ | |||
+ | $(this).unbind('mouseenter keyup mouseleave', function(){ | ||
+ | |||
+ | }) | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 22:24, 27 September 2013