Hi ich brauche Hilfe,
und zwar möchte ich gern eine horizontale Navigationsliste erstellen und noch funktionierts nicht, wie ich es mir vorgestellt habe. Zum einen soll beim raufgehen auf Seite 1 z.b die Seite 1a etc ausgefahren werden dabei aber gleiche Größe behalten bzw Breite!
Wenn ich es im Firefox teste, und dann auf die auswahl gehe und dann zieht es sich breiter?!
hier mal der code:
Dies ist ein Beispiel, was ich versucht habe auf mich abzuwandeln...
aber leider nicht mit Erfolg...
Vielen Dank schonmal
wandasia
und zwar möchte ich gern eine horizontale Navigationsliste erstellen und noch funktionierts nicht, wie ich es mir vorgestellt habe. Zum einen soll beim raufgehen auf Seite 1 z.b die Seite 1a etc ausgefahren werden dabei aber gleiche Größe behalten bzw Breite!
Wenn ich es im Firefox teste, und dann auf die auswahl gehe und dann zieht es sich breiter?!
hier mal der code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
top: 1.8em; left: -0.4em;
}
* html ul#Navigation li ul {
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-top: 0.2em; margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
padding: 0.23em 0.97em 0.17em 1.03em;
width:100%;
border:solid #A8BAE6;
border-width:1px 0;
text-decoration: none; font-weight: bold;
color: white; background: #1E5AE6 url(images/verlauf2.jpg) top left repeat-x;
letter-spacing: 2px;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9.2em;
w\idth: 7em; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
padding: 0.17em 0.97em 0.23em 0.97em;
color: #FFFFFF; background-color: #294197;
}
ul#Navigation li a:active, ul#Navigation li:hover a:active {
color: #FFFFFF; background-color: #294197;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display: block;
}
</style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
</head>
<body>
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">Seite 1</a>
<ul>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 1b</a></li>
<li><a href="#Beispiel">Seite 1c</a></li>
<li><a href="#Beispiel">Seite 1d</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a>
<ul>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
<div></div>
</body>
</html>Dies ist ein Beispiel, was ich versucht habe auf mich abzuwandeln...
aber leider nicht mit Erfolg...
Vielen Dank schonmal
wandasia
