• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation

Status
Für weitere Antworten geschlossen.

epfan

Neues Mitglied
Hi

kann ich für die folgende Navigation :
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>Dynamisch Navigationsleisten auch im IE einblenden</title>
<style type="text/css">
  body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * 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;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * 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 {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

</style>

<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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

</head>
<body>
<h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>

  <div id="Rahmen"><ul id="Navigation">
    [*][url="#Beispiel"]Seite 1[/url]

    [*][url="#Beispiel"]Seite 2[/url]
      <ul>
        [*][url="#Beispiel"]Seite 2a[/url]
        [*][url="#Beispiel"]Seite 2b[/url]
      [/list]
    

    [*][url="#Beispiel"]Seite 3[/url]

    [*][url="#Beispiel"]Seite 4[/url]
      <ul>
        [*][url="#Beispiel"]Seite 4a[/url]
        [*]<span>aktuelle Seite</span>
        [*][url="#Beispiel"]Seite 4c[/url]
      [/list]
    

    [*][url="#Beispiel"]Seite 5[/url]
  [/list]<div></div></div>



[url="../navigationsleisten.htm#javascript"]zurück[/url]</p>
</body>
</html>

diese schaltfäche benutzen: http://epfan.ihzekuh.de/schaltflaeche.gif

wenn ja wie mache ich das. ???
 
Code:
span.button_text { margin-left:-130px; }

und dann als Link:

Code:
[url="#"][img]#[/img]<span class="button_text">Link1</span>[/url]

p.s: ich hoffe dass es so geht
 
bei mir funkt das nicht, aber sicher habe ich was falsch gemacht.
:?
poste mal bitte, deinen Code wie du das meinst.
 
das erste gehört in den CSS-Bereich....

Code:
span.button_text { margin-left:-130px; }

und der Code im body:

Code:
[url="#"][img]http://epfan.ihzekuh.de/schaltflaeche.gif[/img]<span class="button_text">Link1</span>[/url]
 
also das ist mein code,
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>Dynamisch Navigationsleisten auch im IE einblenden</title> 
<style type="text/css"> 
  body, p a { 
    font: normal 100.01% Helvetica, Arial, sans-serif; 
    color: black; background-color: #ffffe0; 
  } 

  div#Rahmen { 
    width: 47.1em; 
    padding: 0.8em; 
    border: 1px solid black; 
    background-color: silver; 
  } 
  * 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; 
    text-align: center; 
  } 

  ul#Navigation li { 
    list-style: none; 
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */ 
    position: relative; 
    margin: 0.4em; padding: 0; 
  } 
  * html ul#Navigation li {  /* Korrektur fuer den IE */ 
    margin-bottom: -0.4em; 
  } 

  ul#Navigation li ul { 
    margin: 0; padding: 0; 
    position: absolute; 
    top: 1.6em; left: -0.4em; 
    display: none;  /* Unternavigation ausblenden */ 
  } 
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */ 
    left: -1.5em; 
    lef\t: -0.4em; 
  } 
  ul#Navigation li:hover ul { 
    display: block;  /* Unternavigation in modernen Browsern einblenden */ 
  } 
  ul#Navigation li ul li { 
    float: none; 
    display: block; 
    margin-bottom: 0.2em; 
  } 

  ul#Navigation a, ul#Navigation span { 
    display: block; 
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */ 
    padding: 0.2em 1em; 
    text-decoration: none; font-weight: bold; 
    border: 1px solid black; 
    border-left-color: white; border-top-color: white; 
    color: maroon; background-color: #ccc; 
  } 
  * 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 { 
    border-color: white; 
    border-left-color: black; border-top-color: black; 
    color: white; background-color: gray; 
  } 
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */ 
    color: maroon; background-color: silver; 
  } 
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */ 
    background-color: maroon; 
  } 


span.button_text { margin-left:-130px; } 

} 
</style> 

<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 = "silver"; 
  } 
  function ausblenden() { 
    sucheUL(this.firstChild).style.display = "none"; 
  } 

  window.onload=hoverIE; 
} 
</script> 

</head> 
<body> 
<h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1> 

  <div id="Rahmen"><ul id="Navigation"> 
    [*][url="#Beispiel"]Seite 1[/url] 

    [*][url="#Beispiel"]Seite 2[/url] 
      <ul> 
        [*][url="#Beispiel"]Seite 2a[/url] 
        [*][url="#Beispiel"]Seite 2b[/url] 
      [/list] 
     

    [*][url="#Beispiel"]Seite 3[/url] 

    [*][url="#Beispiel"]Seite 4[/url] 
      <ul> 
        [*][url="#Beispiel"]Seite 4a[/url] 
        [*]<span>aktuelle Seite</span> 
        [*][url="#Beispiel"]Seite 4c[/url] 
      [/list] 
     

    [*][url="#Beispiel"]Seite 5[/url] 
  [/list]<div></div></div> 



[url="../navigationsleisten.htm#javascript"]zurück[/url]</p> 
</body> 
[url="#"][img]http://epfan.ihzekuh.de/schaltflaeche.gif[/img]<span class="button_text">Link1</span>[/url] 

</html>

was ist falsch
 
andere Navigation

da ich nicht extra ein neues Thema öffnen will, poste ich euch mein kleines Problem einfach hier.

Hab jetzt eine Navigation gefunden, aber habe 2 Pobleme:

1. Problem: wenn man es mit Mozilla anschaut, ist alles doppelt.
2. Problem: wenn man es mit dem IE anschaut, was sollen dann diese grauen Bereiche.

Hier die Navigation: http://epfan.ihzekuh.de

Was muss ich also tun um die Probleme zu beheben:

Falls es hilft hier der quelltext:
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>test navi</title>
<style type="text/css">
  body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #0066CC;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: px solid black;
    background-color: 0066CC;
  }
  * 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;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 9em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: #FFCC00; border-top-color: #FFCC00; border-bottom-color: #FFCC00; border-right-color: #FFCC00;
    color: #FFCC00; background-color: #0000FF;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 9em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: FFCC00;
    border-left-color: FFCC00; border-top-color: FFCC00; border-bottom-color: FFCC00; border-right-color: FFCC00;
    color: FFCC00; background-color: #3300CC;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

</style>

<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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

</head>
<body>

  <div id="Rahmen" style="width: 988px; height: 92px"><ul id="Navigation">
    [*][url="#Beispiel"]Überblick[/url]

    [*][url="#Beispiel"]Park[/url]
      <ul style="position: absolute; left: -24px; top: 27px">
        [*][url="#Beispiel"]Attraktionen[/url]
        [*][url="#Beispiel"]Shows[/url]
        [*][url="#Beispiel"]Themenbereiche[/url]
        [*][url="#Beispiel"]Shopping[/url]
        [*][url="#Beispiel"]Gastronomie[/url]
      [/list]
    

    [*][url="#Beispiel"]Infos[/url]
    <ul style="position: absolute; left: -24px; top: 27px">
        [*][url="#Beispiel"]Eintrittspreise[/url]
        [*][url="#Beispiel"]Wetter[/url]
        [*][url="#Beispiel"]Events[/url]
        [*][url="#Beispiel"]Öffnungszeiten[/url]
        [*][url="#Beispiel"]Anfahrt[/url]
        [*][url="#Beispiel"]Tipps[/url]
      [/list]
    


    [*][url="#Beispiel"]Sonstiges[/url]
      <ul style="position: absolute; left: -24px; top: 27px">
        [*][url="#Beispiel"]Forum[/url]
        [*][url="#Beispiel"]Fans[/url]
        [*][url="#Beispiel"]EP im TV[/url]
        [*][url="#Beispiel"]Downloads[/url]
        [*][url="#Beispiel"]Webcam[/url]
        [/list]
    

    [*][url="#Beispiel"]Impressum[/url]
      <ul style="position: absolute; left: -24px; top: 27px">
        [*][url="#Beispiel"]Gästebuch[/url]
        [*][url="#Beispiel"]Kontakt[/url]
        [*][url="#Beispiel"]Webmaster[/url]
        [*][url="#Beispiel"]Links[/url]
        [/list]
    



</body>
</html>
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben