Team:LMU-Munich/Templates/Page Header

From 2012.igem.org

(Difference between revisions)
(copy+pasted the sidebar stuff from the 2011 page)
(work on new design (menu formatted, the rest is currently a mess))
Line 1: Line 1:
-
<!-- adapted from 2011 wiki -->
 
<html>
<html>
<style type="text/css">
<style type="text/css">
Line 11: Line 10:
/* reformat the major elements of the page */
/* reformat the major elements of the page */
-
body {
+
body, html {
-
background: transparent;
+
background: white;
-
}
+
margin: 0;
-
 
+
padding: 0;
-
html {
+
-
background: url(http://wrtlprnft.ath.cx/igem2012/flyer_background_hack.jpg) 50% 50%;
+
-
border-top: 16px #606060 solid;
+
}
}
Line 28: Line 24:
#content {
#content {
-
border: 32px solid #019440;
+
width: auto;
-
background: white;
+
margin: 0;
-
padding: 16px;
+
padding: 0;
-
width: 881px;
+
-
margin-top: -50px;
+
-
position: static;
+
}
}
Line 43: Line 36:
color: white; /* get rid of the hover effect */
color: white; /* get rid of the hover effect */
background: #606060;
background: #606060;
 +
}
 +
 +
/* navigation */
 +
 +
#nav ul {
 +
display: 0;
 +
margin: 0;
 +
padding: 0;
 +
background: #421135;
 +
height: 3.5em;
 +
}
 +
 +
#nav li {
 +
display: block;
 +
position: relative;
 +
padding: 0;
 +
margin: 0;
 +
float: left;
 +
border-right: 1px solid #421135;
 +
}
 +
 +
#nav li:hover {
 +
border-right-color: white;
 +
border-left: 1px solid white;
 +
margin-left: -1px;
 +
}
 +
 +
#nav li:hover li:hover {
 +
border: 0 none transparent;
 +
margin: 0;
 +
}
 +
 +
#nav a {
 +
display: block;
 +
background: #421135;
 +
padding: 1em;
 +
height: 1.5em;
 +
color: white;
 +
text-transform: uppercase;
 +
white-space: nowrap;
 +
}
 +
 +
#nav a:hover {
 +
text-decoration: none;
 +
color: white;
 +
background: #7b406c;
 +
}
 +
 +
#nav li ul {
 +
display: none;
 +
}
 +
 +
#nav li:hover ul {
 +
display: table;
 +
position: absolute;
 +
top: 3.5em;
 +
left: 0;
 +
width: auto;
 +
}
 +
 +
#nav li:hover li {
 +
float:none;
 +
display: table-row;
}
}
Line 76: Line 132:
/* some generic templates for boxes to be used on the individual pages */
/* some generic templates for boxes to be used on the individual pages */
-
#rightcol {
 
-
width: 187px;
 
-
float: right;
 
-
margin-right: 10px;
 
-
}
 
-
 
-
#content-small {
 
-
float: left;
 
-
width: 665px;
 
-
}
 
-
 
-
#content-full {
 
-
}
 
-
 
-
#content-full label, #content-small {
 
-
display: block;
 
-
}
 
-
 
-
.leftbox, .rightbox, .fullbox, #rightcol {
 
-
border: 1px solid #888;
 
-
padding: 5px;
 
-
margin-bottom: 10px;
 
-
 
-
-moz-border-radius: 10px;
 
-
border-radius: 10px;
 
-
-moz-box-shadow: 0 0 8px #888;
 
-
-webkit-box-shadow: 0 0 8px #888;
 
-
box-shadow: 0 0 8px #888;
 
-
}
 
-
 
-
.leftbox {
 
-
float: left;
 
-
width: 350px;
 
-
clear: left;
 
-
margin-left: 5px;
 
-
}
 
-
 
-
.rightbox {
 
-
float: right;
 
-
width: 485px;
 
-
margin-right: 5px;
 
-
clear: right;
 
-
}
 
-
 
-
#content-small .rightbox {
 
-
width: 272px;
 
-
}
 
-
 
-
.fullbox {
 
-
clear: both;
 
-
margin-right: 5px;
 
-
margin-left: 5px;
 
-
}
 
</style>
</style>
<a id="logo" href="https://2012.igem.org/Main_Page">
<a id="logo" href="https://2012.igem.org/Main_Page">
Line 143: Line 146:
</html>
</html>
<noinclude>
<noinclude>
-
<div id="content-full">
 
-
<div class="rightbox">rightbox</div>
 
-
<div class="leftbox">leftbox</div>
 
-
<div class="leftbox">leftbox</div>
 
-
<div class="fullbox">
 
-
== Full box w/ header ==
 
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nulla augue. Ut malesuada dolor non sapien laoreet auctor. Nullam euismod consectetur egestas. Nulla quam nunc, ultricies sit amet dapibus non, accumsan vitae justo. Sed dictum ultrices lorem a varius. Maecenas eu dolor mauris, eu sodales quam. Aenean dignissim sem sed erat facilisis faucibus adipiscing odio aliquam. Cras vestibulum justo vitae ipsum dictum non tempor odio ultrices. Quisque tempus tellus id erat pretium egestas. Duis sit amet sapien sapien. Cras eleifend pretium lacus ut dictum. Quisque tempor, tortor id sodales auctor, justo urna molestie urna, cursus lobortis urna quam vel nunc. Donec vel libero ligula, et dignissim sapien. Morbi vestibulum lorem non tellus congue tincidunt.
 
-
</div>
 
-
<div class="fullbox">
 
-
== Yet another box ==
 
-
 
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper congue enim, a lobortis nunc malesuada ac. Vivamus ac risus at nisl accumsan mollis. Etiam et dui risus. Quisque sagittis euismod enim ut auctor. Integer sagittis convallis interdum. Aliquam erat volutpat. Duis elementum accumsan malesuada. Nullam non arcu elementum felis tempor sodales eget in felis. Praesent vitae feugiat ligula. In hac habitasse platea dictumst. Integer suscipit tincidunt mauris nec tincidunt. Ut at nisl ultricies mi malesuada pulvinar et sed lectus. Suspendisse mattis gravida magna, eu sagittis neque dignissim imperdiet.
 
-
</div>
 
-
</div>
 
-
 
-
<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />
 
-
 
-
<div id="rightcol"> <b> Our Sponsors </b> </div>
 
-
<div id="content-small">
 
-
<div class="rightbox">rightbox</div>
 
-
<div class="leftbox">leftbox</div>
 
-
<div class="leftbox">leftbox</div>
 
-
<div class="fullbox">
 
-
== Full box w/ header ==
 
-
 
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nulla augue. Ut malesuada dolor non sapien laoreet auctor. Nullam euismod consectetur egestas. Nulla quam nunc, ultricies sit amet dapibus non, accumsan vitae justo. Sed dictum ultrices lorem a varius. Maecenas eu dolor mauris, eu sodales quam. Aenean dignissim sem sed erat facilisis faucibus adipiscing odio aliquam. Cras vestibulum justo vitae ipsum dictum non tempor odio ultrices. Quisque tempus tellus id erat pretium egestas. Duis sit amet sapien sapien. Cras eleifend pretium lacus ut dictum. Quisque tempor, tortor id sodales auctor, justo urna molestie urna, cursus lobortis urna quam vel nunc. Donec vel libero ligula, et dignissim sapien. Morbi vestibulum lorem non tellus congue tincidunt.
 
-
</div>
 
-
<div class="fullbox">
 
-
== Yet another box ==
 
-
 
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper congue enim, a lobortis nunc malesuada ac. Vivamus ac risus at nisl accumsan mollis. Etiam et dui risus. Quisque sagittis euismod enim ut auctor. Integer sagittis convallis interdum. Aliquam erat volutpat. Duis elementum accumsan malesuada. Nullam non arcu elementum felis tempor sodales eget in felis. Praesent vitae feugiat ligula. In hac habitasse platea dictumst. Integer suscipit tincidunt mauris nec tincidunt. Ut at nisl ultricies mi malesuada pulvinar et sed lectus. Suspendisse mattis gravida magna, eu sagittis neque dignissim imperdiet.
 
-
</div>
 
-
</div>
 
{{:Team:LMU-Munich/Templates/Page Footer}}
{{:Team:LMU-Munich/Templates/Page Footer}}
</noinclude>
</noinclude>

Revision as of 10:28, 15 May 2012

Beadzillus