Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 17

Thema: Probleme mit Navigationsleiste

  1. #1
    nuely
    Gast

    Standard Probleme mit Navigationsleiste

    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-Code:
    <!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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit Navigationsleiste

    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...yout-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/simpl..._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.ä. )
    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.
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  3. #3
    nuely
    Gast

    Standard AW: Probleme mit Navigationsleiste

    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.

  4. #4
    nuely
    Gast

    Standard AW: Probleme mit Navigationsleiste

    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?

  5. #5
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit Navigationsleiste

    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>........................
    ...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.
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  6. #6
    nuely
    Gast

    Standard AW: Probleme mit Navigationsleiste

    Alles klar das funktioniert so. Danke dir.

  7. #7
    nuely
    Gast

    Standard AW: Probleme mit Navigationsleiste

    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?

  8. #8
    nuely
    Gast

    Standard

    Keiner mehr ne Idee?

  9. #9
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme mit Navigationsleiste

    Ok, ich passe alles nochmal neu an. Ich melde mich dann per Email.
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  10. #10
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Daumen hoch AW: Probleme mit Navigationsleiste

    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.
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

Ähnliche Themen

  1. Navigationsleiste
    Von micki im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.12.2006, 15:07
  2. Navigationsleiste
    Von devilduck im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.05.2006, 12:32
  3. Navigationsleiste
    Von Marcelund im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.02.2006, 14:16
  4. Navigationsleiste
    Von Ragon016 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.08.2005, 13:29
  5. Navigationsleiste
    Von takke im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 04.02.2005, 11:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •