Template:NotebookLower

From 2012hs.igem.org

(Difference between revisions)
Line 15: Line 15:
</div><!--end SubWrapper-->
</div><!--end SubWrapper-->
<div id="news">
<div id="news">
 +
 +
<div id="Scrollbereich">  <!-- erst fuer den folgenden Workaround benoetigt -->
 +
  <h1>Fixierte Navigation</h1>
 +
 +
  <div id="Inhalt">
 +
    <h2>Beispiel nur für moderne Browser</h2>
 +
    <p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
 +
      und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
 +
      Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
 +
      diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
 +
    <p>Für dieses Beispiel ist das &quot;mehrspaltige Layout mit Kopf-
 +
      und Fußzeile&quot; der vorherigen Seite etwas modifiziert worden.
 +
      Es passt sich der Fenster- und Schriftgröße an und sogar
 +
      das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
 +
      mit einer Schriftvergrößerung.</p>
 +
    <p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
 +
      wenn die Höhe des Browserfensters sehr stark verringert
 +
      und/oder die Schriftgröße heraufgesetzt wird!</p>
 +
 +
    <p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
 +
  </div>
 +
</div>
 +
 +
 +
<center><h4>Dates</h4></center>
<center><h4>Dates</h4></center>
 +
 +
<div id="fixiert">  <!-- verhindert auch Anzeigefehler einer fixierten ul -->
 +
  <ul id="Navigation">
 +
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
 +
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
 +
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
 +
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
 +
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
 +
  </ul>
 +
  <img src="../../../src/logo.gif" alt="SELFHTML">
 +
  <p><a href="../fixbereiche.htm#definieren">zurück</a></p>
 +
</div>
<li style="margin-left:10px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook-Planing">Planning and Development</a></b>
<li style="margin-left:10px;"><b><a href="http://2012HS.igem.org/Team:Heidelberg_LSL/Notebook-Planing">Planning and Development</a></b>
<ul>
<ul>
Line 68: Line 105:
}
}
</script>
</script>
 +
 +
<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 {
 +
    position: absolute;
 +
    top: 2.8em; left: 2em;
 +
    width: 18em;
 +
    background-color: white;
 +
    border: 1px solid silver;
 +
  }
 +
  html>body #fixiert {  /* nur fuer moderne Browser! */
 +
    position: fixed;
 +
  }
 +
  #fixiert img {
 +
    height: 6.8em; float: right;
 +
  }
 +
 +
  #Inhalt {
 +
    margin-left: 22em; padding: 0 1em;
 +
    border-left: 2px ridge gray; border-top: 2px ridge gray;
 +
  }
 +
  * #Inhalt {  /* versteckt vor Netscape 4 */
 +
    background-color: #ffffe0;
 +
  }
 +
 +
  #Inhalt h2 {
 +
    font-size: 1.2em;
 +
    margin: 2em 5% 2em;
 +
    color: maroon;
 +
    border-bottom: 1px solid silver;
 +
  }
 +
  #Inhalt p {
 +
    font-size: 1em;
 +
    margin: 1em 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 {
 +
    font-size: 1.5em;
 +
    margin: 0.5em; padding: 0.3em;
 +
    text-align: center;
 +
    background-color: #fed;
 +
    border: 2px ridge gray;
 +
  }
 +
 +
  #Navigation {
 +
    font-size: 0.83em;
 +
    margin: 0 0 1.2em; padding: 0;
 +
  }
 +
  #Navigation li {
 +
    list-style: none;
 +
    margin: 0; padding: 0.5em;
 +
  }
 +
  ul#Navigation a {
 +
    display: block;
 +
    padding: 0.2em;
 +
    font-weight: bold;
 +
  }
 +
  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>
</html>

Revision as of 14:40, 9 June 2012


Fixierte Navigation

Beispiel nur für moderne Browser

In diesem Beispiel ist die linke Navigation zunächst absolut positioniert und wird anschließend über eine Browserweiche nur für moderne Browser fixiert. Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.

Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf- und Fußzeile" der vorherigen Seite etwas modifiziert worden. Es passt sich der Fenster- und Schriftgröße an und sogar das SELFHTML-Logo 'wächst' durch die Höhenangabe in em mit einer Schriftvergrößerung.

Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird, wenn die Höhe des Browserfensters sehr stark verringert und/oder die Schriftgröße heraufgesetzt wird!

Sie haben tatsächlich bis hierhin gescrollt? ;-)

Dates

  • Planning and Development
  • Biosensor-Construction
  • Calibration and Charatcterization

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