Probleme mit Navigationsleiste

nuely

Moin,

ich bin gerade dabei eine neue Navigation zu entwickeln. Momentaner Stand

Irgendwie klappt das aber noch nicht so wie ich mir das vorstelle.

Was nicht funktioniert:
1. Die Buttons werden nicht zentriert.
2. IE6 zeigt die Untermenüs nicht (IE5.5 schon)
3. Bei IE7 kann ich den dritten Punkt der Bildergalerie nicht erreichen, außer ich bewege die Maus sehr schnell
4. Das ul#navigation span funktioniert, dass span.aktiv aber nicht.

Die ersten drei Punkte funktionieren wieder, wenn ich aus dem ul#navigation das position: absolute entferne. Ich hätte aber gerne, dass die Buttons am unteren Ende des Bildes stehen. Wenn das nicht geht setze ich sie halt tiefer und lasse das position weg.
Das Bild habe ich auf diese Weise eingefügt, damit es immer 100% der Seite einnimmt. Mit background-image habe ich keine Möglichkeit gefunden, dass das ginge.

Warum das vierte nicht geht verstehe ich nicht.

Ich hoffe jemand weiß Rat. Vielen Dank im Voraus.

Quellcode:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Test</title>
<style type="text/css">
<!--
  body {
   font-family: Verdana,Arial;                   /* Schriftart */
   font-size: 12pt;                              /* Schriftgroeße */
   font-weight: bold;                            /* Schriftdicke */
   font-style: normal;                           /* Schriftstil */
   color:#000000;                                /* Schriftfarbe */
   background-image: url(hinten.jpg);            /* Hintergrundbild */
   background-attachment:fixed;                  /* Ausrichtung Hintergrundbild */
  }


  img#pyramide {                                 /* Einstellungen des Pyramidenbildes */
   position: absolute;                           /* feste Positionierung */
   width: 100%;                                  /* volle Fensterbreite */
   top: 0;                                       /* Kein Abstand von oben */
   height: 200px;                                /* 200px hoch */
  }


  ul#navigation {                                /* Navigationsleiste */
   position: absolute;                           /* feste Positionierung */
   margin-left:auto;                             /* Außenabstand (bewirkt Zentrierung) */
   margin-right:auto;                            /* Außenabstand (bewirkt Zentrierung) */
   text-align: center;                           /* Textausrichtung */
   padding:0;                                    /* Innenabstand */
   padding-top: 160px;                           /* Abstand von oben */
   width:57em;                                    /* Weite  (abhaengig von der Anzahl Buttons) */
   font-size:0.9em;                              /* Schriftgröße */
  }
  * html ul#navigation {                         /* Korrektur fuer den IE 5 und 6 */
   padding-top: 160px;
  }
  *:first-child+html ul#navigation {             /* Korrektur fuer den IE 7 */
   padding-top: 160px;
  }


  ul#navigation li {                             /* Button-Positionierung Navigation */
   padding:0;                                    /* Innenabstand */
   list-style:none;                              /* Layout der Listenpunkte */
   float:left;                                   /* Textumfluss */
   margin:0 0.3em 0 0;                           /* Außenabstand der Buttons */
   width:9.1em;                                  /* Breite des Buttons */
  }
  * html ul#navigation li {
   width: 9.1em;                                 /* Breite nach altem MS-Boxmodell fuer IE 5.x */
   w\idth: 9.1em;                                /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }


  ul#navigation li ul {                          /* Unternavigation */
   padding:0;                                    /* Innenabstand */
   display:none;                                 /* Unternavigation ausblenden (nur beim Hover an)*/
  }
  * html ul#navigation li ul {                   /* Korrektur fuer den IE 5 und 6 */
   margin-left: -0.1em;
  }
  *:first-child+html ul#navigation li ul {       /* Korrektur fuer den IE 7 */
   margin-left: -0.1em;
  }


  ul#navigation li:hover ul {                    /* Unternavigation */
   display: block;                               /* Unternavigation in modernen Browsern einblenden */
  }


  ul#navigation li ul li {                       /* Button-Positionierung Unternavigation */
   float:none;                                   /* Textumfluss */
  }


  ul#navigation li a {                           /* Button (normal) */
   display:block;                                /* Anzeigeart: erzeugt neue Zeile */
   padding:0.3em 0.5em;                          /* Innenabstand */
   text-decoration: none;                        /* Text-Dekoration (damit der Link nicht unterstrichen ist) */
   font-weight: bold;                            /* Schriftdicke */
   background-image: url(Button.png);            /* Hintergrundbild */
   border: 1px solid;                            /* Rahmendicke ueberall */
   border-color: #000000;                        /* Rahmenfarbe ueberall */
   border-left-color: #C0C0C0;                   /* Rahmenfarbe links */
   border-top-color: #C0C0C0;                    /* Rahmenfarbe oben */
   color: #800000;                               /* Schriftfarbe */
  }


  ul#navigation li a:hover {                     /* Button Hover-Effekt */
   background-image: url(Button2.png);           /* Hintergrundbild */
   border-color: #C0C0C0;                        /* Rahmenfarbe ueberall */
   border-left-color: #000000;                   /* Rahmenfarbe links */
   border-top-color: #000000;                    /* Rahmenfarbe oben */
   color: #550000;                               /* Schriftfarbe */
  }


  ul#navigation span {                           /* Button (normal), wenn Untermenue existiert */
   display:block;                                /* Anzeigeart: erzeugt neue Zeile */
   padding:0.3em 0.5em;                          /* Innenabstand */
   font-weight: bold;                            /* Schriftdicke */
   background-image: url(Button.png);            /* Hintergrundbild */
   border: 1px solid;                            /* Rahmendicke ueberall */
   border-color: #000000;                        /* Rahmenfarbe ueberall */
   border-left-color: #C0C0C0;                   /* Rahmenfarbe links */
   border-top-color: #C0C0C0;                    /* Rahmenfarbe oben */
   color: #800000;                               /* Schriftfarbe */
  }


  span.aktiv {                                   /* Button Untermenue ausgewaehlt */
   display:block;                                /* Anzeigeart: erzeugt neue Zeile */
   padding:0.3em 0.5em;                          /* Innenabstand */
   font-weight: bold;                            /* Schriftdicke */
   background-image: url(Button2.png);           /* Hintergrundbild */
   border: 1px solid;                            /* Rahmendicke ueberall */
   border-color: #C0C0C0;                        /* Rahmenfarbe ueberall */
   border-left-color: #000000;                   /* Rahmenfarbe links */
   border-top-color: #000000;                    /* Rahmenfarbe oben */
   color: #550000;                               /* Schriftfarbe */
  }


    =-->
</style>
<script type="text/javascript">
    <!--[if lt IE 7]>
    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.backgroundImage = "url(hinten.jpg)";
      }
      function ausblenden() {
        sucheUL(this.firstChild).style.display = "none";
      }


      window.onload=hoverIE;
    }
    <![endif]-->
    </script>


</head>
<body>




<img id="pyramide" src="Pyramide.png" alt="" />


  <ul id="navigation">
 <li><span>Dream-Night</span>
  <ul>
   <li><a href="dream10.html">10. Dream-Night</a></li>
   <li><a href="dream9.html">9. Dream-Night</a></li>
  </ul>
 </li>
 <li><a href="auftritt.html">Auftritt/Kurse</a></li>
 <li><a href="workshop.html" title="Workshops">Workshops</a></li>
 <li><span class="aktiv">Bildergalerie</span>
  <ul>
   <li><a href="galerie1.html">Galerie 1</a></li>
   <li><span class="aktiv">Galerie 2</span></li>
   <li><a href="galerie3.html">Galerie 3</a></li>
  </ul>
 </li>
 <li><a href="videos.html" title="Videos">Videos</a></li>
 <li><a href="impressum.html" title="Impressum">Impressum</a></li>
</ul>




</body>
</html>

Alles anzeigen

yeti66

Ich würde sagen Dir fehlt ein grundsätzliches Layout in Sachen Container.
Wrapper(Rahmen)
Kopf
Navigation
Inhalt
Footer
z.B. http://www.andreas-kalt.de/webdesign/tuto…ayout-erstellen
Wenn Du Deiner Navigation einen Container verpasst und Breite / Höhe / Position festlegst kannst Du Deine Navigation auch mittig anordnen.http://www.cssplay.co.uk/menus/simple_vertical_centered.html.
Diese Klappmenues sind nicht einfach für IE5.5 und IE6 umzusetzen und wenn ich mir Deinen Code ansehe bist Du auch noch nicht soweit. Für den Anfang würde ich sagen bedienst Du Dich bei Stu Nicholls und erfüllst seine Bedingungen (in der Regel eine Danksagung / Link o.ä. )

Zitat

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the 'Support CSSplay' fund is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

. Das sollte man auch respektieren.

nuely

Moin,

außer Navigation gib es in der Tat noch nichts. Damit wollte ich anfangen. Ich werd mir den ersten Link am Wochenende mal ansehen. Stu Nicholls hatte ich auch schon gefunden, aber es soll ne kommerzielle Seite sein und ich glaube kaum das die für das Menü was hergeben will.

nuely

Ich habe mich jetzt deiner Vorschläge angenommen und es funktioniert jetzt alles, wie gewünscht.

Nur im IE7 wird auf dieser Seite das Dropdown-Feld bei Dream-Night falsch dargestellt. Es ist rechts und nicht darunter. Das passiert aber nur im IE7, nicht im IE6 und auch nicht im IE8. Weiß jemand Rat?

yeti66

Probiere es mal so

Code

...................
<div id="navigation">


  <ul>
   <li>
    <a  class="aktiv" href="#Beispiel">Dream-Night</a>
    <ul>
     <li><span class="aktiv">10. Dream-Night</span></li>
     <li><a href="#Beispiel">9. Dream-Night</a></li>
    </ul>


   </li>
   <li>
    <a href="#Beispiel">Auftritt/Kurse</a>
   </li>........................

Alles anzeigen

...statt <span class="aktiv">Dream-Night</span> in Deinem Code einfach durch <a class="aktiv" href="#Beispiel">Dream-Night</a> ersetzen und im css das span in span.aktiv löschen. Dann bist Du nach wie vor in der Lage die "aktiv"- Button zu formatieren.

nuely

Alles klar das funktioniert so. Danke dir.

nuely

Sorry, aber ich muss das nochmal zurücknehmen. Mir dieser Variante wird der obere Menüpunkt nicht verändert und als "aktiv" angezeigt.

Ich hab jetzt mal verschiedene Variante in diese Seite eingebaut. Erst wenn ich das Attribut width weglasse macht es der IE7 richtig. Nur dann sind die Buttons nicht mehr gleich groß. Hast du noch eine andere Idee?

nuely

Keiner mehr ne Idee?

yeti66

Ok, ich passe alles nochmal neu an. Ich melde mich dann per Email.8)

yeti66

Nach langem hin und her muss ich wohl der Realität ins Auge sehen, das dropdown Menu`s ohne JS eigentlich nicht realistisch umzusetzen sind (bis runter zum IE5). Irgendwann muß man sich eh' vom IE5 und IE6 trennen. Die Statistik http://www.w3schools.com/browsers/browsers_stats.asp
spricht da eine deutliche Sprache. Also Tod dem IE4/5 und IE6.

koslowski

Hi,

Zitat von yeti66

Nach langem hin und her muss ich wohl der Realität ins Auge sehen, das dropdown Menu`s ohne JS eigentlich nicht realistisch umzusetzen sind (bis runter zum IE5).

bis runter inkl. IE6 auf jeden Fall.
Guckst du hier.

yeti66

Oder vielleicht gar Tod dem IE im allgemeinen?:D...besser isses.
Mal sehen wie die Entwicklung mit IE weitergeht, wenn der IE in Win7 in Europa nicht mehr Bestandteil des Betriebssystems ist (ab 1. Installation).

Grevas

Zitat von yeti66

Oder vielleicht gar Tod dem IE im allgemeinen?:D...besser isses.
Mal sehen wie die Entwicklung mit IE weitergeht, wenn der IE in Win7 in Europa nicht mehr Bestandteil des Betriebssystems ist (ab 1. Installation).

Wenn wir hier schon so OT sind...

Da bin ich aber gespannt. Womit soll man dann auf nem frischem System Firefox runterladen? Irgendeine Möglichkeit zur Interaktion mit dem Internet muss ein System von grundauf auch besitzen...

yeti66

Tja wer gut vorbereitet ist hat eine kleine alte Festplatte oder CD/DVD mit diesen aktuellen Programmen vorbereitet. Wer war das doch gleich: "Ich habe da mal was vorbereitet....!":D

nuely

Anstatt das Microsoft einen Browser installiert, wird das jetzt der Hersteller des PCs tun. Und die werden wahrscheinlich von Microsoft gesponsert und so landet wieder überall der IE drauf.

Aber back to topic. Der IE6 ist hier ja gar nicht das Problem. Der bekommt das ohne Probleme hin, so wie ich es will. Naja eigentlich auch erst nachdem ich das hier eingebaut habe: http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js
Das Problem ist der IE7. Der macht es hier falsch.

thilda

Also bis auf den 3 pixel-bug macht sich deine vorzeigeseite doch gut im IE6.

Und es gibt durchaus eine CSS Variante für IE5 und aufwärts.

nuely

Zitat von thilda

Also bis auf den 3 pixel-bug macht sich deine vorzeigeseite doch gut im IE6.

Es geht ja auch nicht um den IE6, sondern um den IE7. Denn der baut das Menü nicht unter dem obersten Punkt auf, sondern rechts davon.

Probleme mit Navigationsleiste

Tags

Benutzer online in diesem Thema