Team:UI-Indonesia/header

From 2013.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 1: Line 1:
<!-- *** Mencoba buat template isinya header, menu, background *** -->
<!-- *** Mencoba buat template isinya header, menu, background *** -->
<html>
<html>
 +
<style>
 +
body{position:absolute; top:0px; width:100%; height:100%;}
 +
 +
#contentSub {
 +
display:none;
 +
}
 +
body {
 +
    background:  #fff url('https://static.igem.org/mediawiki/2013/c/c1/Bg3ui.jpg') no-repeat fixed;
 +
background-size: 1350px ;
 +
background-position: center top;
 +
}
 +
 +
#top-section{
 +
  height:0px;
 +
    border:none;
 +
    width:980px;
 +
    margin:0 auto;
 +
    padding:0 0 0 0;
 +
    background-color:transparent;
 +
    overflow:hide;
 +
 +
}
 +
#p-logo{display:none;}
 +
#search-controls{display:none;}
 +
#top{display:none;}
 +
.firstHeading{display:none;}
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
 +
#content {background-color:transparent; border-left-width:0px; border-right-width:0px; padding: 0px 5px 0px 5px}
 +
</style>
<body>
<body>
<!-- header of the page -->
<!-- header of the page -->
Line 8: Line 38:
<!-- *** Mulai kode gambar header oleh Teguh *** -->
<!-- *** Mulai kode gambar header oleh Teguh *** -->
-
<a href="http://s1273.photobucket.com/user/motegum/media/MainPageWelcomeImage_zps9356ec02.png.html" target="_blank"><img src="http://i1273.photobucket.com/albums/y401/motegum/MainPageWelcomeImage_zps9356ec02.png" border="0" alt=" photo MainPageWelcomeImage_zps9356ec02.png"/></a>
+
<img src="https://static.igem.org/mediawiki/2013/6/67/Header_New_Design.png" border="0">
Line 14: Line 44:
</header>
</header>
-
 
<div>
<div>
-
<menu>
+
 
 +
<!-- *** Menu Style CSS From MIT 2012, Thankyou..!! :D *** -->
<style>
<style>
-
#nav { font-family: "Trebuchet MS", sans-serif; font-size: 15px; color: white;}
+
.nav{
-
#nav { background-color: #096f02; width: 815px; list-style: none; position:center; }
+
float:left;
-
#nav { float: left;}
+
width:100%;
-
#nav li { float: left; margin: 0px; position:relative; }
+
margin:0;
-
#nav a { display: block; padding: 5px 15px; text-decoration: none; color: white; border-style: none; }
+
list-style:none;
-
#nav a:hover { color: #f9fd92; }
+
position:relative;
-
</style>
+
z-index:5;
-
<div id="border-top"></div> 
+
/*CHANGE THIS TO CENTER*/
-
<ul id="nav">
+
padding:0 185px; /*12px;*/
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia">HOME</a></li>
+
}
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Parts">PARTS</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Team">TEAM</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Project">PROJECT</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/HumanPractices">HUMAN PRACTICES</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Notebook">NOTEBOOK</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Safety">SAFETY</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UI-Indonesia/About">ABOUT US</a></li>
+
-
</menu>
+
-
</div>
+
 +
.nav li{
 +
float:left;
 +
position:relative;
 +
display:inline;
 +
line-height: 2em;
 +
}
 +
.nav a{
 +
float:left;
 +
height:2em;
 +
padding: 0 1.3em;
 +
color:white;
 +
/*Padding: bottom, right, top, left */
 +
/*padding:0.2em 1.3em 0.2em 1.3em;*/
 +
border-right:1px solid white;
 +
white-space:nowrap;
 +
}
-
<!-- *** Percobaan ikon menu oleh Teguh *** -->
+
.nav a:hover{
-
<!-- *** <div>
+
color:#00FFFF !important;
-
<a href="https://2013.igem.org/Team:UI-Indonesia"><img src="http://i1273.photobucket.com/albums/y401/motegum/Home_zps0c8ea51e.jpg" width="auto" height="70" border="0" alt=" photo ButtonHome_zps97ec748e.png"/>Home</a>
+
}
-
<a href="https://2013.igem.org/Team:UI-Indonesia/Parts"><img src="http://i1273.photobucket.com/albums/y401/motegum/puzzle-vector_zps2833a421.jpg" width="auto" height="70" border="0" alt=" photo ButtonParts_zpscad1bf3f.png"/>Parts</a>
+
/*--- DROPDOWN ---*/
 +
.nav ul{
 +
background:#fff;
 +
list-style:none;
 +
position:absolute;
 +
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
 +
margin-top: 25px;
 +
margin-left:0;
 +
margin-right:0;
-
<a href="https://2013.igem.org/Team:UI-Indonesia/Team"><img src="http://i1273.photobucket.com/albums/y401/motegum/Team_zpsc7153c46.jpg" width="auto" height="70" border="0" alt=" photo ButtonBackground2_zps5baf8876.png"/>Team</a>
+
}
-
<a href="https://2013.igem.org/Team:UI-Indonesia/Project"><img src="http://i1273.photobucket.com/albums/y401/motegum/project_zps19a8e841.jpg" width="auto" height="70" border="0" alt=" photo ButtonBackground2_zps5baf8876.png"/>Project</a>
 
-
<a href="https://2013.igem.org/Team:UI-Indonesia/HumanPractices"><img src="http://i1273.photobucket.com/albums/y401/motegum/HumanPractise_zpse76245c0.jpg" width="auto" height="70" border="0" alt=" photo ButtonBackground2_zps5baf8876.png"/>Human Practices</a>
+
.nav ul li{
 +
padding-top:1px;
 +
}
-
<a href="https://2013.igem.org/Team:UI-Indonesia/Notebook"><img src="http://i1273.photobucket.com/albums/y401/motegum/Notebook_zps2f87faf7.jpg" width="auto" height="70" border="0" alt=" photo ButtonBackground2_zps5baf8876.png"/>Notebook</a> *** -->
+
.nav ul a{
-
<!-- *** Percobaan ikon menu oleh Teguh *** -->
+
padding-top: 3px;
-
</div>
+
padding-bottom:3px; /*Introducing a padding between the li and the a give the illusion spaced items */
 +
white-space:normal;
 +
text-decoration:none;
 +
height:auto;
 +
width: 13em;
 +
line-height: 1.5em;
 +
}
-
+
.nav li:hover ul{ /* Display the dropdown on hover */
-
+
left:0; /* Bring back on-screen when needed */
-
+
text-decoration:none;
-
<!-- body navigation bar -->
+
}
-
<!-- di sini kodenya ada yang diambil dari wiki Edinburgh, yang dari contoh -->
+
-
<!-- *** Percobaan Background oleh Teguh *** -->
+
.nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
-
<body background=http://i1273.photobucket.com/albums/y401/motegum/backgroundwikinorepeat_zps602d012d.jpg>
+
 
-
<style>
+
text-decoration:none;
-
body {background size: auto;}
+
}
 +
 
 +
.nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
 +
background:#121212;
 +
text-decoration:none;
 +
}
 +
 
 +
.nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
 +
background:#8a8a88;
 +
text-decoration:none;
 +
}
</style>
</style>
-
</body>
+
<!-- *** End of Menubar CSS style code from MIT, Thankyouuu :D *** -->
-
<!-- *** Percobaan Background oleh Teguh *** -->
+
<div id="border-top"></div>
-
<!-- body section -->
+
<!-- *** Percobaan kode menu dropdown MIT *** -->
-
<div id= "section" style= "width: 960px; height: auto; text-align: justify">
+
<ul class="nav">
-
</html>
+
-
<!-- footer -->
+
-
<div id= "footer" style="backgound-color: #b0c4de; width: 960px; height: auto; text-align:center">
+
-
<!-- footer-nya ini bisa diganti isinya -->
+
-
<br><br>
+
-
<h1><span id= "Sponsors">Our Beloved Sponsors</span></h1>
+
-
<html>
+
-
<img src="http://i1273.photobucket.com/albums/y401/motegum/sponsorUI_zps8835fcca.png" width="auto" height="70" border="0" alt=" photo ButtonHome_zps97ec748e.png"/>
+
-
<img src="http://i1273.photobucket.com/albums/y401/motegum/logoFTUI_zps5eaeb14a.jpg" width="auto" height="70" border="0" alt=" photo ButtonParts_zpscad1bf3f.png"/>
+
<li><a href="https://2013.igem.org/Team:UI-Indonesia">HOME</a></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Team">TEAM</a>
 +
<!-- ***<ul>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Member">Members</a></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Lab">Our Lab</a></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Gallery">Gallery</a></li>
 +
</ul>*** -->
 +
</li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Description">PROJECT</a>
 +
<ul>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Description">Overview</a></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Abstract">Abstract</a></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Parts">Parts</a></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/Modelling">Modelling</a></li>
 +
<!-- ***<li><a href="https://2013.igem.org/Team:UI-Indonesia/JudgingForm">Judging Form</a></li>*** -->
 +
</ul></li>
 +
<li><a href="https://2013.igem.org/Team:UI-Indonesia/July">NOTEBOOK</a>
 +
<ul>
 +
        <li><a href="https://2013.igem.org/Team:UI-Indonesia/July">July</a></li>
 +
        <li><a href="https://2013.igem.org/Team:UI-Indonesia/August">August</a></li>
 +
        <li><a href="https://2013.igem.org/Team:UI-Indonesia/September">September</a></li>
 +
</ul>
 +
</li>
 +
        <li><a href="https://2013.igem.org/Team:UI-Indonesia/Safety">SAFETY</a></li>
 +
        <li><a href="https://2013.igem.org/Team:UI-Indonesia/HumanPractices">HUMAN PRACTICES</a></li>
 +
        <li><a href="https://2013.igem.org/Team:UI-Indonesia/Attributions">ATTRIBUTIONS</a></li>
 +
</ul>
 +
<hr color:"white";>
</html>
</html>
-
 
-
                </div>
 

Latest revision as of 01:56, 19 October 2013

Retrieved from "http://2013.igem.org/Team:UI-Indonesia/header"