Template:Team:Groningen/Project/Header

From 2009.igem.org

(Difference between revisions)
(Attempt at graphical menu.)
m
 
(16 intermediate revisions not shown)
Line 1: Line 1:
{{Team:Groningen/Header}}<html><style>
{{Team:Groningen/Header}}<html><style>
-
#projectstructure { text-align:center;width:100%;border-collapse:collapse; }
+
/* Based on http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support */
-
#projectstructure td+td { width:25%;border-left:solid 2px #81d1f1; }
+
.subprojects { float:left; width:100%; overflow:hidden; position:relative; }
-
.projectNavigation li { list-style:none; }
+
.subprojects ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; }
-
.projectNavigation a { text-indent:-9999px; display:block; position:absolute; }
+
.subprojects li { display:block; float:left; list-style:none; margin:0; position:relative; right:50%;
-
.projectNavigation .transport a { left:-15px; top: -25px; width:164px; height:72px;
+
                  padding:5px 169px 5px 5px; height:79px; text-indent:-9999px;
-
                                  background:url('/wiki/images/e/ea/PSTransport.png'); }
+
                  background-repeat: no-repeat; background-position: center center; }
-
.projectNavigation .accumulation a { left:25px; top: 60px; width:139px; height:52px;
+
.subprojects li+li { border-left: solid 2px #81d1f1; }
-
                                    background:url('/wiki/images/9/9a/PSAccumulation.png'); }
+
.subprojects a { text-indent:-9999px; display:block; width:164px; height:79px; background-repeat: no-repeat; background-position: center center; position:absolute; left:5px; top:5px; }
-
.projectNavigation .promoter a { left:10px; top: 130px; width:167px; height:51px;
+
.subprojects ul li a:hover { background:none; }
-
                                background:url('/wiki/images/4/4e/PSPromoter.png'); }
+
.subprojects .transport { background-image:url('/wiki/images/e/ea/PSTransport.png'); }
-
.projectNavigation .vesicles a { left:40px; top: 205px; width:118px; height:79px;
+
.subprojects .accumulation { background-image:url('/wiki/images/9/9a/PSAccumulation.png'); }
-
                                background:url('/wiki/images/8/80/PSVesicles.png'); }
+
.subprojects .promoters { background-image:url('/wiki/images/4/4e/PSPromoter.png'); }
-
</style></html>
+
.subprojects .vesicles { background-image:url('/wiki/images/8/80/PSVesicles.png'); }
-
<div style="float:left; width:170px; height:300px; background-color:#c7e9f7; border:2px solid #81d1f1; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin:15px 15px 15px 0px; padding:10px; position:relative;">
+
.subprojects .transport a { background-image:url('/wiki/images/c/c2/PSTransportLightW.png'); }
-
<html>
+
.subprojects .accumulation a { background-image:url('/wiki/images/c/c8/PSAccumulationLightW.png'); }
-
<ul class="projectNavigation">
+
.subprojects .promoters a { background-image:url('/wiki/images/1/16/PSPromoterLightW.png'); }
 +
.subprojects .vesicles a { background-image:url('/wiki/images/9/99/PSVesiclesLightW.png'); }
 +
</style>
 +
<div class="subprojects">
 +
<ul>
<li class="transport"></html>[[Team:Groningen/Project/Transport|Transport]]<html></li>
<li class="transport"></html>[[Team:Groningen/Project/Transport|Transport]]<html></li>
<li class="accumulation"></html>[[Team:Groningen/Project/Accumulation|Accumulation]]<html></li>
<li class="accumulation"></html>[[Team:Groningen/Project/Accumulation|Accumulation]]<html></li>
-
<li class="promoter"></html>[[Team:Groningen/Project/Promoters|Metal-sensitive Promoters]]<html></li>
+
<li class="promoters"></html>[[Team:Groningen/Project/Promoters|Metal-sensitive Promoters]]<html></li>
-
<li class="vesicles"></html>[[Team:Groningen/Project/Vesicles|Gas Vesicles]]<html></li>
+
<li class="vesicles"></html>[[Team:Groningen/Project/Vesicle|Gas Vesicles]]<html></li>
</ul>
</ul>
</div>
</div>
 +
</html>
 +
__NOTOC__

Latest revision as of 15:22, 8 October 2009

Igemhomelogo.png