Corni: CSS-Menü mal wieder

Hallo ihr,

Ich versuche gerade eure Vorschläge umzusetzen. Ich nehme dabei als Vorlage http://css.fractatulum.net/sample/experimente.htm . Nun mein Problem: Mein Menü sieht so aus:

<div class="menu">
<ul id="box3">
<li><a class="block" href="index.htm" >Home</a></li>
<li><a class="block" href="webdesign.htm" >Webdesign</a></li>
<li><a class="block" href="software.htm" >Software</a></li>
<li><a class="block" href="hardware.htm">Hardware</a></li>
<li><a class="block" href="sonstiges.htm">Sonstiges</a></li>
<li><a class="block" href="uebermich.htm" >Über mich</a></li>
<li><a class="block" href="verweise.htm" >Verweise</a></li>
<li><a class="block" href="kontakt.htm">Kontakt</a></li>
<li><a class="block" href="gaestebuch.htm" >Gästebuch</a></li>
</ul>
</div>

CSS dazu:

.menu{
background-color:#082050;
float:left;
padding-top:0px;
width:170px;
height:450px;
margin:0px;

}

#box3 {
margin-left:0px;
padding:0px;
list-style-type:none;
list-style-image:none;
list-style-position:outside;
position:absolute;
z-index:1;
}

#box3 li {
margin: 10px 0px;
padding:0px;
}

#box3 a{
font: bold 16px arial, sans-serif ;
text-align:center;
text-decoration:none;
color: #E8FFFC;
background-image:url('gifs/button.gif');
background-repeat:no-repeat;
display:block;
padding: 4px 0px;
margin:0px 12px 0px 12px;
width:140px;
border:1px solid #1F72A9;
border-right: 4px solid #1F72A9;

}

#box3 a:hover {
color:white;
background-image:url('gifs/button_hover.gif');
text-decoration:none;
border: 1px solid white;
border-right: 4px solid white;}

Nun soll man aber laut CSS-Fractatulum das hover-Element auf eine div-Box beziehen. Ich möchte aber vorerst nur einen Punkt mit Untermenü haben, es lohnt sich also  kaum das komplette Menü umzubauen (mal vom dann nötigen Umbau der Seiten abgesehen)! Läßt sich irgendwie ein dynamisches Menü mit CSS realisieren, OHNE das ganze komplett umzubasteln?

Vielen Dank für eure Mühe und viele Grüße aus Schwaben
Corni

--
Rettet die Wälder - Esst mehr Biber
  1. Hallo Corni,

    eins gleich vorweg: Ich hab leider nicht ganz begriffen, was du eigentlich willst oder nicht willst. Aber ein paar Kleinigkeiten sind mir doch auf- bzw. eingefallen.

    <div class="menu">
    <ul id="box3">
    <li><a class="block" href="index.htm" >Home</a></li>
    [...]
    <li><a class="block" href="gaestebuch.htm" >Gästebuch</a></li>
    </ul>
    </div>

    Das sieht mir so aus, als könnte man das noch erheblich vereinfachen.

    * Wozu ein umschließendes div? Die Größen- und Positionsangaben sowie Paddings und Margins könnte man doch auch direkt dem ul#box3 zuordnen.

    * Wozu jeden Link noch mit einer Klasse ausstatten? Die a-Elemente kannst du mit ul#box3 a eindeutig selektieren. Eine extra Klasse ist IMHO überflüssig.

    Nun soll man aber laut CSS-Fractatulum das hover-Element auf eine div-Box beziehen.

    Wie meinst du das? Etwa in der Form div:hover? Das versteht dann aber der meistgenutzte Browser, der IE nicht. Der wendet :hover nämlich nur auf Links an.

    Ich möchte aber vorerst nur einen Punkt mit Untermenü haben, es lohnt sich also  kaum das komplette Menü umzubauen (mal vom dann nötigen Umbau der Seiten abgesehen)!

    Ah so, und du möchtest, dass beim Hover auf einen Menüpunkt das Untermenü eingeblendet wird? Hmmmm... tricky. Auf Anhieb fällt mir dazu auch nix ein, obwohl ich gefühlsmäßig sagen würde, es müsste möglich sein. Scheitert aber wahrscheinlich daran, dass der IE :hover eben nicht auf beliebige Elemente anwenden kann, und innerhalb von <a></a> dürfen ja keine Blockelemente vorkommen.

    Vielen Dank für eure Mühe und viele Grüße aus Schwaben

    Grüßle zurück aus Backnang,

    Martin

    1. Wenn der IE das nicht kann ist mir das ziemlich wurscht, ich bastle eine Übersichtsseite rein, aber diejenigen User meiner Seite, die anständige Browser verwenden, die sollen ein schönes Menü kriegen :-)

      Du hast vermutlich recht, da ließe sich noch einiges vereinfachen! Danke für den Hinweis

      Das Problem ist eigenltich die LISTE:

      Ich kann ja nicht mitten in der Liste ein div reinbauen für die Unterpunkte, das sähe dann komisch aus. Wenn man in der Liste einen Link macht, dann macht er immer gleich eine Box draus (wie bei den anderen Punkten). Ließe sich das irgendwie vermeiden, wäre ich schon zufrieden. Dann hätte ich ne Übersichtsseite und wenn man die aufruft erscheinen weitere Punkte im Menü. Ist zwar nicht dynamisch, aber das geht vermutlich nicht so recht!?

      1. Hallo,

        Wenn der IE das nicht kann ist mir das ziemlich wurscht, ich bastle eine Übersichtsseite rein, aber diejenigen User meiner Seite, die anständige Browser verwenden, die sollen ein schönes Menü kriegen :-)

        Okay, solange du den MS-Browser nicht *ganz* im Regen stehenlässt... ;-)

        Das Problem ist eigenltich die LISTE:
        Ich kann ja nicht mitten in der Liste ein div reinbauen für die Unterpunkte, ...

        Nö, warum auch?
        Zwei verschachtelte Listen tun's doch auch. Vom CSS-Standpunkt her ist es egal, ob du bestimmte Eigenschaften auf ein div- oder ein li-Element anwenden willst. So etwa:

        <ul>
        <li><a>Text</a></li>
        <li><ul>
            <li><a>Text</a>
            <li><a>Text</a>
            </ul></li>
        <li><a>Text</a></li>
        <li><a>Text</a></li>
        </ul>

        Jetzt müsste man "nur noch" passende CSS-Selektoren mit den richtigen :hover-Pseudoklassen finden, um dieses Gefüge entsprechend dynamisch zu machen.

        Wenn man in der Liste einen Link macht, dann macht er immer gleich eine Box draus

        Das kommt drauf an, wie du deine CSS-Selektoren definierst. Das gleiche Element kann ja in unterschiedlichen Kontexten auch unterschiedlich formatiert werden.

        So long,

        Martin

        1. Hallo Martin!

          Die Idee ist echt gut, da wäre ich nicht drauf gekommen! Danke!

          Das Mit den Selektoren kriege ich auch noch hin.

          Grüßle Corni

        2. Nun habe ich aber folgendes Problem:

          Wie kriege ich die Links erster Ebene zu fassen, OHNE die Links zweiter Ebene?

          Wenn ich schreibe

          ul#box3 * a muss es mindestens zwei Ebenen drunter sein. Genau dieses MINDESTENS ist das Problem. Es dürfen auch mehr sein und damit wären dann eben auch die untergeordneten Links zweiter Klasse betroffen.

          Ich könnte natürlich den <li> Elementen erster Klasse eine class zuweisen und dann schreiben

          li.test > a

          aber das wäre natürlich extrem umständlich, weil ich dann auf sämtlichen Seiten sämtliche <li> Elemente ändern müsste.

          Nebenbei: Was ist eigentlich der Unterschied zwischen den Selektoren + und >???

          Vielleicht kann mir ja nochmal jemand einen entscheidenden Tipp geben.

          Corni

          1. Hallo Corni,

            wenn du den IE nicht ganz abschreiben willst, kannst du für den und nur für den auch eine JS-Alternative über behavior einbauen:

            http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp

            Der Link mag dir gleichzeitig als Hilfe dienen, wie du das über den Nachfahrensselektor mit dem unterschiedlichen CSS für Listenpunkte unterschiedlicher Ordnung regeln kannst.

            Allerdings ist die JS-Extrawurst für den IE auch ein ziemlicher Aufwand, den der Autor des oben genannten Artikels verschweigt.

            view-source:http://www.tanfa.co.uk/css/examples/menu/csshover.htc

            Gruß Gernot

          2. Hallo Corni,

            Nebenbei: Was ist eigentlich der Unterschied zwischen den Selektoren + und >???

            Das finde ich hier ganz gut beschrieben:

            http://www.css4you.de/wscss/css04.html

            Gruß Gernot

            1. Danke schonmal für die Antworten. Der Sache mit Javascript traue ich noch nicht so ganz. Zuerst will ich es doch einmal undynamisch versuchen. Leider habe ich dabei das Problem, dass der IE alles vermurkst und die anderen Browser zeigen die Unterpunkte zwar an, lassen aber keinen Platz dafür frei.

              Ich lese eure Vorschläge natürlich sorgfältig, will aber trotzdem alles selbstständig erarbeiten, denn abschreiben kann jeder.

              Vielleicht erklärt ihr mir mal, warum der IE alles vermurkst und wie man es in den anderen Browsern hinbekommt.

              Viele Grüße Corni.

              P.S. Guckts auch mal auf der Seite an!

              1. Hi,

                Der Sache mit Javascript traue ich noch nicht so ganz. Zuerst will ich es doch einmal undynamisch versuchen.

                Das ist völlig ok und ein Javascipt für den IE kannst Du ohne weiteres auch noch nachträglich hinzufügen.
                Schau' Dir einfach mal die Seite http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern an oder - dasselbe vertikal formatiert: http://www.1ngo.de/web/tmenu.html#Beispiel2.

                freundliche Grüße
                Ingo

      2. Wenn der IE das nicht kann ist mir das ziemlich wurscht, ich bastle eine Übersichtsseite rein, aber diejenigen User meiner Seite, die anständige Browser verwenden, die sollen ein schönes Menü kriegen :-)

        Hm...
        Es gibt User mit anständigen Browsern, die aber mit der Maus nicht flink sind.
        Für die bringt :hover gar nichts.
        Sie müssten mit :focus durch dein dynamisches Menu navigieren können.
        Nur leider sind da auch die 'modernen Browser' aus verständlichen Gründen nicht darauf eingerichtet.
        Da fehlt am CSS 2.1 Standard noch einiges um Konflikte zu regeln.

        mfg beat