Sipatshi: CSS Menu; Will nicht wie ich es möchte :( *zum heulen*

Hallo Gemeinde,

sitze seit stunden an einem Problem. Habe mir ein eigenen Menu mit Submenüs gebastelt. Funktioniert soweit gut aber Punkt1 und Unter 1 bekomme ich nicht auf eine linie: Wo liegt das Problem? Was mache ich Falsch?

So sieht es aus:

|------------|
 hover ->  |  Punkt 1   |
           |  Punkt 2   | | Unter 1 |
           |  Punkt 3   | | Unter 1 |
           |  Punkt 4   | | Unter 1 |
           |------------| | Unter 1 |
                          | Unter 1 |

So soll es aussehen:

|------------|
 hover ->  |  Punkt 1   | | Unter 1 |
           |  Punkt 2   | | Unter 1 |
           |  Punkt 3   | | Unter 1 |
           |  Punkt 4   | | Unter 1 |
           |------------| | Unter 1 |

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="cbw-tn">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
* {
  font-family:verdana;
  margin: 0;
  padding: 0;
}
#main {
  text-align: center;
  position: absolute;
  top: 100px;
  left: 25%;
}
#menu {
  width: 120px;
  height: 20px;
  overflow: hidden;
  border: 1px solid;
}
#menu:hover {
  width: 120px;
  height: auto;
  border: 1px solid;
}
#menu:hover ul {
  list-style-type: none;
}
#menu:hover ul li {
  height: 20px;
  overflow: hidden;
}
#menu:hover ul li:hover {
  height: auto;
  border: 1px solid;
}
#menu:hover ul li:hover ul {
  position:absolute;
  width: 120px;
  margin-left: 119px;
  border: 1px solid;
  margin-bottom: 30; /*schiebt nichts hoch, wieso?*/
}

</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="main">
  <div id="menu">Menu
    <ul>
      <li>Punkt1
        <ul>
          <li>Unter 1</li>
          <li>Unter 1</li>
          <li>Unter 1</li>
          <li>Unter 1</li>
          <li>Unter 1</li>
          <li>Unter 1</li>
        </ul>
      </li>
      <li>Punkt 2
        <ul>
          <li>Unter 2</li>
          <li>Unter 2</li>
          <li>Unter 2</li>
        </ul>
      </li>
      <li>Punkt 3
        <ul>
          <li>Unter 3</li>
          <li>Unter 3</li>
          <li>Unter 3</li>
        </ul>
      </li>
      <li>Punkt 4
        <ul>
          <li>Unter 4</li>
          <li>Unter 4</li>
          <li>Unter 4</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

  1. Hi!

    Ich finds ja ok, wenn man den IE6 nicht weiter beachtet und dort alles etwas anders aussieht. Aber ist es gewollt, das ich nur eine kleine Box zu sehen bekomme, in der 'Menu' steht und fertig? Keine Funktion, keine Eintraege.

    Inhalte vor dem IE 6 zu verstecken empfinde ich persoenlich dann doch als schlechten Stil. Das erinnert mich an damals, als man ueberall lesen konnte: only for IE5. Aston Martin machts quasi noch so: Wenn man sich dort einen sein Wunschauto konfigurieren moechte, hat man (ausdruecklich) Safari oder IE zu benutzen. Extrem schlechter Stil... Dann greift der User von Welt doch lieber zum Maybach. ;)

    --
    "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
          - T. Pratchett
    1. Hallo Steel,

      Ich finds ja ok, wenn man den IE6 nicht weiter beachtet und dort alles etwas anders aussieht.

      ich bin froh das ich das soweit gelöst habe und das es auf dem IE 7 8 und Firefox funtioniert. Das geschilderte Problem von vorhin habe mittlerweile selber gelöst :-)

      Inhalte vor dem IE 6 zu verstecken empfinde ich persoenlich dann doch als schlechten Stil. Das erinnert mich an damals, als man ueberall lesen konnte: only for IE5. Aston Martin machts quasi noch so: Wenn man sich dort einen sein Wunschauto konfigurieren moechte, hat man (ausdruecklich) Safari oder IE zu benutzen. Extrem schlechter Stil... Dann greift der User von Welt doch lieber zum Maybach. ;)

      Wie machst du das denn? Machst du alles gleichzeitig. Ich zumindest gehe sturkturiert ran. Erst Firefox, IE 7, dann IE 8 und zum schluss fürs IE6.
      Muss ehrlich sagen, das dein kommentar schwachsinnig ist. Du kannst doch nicht wissen was in meinem Kopf steckt und wie ich eine sache angehe.

      Gruß

      Serkan.

      1. Moin!

        ich bin froh das ich das soweit gelöst habe und das es auf dem IE 7 8 und Firefox funtioniert. Das geschilderte Problem von vorhin habe mittlerweile selber gelöst :-)

        Das is doch cool.

        Wie machst du das denn? Machst du alles gleichzeitig. Ich zumindest gehe sturkturiert ran. Erst Firefox, IE 7, dann IE 8 und zum schluss fürs IE6.

        Wie ich das mache? Da muss ich differenzieren. Erstmal Lege ich einfach los. Standard CSS wird auf ein Dokument angewendet. Auf der Arbeit isses fertig wenns im IE6 angezeigt ist, wie gewollt. Privat nehme ich den FF zum testen. Aufm IE siehts dann vielleicht mist aus, aber das ist im Grunde egal. Kleine anpassungen, kann man dann ja noch vornehmen - fuer grobe Schnitzer auch mal nen Hack. Das Problem, dass ich dann gar nichts sehe, hatte ich noch nicht. Es ist doch eher umgekehrt: man produziert z.b. ein Mehrspaltiges Layout mit floatenden Spalten und hat auf allem was nicht IE ist nur einen Haufen Pixel.

        Muss ehrlich sagen, das dein kommentar schwachsinnig ist. Du kannst doch nicht wissen was in meinem Kopf steckt und wie ich eine sache angehe.

        Und ich muss hier mal anmerken dass ich diese Aussage etwas... unueberlegt finde. Ich kann mich zumindest nicht erinnern, etwas gegen Dich und Deine Vorgehensweise gesagt zu haben. Die einzige Aussage, die ich gemacht habe war:

        Seiten zu produzieren die in einem der aktuell verbreiteten Browser nicht funktionieren ist schlechter Stil.

        Daran halte ich auch fest. Den Spruch kann man auch auf T-Shirts drucken. Und der IE6 ist nunmal ein, zumindest in Firmen, noch extrem weit verbreiteter Browser und einfach noch eine Groesse mit der man erstmal rechnen muss. Ich sehe da nichts schwachsinniges. Ausser Du beziehst dich auf den Teil, dass man zum Maybach greifen sollte, wenn einem der Aston Martin Konfigurator verwehrt bleibt. ;) Das war fuer die anderen hier jedenfalls der einzige Punkt der zu kommentieren war. :)

        --
        "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
              - T. Pratchett
        1. Hi

          Moin!

          ich bin froh das ich das soweit gelöst habe und das es auf dem IE 7 8 und Firefox funtioniert. Das geschilderte Problem von vorhin habe mittlerweile selber gelöst :-)

          Das is doch cool.

          Jep :-)

          Wie ich das mache? Da muss ich differenzieren. Erstmal Lege ich einfach los. Standard CSS wird auf ein Dokument angewendet. Auf der Arbeit isses fertig wenns im IE6 angezeigt ist, wie gewollt. Privat nehme ich den FF zum testen. Aufm IE siehts dann vielleicht mist aus, aber das ist im Grunde egal. Kleine anpassungen, kann man dann ja noch vornehmen - fuer grobe Schnitzer auch mal nen Hack. Das Problem, dass ich dann gar nichts sehe, hatte ich noch nicht. Es ist doch eher umgekehrt: man produziert z.b. ein Mehrspaltiges Layout mit floatenden Spalten und hat auf allem was nicht IE ist nur einen Haufen Pixel.

          Genauso eine Antwort hätte ich von dir erwartet. Soweit ich sehe bist du paar jahre älter wie ich und hast mehr erfahrung. Danke für ein Tip erst mit dem IE 6 anzufangen :-)

          Muss ehrlich sagen, das dein kommentar schwachsinnig ist. Du kannst doch nicht wissen was in meinem Kopf steckt und wie ich eine sache angehe.

          Daran halte ich auch fest. Den Spruch kann man auch auf T-Shirts drucken. Und der IE6 ist nunmal ein, zumindest in Firmen, noch extrem weit verbreiteter Browser und einfach noch eine Groesse mit der man erstmal rechnen muss. Ich sehe da nichts schwachsinniges. Ausser Du beziehst dich auf den Teil, dass man zum Maybach greifen sollte, wenn einem der Aston Martin Konfigurator verwehrt bleibt. ;) Das war fuer die anderen hier jedenfalls der einzige Punkt der zu kommentieren war. :)

          Ich hatte eine andere Antwort erwartet als Maybach usw.. Aus diesem Grund fand ich es schwachsinnig.

          Sorry :-) Frieden?

          Gruß

          Sipatshi

          1. Hi!

            Genauso eine Antwort hätte ich von dir erwartet. Soweit ich sehe bist du paar jahre älter wie ich und hast mehr erfahrung. Danke für ein Tip erst mit dem IE 6 anzufangen :-)

            Nene. Das war nicht als Tipp gedacht. Es ist prinzipiell schon gut auf nem FF zu entwickeln. Der ist im Normalfall der korrektere Browser. Fuer den IE passt man dann an. Es wunderte mich lediglich, dass scheinbar gewollt/ungewollt der IE User gar nichts zu sehen bekam. Das war meine eigentliche Frage, denn helfen konnte ich Dir auch nicht, weil ich nur eine Box gesehen habe. Ich habe mir den Code nach dem ersten Testlauf, ohne etwas zu sehen, auch nicht weiter angeschaut. Dafuer hatte ich einfach keine Zeit.

            Ich habe hier nur den IE6. Es gibt nichts anderes. Deshalb bastel ich hier Sachen, die mit nem richtigen Browser ziemlich sicher nicht funktionieren, wie gewollt. Ganz schlecht eigentlich. Vor allem, wenn mal nen Update kommen sollte...

            Sorry :-) Frieden?

            Gab's Krieg? *panisch umschau* ;)

            --
            "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                  - T. Pratchett
    2. Inhalte vor dem IE 6 zu verstecken empfinde ich persoenlich dann doch als schlechten Stil. Das erinnert mich an damals, als man ueberall lesen konnte: only for IE5. Aston Martin machts quasi noch so: Wenn man sich dort einen sein Wunschauto konfigurieren moechte, hat man (ausdruecklich) Safari oder IE zu benutzen. Extrem schlechter Stil... Dann greift der User von Welt doch lieber zum Maybach. ;)

      Firefox V12 Cabrio mit Aschenbecher ;)

      mfg Beat

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
      Der Valigator leibt diese Fische
    3. Hallo,

      Aston Martin machts quasi noch so: Wenn man sich dort einen sein Wunschauto konfigurieren moechte, hat man (ausdruecklich) Safari oder IE zu benutzen. Extrem schlechter Stil... Dann greift der User von Welt doch lieber zum Maybach. ;)

      Maybach? <naserümpf />
      Och nöö. Dann lassen wir doch das Internet Internet sein und reisen stattdessen lieber mal zum gepflegten Nachmittagstee nach Gaydon, lassen uns persönlich beraten und unsere Wünsche aufnehmen. Man möchte ja schließlich auch gern wissen, mit wem man zu tun hat.

      So viel Zeit muss sein.

      *scnr*
       Martin (without Aston, regrettably)

      --
      There are 10 types of people in the world: Those who understand the binary system, and those who don't.
  2. Hi,

    margin-bottom: 30; /*schiebt nichts hoch, wieso?*/

    Weil erstens die Wertangabe ungültig ist, und zweitens ein margin-bottom nichts "hoch schiebt", sondern nachfolgende Elemente auf Abstand hält.

    Ein Element nach oben "ziehen" funktioniert mit negativem margin-top.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.