Hm, könntest du das noch mal etwas verdeutlichen - wie gesagt: Ich arbeite mich gerade erst mal - mehr schlecht als recht - ein und aller Anfang ist eben schwer. Sorry!
Zur Verdeutlichung hier noch mal das Beispiel-Navi:
Navitest
Und hier noch mal mein derzeitiger Code:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Navitest</title>
<style type="text/css">
body {
color: black;
background-color: black;
}
.submenue {
background-image:url(images/sub_btn1.png);
}
div#Rahmen {
float: left;
height: 75px;
width: 707px;
margin-top: 50px;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 23px;
text-align: center;
z-index: 5;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
z-index: 5;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 24px;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
z-index: 5;
}
ul#Navigation a, ul#Navigation span {
display: block;
background-image: url(images/buttonNEU_dunkel.png); /*buttons für Standard-Leistenelemente außer "Aktuell" */
width: 115px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 24px;
text-decoration: none; font-weight: lighter;
color: white; background-color: inherit;
z-index: 6;
}
ul#Navigation ul a {
background-image: url(images/buttonNEU_sub1.png);
filter: alpha(opacity=80);
opacity:0.8;
text-align:left;
padding-left: 10px;
height: 27px;
width: 105px;
line-height: 28px;
}
ul#Navigation ul a:hover {
background-image: url(images/buttonNEU_sub2.png);
}
ul#Navigation ul a:active {
background-image: url(images/buttonNEU_sub3.png);
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
background-image:url(images/buttonNEU_mittel.png); /* bild bei allen a:hover */
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
/* Neu */
ul#Navigation a:active, ul#Navigation span, li a#aktuell {
background-image: url(images/buttonNEU_down.png); /* alle down-Buttons */
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
/* Neu bis hier */
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
background-image: url(images/buttonNEU_hell.png); /*aktuell-Button */
color: white; background-color: inherit;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-image:url(images/buttonNEU_sub1.png);
filter: alpha(opacity=80); opacity:0.8;
}
#abschluss {
background-image: url(images/abschlussrund.png);
float: left;
height: 75px;
width: 17px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="Rahmen"><ul id="Navigation">
<div id="abschluss"></div>
<li><a href="#Beispiel">Home</a></li>
<li><a href="#Beispiel">Galerien</a>
<ul>
<li><a href="#Beispiel">Fotos</a></li>
<li><a href="#Beispiel">Multimedia</a></li>
<li><a href="#Beispiel">Stories</a></li>
</ul>
</li>
<li><a href="#Beispiel">Referenzen</a></li>
<li><a id="aktuell" href="#Beispiel">Info/Kontakt</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Prints & Posters</a></li>
<li><a href="#Beispiel">Blog</a></li>
</ul><div></div></div>
</body>
</html>
Noch mal Danke für deine Geduld!
Gruß ... Uwe