CSS Tab Menü - Website X5 Hilfe - Die Helpsite

Ein weiteres ganz einfaches ausbaubares horizontales Menü, das Imagedateien zur Grundlage hat.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "cs_tab-menu", das so übernommen werden kann. Zusätzlich befinden sich im Unterverzeichnis "img" noch 10 Paar weiter Imagedateien zur Gestaltung. Die CSS-Datei muss dann entsprechend angepasst werden.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="cs_tab-menu/menu_style.css" />

Variante 1

Code für das HTML-Objekt:

<div id="tabs">
<ul>
<li><a href="#x"><span>Hauptmenü 1</span></a></li>
<li><a href="#x"><span>Hauptmenü 2</span></a></li>
<li><a href="#x"><span>Hauptmenü 3</span></a></li>
<li><a href="#x"><span>Hauptmenü 4</span></a></li>
<li><a href="#x"><span>Hauptmenü 5</span></a></li>
<li><a href="#x"><span>Hauptmenü 6</span></a></li>
</ul>
</div>

Variante 2

Code für das HTML-Objekt:

<? include "cs_tab-menu/index.html"; ?>

Code der CSS-Datei (menu_style.css):

   #tabs {
     float:left;
     width:100%;
     background:#efefef;
     font-size:93%;
     line-height:normal;
     border-bottom:1px solid #666;
     }
   #tabs ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
     }
   #tabs li {
     display:inline;
     margin:0;
     padding:0;
     }
   #tabs a {
     float:left;
     background:url("img/tableftF.gif") no-repeat left top;
     margin:0;
     padding:0 0 0 4px;
     text-decoration:none;
     }
   #tabs a span {
     float:left;
     display:block;
     background:url("img/tabrightF.gif") no-repeat right top;
     padding:5px 15px 4px 6px;
     color:#666;
     }
   /* Beginn IE5-Mac tollerieren \*/
   #tabs a span {float:none;}
   /* Ende IE5-Mac tollerieren */
   #tabs a:hover span {
     color:#FFF;
     }
   #tabs a:hover {
     background-position:0% -42px;
     }
   #tabs a:hover span {
     background-position:100% -42px;
     }

   #tabs #current a {
     background-position:0% -42px;
     }
   #tabs #current a span {
     background-position:100% -42px;
     }