CSS Textnavigation

CSS Textnavigation - Nachbau von http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal. Guckt auch hier für Klappleisten.

Oben NOF-Navigation, darunter CSS Textnavigation.

Navigation - in den HTML-Code Edtor eines Textfeldes im Layout

<ul id="Navigation">
   <li><span>Home</span></li>
   <li><a href="./html/seite1.html">Seite 1</a></li>
   <li><a href="./html/seite2.html”>Seite 2</a></li>
   <li><a href="./html/seite3.html”>Seite 3</a></li>
   <li><a href="./html/seite4.html">Seite 4</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php">Themen</a></li>
</ul>

CSS aller Seiten - in die HTML des Master-Rahmens “Zwischen Head Tags”

<style type="text/css">

  ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: left;
    border: 1px solid black;
    background-color: #C0C0C0;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: #000080; background-color: #E4E4E4;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: #3B3E42;
  }

</style>

Tutorials von Thomas Frei-Herrmann
diese Seite weiter empfehlen



Counter Statistik