Template:NotebookLower

From 2012hs.igem.org

(Difference between revisions)
 
(107 intermediate revisions not shown)
Line 16: Line 16:
<div id="news">
<div id="news">
-
<div id="Scrollbereich">  <!-- erst fuer den folgenden Workaround benoetigt -->
 
-
  <h1>Fixierte Navigation</h1>
 
-
  <div id="Inhalt">
+
<div id="fixiert">
-
    <h2>Beispiel nur für moderne Browser</h2>
+
<center style="margin-top:5px;"><h4>Notebook - Dates</h4></center>
-
    <p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
+
<li style=" margin-left:10px; margin-top:5px; width: 280px;"> <b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#Planning" style="color: #c8da52">Planning and Development</a></b>
-
      und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
+
<ul>
-
      Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
+
<table style="background-color: transparent;"><tr>
-
      diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#01/07/2012">01/07/2012</a></li></td>
-
    <p>Für dieses Beispiel ist das &quot;mehrspaltige Layout mit Kopf-
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/19/2012">02/19/2012</a></li></td>
-
      und Fußzeile&quot; der vorherigen Seite etwas modifiziert worden.
+
</tr><tr>
-
      Es passt sich der Fenster- und Schriftgröße an und sogar
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#01/21/2012">01/21/2012</a></li></td>
-
      das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/02/2012">06/02/2012</a></li></td>
-
      mit einer Schriftvergrößerung.</p>
+
</tr><tr>
-
    <p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/04/2012">02/04/2012</a></li></td>
-
      wenn die Höhe des Browserfensters sehr stark verringert
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/09/2012">06/09/2012</a></li></td>
-
      und/oder die Schriftgröße heraufgesetzt wird!</p>
+
</tr><tr>
-
 
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/06/2012">02/06/2012</a></li></td>
-
    <p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
+
          <td></td>
-
  </div>
+
</tr>
-
</div>
+
</table>
-
 
+
</ul>
-
 
+
</li>
-
 
+
<li style=" margin-left:10px;  width: 280px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#Construction" style="color: #168dc4">Biosensor-Construction</a></b>
-
 
+
<ul>
-
<center><h4>Dates</h4></center>
+
<table style="background-color: transparent;"><tr>
-
 
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/23/2012">02/23/2012</a></li></td>
-
<div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/16/2012">03/16/2012</a></li></td>
-
  <ul id="Navigation">
+
</tr><tr>
-
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/24/2012">02/24/2012</a></li></td>
-
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/17/2012">03/17/2012</a></li></td>
-
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
+
</tr><tr>
-
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/25/2012">02/25/2012</a></li></td>
-
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/08/2012">05/08/2012</a></li></td>
-
  </ul>
+
</tr><tr>
-
  <img src="../../../src/logo.gif" alt="SELFHTML">
+
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/10/2012">03/10/2012</a></li></td>
-
  <p><a href="../fixbereiche.htm#definieren">zurück</a></p>
+
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/26/2012">05/26/2012</a></li></td>
 +
</tr><tr>
 +
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/13/2012">03/13/2012</a></li></td>
 +
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/02/2012-con">06/02/2012</a></li></td>
 +
</tr><tr>
 +
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/14/2012">03/14/2012</a></li></td>
 +
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/07/2012">06/07/2012</a></li></td>
 +
</tr><tr>
 +
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/15/2012">03/15/2012</a></li></td>
 +
          <td></td>
 +
</tr>
 +
</table>
 +
</ul>
 +
</li>
 +
<li style=" margin-left:10px; width: 280px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#Calibration" style="color: #130ed2">Calibration and Characterization</a></b>
 +
<ul>
 +
<table style="background-color: transparent;"><tr>
 +
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#04/27/2012">04/27/2012</a></li></td>
 +
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/27/2012">05/27/2012</a></li></td>
 +
</tr><tr>
 +
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#04/28/2012">04/28/2012</a></li></td>
 +
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/28/2012-cal">05/28/2012</a></li></td>
 +
</tr><tr>
 +
          <td><li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#04/29/2012">04/29/2012</a></li></td>
 +
          <td><li style=" margin-left:30px;"><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/07/2012-cal">06/07/2012</a></li></td>
 +
</tr>
 +
</table>
 +
</ul>
 +
</li>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
</div>
</div>
-
<li style="margin-left:10px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook-Planing">Planning and Development</a></b>
 
-
<ul>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#01/07/2012">01/07/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#01/21/2012">01/21/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/04/2012">02/04/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/06/2012">02/06/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/19/2012">02/19/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/02/2012">06/02/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/09/2012">06/09/2012</a></li>
 
-
</ul>
 
-
    </li>
 
-
<li style="margin-left:10px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook-Construction">Biosensor-Construction</a></b>
 
-
<ul>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/23/2012">02/23/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/24/2012">02/24/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#02/25/2012">02/25/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/10/2012">03/10/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/13/2012">03/13/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/14/2012">03/14/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/14/2012">03/14/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/16/2012">03/16/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#03/17/2012">03/17/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/08/2012">05/08/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/26/2012">05/26/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#06/07/2012">06/07/2012</a></li>
 
-
</ul>
 
-
    </li>
 
-
<li style="margin-left:10px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook-Calibration">Calibration and Charatcterization</a></b>
 
-
<ul>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#04/27/2012">04/27/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#04/28/2012">04/28/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#04/29/2012">04/29/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/27/2012">05/27/2012</a></li>
 
-
          <li><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook#05/28/2012">05/28/2012</a></li>
 
-
          <p />
 
-
</ul>
 
-
    </li>
 
</div><!--end news-->
</div><!--end news-->
</div><!-- end super_main_wrapper-->
</div><!-- end super_main_wrapper-->
Line 107: Line 98:
<style type="text/css">
<style type="text/css">
-
p {
 
-
    margin: 3em 0 0 3em;  /* Positionierung des 'zurueck'-Links */
 
-
  }
 
-
  p  a {
 
-
    color:black;  /* Farbe des 'zurueck'-Links */
 
-
  }
 
-
 
-
  html {
 
-
    padding: 0;
 
-
  }
 
-
  body {
 
-
    margin: 0; padding: 0;
 
-
  }
 
-
 
   #fixiert {
   #fixiert {
     position: absolute;
     position: absolute;
-
     top: 2.8em; left: 2em;
+
     top: 190px;
-
     width: 18em;
+
    width: 294px;
-
     background-color: white;
+
     heigth:750px;
-
     border: 1px solid silver;
+
     background-image: url(https://static.igem.org/mediawiki/2012hs/6/67/Notebookmenu.png);
 +
     border: none;
 +
margin-bottom: 150px;
   }
   }
   html>body #fixiert {  /* nur fuer moderne Browser! */
   html>body #fixiert {  /* nur fuer moderne Browser! */
     position: fixed;
     position: fixed;
-
  }
 
-
  #fixiert img {
 
-
    height: 6.8em; float: right;
 
   }
   }
-
  #Inhalt {
+
#fixiert li {
-
    margin-left: 22em; padding: 0 1em;
+
background-color: #00008B;
-
    border-left: 2px ridge gray; border-top: 2px ridge gray;
+
}
-
  }
+
-
  * #Inhalt {  /* versteckt vor Netscape 4 */
+
-
    background-color: #ffffe0;
+
-
  }
+
-
  #Inhalt h2 {
+
</style>
-
    font-size: 1.2em;
+
 
-
    margin: 2em 5% 2em;
+
<script type="text/javascript">
-
    color: maroon;
+
function Fensterweite () {
-
    border-bottom: 1px solid silver;
+
   if (window.innerWidth) {
-
   }
+
     return window.innerWidth;
-
  #Inhalt p {
+
   } else if (document.body && document.body.offsetWidth) {
-
     font-size: 1em;
+
     return document.body.offsetWidth;
-
    margin: 1em 0;
+
  } else {
-
   }
+
     return 0;
-
  #Inhalt #Fusszeile {
+
-
     font-size: 0.9em;
+
-
    margin: 200em 0 0; padding: 0.1em;
+
-
    text-align: center;
+
-
     background-color: #fed; border: 1px solid silver;
+
   }
   }
 +
}
-
   h1 {
+
function Fensterhoehe () {
-
     font-size: 1.5em;
+
   if (window.innerHeight) {
-
    margin: 0.5em; padding: 0.3em;
+
     return window.innerHeight;
-
     text-align: center;
+
  } else if (document.body && document.body.offsetHeight) {
-
    background-color: #fed;
+
     return document.body.offsetHeight;
-
     border: 2px ridge gray;
+
  } else {
 +
     return 0;
   }
   }
 +
}
-
  #Navigation {
+
function neuAufbau () {
-
    font-size: 0.83em;
+
   if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
-
    margin: 0 0 1.2em; padding: 0;
+
     location.href = location.href;
-
   }
+
}
-
  #Navigation li {
+
 
-
     list-style: none;
+
 
-
    margin: 0; padding: 0.5em;
+
if (!window.Weite && window.innerWidth) {
-
  }
+
   window.onresize = neuAufbau;
-
  ul#Navigation a {
+
   Weite = Fensterweite();
-
    display: block;
+
   Hoehe = Fensterhoehe();
-
    padding: 0.2em;
+
}
-
    font-weight: bold;
+
</script>
-
  }
+
-
  ul#Navigation a:link {
+
-
    color: black; background-color: #eee;
+
-
   }
+
-
  ul#Navigation a:visited {
+
-
    color: #666; background-color: #eee;
+
-
   }
+
-
  ul#Navigation a:hover {
+
-
    color: black; background-color: white;
+
-
   }
+
-
  ul#Navigation a:active {
+
-
    color: white; background-color: gray;
+
-
  }
+
-
</style>
+
-
</html>
+

Latest revision as of 04:20, 3 June 2013


Retrieved from "http://2012hs.igem.org/Template:NotebookLower"