[CSS] Menü. Darstellungsprobleme

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Menü. Darstellungsprobleme

    Hallo!

    Ich habe ein Problem.

    Ich binde ein Menue ein. Zum Aufklappen.

    In Firefox sieht es so aus:



    Im IE7 macht er folgendes:



    Mein Code
    HTML-Code:
    <div id="navigation" class="navigation">
       <ul id='nav'>
           <li id='first'><div>&nbsp;<b><a href='index.php'>Home</a></b></div></li>
    
           <li><div>&nbsp;<b><a href='filiale.php'>Unsere Firma</a></b></div>
                 <ul>
                 <li class='extra'><a href='filiale.php?id=1'>Reuterstadt Stavenhagen</a></li>
                 <li class='extra'><a href='filiale.php?id=2'>Waren / M&uuml;ritz</a></li>
                 </ul>
          </li>
          <li><div>&nbsp;<b><a href='service.php'>Service</a></b></div>
                 <ul>
                 <li class='extra'><a href='kontakt.php'>Kontakt</a></li>
                 <li class='extra'><a href='gaestebuch.php'>G&auml;stebuch</a></li>
                 <li class='extra'><a href='agb.php'>Unsere AGB</a></li>
                 <li class='extra'><a href='impressum.php'>Impressum</a></li>
                 </ul>
          </li>
          <li><div><b><a href='wissenswertes.php'>Wissenswertes</a></b></div></li>
          <li><div>&nbsp;</div></li>
          <li id='last'>&nbsp;</li>
       </ul>
    </div>
    [CSS]
    HTML-Code:
    .extra
    {
    background-color:#FFFFFF;
    }
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: 13px;
      border: 1px solid #cecece;
    }
    #nav a {
    	border:#333333;
    	color:#666666;
    }
    
    #nav a {
    	text-decoration: none;
    }
    
    #nav li li a {
    	display: block;
    	font-weight: normal;
    	color: #666666;
    	padding: 0.2em 10px;
    }
    
    #nav li li a:hover {
    	padding: 0.2em 5px;
    	border: 5px solid #cecece;
    	border-width: 0 5px;
    }
    
    li {
      float: left;
      position: relative;
      width: 120px;
      margin: 0px;
      padding: 0px;
    }
    
    li#first {
    	border-left-width: 1em;
    }
    
    li#last {
    	border-right-width: 1em;
    }
    
    li ul {
      display: none;
      position: absolute;
      top: 1em;
      }
    li > ul {
    	top: auto;
    	left: auto;
    	}
    li:hover ul, li.over ul{ display: block; }
    Hat einer ne Idee.?!?
    Zuletzt geändert von bofan; 06.12.2009, 19:40.
    Beachte: Dumm ist, wer Dummes tut.

  • #2
    Erst mal den Verschachtelungsfehler raus machen, dann weitersehen.

    Und Abstände bitte vernünftig per CSS realisieren, und nicht über non-breaking spaces.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Verschachtelungsfehler?

      Unter Mecklenburger Goldschmiede © 2009 ist es in "Aktion" zu sehen.

      okay. die &nbsp; nehme ich dann mal raus.
      Beachte: Dumm ist, wer Dummes tut.

      Kommentar


      • #4
        Zitat von bofan Beitrag anzeigen
        Verschachtelungsfehler?
        In dem Code, den du gezeigt hast, wird ein UL nicht geschlossen.

        Code:
        li > ul {
        	top: auto;
        	left: auto;
        	}
        Absolute Positionierung ganz ohne Angabe „echter” Koordinaten ist im IE oft problematisch.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          Außerdem arbeitet man bei cellpadding und cellspacing nicht mit CSS-Angaben, sondern nur mit stinknormalen Zahlen. Und mit dem li > ul kommt der IE6 nicht klar.

          Peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            Ich habe mal den Code komplett gepostet.

            Also die Tags sind alle geschlossen.



            Wie kommst du auf Cellspaing?
            Beachte: Dumm ist, wer Dummes tut.

            Kommentar


            • #7
              Zitat von bofan Beitrag anzeigen
              Wie kommst du auf Cellspaing?
              PHP-Code:
              <table style='width:100%;height:360px;' cellspacing='3px' cellpadding='2px'
              Noch etwas. Man arbeitet nicht mehr mit physikalischen Auszeichnungen wie <b> oder <i>. Statt dessen nutzt man <em> oder <strong>. Je nach semantischer Bedeutung. Außerdem sind die &nbsp;- und <div>-Elemente überflüssig wie ein Kropf. Und wie sich schon sagte, kommt der IE6 nicht mit li > ul klar. Arbeite statt dessen mit li ul.

              Peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Code:
                li {
                  float: left;
                  position: relative;
                  width: 120px;
                  margin: 0px;
                  padding: 0px;
                }
                sowas kannst du generell vergessen, warum gefloatet wenn es nicht soll...
                das kannst du ganz einfach machen, in dem du bei dem UL und LI Tag "display: block" setzt, Standard für List Elemente ist: "display:list-item;"

                Kommentar


                • #9
                  Nach langem Suchen

                  Nach langem Suchen habe ich eine Lösung.

                  Siehe

                  Mecklenburger Goldschmiede © 2009

                  Nur habe ich ein Problem

                  die Breite der seite auf 900px limitiert.

                  Nun habe ich 9 Menu punkte. die sind 90px breit.


                  Warum wird nun der 9. Punkt in eine Neue Zeile gebracht. denn 90*9 =810px also eig. ist genug platz.

                  Thx for Help
                  Beachte: Dumm ist, wer Dummes tut.

                  Kommentar


                  • #10
                    Da ist nicht genug Platz, weil
                    HTML-Code:
                    <div id="menu" style="width: 760px;">
                    gerade mal 760px breit ist und dessen Inhalt demzufolge auch
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      OMG.

                      Da war ich wohl Blind ...
                      Beachte: Dumm ist, wer Dummes tut.

                      Kommentar

                      Lädt...
                      X